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

{% block title %}Voyage{% endblock %}
{#{% block stylesheets %}
    {{ encore_entry_link_tags('app_table') }}

{% endblock %}#}

{% block stylesheets %}
    {{ encore_entry_link_tags('app_table') }}



{#
    <style>
        #file_export {
            width: 100% !important;
        }

        #file_export th,
        #file_export td {
            vertical-align: middle;
            font-size: 13px;
            padding: 6px 8px;
        }

        #file_export .text-wrap-cell {
            white-space: normal !important;
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        #file_export .text-nowrap-cell {
            white-space: nowrap !important;
        }

        #file_export .action-cell {
            width: 110px;
        }

        #file_export .dropdown-menu {
            min-width: 220px;
        }
    </style>
#}
{% endblock %}
{% block body %}
    {# <meta name="view-transition" content="same-origin" /> #}


    <div class="row">
        <div class="col py-2 px-3 ">
            <h1>Liste des Voyages </h1>
        </div>
        <div class="col py-2 px-3 ">
        </div>
        <div class="col py-2 px-3 ">
            <button style="float: right;" type="button"
                    class="btn btn-light-primary   btn-lg px-4 fs-4 font-weight-medium" data-bs-toggle="modal"
                    data-bs-target="#ajouter"><i class="fas fa-plus"> </i> Ajouter
            </button>
        </div>

    </div>

    <!-- Primary header modal -->
    <!-- Primary Header Modal -->
    <div id="ajouter" class="modal fade" tabindex="-1"
         aria-labelledby="primary-header-modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header modal-colored-header bg-primary text-white">
                    <h4 class="modal-title" id="primary-header-modalLabel">Ajouter Voyage
                    </h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h5 class="mt-0">Remplir le formulaire</h5>
                    {{ render(
                        controller(
                            'App\\Controller\\VoyageController::new'
                        )
                    ) }}
                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <form method="post"
          action="{{ path("app_voyage_index") }}">


        <div class="form-group row">
            <div class="col-md-12">
                {{ include('voyage/formList.html.twig') }}
            </div>
        </div>
    </form>


    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="border-bottom title-part-padding">


                </div>
                <div class="card-body">
                    <div class="w-100">
                        <table id="file_export" class="table table-striped table-bordered w-100">
                            <thead>
                            <tr>
                                <th>Ville depart</th>
                                <th>Ville arrivée</th>
                                <th>Date depart</th>
{#                                <th>Date arrivé</th>#}
                                <th>Place</th>
                                <th>Reference</th>
                                <th>Date creation</th>
                                <th>Heure depart</th>
{#                                <th>Heure arrivée</th>#}
                                <th>Bus</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>

                            {% set items=voyages %}

                            {% for item in items %}

{#                                {% set capacite=item.vehicule.capacite %}#}
                                {% set disponibilite =item.available %}
{#                                {% set available= capacite-disponibilite %}#}

                                <tr>


                                    <td >{{ item.villedepart.nom }}</td>
                                    <td >{{ item.villearrive.nom }}</td>
                                    <td >{{ item.datedepart ? item.datedepart|date('d-m-Y') : '' }}</td>
                                    <td >{{ item.available }}</td>
                                    <td >{{ item.reference }}</td>
                                    <td >{{ item.datecreation ? item.datecreation|date('d-m-Y') : '' }}</td>
                                    <td >{{ item.heuredepart }}</td>
                                    <td >
                                        {{ item.vehicule.marque }}<br>
                                        {{ item.vehicule.modele }}<br>
                                        {{ item.vehicule.immatriculation }}
                                    </td>
                                    <td >

                                        <div class="dropdown">
                                            <button class="btn btn-primary btn-sm dropdown-toggle" type="button"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                Actions
                                            </button>

                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a class="dropdown-item"
                                                       href="{{ path('app_reservation_voyage_index_brouillard', {'id': item.id}) }}">
                                                        <i class="fas fa-eye me-2"></i> Brouillard de caisse
                                                    </a>
                                                </li>

                                                <li>
                                                    <a class="dropdown-item"
                                                       href="{{ path('app_colis_voyage_index_brouillard', {'id': item.id}) }}">
                                                        <i class="fas fa-eye-slash me-2"></i> Brouillard de colis
                                                    </a>
                                                </li>

                                                <li>
                                                    <a class="dropdown-item"
                                                       href="#"
                                                       data-bs-toggle="modal"
                                                       data-bs-target="#{{ 'modifier' ~ item.id }}">
                                                        <i class="fas fa-edit me-2"></i> Modifier
                                                    </a>
                                                </li>

                                                {% if item.actif == 1 and disponibilite > 0 %}
                                                    <li>
                                                        <a class="dropdown-item"
                                                           href="{{ path('app_reservation_info_paiement', {'id': item.id}) }}">
                                                            <i class="fas fa-plus me-2"></i> Ajouter réservation
                                                        </a>
                                                    </li>
                                                {% endif %}



                                                <li>
                                                    <a class="dropdown-item"
                                                       href="{{ path('app_reservation_voyage_index', {'id': item.id}) }}">
                                                        <i class="fas fa-book me-2"></i> Liste réservation
                                                    </a>
                                                </li>

                                                <li>
                                                    <a class="dropdown-item"
                                                       href="{{ path('app_charge_index', {'id': item.id}) }}">
                                                        <i class="fas fa-exchange-alt me-2"></i> Charges
                                                    </a>
                                                </li>

                                                <li><hr class="dropdown-divider"></li>

                                                <li>
                                                    <a class="dropdown-item text-danger"
                                                       onclick="return confirm('Etes vous sûr de clôturer ce voyage ?');"
                                                       href="{{ path('app_voyage_edit_desactiver', {'id': item.id}) }}">
                                                        <i class="fas fa-times me-2"></i> Clôturer le voyage
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                        <div id="{{ 'modifier' ~ item.id }}" class="modal fade" tabindex="-1"
                                             aria-labelledby="warning-header-modalLabel" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header modal-colored-header bg-warning text-white">
                                                        <h4 class="modal-title" id="warning-header-modalLabel">
                                                            Modifier Voyage
                                                        </h4>
                                                        <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <h5 class="mt-0">Remplir le formulaire</h5>
                                                        {{ render(
                                                            controller(
                                                                'App\\Controller\\VoyageController::edit', {'id': item.id}
                                                            )
                                                        ) }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>                                </tr>
                            {% else %}
                                <tr>
                                    <td colspan="4">Pas d'enregistrement trouvé</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>


                                </tr>
                            {% endfor %}
                            </tbody>
                            <tfoot>
                            <tr>
                                <th>Ville depart</th>
                                <th>Ville arrivée</th>
                                <th>Date depart</th>
                                {#                                <th>Date arrivé</th>#}
                                <th>Place</th>
                                <th>Reference</th>
                                <th>Date creation</th>
                                <th>Heure depart</th>
                                {#                                <th>Heure arrivée</th>#}
                                <th>Bus</th>
                                <th>Action</th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}


{% block javascripts %}
    {{ encore_entry_script_tags('apps_table') }}

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const inputElement = document.querySelector('.custom-time-input');
            const inputElements = document.querySelector('.custom-time-inputs');

            if (inputElement) {
                inputElement.setAttribute('type', 'time');
            }

            if (inputElements) {
                inputElements.setAttribute('type', 'time');
            }

            const select = document.getElementById('voyage_chauffeur_temp');
            const addBtn = document.getElementById('add-chauffeur');
            const list = document.getElementById('chauffeurs-list');
            const hiddenField = document.getElementById('voyage_chauffeurs_ids');

            if (select && addBtn && list && hiddenField) {
                const selectedIds = new Set();

                addBtn.addEventListener('click', () => {
                    const selectedOption = select.options[select.selectedIndex];
                    const id = selectedOption.value;
                    const name = selectedOption.text;

                    if (!id || selectedIds.has(id)) {
                        return;
                    }

                    selectedIds.add(id);
                    hiddenField.value = Array.from(selectedIds).join(',');

                    const li = document.createElement('li');
                    li.classList.add('list-group-item');
                    li.innerText = name;
                    list.appendChild(li);
                });
            }
        });
    </script>
{% endblock %}

{#
{% block javascripts %}
    <!-- DataTables -->

    {{ encore_entry_script_tags('apps_table') }}
#}
{#
    <script type="text/javascript">
        $('#file_export').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });
        $('.buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel').addClass('btn btn-primary mr-1');
    </script>
    <script>

        // Récupérer l'élément input
        var inputElement = document.querySelector('.custom-time-input');
        var inputElements = document.querySelector('.custom-time-inputs');

        // Ajouter l'attribut type="time"
        inputElement.setAttribute('type', 'time');
        inputElements.setAttribute('type', 'time');

    </script>
#}{#


    <script type="text/javascript">
        $('#file_export').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });
        $('.buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel').addClass('btn btn-primary mr-1');

        // Récupérer l'élément input
        var inputElement = document.querySelector('.custom-time-input');
        var inputElements = document.querySelector('.custom-time-inputs');

        // Ajouter l'attribut type="time"
        inputElement.setAttribute('type', 'time');
        inputElements.setAttribute('type', 'time');


        // SCRIPT POUR ENREGISTREMENT MULTIPLE DES CHAUFFEURS


        const select = document.getElementById('voyage_chauffeur_temp');
        const addBtn = document.getElementById('add-chauffeur');
        const list = document.getElementById('chauffeurs-list');
        const hiddenField = document.getElementById('voyage_chauffeurs_ids');

        const selectedIds = new Set();

        addBtn.addEventListener('click', () => {
            const selectedOption = select.options[select.selectedIndex];
            const id = selectedOption.value;
            const name = selectedOption.text;

            if (!id || selectedIds.has(id)) {
                return;
            }

            selectedIds.add(id);

            // update hidden field
            hiddenField.value = Array.from(selectedIds).join(',');

            // display in list
            const li = document.createElement('li');
            li.classList.add('list-group-item');
            li.innerText = name;
            list.appendChild(li);
        });


    </script>


   #}
{# <script>
        document.addEventListener('DOMContentLoaded', () => {
            const select = document.getElementById('voyage_chauffeur_temp');
            const addBtn = document.getElementById('add-chauffeur');
            const list = document.getElementById('chauffeurs-list');
            const hiddenField = document.getElementById('voyage_chauffeurs_ids');

            const selectedIds = new Set();

            if (!addBtn) {
                console.error("Bouton #add-chauffeur introuvable !");
                return;
            }

            addBtn.addEventListener('click', () => {
                const selectedOption = select.options[select.selectedIndex];
                const id = selectedOption.value;
                const name = selectedOption.text;

                if (!id || selectedIds.has(id)) {
                    return;
                }

                selectedIds.add(id);
                hiddenField.value = Array.from(selectedIds).join(',');

                const li = document.createElement('li');
                li.classList.add('list-group-item');
                li.innerText = name;
                list.appendChild(li);
            });

        });
    </script>#}{#



{% endblock %}
#}