{# Dans ajouter_absence.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Ajouter Absences{% endblock %}

{% block header %}
{{ parent() }}
{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    th.no-sort {
        pointer-events: none;
    }
    th.no-sort input[type="checkbox"] {
        pointer-events: all;
    }
    .radio-container {
        display: flex;
        align-items: center;
    }
    .radio-container .radio-label {
        margin-right: 30px;
    }
</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>Ajouter Absences</h1>

                        
                        {# Affichage des messages flash #}
                        {% for label, messages in app.flashes %}
                            {% for message in messages %}
                                <div class="flash-message {{ label }}">
                                    {{ message|raw }}
                                </div>
                            {% endfor %}
                        {% endfor %}

                        {{ form_start(form) }}
                        {% if not form.vars.valid %}
                        <ul>
                            {% for child in form.children %}
                            {% for error in child.vars.errors %}
                            <li>{{ error.message }}</li>
                            {% endfor %}
                            {% endfor %}
                        </ul>
                        {% endif %}
                        
                        <div class="col-6" style="margin-bottom:30px;margin-top:30px">
                            <select name="salarie" class="form-control" id="salarie-select">
                                <option value="">Filtrez par entreprise</option>
                                {% for entreprise in listeDesEntreprises %}
                                <option value="{{ entreprise.id }}" {% if app.request.query.get('entreprise') == entreprise.id %}selected{% endif %}>
                                    {{ entreprise.nom }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="tab-content">
                            <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 class="no-sort"><input type="checkbox" id="check-all" name="check-all" value="all"></th>
                                            <th class="no-sort"></th>
                                            <th>Nom</th>
                                            <th>Prénom</th>
                                            <th>Entreprise</th>
                                            <th>Poste</th>
                                    <tbody>
                                        {% for salarie in listeDesSalaries %}
                                        {% if salarieLatestContracts[salarie.id] is defined and salarieLatestContracts[salarie.id] is not null and salarieLatestContracts[salarie.id].entreprise is not null %}
                                        <tr>
                                            <td class="no-sort"><input type="checkbox" name="selected_salaries[]" value="{{ salarie.id }}"></td>
                                            <td class="no-sort"></td>
                                            <td>{{ salarie.nom }}</td>
                                            <td>{{ salarie.prenom }}</td>
                                            <td>{{ salarieLatestContracts[salarie.id].entreprise.nom }}</td>
                                            <td>{{ salarieLatestContracts[salarie.id].intitulePoste }}</td>
                                        </tr>
                                        {% endif %}
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        {{ form_widget(form.salarie, {'attr': {'style': 'display: none;'}}) }}
                        <div class="mb-3">
                            {{ form_label(form.libelle, null, {'label_attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.libelle, {'attr': {'class': 'form-control'}}) }}
                        </div>
                        <div class="mb-3">
                            {{ form_label(form.type, null, {'label_attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.type, {'attr': {'class': 'form-select'}, 'id': 'typeAbsence' }) }}
                        </div>
                        <div class="mb-3 row">
                            <div class="col-md-6">
                                {{ form_label(form.dateDebut, '', {'label_attr': {'class': 'form-label'}}) }}
                                {{ form_widget(form.dateDebut, {'attr': {'class': 'form-control', 'type': 'date', 'name': 'dateDebut'}}) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_label(form.dateFin, '', {'label_attr': {'class': 'form-label'}}) }}
                                {{ form_widget(form.dateFin, {'attr': {'class': 'form-control', 'type': 'date', 'name': 'dateFin'}}) }}
                            </div>
                        </div>
                          
                            
                        
                        <div class="mb-3 row">
                            <div class="col-md-6" id="heureDebutContainer" style="display: none;">
                                {{ form_label(form.heureDebut, null, {'label_attr': {'class': 'form-label'}}) }}
                                {{ form_widget(form.heureDebut, {'attr': {'class': 'form-control'}}) }}
                            </div>
                            <div class="col-md-6" id="momentDebutContainer" style="display: none;">
                                <label for="debutMoment">Moment de début</label>
                                <div class="radio-container">
                                    {{ form_widget(form.debutMoment, {'attr': {'class': 'form-check'}}) }}
                                </div>
                            </div>
                       
                            <div class="col-md-6" id="heureFinContainer" style="display: none;">
                                {{ form_label(form.heureFin, null, {'label_attr': {'class': 'form-label'}}) }}
                                {{ form_widget(form.heureFin, {'attr': {'class': 'form-control'}}) }}
                            </div>
                            <div class="col-md-6" id="momentFinContainer" style="display: none;">
                                <label for="finMoment">Moment de fin</label>
                                <div class="radio-container">
                                    {{ form_widget(form.finMoment, {'attr': {'class': 'form-check'}}) }}
                                </div>
                            </div>
                        </div>
                        <div class="col-12 text-center">
                            <button type="submit">Ajouter</button>
                            {{ form_end(form) }}
                            <button class="retour-custom" onclick="retourPage(event);">
                                <i class="ri-reply-line font-14"></i> Retour
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}

<script>
$(document).ready(function() {
    // Initialisation de DataTables
    var table;
    if (!$.fn.DataTable.isDataTable('#scroll-horizontal-datatable')) {
        table = $('#scroll-horizontal-datatable').DataTable({
            scrollX: true,
            paging: true,
            searching: true,
            // Ajoutez ici d'autres options de DataTables si nécessaire
        });
    } else {
        table = $('#scroll-horizontal-datatable').DataTable();
    }

    // Gestionnaire d'événements pour la sélection de toutes les cases à cocher
    $('#check-all').on('change', function() {
        var isChecked = this.checked;
        // Utiliser les API de DataTables pour obtenir les lignes filtrées
        var rows = table.rows({ 'search': 'applied' }).nodes();
        $('input[type="checkbox"]', rows).prop('checked', isChecked);
    });

    // Gestionnaire d'événements pour les cases à cocher individuelles
    $('#scroll-horizontal-datatable tbody').on('change', 'input[type="checkbox"]', function() {
        // Si une case à cocher est désélectionnée, désélectionner également "Sélectionner tout"
        if (!this.checked) {
            $('#check-all').prop('checked', false);
        }
        // Si toutes les cases à cocher visibles sont sélectionnées, sélectionner également "Sélectionner tout"
        var allChecked = table.rows({ 'search': 'applied' }).nodes().to$().find('input[type="checkbox"]').length ===
                         table.rows({ 'search': 'applied' }).nodes().to$().find('input[type="checkbox"]:checked').length;
        $('#check-all').prop('checked', allChecked);
    });

    // Filtre par entreprise
    $('#salarie-select').on('change', function() {
        var selectedEntrepriseId = $(this).val();
        console.log('Entreprise sélectionnée:', selectedEntrepriseId);

        // Requête AJAX pour obtenir les salariés de l'entreprise sélectionnée
        fetch(`/get-salaries-by-entreprise/${selectedEntrepriseId}`, {
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token('your_intention') }}'
            }
        })
            .then(response => {
                if (!response.ok) {
                    return response.text().then(text => { throw new Error(text) });
                }
                return response.json();
            })
            .then(data => {
                console.log('Données des salariés reçues:', data);
                updateTable(data.salaries);
            })
            .catch(error => console.error('Erreur lors de la récupération des salariés:', error));
    });

    function updateTable(salaries) {
        // Effacer les lignes actuelles du tableau
        table.clear().draw();

        // Ajouter les nouvelles lignes basées sur les données reçues
        salaries.forEach(function(salarie) {
            table.row.add([
                `<input type="checkbox" class="no-sort" name="selected_salaries[]" value="${salarie.id}">`,
                '',
                salarie.nom,
                salarie.prenom,
                salarie.entreprise.nom,
                salarie.intitulePoste
            ]).draw(false);  // 'false' pour ne pas réinitialiser le tableau à chaque ajout
        });

        // Réinitialiser la case "Sélectionner tout" après la mise à jour du tableau
        $('#check-all').prop('checked', false);
    }

    // Affichage conditionnel des champs moment en fonction du type de congé sélectionné
    $('#typeAbsence').on('change', function() {
        var selectedType = $(this).val();
        if (selectedType === 'rtt' || selectedType === 'reposCompensatoire') {
            $('#momentDebutContainer').show();
            $('#momentFinContainer').show();
            $('#heureDebutContainer').hide();
            $('#heureFinContainer').hide();
        } else if (selectedType === 'congesIntemperies') {
            $('#heureDebutContainer').show();
            $('#heureFinContainer').show();
            $('#momentDebutContainer').hide();
            $('#momentFinContainer').hide();
        } else {
            $('#momentDebutContainer').hide();
            $('#momentFinContainer').hide();
            $('#heureDebutContainer').hide();
            $('#heureFinContainer').hide();
            $('#heureDebut').val('');
            $('#heureFin').val('');
        }
    });

    // Initialiser l'affichage à la chargement de la page
    $('#typeAbsence').trigger('change');

    // Gérer la sélection de moment
    $('input[name="nouveau_absences_form[debutMoment]"]').on('change', function() {
        if ($(this).val() === 'matin') {
            $('#heureDebut').val('08:00:00');
        } else if ($(this).val() === 'apres-midi') {
            $('#heureDebut').val('14:00:00');
        }
    });

    $('input[name="nouveau_absences_form[finMoment]"]').on('change', function() {
        if ($(this).val() === 'matin') {
            $('#heureFin').val('12:00:00');
        } else if ($(this).val() === 'apres-midi') {
            $('#heureFin').val('18:00:00');
        }
    });
});
</script>
{% endblock %}