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

{% block body %}
    {% set basePath = path('admin.pointage', {
        'sort': sortField,
        'order': sortOrder,
        'user': userFilter ?? '',
        'period': period,
        'page': 1
    }) %}

    <div class="page-pointage">
        <div class="card-pointage">
            <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
                <h5 class="mb-0">Liste des pointages</h5>
                <div class="d-flex gap-2 flex-wrap">
                    <a href="{{ path('admin.utilisateurs') }}" class="btn btn-outline-secondary btn-sm">
                        Utilisateurs
                    </a>
                    <a href="{{ path('admin.modifications') }}" class="btn btn-outline-secondary btn-sm">
                        Journal des modifications
                    </a>
                    <a href="{{ path('app_logout') }}" class="btn btn-outline-danger btn-sm">
                        Déconnexion
                    </a>
                </div>
            </div>

            {# FILTRES#}
            <div class="table-responsive">
                <div class="compact-filters mb-4">
                    <div class="d-flex align-items-center gap-3 p-3 bg-light rounded" style="font-size: 0.9rem;">

                        {# Utilisateurs #}
                        <div>
                            <label class="d-block mb-1 small text-muted fw-bold">Utilisateurs</label>
                            <select class="form-select form-select-sm" multiple size="3" style="width: 150px;" onchange="updateUsersFilter();">
                                <option value="all" {% if not userFilter or userFilter == 'all' %}selected{% endif %}>Tous</option>
                                {% for u in users %}
                                    <option value="{{ u.username }}" {% if userFilter and u.username in userFilters %}selected{% endif %}>{{ u.username }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        {# Séparateur #}
                        <div class="vr mx-2"></div>

                        {# Période#}
                        <div>
                            {% if dateStartInput and dateEndInput %}
                                <div class="p-2 bg-info bg-opacity-10 border rounded text-primary fw-semibold">
                                    {{ dateStartInput|date('d/m/Y') }} → {{ dateEndInput|date('d/m/Y') }}
                                    <br><small class="text-muted">
                                        <a href="#" onclick="clearDateFilter();
                                                return false;" class="link-underline link-underline-opacity-0-hover">Effacer</a>
                                    </small>
                                </div>
                            {% else %}
                                <label class="d-block mb-1 small text-muted fw-bold">Périodicité</label>
                                <select class="form-select form-select-sm" style="width: 100px;" onchange="location = this.value;">
                                    <option value="{{ basePath ~ '&period=day&page=1' }}" {% if period == 'day' %}selected{% endif %}>Jour</option>
                                    <option value="{{ basePath ~ '&period=week&page=1' }}" {% if period == 'week' %}selected{% endif %}>Semaine</option>
                                    <option value="{{ basePath ~ '&period=month&page=1' }}" {% if period == 'month' %}selected{% endif %}>Mois</option>
                                    <option value="{{ basePath ~ '&period=year&page=1' }}" {% if period == 'year' %}selected{% endif %}>Année</option>
                                    <option value="{{ basePath ~ '&period=global' }}" {% if period == 'global' %}selected{% endif %}>Tout</option>
                                </select>
                            {% endif %}
                        </div>

                        {# Dates personnalisées #}
                        {% if not dateStartInput or not dateEndInput %}            
                            <div class="vr mx-2 d-none d-md-block"></div>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text bg-white border-end-0 px-2">Du</span>
                                <input type="date" id="date_start" class="form-control form-control-sm border-start-0" value="{{ dateStartInput|default('') }}">
                                <span class="input-group-text bg-white border-start-0 border-end-0 px-2">Au</span>
                                <input type="date" id="date_end" class="form-control form-control-sm border-end-0" value="{{ dateEndInput|default('') }}">
                                <button class="btn btn-outline-primary btn-sm px-3" onclick="applyDateFilter()" title="Appliquer">OK</button>
                            </div>
                        {% endif %}

                        <div class="ms-auto gap-2 d-flex">
                            <a href="{{ path('admin.pointage.export.pdf', app.request.query.all) }}" class="btn btn-sm btn-add px-3">Exporter PDF</a>
                            <a href="{{ path('admin.pointage.export.excel', app.request.query.all) }}" class="btn btn-sm btn-add px-3">Exporter Excel</a>

                        </div>
                    </div>
                </div>
            </div>


            {# PAGINATION #}
            {% if (dateStartInput and dateEndInput) == false and period != 'global' %}
                <div class="d-flex justify-content-center align-items-center mb-3 gap-2">
                    <div class="btn-group btn-group-sm">
                        <a class="btn btn-outline-secondary {% if page == 1 %}disabled{% endif %}" href="{{ basePath ~ '&page=1' }}">«</a>
                        <a class="btn btn-outline-secondary {% if page == 1 %}disabled{% endif %}" href="{{ basePath ~ '&page=' ~ (page - 1) }}">‹</a>
                        <span class="btn btn-light disabled">Page {{ page }}</span>
                        <a class="btn btn-outline-secondary" href="{{ basePath ~ '&page=' ~ (page + 1) }}">›</a>
                    </div>
                    <small class="text-muted">
                        période affichée : 
                        {% if period == 'day' %}{{ dateStart|date('d/m/Y') }}
                        {% elseif period == 'week' %}{{ dateStart|date('d/m/Y') }} → {{ dateEnd|date('d/m/Y') }}
                        {% elseif period == 'month' %}{{ dateStart|date('m/Y') }}
                        {% elseif period == 'year' %}{{ dateStart|date('Y') }}{% endif %}
                    </small>
                </div>
            {% endif %}


            {# Tableau des pointages#}
            <div class="table-responsive">
                <table class="table table-bordered table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center">Utilisateur</th>
                            <th class="text-center">Date</th>
                            <th class="text-center">Entrée</th>
                            <th class="text-center">Début pause</th>
                            <th class="text-center">Fin pause</th>
                            <th class="text-center">Sortie</th>
                            <th class="text-center">Total</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for pointage in pointages %}
                            <tr>
                                <td>{{ pointage.utilisateur ? pointage.utilisateur.username : 'Utilisateur inconnu' }}</td>
                                <td class="text-center">{{ pointage.datePointage ? pointage.datePointage|date('d/m/Y') : 'N/A' }}</td>
                                <td class="text-center">{{ pointage.heureEntree ? pointage.heureEntree|date('H:i') : '—' }}</td>
                                <td class="text-center">{{ pointage.heureDebutPause ? pointage.heureDebutPause|date('H:i') : '—' }}</td>
                                <td class="text-center">{{ pointage.heureFinPause ? pointage.heureFinPause|date('H:i') : '—' }}</td>
                                <td class="text-center">{{ pointage.heureSortie ? pointage.heureSortie|date('H:i') : '—' }}</td>
                                <td class="text-center font-weight-bold">{{ pointage.totalTravailFormatted ?? 'N/A' }}</td>
                                <td class="text-center">
                                    <button class="btn btn-secondary btn-sm"
                                            title="Modifier ce pointage"
                                            data-bs-toggle="modal" 
                                            data-bs-target="#editPointageModal" 
                                            data-id="{{ pointage.id }}"
                                            data-date="{{ pointage.datePointage ? pointage.datePointage|date('Y-m-d') : '' }}"
                                            data-entree="{{ pointage.heureEntree ? pointage.heureEntree|date('H:i') : '' }}"
                                            data-debut="{{ pointage.heureDebutPause ? pointage.heureDebutPause|date('H:i') : '' }}"
                                            data-fin="{{ pointage.heureFinPause ? pointage.heureFinPause|date('H:i') : '' }}"
                                            data-sortie="{{ pointage.heureSortie ? pointage.heureSortie|date('H:i') : '' }}">
                                        Éditer
                                    </button>
                                    <a href="{{ path('admin.pointage.suppr',{id: pointage.id}) }}" class="btn btn-danger btn-sm" title="Supprimer ce pointage" onclick="return confirm('Etes-vous sûr de vouloir supprimer ce pointage ?')">Supprimer</a>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="8" class="text-center text-muted">Aucun pointage enregistré</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <h5>Récapitulatif par utilisateur</h5>
            <div class="table-responsive">
                <table class="table table-bordered table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center">Utilisateur</th>
                            <th class="text-center">Période</th>
                            <th class="text-center">Jours travaillés</th>
                            <th class="text-center">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if recapParUtilisateur|length > 0 %}
                            {% for row in recapParUtilisateur %}
                                <tr>
                                    <td class="text-center">{{ row.user.username }}</td>
                                    <td class="text-center">
                                        {% if period == 'global' %}
                                            Toute la période
                                        {% elseif period == 'day' %}
                                            {{ dateStart|date('d/m/Y') }}
                                        {% else %}
                                            du {{ dateStart|date('d/m/Y') }} au {{ dateEnd|date('d/m/Y') }}
                                        {% endif %}
                                    </td>
                                    <td class="text-center">{{ row.joursTravailles }}</td>
                                    <td class="text-center font-weight-bold">{{ row.totalFormatted }}</td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr>
                                <td colspan="3" class="text-center text-muted">
                                    Aucun pointage sur la période sélectionnée
                                </td>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Modal Éditer Pointage -->
    <div class="modal fade" id="editPointageModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <form id="editPointageForm" method="POST" action="{{ path('admin.pointage.edit') }}">
                <input type="hidden" name="id" id="modalPointageId">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Éditer le pointage</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="modalDate" class="form-label">Date</label>
                            <input type="date" class="form-control" id="modalDate" name="datePointage" required
                                   max="{{ "now"|date('Y-m-d') }}">
                        </div>
                        <div class="mb-3">
                            <label for="modalEntree" class="form-label">Heure d'entrée</label>
                            <input type="time" class="form-control" id="modalEntree" name="heureEntree">
                        </div>
                        <div class="mb-3">
                            <label for="modalDebutPause" class="form-label">Début pause</label>
                            <input type="time" class="form-control" id="modalDebutPause" name="heureDebutPause">
                        </div>
                        <div class="mb-3">
                            <label for="modalFinPause" class="form-label">Fin pause</label>
                            <input type="time" class="form-control" id="modalFinPause" name="heureFinPause">
                        </div>
                        <div class="mb-3">
                            <label for="modalSortie" class="form-label">Heure de sortie</label>
                            <input type="time" class="form-control" id="modalSortie" name="heureSortie">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-primary">Enregistrer</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const editModal = document.getElementById('editPointageModal');
            const form = document.getElementById('editPointageForm');
            let initialValues = {};

            // Quand la modale s’ouvre → on stocke les valeurs originales
            editModal.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget;

                const data = {
                    id: button.getAttribute('data-id'),
                    date: button.getAttribute('data-date'),
                    entree: button.getAttribute('data-entree'),
                    debut: button.getAttribute('data-debut'),
                    fin: button.getAttribute('data-fin'),
                    sortie: button.getAttribute('data-sortie'),
                };

                document.getElementById('modalPointageId').value = data.id;
                document.getElementById('modalDate').value = data.date;
                document.getElementById('modalEntree').value = data.entree;
                document.getElementById('modalDebutPause').value = data.debut;
                document.getElementById('modalFinPause').value = data.fin;
                document.getElementById('modalSortie').value = data.sortie;

                // On clone les données pour comparaison ultérieure
                initialValues = {...data};

                updateTimeConstraints();
            });

            // Vérification avant soumission
            form.addEventListener('submit', function (e) {
                const currentValues = {
                    id: document.getElementById('modalPointageId').value,
                    date: document.getElementById('modalDate').value,
                    entree: document.getElementById('modalEntree').value,
                    debut: document.getElementById('modalDebutPause').value,
                    fin: document.getElementById('modalFinPause').value,
                    sortie: document.getElementById('modalSortie').value,
                };

                // Comparer les champs entre état initial et actuel
                const hasChanged = Object.keys(currentValues).some(
                        key => currentValues[key] !== initialValues[key]
                );

                if (!hasChanged) {
                    alert("Aucune modification détectée.");
                    e.preventDefault();
                    return;
                }

                // Ici, tu laisses tes validations existantes (dates futures, séquences d'heures, etc.)
            });
        });

        document.addEventListener('DOMContentLoaded', function () {
            const editModal = document.getElementById('editPointageModal');

            editModal.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget;
                document.getElementById('modalPointageId').value = button.getAttribute('data-id');
                document.getElementById('modalDate').value = button.getAttribute('data-date');
                document.getElementById('modalEntree').value = button.getAttribute('data-entree');
                document.getElementById('modalDebutPause').value = button.getAttribute('data-debut');
                document.getElementById('modalFinPause').value = button.getAttribute('data-fin');
                document.getElementById('modalSortie').value = button.getAttribute('data-sortie');

                updateTimeConstraints();
            });

            function updateTimeConstraints() {
                const entree = document.getElementById('modalEntree').value;
                const debut = document.getElementById('modalDebutPause').value;
                const fin = document.getElementById('modalFinPause').value;
                const sortie = document.getElementById('modalSortie');

                const debutPause = document.getElementById('modalDebutPause');
                const finPause = document.getElementById('modalFinPause');

                // min/max dynamiques
                if (entree) {
                    debutPause.min = entree;
                    sortie.min = entree;
                } else {
                    debutPause.removeAttribute('min');
                    sortie.removeAttribute('min');
                }

                if (debut) {
                    finPause.min = debut;
                } else {
                    finPause.removeAttribute('min');
                }

                if (fin) {
                    sortie.min = fin;
                }
            }

            ['modalEntree', 'modalDebutPause', 'modalFinPause'].forEach(id => {
                document.getElementById(id).addEventListener('change', updateTimeConstraints);
            });

            document.getElementById('editPointageForm').addEventListener('submit', function (e) {
                const date = document.getElementById('modalDate').value;
                const today = new Date().toISOString().split('T')[0];

                if (date > today) {
                    alert("Vous ne pouvez pas sélectionner une date future.");
                    e.preventDefault();
                    return;
                }

                const entree = document.getElementById('modalEntree').value;
                const debut = document.getElementById('modalDebutPause').value;
                const fin = document.getElementById('modalFinPause').value;
                const sortie = document.getElementById('modalSortie').value;

                // Pause complète obligatoire
                if ((debut && !fin) || (!debut && fin)) {
                    alert("Vous devez remplir à la fois le début et la fin de la pause ou laisser les deux vides.");
                    e.preventDefault();
                    return;
                }

                // Sortie nécessite entrée
                if (sortie && !entree) {
                    alert("Vous ne pouvez pas renseigner une sortie sans avoir renseigné l'heure d'entrée.");
                    e.preventDefault();
                    return;
                }

                function toMinutes(time) {
                    if (!time)
                        return null;
                    const [h, m] = time.split(':').map(Number);
                    return h * 60 + m;
                }

                const entreeMin = toMinutes(entree);
                const debutMin = toMinutes(debut);
                const finMin = toMinutes(fin);
                const sortieMin = toMinutes(sortie);

                if (entreeMin !== null && debutMin !== null && entreeMin > debutMin) {
                    alert("L'heure d'entrée doit être avant le début de la pause.");
                    e.preventDefault();
                    return;
                }
                if (debutMin !== null && finMin !== null && debutMin > finMin) {
                    alert("Le début de pause doit être avant la fin de la pause.");
                    e.preventDefault();
                    return;
                }
                if (finMin !== null && sortieMin !== null && finMin > sortieMin) {
                    alert("La fin de pause doit être avant l'heure de sortie.");
                    e.preventDefault();
                    return;
                }
                if (entreeMin !== null && sortieMin !== null && entreeMin > sortieMin) {
                    alert("L'heure d'entrée doit être avant l'heure de sortie.");
                    e.preventDefault();
                    return;
                }
            });
        });

        function updateUsersFilter() {
            const select = document.querySelector('select[multiple]');
            if (!select)
                return;

            const selectedValues = Array.from(select.selectedOptions)
                    .filter(option => option.value !== 'all')
                    .map(option => option.value);

            const params = new URLSearchParams(window.location.search);
            if (selectedValues.length === 0) {
                params.delete('user');
            } else {
                params.set('user', selectedValues.join(','));
            }
            // params.set('page', '1');  ← SUPPRIMÉ !

            window.location.search = params.toString();
        }
        function applyDateFilter() {
            const dateStart = document.getElementById('date_start').value;
            const dateEnd = document.getElementById('date_end').value;

            if (!dateStart || !dateEnd) {
                alert('Veuillez sélectionner une date de début ET une date de fin.');
                return;
            }

            if (dateStart > dateEnd) {
                alert('La date de début doit être antérieure à la date de fin.');
                return;
            }

            const params = new URLSearchParams(window.location.search);
            params.set('date_start', dateStart);
            params.set('date_end', dateEnd);
            params.set('page', '1');
            params.delete('period'); // Supprime la période

            window.location.search = params.toString();
        }

        function clearDateFilter() {
            const params = new URLSearchParams();
            params.delete('date_start');
            params.delete('date_end');
            params.delete('user');
            params.set('page', '1');

            window.location.search = params.toString();
        }
        function clearDateFilter() {
            const params = new URLSearchParams();
            params.set('sort', new URLSearchParams(window.location.search).get('sort') || 'datePointage');
            params.set('order', new URLSearchParams(window.location.search).get('order') || 'DESC');
            params.set('page', '1');

            window.location.search = params.toString();
        }


    </script>
{% endblock %}