{% extends 'base.html.twig' %}

{% block title %} {{ speciality.name }} {{ parent() }} {% endblock %}

{% block body %}
<h2 class="text-5xl lg:text-3xl text-center font-bold my-10">{{ speciality.name }}</h2>
        {% if speciality.description is not empty %}
        <p class="text-4xl lg:text-base text-center">{{ speciality.description }}</p>
    {% endif %}
    <div class="flex justify-center items-center mt-10">
        <div class="relative w-full max-w-lg">
            <input
                id="searchInput"
                type="text"
                class="w-full border-2 border-gray-300 bg-white h-10 px-5 pr-20 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                placeholder="Recherchez un docteur en {{ speciality.name }}"
            />
            <input id="specialityId" type="hidden" value="{{ speciality.id }}">
            <button id="clearSearch" class="absolute right-1 top-1 py-1 px-2 disabled:opacity-0" disabled aria-label="Vider le champ de recherche"><i class="fa-solid fa-x"></i></button>
        </div>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-10 p-4" id="doctorsList">
    {% for doctor in speciality.doctors %}
        <div class="mx-36 lg:mx-0 p-4 border rounded-lg shadow bg-white px-6 lg:px-2" data-doctor-id="{{ doctor.user.id }}">
            <div class="text-left mt-3">
                <h5 class="text-5xl lg:text-xl font-bold m-2 mb-6" id="maModaleLabel{{ loop.index }}">Docteur {{ doctor.user.firstName }} {{ doctor.user.lastName }}</h5>
                <p class="text-4xl lg:text-base m-1"><i class="fa-solid fa-location-dot"></i> {{ doctor.user.zipCode }}, {{ doctor.user.city }}</p>
                <p class="text-4xl lg:text-base m-1"><i class="fa fa-phone"></i> {{ doctor.user.phoneNumber }}</p>
                <p class="text-4xl lg:text-base m-1"><i class="fa fa-envelope"></i> {{ doctor.user.email }}</p>

                <!-- Button to trigger the modal -->
                <button type="button" id="btnModale{{ loop.index }}" class="text-4xl lg:text-base btn btn-primary bg-blue-500 text-white font-bold py-3 lg:py-2 px-5 lg:px-4 rounded m-2 mt-6" aria-label="Voir détails du Docteur {{ doctor.user.firstName }} {{ doctor.user.lastName }}">
                    Voir Détails du Docteur
                </button>
            </div>
            <!-- Modal -->
            <div class="modal-overlay fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50 hidden" id="maModaleOverlay{{ loop.index }}">
                <div class="modal-content bg-white p-6 rounded shadow-md w-full max-w-xl lg:max-w-lg mx-4" role="dialog" aria-modal="true" aria-labelledby="maModaleLabel{{ loop.index }}" tabindex="-1">
                    <div class="flex justify-between items-center">
                        <h5 class="modal-title text-5xl lg:text-xl font-bold" id="maModaleLabel{{ loop.index }}">Docteur {{ doctor.user.firstName }} {{ doctor.user.lastName }}</h5>
                        <button class="close-btn text-5xl lg:text-xl" id="closeModale{{ loop.index }}" aria-label="Fermer">&times;</button>
                    </div>
                    <div class="modal-body mt-4 mb-6">
                        <!-- Display doctor details -->
                        <div class="border p-3 mb-3">
                            <h2 class="font-bold text-4xl lg:text-lg">Le trouver</h2>
                            <p class="text-3xl lg:text-base">{{ doctor.user.street }}</p>
                            <p class="text-3xl lg:text-base">{{ doctor.user.zipCode }}</p>
                            <p class="text-3xl lg:text-base">{{ doctor.user.city }}</p>
                        </div>
                        <div class="border p-3 mb-3">
                            <h2 class="font-bold text-4xl lg:text-lg">Contactez-le</h2>
                            <p class="text-3xl lg:text-base">{{ doctor.user.phoneNumber }}</p>
                            <p class="text-3xl lg:text-base">{{ doctor.user.email }}</p>
                        </div>
                        <div class="border p-3 mb-3">
                            <h2 class="font-bold text-4xl lg:text-lg">Spécialité</h2>
                            <p class="text-3xl lg:text-base">{{ doctor.speciality.name }}</p>
                        </div>
                        <div class="border p-3 mb-3">
                            <h2 class="font-bold text-4xl lg:text-lg">Inscription</h2>
                            <p class="text-3xl lg:text-base">{{ doctor.user.createdAt|date("d/m/Y") }}</p>
                        </div>
                        <div class="border p-3 mb-3">
                            <h2 class="font-bold text-4xl lg:text-lg">Prise de rendez-vous</h2>
                            {% if doctor.planning is not empty %}
                                <form action="{{ path('app_appointment_new', {'doctor': doctor.user.id}) }}" method="post">
                                    <button type="submit" class="text-3xl lg:text-base bg-blue-500 text-white font-bold py-2 px-4 rounded mt-2">Prendre un rendez-vous</button>
                                </form>
                            {% else %}
                                <p class="text-3xl lg:text-base">Aucun créneau n'est disponible pour le moment</p>
                            {% endif %}
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
    </div>

    <style>
        .modal-overlay.active {
            display: flex;
        }
    </style>

    <script>
        $(document).ready(function() {
            let lastFocusedElement;

            {% for doctor in speciality.doctors %}
                $("#btnModale{{ loop.index }}").on("click", function() {
                    lastFocusedElement = document.activeElement;
                    $("#maModaleOverlay{{ loop.index }}").addClass("active");
                    $("#maModaleOverlay{{ loop.index }}").find(".modal-content").attr("tabindex", "-1").focus();
                    $("body").css("overflow", "hidden"); // Empêcher le défilement de la page principale
                });

                $("#closeModale{{ loop.index }}").on("click", function() {
                    closeModale{{ loop.index }}();
                });

                // Fonction pour fermer la modal
                function closeModale{{ loop.index }}() {
                    $("#maModaleOverlay{{ loop.index }}").removeClass("active");
                    lastFocusedElement.focus();
                    $("body").css("overflow", "auto"); // Réactiver le défilement de la page principale
                }

                // Fermer la modal en appuyant sur la touche "Échap"
                $(document).on("keydown", function(e) {
                    if (e.key === "Escape") {
                        closeModale{{ loop.index }}();
                    }
                });

                // Empêcher la navigation par tabulation en dehors de la modal
                $("#maModaleOverlay{{ loop.index }}").on("keydown", function(e) {
                    if (e.key === "Tab") {
                        const focusableModalElements = $('#maModaleOverlay{{ loop.index }}').find('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])').filter(':visible');
                        const firstElement = focusableModalElements[0];
                        const lastElement = focusableModalElements[focusableModalElements.length - 1];

                        if (!e.shiftKey && document.activeElement === lastElement) {
                            e.preventDefault();
                            firstElement.focus();
                        } else if (e.shiftKey && document.activeElement === firstElement) {
                            e.preventDefault();
                            lastElement.focus();
                        }
                    }
                });
            {% endfor %}

            // Listen for input changes in the search input field
            $("#searchInput").on("input", function() {
                const query = $(this).val();
                const specialityId = $("#specialityId").val();
                
                // Enable or disable the clear button based on the input field value
                if (query) {
                    $("#clearSearch").prop("disabled", false);
                } else {
                    $("#clearSearch").prop("disabled", true);
                    $("#doctorsList > div").show(); // Show all doctors if search input is empty
                }

                // Generate the URL using the path function
                const url = "{{ path('api_doctors_search', {'speciality': 'SPECIALITY_ID', 'query': 'QUERY'}) }}"
                    .replace('SPECIALITY_ID', specialityId)
                    .replace('QUERY', query);

                // Make an AJAX request to your API endpoint
                $.ajax({
                    url: url,
                    method: "GET",
                    success: function(data) {
                        // Iterate through the existing list of doctors
                        $("#doctorsList > div").each(function() {
                            const doctorId = $(this).data("doctor-id");
                            const isMatch = data.some(doctor => doctor.id === doctorId);

                            // Show or hide the doctor element based on the search results
                            if (isMatch) {
                                $(this).show();
                            } else {
                                $(this).hide();
                            }
                        });
                    },
                });
            });

            // Clear the search input and show all doctors when the clear button is clicked
            $("#clearSearch").on("click", function() {
                $("#searchInput").val('');
                $(this).prop("disabled", true);
                $("#doctorsList > div").show(); // Show all doctors
            });
        });
    </script>

{% endblock %}