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

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

{% block stylesheets %}
{{ parent() }}
 <link rel="stylesheet" href="{{ asset('build/creationPlanningStyle.css') }}">
<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;
    }
    
    #valideCC th, #valideCC 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;
}

/* Masque pour ne cibler que les aiguilles */
.spinner-icon i::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    background: currentColor;
    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M16 16V8M16 16H24" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>') center/contain no-repeat;
}

.spinner-icon i:nth-child(1)::before {
    animation: fadeInOut 1s infinite;
}

.spinner-icon i:nth-child(2)::before {
    animation: fadeInOut 1s infinite;
    animation-delay: 0.5s;
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

    }
    
    
    
</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 chefChantier %}

 <h1>Modification des plannings</h1>

                        <!-- Sélection de l'entreprise -->
                        <div class="entreprise-selection mb-4">
                            {% for entreprise in entreprises %}
                                <a href="{{ path('validation_chef_chantier', {'entreprise': entreprise.id, 'semaine': selectedSemaine}) }}" class="btn btn-primary {% if selectedEntrepriseId == entreprise.id %}active{% endif %}">
                                    {{ entreprise.nom }}
                                </a>
                            {% endfor %}
                        </div>

                        <!-- Affichage du titre de la semaine -->
                        <h2 id="weekTitle"></h2>

                        {% if selectedEntrepriseId != 1 %}
                            <!-- Boutons pour la navigation entre les semaines -->
                             <div>
                                <button id="previousWeek" class="btn btn-secondary">Semaine précédente</button>
                                <button id="nextWeek" class="btn btn-secondary">Semaine suivante</button>
                            </div>

                            <!-- Tableau des plannings -->
                            <table id="creationPlanningSalarieTable" class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Nom</th>
                                        <th>Lieu de résidence</th>
                                        <th>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></th>
                                        <th></th>
                                        <th></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>
                                        <th>Matin</th>
                                        <th>Après-midi</th>
                                    </tr>
                                </thead>
                                <tbody id="creationPlanningSalarieList">
                                    {# Les salariés seront injectés ici par JavaScript #}
                                </tbody>
                            </table>

                            <!-- Liste des chantiers -->
                            <div class="chantier-list">
                                <h2>Chantiers</h2>
                                <ul id="creationPlanningChantierList">
                                    {# Les chantiers seront injectés ici par JavaScript #}
                                </ul>
                            </div>

                            <button id="savePlanning">Si vous avez modifié les données du planning veuillez sauvegarder ici</button>
                        {% else %}
                            <p>Vous devez sélectionner une entreprise pour créer un planning.</p>
                        {% endif %}

<!-- Données JSON intégrées dans des éléments HTML pour que le JavaScript les récupère -->
<input type="hidden" id="selectedEntrepriseId" value="{{ selectedEntrepriseId }}">
<div id="creationPlanningSalarieListData" data-salarie-list='{{ salaries|e('html_attr') }}'></div>
<div id="creationPlanningChantierListData" data-chantier-list='{{ formattedChantiers|e('html_attr') }}'></div>

<div id="creationPlanningChantierListData" data-chantier-list='{{ chantiers|json_encode|e('html_attr') }}'></div>
<div id="existingPlanningsData" data-existing-plannings='{{ existingPlannings|json_encode|e('html_attr') }}'></div>
<div id="absencesData" data-absences='{{ absences|json_encode|e('html_attr') }}'></div>



                     {#}   <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>#}
                        {% endif %}
                        <!-- Deuxième tableau : Validation des plannings -->
                        
                        {#test nouveau tableau#}
                       
                        <h1>Feuille de Pointage</h1>
                        <div class="planning-container">
                            <div class="salarie-list">
                           
                              

                           
                               {% for chantierId, chantierData in planningByChantier %}
    {% if chefChantier == chantierData.chantier.chefChantier %}

    <h2>{{ chantierData.chantier.libelle }}</h2>
    <table id="valideCC">
        <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>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
 <script src="{{ asset('build/modifPlanningChefChantier.js') }}"></script>
<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();
                }
            });
        });  
    });
});



</script>
{% endblock %}