{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<title>FitnessIQ | Sub Category</title>
<style>
.profile-pic img#profile-image {
    height: 180px;
   width: 180px;
   object-fit: cover;
   border-radius: 100%;
}
.profile-pic input.btn {
    background: #1733c1;
   color: #fff;
   width: max-content;
   margin-top: 20px;
   padding: 12px 30px;
   margin-bottom: 15px;
}

    /* Basic modal styling */
    .modal {
        display: none;
        position: fixed;
        z-index: 1050;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-dialog {
        margin: auto;
        max-width: 500px;
    }

    .modal-content {
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .btn-close {
        background: none;
        border: none;
        font-size: 1.2rem;
    }

    .modal-footer {
        text-align: right;
    }
</style>
<div class="main-content pt-0">
	<div class="content-wrapper">
        <div class="row">
            <div class="col-12 col-md-12">
                <h2 class="f-22 mb-0 bold">Add Sub Category</h2>
                <p class="gray f-14 mb-2">Welcome to Fitness IQ</p>
            </div>         
        </div>
        <div class="row new-user-table bookings mt-3">
            <div class="col-12 col-md-12">
                <div class="card addService fortune dashboard-card addgoal faq-card">
                    <form action="add-sub-listing" method="POST" id='add-sub-listing'>
                    {% csrf_token %}
                    <div class="row">
                    <div class="profile-pic">
                        <div class="d-block align-items-center">
                            <div class="text-center">
                                <img src="/static/admin/images/user-default.png"  id="profile-image" />
                            </div>
                            <div class="px-3 text-center">
                                <input type="file" name='image' id="myFileInput" onchange="loadfile(event)" accept="image/*" style="display:none;" />
                                <input type="button" class="btn mb-0" onclick="document.getElementById('myFileInput').click()" value="Upload a New Photo" />
                            </div>
                        </div>
                    </div>
                        <div class="col-12 col-md-12">
                            <label class="col-form-label">Main Category</label>
                            <select name="main_category" id="main_category">
                             <option selected disabled>Select Main Category</option>
                            {% for main in main_obj %}
                                <option value="{{main.id}}">{{ main.name }}</option>
                            {% endfor %}
                            </select>
                        </div>
                        <div class="col-12 col-md-12">
                            <label class="col-form-label">Title</label>
                            <input type="text" placeholder="Title" name="title" id="title" class="form-control" value="" maxlength="50">
                        </div>
                         <div class="col-12 col-md-12">
                            <label class="col-form-label">Description</label>
                            <textarea placeholder="Description" name="description" id="description" class="form-control" value=""></textarea>
                        </div>
                     
                        <div class="col-12">
                            <div class="save-btn text-center mt-4">
                                <button type="submit" class="save-btn">Add Category</button>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
        <div id="validationModal" class="modal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Invalid Image Size</h5>
                        <button type="button" class="btn-close" onclick="closeModal()" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>The image dimensions should be at least 800 x 650 pixels. Please select a larger image.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" onclick="closeModal()">Close</button>
                    </div>
                </div>
            </div>
        </div>
	</div>
</div>

{%endblock%}

{%block js%}
<script>
    function loadfile(event) {
        const file = event.target.files[0];
        const img = new Image();
        
        img.src = URL.createObjectURL(file);
        img.onload = function() {
            const width = img.naturalWidth;
            const height = img.naturalHeight;

            console.log(width)
            console.log(height)


            if (width < 800 || height < 650) {
                // Show modal instead of alert

                showModal();
                document.getElementById('myFileInput').value = ''; // Clear the file input
            } else {
                // If the image meets the size requirement, proceed with your logic
                console.log("Image is valid:", width, "x", height);
                // Your code to handle the image goes here
                var image = document.getElementById('profile-image');
	            image.src = URL.createObjectURL(event.target.files[0]);

            }

            URL.revokeObjectURL(img.src); // Clean up memory
        };
    }

    function showModal() {
        const modal = document.getElementById('validationModal');
        modal.style.display = 'block';
    }

    function closeModal() {
        const modal = document.getElementById('validationModal');
        modal.style.display = 'none';
    }

    // Optional: Close the modal when clicking outside of it
    window.onclick = function(event) {
        const modal = document.getElementById('validationModal');
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    };
</script>
<script>

{% comment %} function loadfile(event){
	var image = document.getElementById('profile-image');
	image.src = URL.createObjectURL(event.target.files[0]);
}; {% endcomment %}

</script>

{% endblock %}