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

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

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

    .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">  
                        <div>
                            <h1>Validation des plannings par le RRH</h1>
                            {% if RRH %}
    
                                <!-- Sélection de l'entreprise -->
                                <div class="entreprise-selection mb-4">
                                    {% for entreprise in entreprises %}
                                        <a href="{{ path('valide_responsable_rh', {'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 selectedEntreprise.id != 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">Enregistrer</button>
                                

                                    <!-- Données JSON intégrées dans des éléments HTML pour que le JavaScript les récupère -->
                                    <div id="creationPlanningSalarieListData" data-salarie-list='{{ salaries|e('html_attr') }}'></div>
                                    <div id="creationPlanningChantierListData" data-chantier-list='{{ chantiers|e('html_attr') }}'></div>
                                    <div id="existingPlanningsData" data-existing-plannings='{{ existingPlannings|e('html_attr') }}'></div>
                                    <div id="absencesData" data-absences='{{ absences|e('html_attr') }}'></div>

                                    <input type="hidden" id="selectedEntrepriseId" value="{{ selectedEntrepriseId }}">

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

                                    {% if selectedEntreprise %}
                                    {% if planningData is empty %}
                                    il n'y a pas de planning a valider pour le moment
                                    {% else %}
                                    <h2 id="weekTitle"></h2>
                                    <button id="previousWeek">Semaine précédente</button>
                                    <button id="nextWeek">Semaine suivante</button>

                                        <div class="planning-container">
                                            <div class="salarie-list">
                                            
                                                    <table class="table table-striped" id="creationPlanningSalarieTable">
                                                        <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>
                                                        {% 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>{{ planning.days[day]['Matin'] }}</td>
                                                                    <td>{{ planning.days[day]['Après-midi'] }}</td>
                                                                {% endfor %}
                                                            </tr>
                                                        {% endfor %}
                                                        </tbody>
                                                    </table>
                                                </div>
                                                </div>
                                            <!-- Supprimer ce bloc si vous ne voulez pas de tableau supplémentaire -->
                                        
                                            <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>
                                                            <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.valideCT and not planningDetail.valideRRH %}
                                                
                                                                    <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 %}
                                                                                    {% if vehicule.entreprise == selectedEntreprise %}
                                                                                        <option value="{{ vehicule.id }}" {% if planningDetail.vehiculeEntreprise and planningDetail.vehiculeEntreprise.id == vehicule.id %}selected{% endif %}>
                                                                                            {{ vehicule.typeVehicule }} {{ vehicule.immatriculation }}
                                                                                        </option>
                                                                                    {% endif %}
                                                                                {% endfor %}
                                                                            </select>
                                                                        </td>
                                                                        {% if planningDetail.id is defined and planningDetail.id is not null %}
                                                                        <td> <button class="btn btn-success validate-row" data-id="{{ planningDetail.id }}">Valider</button></td>
                                                                        {% endif %}
                                                                    </tr>  
                                                                {% endif %}
                                                                {% endfor %}
                                                            {% endfor %}
                                                        </tbody>
                                                    </table>
                                                
                                                </div>
                                            </div>
                                            <button class="btn btn-primary" id="validateAll">Valider la sélection</button>
                                            
                                        {% else %}
                                            <p>Vous devez sélectionner une entreprise pour voir les plannings.</p>
                                        {% endif %}
                                        </div>#}

                              <h1>Feuille de Pointage</h1>
                                    <div class="planning-container">
                                        <div class="salarie-list">
                                            {% for salarieId, indemnitesData in planningBySalarie %}
                                            {% set isInFilteredSalaries = false %}
                                            {% for filteredSalarie in filteredSalaries %}
                                                {% if indemnitesData.salarie.id == filteredSalarie.id %}
                                                    {% set isInFilteredSalaries = true %}
                                                {% endif %}
                                            {% endfor %}

                                            {% if isInFilteredSalaries %}
                                                
                                                <h2 style="margin-top:30px;">{{ indemnitesData.salarie.nom }} {{ indemnitesData.salarie.prenom }}</h2>
                                                <table id="valideCC">
                                                    <thead>
                                                        <tr>
                                                            {% 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>
                                                        <tr>
                                                        {% for jour in joursDeSemaineFiltre %}
                                                            {% if infoQuotidiennesBySalarie[salarieId] is defined %}
                                                                {% set infoForDay = infoQuotidiennesBySalarie[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 }}" value="{{ info.heuresJour }}">
                                                                    </td>
                                                                    <td>
                                                                        <input type="text" class="form-control heures-nuit" name="heuresNuit_{{ info.id }}" value="{{ info.heuresNuit }}">
                                                                    </td>
                                                                    <td>
                                                                        <input type="checkbox" class="form-check-input pd-checkbox" name="pd_{{ info.id }}" {% if indemnitesData.indemnite == 'petit' %}checked{% endif %}>
                                                                    </td>
                                                                    <td>
                                                                        <input type="checkbox" class="form-check-input gd-checkbox" name="gd_{{ info.id }}" {% if indemnitesData.indemnite == 'grand' %}checked{% endif %}>
                                                                    </td>
                                                                    <td>
                                                                        <input type="checkbox" class="form-check-input conducteur-checkbox" name="conducteur_{{ info.id }}" {% if info.conducteur %}checked{% endif %}>
                                                                    </td>
                                                                    <td>
                                                                        <input type="checkbox" class="form-check-input passager-checkbox" name="passager_{{ info.id }}" {% if not info.conducteur %}checked{% endif %}>
                                                                    </td>
                                                                    <td>
                                                                        <input type="checkbox" class="form-check-input vehicule-checkbox" name="vehicule_{{ info.id }}" {% if info.vehiculeEntreprise %}checked{% endif %}>
                                                                    </td>
                                                                    <td>
                                                                        <input type="checkbox" class="form-check-input nuite-checkbox" name="nuite_{{ info.id }}" {% if info.nuite %}checked{% endif %}>
                                                                    </td>
                                                                    <td>
                                                                        <input type="text" class="form-control panier" name="panier_{{ info.id }}" value="{{ info.panier }}">
                                                                    </td>
                                                                {% else %}
                                                                    <td colspan="10">Aucune donnée pour ce jour</td>
                                                                {% endif %}
                                                            {% else %}
                                                                <td colspan="10">Pas d'information pour ce salarié</td>
                                                            {% endif %}
                                                            {% endfor %}
                                                        </tr>
                                                    </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>
                                    </div>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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