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

{% block title %}Planning{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>

    /* Assurez-vous que chaque cellule a une largeur fixe */
    .planning-container {
        width: 100%;
        overflow-x: auto;
    }
    
    #creationPlanningSalarieTable th, 
    #creationPlanningSalarieTable td {
        text-align: center;
        vertical-align: middle;
        padding: 10px;
        border: 1px solid #ddd;
    }
    
    /* Ajuster la largeur des colonnes selon vos besoins */
    #creationPlanningSalarieTable th[rowspan="2"], 
    #creationPlanningSalarieTable td:nth-child(1),
    #creationPlanningSalarieTable td:nth-child(2),
    #creationPlanningSalarieTable td:nth-child(3) {
        width: 150px; /* Largeur ajustée pour les colonnes Nom, Lieu de résidence, Provenance */
    }
    
    #creationPlanningSalarieTable th[colspan="2"],
    #creationPlanningSalarieTable td {
        width: 100px; /* Largeur ajustée pour les colonnes des jours */
    }
    
    /* Pour que le bouton reste bien en ligne avec les autres éléments */
    .validate-planning {
        margin: 10px;
    }
    
    #scroll-horizontal-datatable th, 
    #scroll-horizontal-datatable td {
        text-align: center;
        vertical-align: middle;
        padding: 10px;
        border: 1px solid #ddd;
    }
    
    /* Assurez-vous que le tableau prend toute la largeur disponible */
    .planning-container {
        width: 100%;
        overflow-x: auto;
    }
    
    #valideCT th, #valideCT td{
        text-align: center;
        vertical-align: middle;
        padding: 10px;
    }
    
    /* S'assurer que les colonnes du tableau sont flexibles */
    table {
        width: 100%;
        border-collapse: collapse;
        table-layout: auto; /* Permet aux colonnes d'avoir une largeur flexible */
    }
    
    th, td {
        border: 1px solid #000;  /* Bordure générale pour tout le tableau */
        padding: 8px;
        text-align: center;
        padding: 8px;
        border: 1px solid #ddd;
        vertical-align: middle;
    }
    
    th {
        background-color: #f2f2f2;
        font-weight: bold;
    }
    
    /* Séparation plus visible entre les jours */
    thead th {
        border-right: 3px solid #000; /* Bordure plus épaisse entre les jours */
    }
    
    /* Lignes de chaque jour plus visibles */
    tbody td {
        border-right: 3px solid #000;
    }
    
    table {
        width: 100%;
        border-collapse: collapse;
    }
    
 
.spinner-icon {
    position: relative;
    width: 32px; /* Ajustez selon la taille de vos icônes */
    height: 32px;
}

.spinner-icon i {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 32px; /* Ajustez selon la taille de vos icônes */
    color: currentColor;
}
   
</style>
{% endblock %}

{% block body %}
<div class="content-page">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">  
                        <h1>Planning en attente de validation</h1>

                        {% if conducteurTravaux %}
                            <h2 id="weekTitle"></h2>
                            <button id="previousWeek">Semaine précédente</button>
                            <button id="nextWeek">Semaine suivante</button>

                            <!-- Premier tableau : Visuel des plannings -->
                            <div class="planning-container">
                                <div class="salarie-list">
                                    <h2>Salariés</h2>
                                    <table id="creationPlanningSalarieTable">
                                        <thead>
                                            <tr>
                                                <th rowspan="2">Nom</th>
                                                <th rowspan="2">Lieu de résidence</th>
                                                <th rowspan="2">Provenance</th>
                                                <th colspan="2">LUNDI</th>
                                                <th colspan="2">MARDI</th>
                                                <th colspan="2">MERCREDI</th>
                                                <th colspan="2">JEUDI</th>
                                                <th colspan="2">VENDREDI</th>
                                            </tr>
                                            <tr>
                                                <th>Matin</th>
                                                <th>Après-midi</th>
                                                <th>Matin</th>
                                                <th>Après-midi</th>
                                                <th>Matin</th>
                                                <th>Après-midi</th>
                                                <th>Matin</th>
                                                <th>Après-midi</th>
                                                <th>Matin</th>
                                                <th>Après-midi</th>
                                            </tr>
                                        </thead>
                                        <tbody id="creationPlanningSalarieList">
                                            {% for planning in planningData %}
                                                <tr>
                                                    <td>{{ planning.salarie.nom }} {{ planning.salarie.prenom }}</td>
                                                    <td>{{ planning.salarie.adresse1 }} {{ planning.salarie.ville }}</td>
                                                    <td>{{ planning.salarie.getEntrepriseActuelle().nom }}</td>
                                                    {% for day in 1..5 %}
                                                        <td class="planning-cell">{{ planning.days[day]['Matin'] }}</td>
                                                        <td class="planning-cell">{{ planning.days[day]['Après-midi'] }}</td>
                                                    {% endfor %}
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <!-- Deuxième tableau : Validation des plannings -->
                   {#}         <div class="tab-content" style="padding-top:50px;">
                                <div class="tab-pane show active" id="scroll-horizontal-preview">
                                    <table id="scroll-horizontal-datatable" class="table table-striped w-100 nowrap">
                                        <thead>
                                            <tr>
                                                <th><input type="checkbox" id="selectAll"></th> <!-- Case à cocher Sélectionner tout -->
                                                <th>Nom</th>
                                                <th>Chantier</th>
                                                <th>Date Début</th>
                                                <th>Plage Début</th>
                                                <th>Date Fin</th>
                                                <th>Plage Fin</th>
                                                <th>Heures Supplémentaires</th>
                                                <th>Conducteur</th>
                                                <th>Véhicule</th>
                                                <th>Valide</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for planning in planningData %}
                                                {% for planningDetail in planning.datatable %}
                                                    {% if planningDetail.valide == 1 and planningDetail.valideCT == 0 %}
                                                        <tr>
                                                            <td><input type="checkbox" class="select-row" data-id="{{ planningDetail.id }}"></td>
                                                            <td>{{ planning.salarie.nom }} {{ planning.salarie.prenom }}</td>
                                                            <td>{{ planningDetail.chantier.libelle }}</td>
                                                            <td>
                                                                <input type="date" class="form-control date-debut" value="{{ planningDetail.dateDebut|date('Y-m-d') }}">
                                                            </td>
                                                            <td>
                                                                <select class="form-select plage-debut">
                                                                    <option value="Matin" {% if planningDetail.plageDebut == 'Matin' %}selected{% endif %}>Matin</option>
                                                                    <option value="Après-midi" {% if planningDetail.plageDebut == 'Après-midi' %}selected{% endif %}>Après-midi</option>
                                                                </select>
                                                            </td>
                                                            <td>
                                                                <input type="date" class="form-control date-fin" value="{{ planningDetail.dateFin|date('Y-m-d') }}">
                                                            </td>
                                                            <td>
                                                                <select class="form-select plage-fin">
                                                                    <option value="Matin" {% if planningDetail.plageFin == 'Matin' %}selected{% endif %}>Matin</option>
                                                                    <option value="Après-midi" {% if planningDetail.plageFin == 'Après-midi' %}selected{% endif %}>Après-midi</option>
                                                                </select>
                                                            </td>
                                                            <td><input type="text" class="form-control heures-sup" value="{{ planningDetail.heuresSup ?? '' }}"></td>
                                                            <td><input type="checkbox" class="form-check-input conducteur-checkbox" {% if planningDetail.conducteur %}checked{% endif %}></td>
                                                            <td>
                                                                <select class="form-select vehicule-select">
                                                                    <option value="Personnel" {% if not planningDetail.vehiculeEntreprise %}selected{% endif %}>Personnel</option>
                                                                    {% for vehicule in vehicules %}
                                                                        <option value="{{ vehicule.id }}" {% if planningDetail.vehiculeEntreprise and planningDetail.vehiculeEntreprise.id == vehicule.id %}selected{% endif %}>
                                                                            {{ vehicule.typeVehicule }} {{ vehicule.immatriculation }}
                                                                        </option>
                                                                    {% endfor %}
                                                                </select>
                                                            </td>
                                                            <td>
                                                                <button class="btn btn-success validate-row" data-id="{{ planningDetail.id }}">Valider</button>
                                                            </td>
                                                        </tr>
                                                    {% endif %}
                                                {% endfor %}
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                     <button class="btn btn-primary" id="validateAll">Valider la sélection</button> <!-- Bouton pour valider toutes les lignes sélectionnées -->
                                 </div>
                            </div>#}
                        {% else %}
                            <p>Vous n'avez pas accès à cette section.</p>
                        {% endif %}
                   
                        <h1>Feuille de Pointage</h1>
                        <div class="planning-container">
                            <div class="salarie-list">
                               {% for chantierId, chantierData in planningByChantier %}
    {% if conducteurTravaux == chantierData.chantier.conducteurTravaux %}

    <h2>{{ chantierData.chantier.libelle }}</h2>
    <table id="valideCT">
        <thead>
            <tr>
                <th rowspan="3">Personnel (Nom / Prénom)</th>
                {% set joursDeSemaineFiltre = joursSemaine | filter(jour => jour | date('N', 'Europe/Paris') < 6) %}
                {% for jour in joursDeSemaineFiltre %}
                <th colspan="10" style="text-align:center; border-bottom: 2px solid black;">
                    {{ jour | date('l d/m/Y', 'Europe/Paris') | capitalize }}
                </th>
                {% endfor %}
            </tr>
            <tr>
                {% for jour in joursDeSemaineFiltre %}
                <th></th>
                <th>Heures Jour</th>
                <th>Heures Nuit</th>
                <th>PD</th>
                <th>GD</th>
                <th colspan="2" class="vehicule-entreprise">Véhicule Entreprise</th>
                <th>Véhicule Personnel</th>
                <th>Hôtel</th>
                <th>Panier</th>
                {% endfor %}
            </tr>
            <tr>
                {% for jour in joursDeSemaineFiltre %}
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th>Conducteur</th>
                <th>Passager</th>
                <th></th>
                <th></th>
                <th></th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for salarieId, planning in chantierData.plannings %}
            <tr>
                <td>{{ planning.salarie.nom }} {{ planning.salarie.prenom }}</td>
                {% for jour in joursDeSemaineFiltre %}
                {% set infoForDay = infoQuotidiennesBySalarieAndChantier[chantierId][salarieId] | filter(info => info.dateJour|date('Y-m-d') == jour|date('Y-m-d')) %}
                
                {% if infoForDay|length > 0 %}
                {% set info = infoForDay|first %}
                
                <td><input type="checkbox" class="select-row" data-id="{{ info.id }}" checked></td>
                <td>
                    <input type="text" class="form-control heures-jour" name="heuresJour_{{ info.id }}" data-info-id="{{ info.id }}" value="{{ info.heuresJour }}">
                </td>
                <td>
                    <input type="text" class="form-control heures-nuit" name="heuresNuit_{{ info.id }}" data-info-id="{{ info.id }}" value="{{ info.heuresNuit }}">
                </td>
                <td>
                    <input type="checkbox" class="form-check-input pd-checkbox" name="pd_{{ info.id }}" data-info-id="{{ info.id }}" {% if planning.indemnite == 'petit' %}checked{% endif %}>
                </td>
                <td>
                    <input type="checkbox" class="form-check-input gd-checkbox" name="gd_{{ info.id }}" data-info-id="{{ info.id }}" {% if planning.indemnite == 'grand' %}checked{% endif %}>
                </td>
                <td>
                    <input type="checkbox" class="form-check-input conducteur-checkbox" name="conducteur_{{ info.id }}" data-info-id="{{ info.id }}" {% if info.conducteur %}checked{% endif %}>
                </td>
                <td>
                    <input type="checkbox" class="form-check-input passager-checkbox" name="passager_{{ info.id }}" data-info-id="{{ info.id }}" {% if not info.conducteur %}checked{% endif %}>
                </td>
                <td>
                    <input type="checkbox" class="form-check-input vehicule-checkbox" name="vehicule_{{ info.id }}" data-info-id="{{ info.id }}" {% if info.vehiculeEntreprise %}checked{% endif %}>
                </td>
                <td>
                    <input type="checkbox" class="form-check-input nuite-checkbox" name="nuite_{{ info.id }}" data-info-id="{{ info.id }}" {% if info.nuite %}checked{% endif %}>
                </td>
                <td>
                    <input type="text" class="form-control panier" name="panier_{{ info.id }}" data-info-id="{{ info.id }}" value="{{ info.panier }}">
                </td>
                {% else %}
                <td colspan="10">Le salarié n'a pas travaillé sur ce chantier à cette date</td>
                {% endif %}
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}
{% endfor %}

<!-- Bouton unique pour valider -->
<button class="btn btn-primary" id="validateAll">Valider les informations</button>

<!-- Spinner pour indiquer le chargement -->
<div id="loading-spinner" style="display:none;">
    <div class="spinner-icon">
        <i class="ri-time-line font-22"></i>
        <i class="ri-timer-2-line font-22"></i>
    </div>
    <p>Veuillez patienter, enregistrement des modifications en cours...</p>
</div>
            
                                </div>


                                        
                                    </tbody>
                                </table>

                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
$(document).ready(function() {
    $('#validateAll').on('click', function() {
        // Masquer le bouton Valider et afficher le spinner
        $('#validateAll').hide();
        $('#loading-spinner').show();

        // Parcourir chaque case à cocher sélectionnée
        $('.select-row:checked').each(function() {
            var infoId = $(this).data('id');
            var row = $(this).closest('tr');

            // Récupérer les données spécifiques pour chaque infoId
            var heuresJour = row.find('input[name="heuresJour_' + infoId + '"]').val() || 0;
            var heuresNuit = row.find('input[name="heuresNuit_' + infoId + '"]').val() || 0;
            var panier = row.find('input[name="panier_' + infoId + '"]').val() || 0;

            var pd = row.find('input[name="pd_' + infoId + '"]').is(':checked');
            var gd = row.find('input[name="gd_' + infoId + '"]').is(':checked');
            var conducteur = row.find('input[name="conducteur_' + infoId + '"]').is(':checked') ? 1 : 0;

            var vehicule = row.find('input[name="vehicule_' + infoId + '"]').is(':checked');
            var nuite = row.find('input[name="nuite_' + infoId + '"]').is(':checked');

            // Appel AJAX pour chaque infoId avec les données correspondantes
            $.ajax({
                url: '/planning/valider/' + infoId,
                method: 'POST',
                data: {
                    heuresJour: heuresJour,
                    heuresNuit: heuresNuit,
                    panier: panier,
                    pd: pd,
                    gd: gd,
                    conducteur: conducteur,
                    vehicule: vehicule,
                    nuite: nuite
                },
                success: function(response) {
                    if (response.status === 'success') {
                       
                    } else {
                        alert('Erreur lors de la validation du planning ' + infoId + ' : ' + response.message);
                    }
                },
                error: function() {
                    alert('Une erreur est survenue lors de la validation du planning ' + infoId + '.');
                },
                complete: function() {
                    // Afficher à nouveau le bouton de validation après la fin de l'appel AJAX
                    $('#loading-spinner').hide();
                    $('#validateAll').show();
                }
            });
        });
    });




    $('#previousWeek').on('click', function() {
        currentWeekNumber--;
        loadPlanningForWeek(currentWeekNumber);
    });

    $('#nextWeek').on('click', function() {
        currentWeekNumber++;
        loadPlanningForWeek(currentWeekNumber);
    });

    function loadPlanningForWeek(week) {
        const url = new URL(window.location.href);
        url.searchParams.set('semaine', week);
        window.location.href = url.toString();
    }
});
</script>
{% endblock %}