{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<title>FitnessIQ | Clients</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">Edit Client</h2>
                <p class="gray f-14 mb-2">Welcome to Fitness IQ</p>
            </div>   
        </div>
        <form class="row" action="/edit-client/{{user_obj.id}}" id="add-client" method="POST" enctype="multipart/form-data" novalidate="novalidate">
            {% csrf_token %} 
            <div class="row new-user-table bookings mt-3">
                <div class="col-12 col-md-12">
                    <div class="card addService fortune dashboard-card">
                        <div class="row">
                            <div class="col-12">
                                <div class="doctor-pic">
                                    <div class="picUpdate">
                                        <div class="profile-pic">
                                            <div class="profile-pic text-center">
                                                <div>
                                                    <img src='{% if user_obj.image %} {{user_obj.image}} {%else%} /static/admin/images/user-default.png {% endif %}' id="profile-image">
                                                </div>
                                                <div class="px-3">
                                                    <input type="file" name='image' 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">
                                <div class="">
                                    <div class="picUpdate d-flex align-items-center justify-content-left border p-3 mb-4">
                                        <div class="profile-pic">
                                            <div class="upload-new-photo d-flex align-items-center">
                                                <div class="pe-3 text-center">
                                                    <img src='{% if user_obj.image %} {{user_obj.image}} {%else%} /static/admin/images/user-default.png {% endif %}' id="profile-image">
                                                </div>
                                                <div class="input-upload">
                                                    <input type="file" name="avatar" id="myFileInput"  accept="image/*">
                                                    <input type="button" class="btn mb-0" value="Upload a New Photo">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                            <div class="col-12 col-md-6">
                                <label class="col-form-label">Name</label>
                                <input type="text" placeholder="Name" name="full_name" class="form-control" value="{{user_obj.full_name}}" maxlength="15">
                            </div>                         
                            <div class="col-12 col-md-6">
                                <label class="col-form-label">Email</label>
                                <input type="email" placeholder="Enter Email" name="email" class="form-control" maxlength="100" value="{{user_obj.email}}" readonly="">
                            </div>
                            <div class="col-12">
                                <div class="save-btn text-center mt-4">
                                    <button type="submit" class="save-btn">Update Client</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.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]);
    };
    
    function validateForm() {
      var content = CKEDITOR.instances.content.getData().trim();
    
      if (content === '') {
        $('#errorContainer').text("Please fill in the content field.").show();
        return false;
      } else {
        $('#errorContainer').hide();
      }
    }
    </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 %}