{% extends '@InstallBois/index.html.twig' %}
{% import "forms-macro/tabs_project_sort_by_state.html.twig" as tabs %}

{% block title %}
    INSTALL-BOIS
{% endblock %}

{% block page_content_start %}
        {{ parent() }}
        <div class="page-title">
            <h4 class="page-title-h4">
                Clients | Liste des études
            </h4>
        </div>
{% endblock %}

{% block page_content %}
    <div class="container-fluid" id="myCompanyProject">
        <div class="row rubrique">
            <div class="rubrique_titre">
                <span>Liste des études -
                        {{ nbCreatedProjectFromSubscriptionStart }} /
                        {% if maxProjectToCreate == -1 or is_granted("ROLE_ADMIN") %}
                            Illimité
                        {% else %}
                            {{ maxProjectToCreate }} maximum autorisé
                        {% endif %}
                </span>
            </div>
            <div style="float: right">
                <button type="button" class="boutonAction bulk-state-change" data-state="in_progress">En cours</button>
                <button type="button" class="boutonAction bulk-state-change" data-state="win">Gagnée</button>
                <button type="button" class="boutonAction bulk-state-change" data-state="lose">Perdue</button>
                <button type="button" class="boutonAction bulk-state-change" data-state="archived">Archivée</button>
                {% if maxProjectToCreate-nbCreatedProjectFromSubscriptionStart>0 or maxProjectToCreate==-1 %}
                    <a href="{{ path("project_create_wf") }}">
                        <button type="button" class="boutonAction"
                                style="margin-right: 35px;margin-bottom: 30px;;float:right;">
                            Nouvelle étude
                        </button>
                    </a>
                {% endif %}
            </div>
            <div class="col-sm-12 col-md-12 col-lg-12" style="margin-bottom: 20px">
                {{ tabs.tabsProject(projectsWithParameters) }}
            </div>
        </div>
    </div>
    <div id="confirmStateChangeModal" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);">
        <div style="background-color: #fff; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 5px">
            <h3>Confirmation de changement d'état</h3>
            <p>Êtes-vous sûr de vouloir passer les études sélectionnées en "<span id="newStateText"></span>" ?</p>
            <div style="text-align: right; margin-top: 20px;">
                <button type="button" class="boutonAction" id="cancelStateChange" style="margin-left: 10px;">Annuler</button>
                <button type="button" class="boutonAction" id="confirmStateChange" style="margin-left: 10px;">Confirmer</button>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript"
            src="{{ asset('install-bois/initDateTimeFormatDatatable.js') ~ "?rnd=" ~ random() }}"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            if (isDemo) {
                applyTooltipToDisabledElements('.bulk-state-change')
            }

            let selectedProjects = [];
            let newState = '';

            $('.bulk-state-change').on('click', function() {
                selectedProjects = $('.project-checkbox:checked').map(function() {
                    return $(this).val();
                }).get();

                if (selectedProjects.length === 0) {
                    createToast('error', 'Veuillez sélectionner au moins une étude');
                    return;
                }

                newState = $(this).data('state');
                const buttonText = $(this).text();

                $('#newStateText').text(buttonText);
                $('#confirmStateChangeModal').show();
            });

            $('#cancelStateChange').on('click', function() {
                $('#confirmStateChangeModal').hide();
            });

            // Fermer la modal en cliquant en dehors
            $('#confirmStateChangeModal').on('click', function(e) {
                if (e.target === this) {
                    $(this).hide();
                }
            });

            $('#confirmStateChange').on('click', function() {
                $.ajax({
                    url: '{{ path('project_bulk_state_change') }}',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        projectIds: selectedProjects,
                        state: newState
                    }),
                    success: function(response) {
                        if (response.status === 'success') {
                            createToast('success', 'Les états ont été modifiés avec succès');
                            $('.project-checkbox').prop('checked', false);
                            $('#confirmStateChangeModal').hide();
                            window.location.reload();
                        } else {
                            createToast('error', 'Une erreur est survenue lors du changement d\'état');
                            $('#confirmStateChangeModal').hide();
                        }
                    },
                    error: function() {
                        createToast('error', 'Une erreur est survenue lors de la communication avec le serveur');
                        $('#confirmStateChangeModal').hide();
                    }
                });
            });
        });
    </script>
{% endblock %}