{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<title>FitnessIQ | Exercises</title>
<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 Exercise</h2>
                <p class="gray f-14 mb-2">Welcome to Fitness IQ</p>
            </div>
        </div>
        <form class="row" action="/add-exercise" id="add-exercise" method="POST" enctype="multipart/form-data"
            novalidate="novalidate">
            {%csrf_token%}
            <div class="row new-user-table bookings exercise-add mt-3">
                <div class="col-12 col-md-12">
                    <div class="card addService fortune dashboard-card">
                        <h4 class="f-16 bold border-btm pb-2">Add Exercise</h4>
                        <div class="row">
                            <div class="col-12 mt-3">
                                <div class="card p-4">
                                    <div class="picUpdate d-flex align-items-center justify-content-between">
                                        <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='avatar' id="myFileInput" onchange="loadfile(event)" accept="image/*" />
                                                    <input type="button" class="btn mb-0" onclick="document.getElementById('myFileInput').click()" value="Upload a New Photo" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12  mt-3">
                                <label class="col-form-label">Level</label>
                                <select class="form-control" name="fitness_level" style="appearance: auto;">
                                    <option selected disabled>Select Type</option>
                                    {% for fitness in fitness_level %}
                                    <option value="{{fitness.id}}">{{ fitness.name }}</option>    
                                    {% endfor%}
                                </select>
                            </div>
                             <div class="col-12">
                                <label class="col-form-label">Day</label>
                                <select class="form-control" name="day" style="appearance: auto;">
                                    <option selected disabled>Select Day</option>
                                    <option value="Monday">Monday</option>   
                                    <option value="Tuesday">Tuesday</option>    
                                    <option value="Wednesday">Wednesday</option>    
                                    <option value="Thursday">Thursday</option>    
                                    <option value="Friday">Friday</option>    
                                    <option value="Saturday">Saturday</option>    
                                    <option value="Sunday">Sunday</option>    
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="col-form-label">Exercise Name</label>
                                <input type="text" placeholder="Exercise Name" name="name" class="form-control"
                                    value="{{exercise_obj.name}}">
                            </div>
                            <div class="col-12 mb-3">
                                <label class="col-form-label">Description</label>
                                <textarea class= 'ckeditor' type="texteditor" name="description" id="content" >{{exercise_obj.description}}</textarea>
                            </div>
                            <div class="col-12">
                                <div class="save-btn text-center mt-4">
                                    <button type="submit" class="save-btn">Update Exercise</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </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 src="https://cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<script>

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

</script>
<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>

{% endblock %}