{% extends 'Base.html' %}
{% load static %}

{% block head %}
{% endblock %}

{% block title %}
    Shiraz Center
{% endblock %}

{% block body %}

    <div class="content">
        <h2>Edit profile</h2>
        <hr>
        {% if form.errors %}
        <div class="alert alert-danger" id="django-messages">
            <strong>There were some errors in your form:</strong>
            <ul>
            {% for field in form %}
                {% for error in field.errors %}
                    <li><strong>{{ field.label }}:</strong> {{ error }}</li>
                {% endfor %}
            {% endfor %}
            </ul>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', (event) => {
                const messages = document.getElementById('django-messages');
                if (messages) {
                    setTimeout(function() {
                        messages.remove();
                        localStorage.removeItem('django_messages');
                    }, 3000); 
                }
            });
        </script>
        {% endif %}

        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="row mb-4">
                <div class="col-md-4 mt-2">
                    {{ form.first_name.label_tag }}
                    {{ form.first_name }}
                </div>
                <div class="col-md-4 mt-2">
                    {{ form.last_name.label_tag }}
                    {{ form.last_name }}
                </div>
                <div class="col-md-4 mt-2 text-center">
                    {{ form.profile_picture }}
                    <div class="d-block">
                        Profile Picture
                    </div>
                    <img id="profilePreview" src="
                            {% if technician.profile_picture %}{{ technician.profile_picture.url }}{% else %}{% static 'assets/img/image-ph.png' %}{% endif %}"
                         alt="Profile picture" class="img-thumbnail w-25 h-100" style="cursor: pointer;"
                         onclick="document.getElementById('{{ form.profile_picture.id_for_label }}').click();">
                    <small class="m-0 d-block text-secondary mt-1">Square image with a minimum size of 500x500</small>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-md-3 mt-2">
                    {{ form.date_of_birth.label_tag }}
                    {{ form.date_of_birth }}
                </div>
                <div class="col-md-3 mt-2">
                    {{ form.phone_number.label_tag }}
                    {{ form.phone_number }}
                </div>
                <div class="col-md-3 mt-2">
                    {{ form.specialty.label_tag }}
                    {{ form.specialty }}
                </div>
                <div class="col-md-3 mt-2">
                    {{ form.gender.label_tag }}
                    {{ form.gender }}
                </div>
            </div>

            <div class="mb-4">
                {{ form.address.label_tag }}
                {{ form.address }}
            </div>

            <div class="text-center mt-4">
                <button type="submit" class="btn btn-success d-inline-block w-25">Save changes</button>
            </div>
        </form>

        <form method="post" action="{% url 'doctor:delete-technician' id=technician.id %}">
            {% csrf_token %}
            <div class="text-center mt-4">
                <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this patient?');">Delete technician</button>
            </div>
        </form>
    </div>

    <!-- JavaScript for real-time image preview -->
    <script>
        document.getElementById('{{ form.profile_picture.id_for_label }}').addEventListener('change', function(event) {
            const [file] = event.target.files;
            if (file) {
                const preview = document.getElementById('profilePreview');
                preview.src = URL.createObjectURL(file);
                preview.onload = function() {
                    URL.revokeObjectURL(preview.src); // Release memory once the image is loaded
                }
            }
        });
    </script>

{% endblock %}