{% 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;
}
</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">Edit Sub Discover</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="/edit-sub-listing/{{sub_obj.id}}" method="POST" id='add-sub-listing' enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="row">
                    <div class="profile-pic">
                        <div class="d-block align-items-center">
                            <div class="text-center">
                                <img src="{% if sub_obj.image %} {{ sub_obj.image }} {% else %} /static/admin/images/user-default.png {% endif %}"  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}}" {% if sub_obj.main_category.id  == main.id %}selected{% endif %}>{{ 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="{{sub_obj.title}}" 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" >{{sub_obj.description}}</textarea>
                        </div>
                     
                        <div class="col-12">
                            <div class="save-btn text-center mt-4">
                                <button type="submit" class="save-btn">Update Category</button>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
            </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>

{%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>

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

{% endblock %}