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

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

{% block body %}



<div class="flex flex-col items-center justify-center">
    <div class="py-8 px-4 max-w-4xl w-full">
        <h1 class="text-center text-5xl lg:text-2xl mt-10 font-bold my-10">{{ speciality.name }}</h1>
        
        <div class="overflow-x-auto">
            <table class="table border-2 border-gray-200 text-center px-10 w-1/2 lg:mx-auto lg:w-5/6">
                <thead class="bg-slate-950 text-white">
                    <tr class="border justify-center">
                        <th class="border text-4xl lg:text-base py-6 px-20">Nom</th>
                        <th class="border text-4xl lg:text-base py-6">Motif de réservation existant</th>
                        <th class="border text-4xl lg:text-base py-6">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="border justify-center">
                        <td class="border text-4xl lg:text-base py-6">{{ speciality.name }}</td>
                        <td id="existing-reasons-list" class="border text-4xl lg:text-base py-6 whitespace-nowrap">
                            {% if speciality.reasons is empty %}
                                <p class="text-3xl lg:text-lg">Aucun motif de réservation n'a encore été répertorié</p>
                            {% else %}
                                <ul>
                                    {% for reason in speciality.reasons %}
                                        <li>
                                            {{ reason.name }}
                                            <form method="post" action="{{ path('app_reason_affectOut', {'specialityId': speciality.id, 'reasonId': reason.id}) }}">
                                                <button type="submit" class="font-semibold text-3xl lg:text-lg text-3xl lg:text-lg btn bg-red-400 py-4 px-4 m-2 rounded shadow-sm">Retirer ce motif de cette spécialité</button>
                                            </form>
                                        </li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                        </td>
                        <td class=" text-3xl lg:text-lg font-medium border border-gray-300 px-6 py-4 whitespace-nowrap">
                            <div class="flex flex-col lg:flex-row">
                            <a href="{{ path('app_speciality_edit', {'id': speciality.id}) }}" class="font-semibold text-3xl lg:text-lg btn bg-orange-300 py-4 px-4 m-2 rounded shadow-sm">Éditer</a>
                            {% include 'speciality/_delete_form.html.twig' with {'speciality': speciality} %}  
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>



{# partie motifs #}
    <div class="flex flex-col lg:flex-row justify-center ">
        <div class="mt-8 flex flex-col items-center justify-center mx-28">
            <h1 class="text-center text-5xl lg:text-2xl mt-10 font-bold my-10">Motifs disponibles</h1>
            <ul id="available-reasons-list" class="text-5xl lg:text-xl"></ul>
            <div id="pagination-controls" class="flex justify-between">
                <button id="prev-page" class="bg-blue-500 hover:bg-blue-300 text-white px-2 py-2 rounded text-3xl lg:text-lg" disabled>Précédent</button>
                <button id="next-page" class="bg-blue-500 hover:bg-blue-300 text-white px-2 py-2 rounded text-3xl lg:text-lg" disabled>Suivant</button>
            </div>
        </div>
    
        <div class="mt-8 flex flex-col mx-28 ">
            <h1 class="text-center text-5xl lg:text-2xl mt-10 font-bold my-10">Ajouter un nouveau motif</h1>
            <form id="new-reason-form" class=" lg:w-full px-4 justify-center">
        <div class="mb-4 mt-4">
            <label for="name" class="block text-4xl lg:text-lg font-medium text-gray-700">Nom du motif</label>
            <input type="text" id="name" name="name" required class="text-4xl lg:text-lg block w-full mt-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
        </div>
        <div class="mb-4">
            <label for="description" class="block text-4xl lg:text-lg font-medium text-gray-700">Description</label>
            <textarea id="description" name="description" class="text-4xl lg:text-lg block w-full mt-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
        </div>
        <div class="mb-10">
            <button type="submit" class=" w-full font-semibold text-4xl lg:text-lg btn bg-blue-300 py-4 px-4  rounded shadow-sm">Ajouter un nouveau motif</button>
        </div>
    </form>
        </div>
    </div>











<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        var existingReasonIds = {{ speciality.reasons|map(reason => reason.id)|json_encode|raw }};
        var currentPage = 1;
        var limit = 5;

        function fetchReasons(page) {
            $.ajax({
                url: '{{ path('api_reasons_search') }}',
                method: 'GET',
                data: { page: page, limit: limit },
                success: function(data) {
                    var availableReasonsList = $('#available-reasons-list');
                    availableReasonsList.empty();

                    $.each(data.items, function(index, reason) {
                        var li = $('<li></li>')
                        .addClass('text-center');

                        var link = $('<a></a>')
                            .attr('href', '{{ path('app_reason_show', {'id': 'REASON_ID'}) }}'.replace('REASON_ID', reason.id))
                            .text(reason.name)
                            .addClass('text-blue-500 hover:text-blue-300 underline px-2 rounded');
                        
                        var form = $('<form></form>')
                            .attr('method', 'post')
                            .attr('action', '{{ path('app_reason_affect', {'specialityId': speciality.id, 'reasonId': 'REASON_ID'}) }}'.replace('REASON_ID', reason.id));

                        var button = $('<button></button>')
                            .attr('type', 'submit')
                            .text('Affecter ce motif à la spécialité')
                            .addClass('bg-vert hover:bg-teal-500 text-white px-4 py-4 lg:px-2 lg:py-2 rounded mb-6 mt-2');

                        if ($.inArray(reason.id, existingReasonIds) !== -1) {
                            button.prop('disabled', true);
                        button.addClass('opacity-50 cursor-not-allowed');
                        }

                        form.append(button);
                        li.append(link).append(form);

                        availableReasonsList.append(li);
                    });

                    var prevPageButton = $('#prev-page');
                    var nextPageButton = $('#next-page');

                    if (data.page === 1) {
                        prevPageButton.hide();
                    } else {
                        prevPageButton.show().prop('disabled', false);
                    }

                    if (data.page === data.pages) {
                        nextPageButton.hide();
                    } else {
                        nextPageButton.show().prop('disabled', false);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Erreur lors de la récupération des motifs:', error);
                    // Gérer l'affichage ou le traitement de l'erreur ici si nécessaire
                }
            });
        }

        fetchReasons(currentPage);

        $('#prev-page').on('click', function() {
            if (currentPage > 1) {
                currentPage--;
                fetchReasons(currentPage);
            }
        });

        $('#next-page').on('click', function() {
            currentPage++;
            fetchReasons(currentPage);
        });

        $('#new-reason-form').on('submit', function(event) {
            event.preventDefault();
            var formData = $(this).serializeArray();
            var data = {
                name: formData[0].value,
                description: formData[1].value
            };

            $.ajax({
                url: '{{ path('api_create_reason') }}',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data),
                success: function(response) {
                    if (response.id) {
                        alert('Motif créé avec succès');
                        location.reload();
                    } else {
                        alert('Erreur lors de la création du motif');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Erreur lors de la création du motif:', error);
                    alert('Erreur lors de la création du motif');
                }
            });
        });
    });
</script>
{% endblock %}