{% extends '@App/app.html.twig' %}

{% block title %}Disponibilités{% endblock %}
{% block page_header %}{% endblock %}

{% block content %}
{% set self_service = is_self_service|default(false) %}
{% set active_tab = active_tab|default(self_service ? 'mine' : 'team') %}
{% set metrics = metrics|default({submitted: 0, approved: 0, unavailable: 0, coverage: 0, total: 0}) %}
{% set employees = employees|default([]) %}
{% set availability_locked = availability_locked|default(false) %}
{% set status_labels = {submitted: 'Soumis', approved: 'Approuvé', refused: 'Refusé', cancelled: 'Annulé'} %}
{% set type_labels = {unavailable: 'Indisponible', available: 'Disponible', preferred: 'Préférence'} %}
{% set month_names = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'] %}

<div class="data-page planning-availability-admin-page" data-controller="planning-employee-availability">
    <div class="planning-availability-topbar">
        <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
            <span>Plannings</span>
            <i class="ti ti-chevron-right" aria-hidden="true"></i>
            <span class="fw-bold text-primary">Disponibilités</span>
        </nav>
        {% if not self_service %}
            <div class="planning-availability-search">
                <i class="ti ti-search" aria-hidden="true"></i>
                <input type="search" placeholder="Rechercher..." aria-label="Rechercher">
            </div>
        {% endif %}
    </div>

    <header class="planning-availability-hero">
        <div>
            <h1>{{ self_service ? 'Mes disponibilités' : 'Disponibilités' }}</h1>
            <p>{{ self_service ? 'Déclarez vos périodes de disponibilité ou d’indisponibilité.' : 'Gérez vos disponibilités et celles de votre équipe pour la planification.' }}</p>
        </div>
        <div class="planning-availability-actions">
            {% if not self_service %}
                <button class="data-button data-button--secondary" type="button"><i class="ti ti-filter" aria-hidden="true"></i>Filtres</button>
                <button class="data-button data-button--secondary" type="button"><i class="ti ti-file-export" aria-hidden="true"></i>Exporter</button>
                <form method="post" action="{{ path('planning_availability_lock') }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('planning_availability_lock') }}">
                    <input type="hidden" name="tab" value="{{ active_tab }}">
                    <input type="hidden" name="locked" value="{{ availability_locked ? 0 : 1 }}">
                    <button class="data-button {{ availability_locked ? 'data-button--secondary' : 'data-button--primary' }}" type="submit">
                        <i class="ti {{ availability_locked ? 'ti-lock-open' : 'ti-lock' }}" aria-hidden="true"></i>{{ availability_locked ? 'Déverrouiller les disponibilités' : 'Verrouiller les disponibilités' }}
                    </button>
                </form>
            {% endif %}
            <a class="data-button data-button--primary" href="{{ path('planning_availability_new') }}">
                <i class="ti ti-plus" aria-hidden="true"></i>Ajouter une disponibilité
            </a>
        </div>
    </header>

    {% if not self_service %}
        <section class="planning-availability-metrics">
            <article><i class="ti ti-hourglass-empty" aria-hidden="true"></i><span>En attente</span><strong>{{ metrics.submitted }}</strong></article>
            <article><i class="ti ti-circle-check" aria-hidden="true"></i><span>Approuvées</span><strong>{{ metrics.approved }}</strong></article>
            <article><i class="ti ti-user-x" aria-hidden="true"></i><span>Indisponibilités</span><strong>{{ metrics.unavailable }}</strong></article>
            <article><i class="ti ti-gauge" aria-hidden="true"></i><span>Couverture</span><strong>{{ metrics.coverage }}%</strong></article>
        </section>

        <nav class="planning-availability-tabs" aria-label="Navigation disponibilités">
            <a class="{{ active_tab == 'mine' ? 'is-active' : '' }}" href="{{ path('planning_availability_index', {tab: 'mine'}) }}">Mes disponibilités</a>
            <a class="{{ active_tab == 'team' ? 'is-active' : '' }}" href="{{ path('planning_availability_index', {tab: 'team'}) }}">Équipe</a>
            <a class="{{ active_tab == 'pending' ? 'is-active' : '' }}" href="{{ path('planning_availability_index', {tab: 'pending'}) }}">En attente de validation <span>{{ metrics.submitted }}</span></a>
            <a class="{{ active_tab == 'weekly' ? 'is-active' : '' }}" href="{{ selected_employee ? path('planning_availability_index', {tab: 'weekly', salarie: selected_employee.id}) : path('planning_availability_index', {tab: 'weekly'}) }}">Disponibilités hebdomadaires</a>
        </nav>
    {% endif %}

    {% if active_tab == 'weekly' and not self_service %}
        <section class="planning-availability-weekly-layout">
            <form class="planning-employee-board planning-availability-weekly-panel" method="post" action="{{ path('planning_availability_weekly_preferences') }}">
                <input type="hidden" name="_token" value="{{ csrf_token('planning_availability_weekly_preferences') }}">
                <header class="planning-employee-board__header">
                    <div>
                        <h2>Disponibilités hebdomadaires</h2>
                        <p>Renseignez les plages récurrentes disponibles ou indisponibles pour le salarié sélectionné.</p>
                    </div>
                    <label class="planning-availability-employee-select">
                        <span>Salarié</span>
                        <select name="salarie" onchange="window.location.href='{{ path('planning_availability_index', {tab: 'weekly'}) }}&salarie=' + this.value">
                            {% for employee in employees %}
                                <option value="{{ employee.id }}" {{ selected_employee and selected_employee.id == employee.id ? 'selected' : '' }}>{{ employee }}</option>
                            {% endfor %}
                        </select>
                    </label>
                </header>

                {% if weekly_view %}
                    <div class="planning-employee-availability-grid">
                        <div class="planning-employee-availability-head">Jour</div>
                        {% for slot in weekly_view.slots %}
                            <div class="planning-employee-availability-head">{{ slot.label }}</div>
                        {% endfor %}
                        {% for day_number, day_label in weekly_view.days %}
                            <div class="planning-employee-availability-day">{{ day_label }}</div>
                            {% for slot_key, slot in weekly_view.slots %}
                                {% set preference = weekly_view.selected[day_number][slot_key]|default(null) %}
                                {% set preference_type = preference ? preference.type : '' %}
                                <div class="planning-employee-availability-choice" data-state="{{ preference_type ?: 'empty' }}">
                                    <input type="hidden" name="availability[{{ day_number }}][{{ slot_key }}]" value="{{ preference_type }}" data-planning-employee-availability-target="input">
                                    <button class="planning-employee-availability-card" type="button" data-action="planning-employee-availability#cycle">
                                        <strong>{{ preference_type == 'unavailable' ? 'Indisponible' : (preference_type == 'available' ? 'Disponible' : '+') }}</strong>
                                        {% if preference_type == 'unavailable' %}
                                            <small>{{ preference.comment ?: 'Préférence récurrente' }}</small>
                                            <i class="ti ti-x" aria-hidden="true"></i>
                                        {% elseif preference_type == 'available' %}
                                            <i class="ti ti-check" aria-hidden="true"></i>
                                        {% endif %}
                                    </button>
                                </div>
                            {% endfor %}
                        {% endfor %}
                    </div>
                    <footer class="planning-employee-availability-actions">
                        <button class="data-button data-button--secondary" type="button" data-action="planning-employee-availability#duplicateWeek"><i class="ti ti-copy" aria-hidden="true"></i>Remplir les vides</button>
                        <button class="data-button data-button--primary" type="submit">Enregistrer les disponibilités</button>
                    </footer>
                {% endif %}
            </form>

            <aside class="planning-employee-side-card planning-employee-compliance">
                <header><i class="ti ti-rosette-discount-check" aria-hidden="true"></i><h2>Conformité</h2></header>
                <div class="planning-employee-side-body">
                    <div class="planning-employee-compliance-row">
                        <span>Disponibilité min.</span>
                        <strong>{{ weekly_view ? (weekly_view.minimumMinutes / 60)|number_format(0, ',', ' ') : 25 }} h / sem.</strong>
                    </div>
                    <div class="planning-employee-progress"><span style="width: {{ weekly_view ? weekly_view.compliancePercent : 0 }}%"></span></div>
                    <p>{{ selected_employee ?: 'Le salarié' }} dispose de {{ weekly_view ? (weekly_view.availableMinutes / 60)|number_format(weekly_view.availableMinutes % 60 == 0 ? 0 : 1, ',', ' ') : 0 }}h de disponibilité déclarée.</p>
                </div>
            </aside>
        </section>
    {% else %}
        {% if not self_service %}
            <form class="planning-availability-filters" method="get" action="{{ path('planning_availability_index') }}">
                <input type="hidden" name="tab" value="{{ active_tab }}">
                <select><option>Tous les salariés</option></select>
                <select><option>Tous les types</option></select>
                <select><option>Tous les statuts</option></select>
                <input type="date" aria-label="Date">
                <a href="{{ path('planning_availability_index', {tab: active_tab}) }}">Réinitialiser</a>
            </form>
        {% endif %}

        <div class="planning-availability-layout">
            <section class="planning-availability-list-card">
                <header>
                    <div>
                        <h2>{{ self_service ? 'Liste de mes demandes' : 'Liste des demandes' }}</h2>
                        <p>{{ metrics.total }} demandes au total</p>
                    </div>
                    <div class="planning-availability-status-legend">
                        <span data-tone="approved">Approuvé</span>
                        <span data-tone="submitted">Soumis</span>
                        <span data-tone="refused">Refusé</span>
                    </div>
                </header>
                <div class="planning-availability-table-wrap">
                    <table class="planning-availability-table">
                        <thead>
                            <tr>
                                {% if not self_service %}<th>Salarié</th>{% endif %}
                                <th>Type</th>
                                <th>Période</th>
                                <th>Commentaire</th>
                                <th>Récurrence</th>
                                <th>Statut</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for availability in availabilities %}
                                {% set employee = availability.salarie %}
                                {% set type = availability.type %}
                                {% set status = availability.status %}
                                <tr>
                                    {% if not self_service %}
                                        <td>
                                            <div class="planning-availability-employee">
                                                <span class="data-avatar data-avatar--initials">{{ employee ? (employee.prenom|first ~ employee.nom|first)|upper : '?' }}</span>
                                                <div>
                                                    <strong>{{ employee }}</strong>
                                                    <small>{{ employee and employee.employeeJob ? employee.employeeJob.nom : (employee and employee.employeeService ? employee.employeeService.nom : 'Salarié') }}</small>
                                                </div>
                                            </div>
                                        </td>
                                    {% endif %}
                                    <td><span class="planning-availability-type" data-tone="{{ type }}">{{ type_labels[type]|default(type|capitalize) }}</span></td>
                                    <td>
                                        <strong>{{ availability.startAt|date('d') }} {{ month_names[availability.startAt|date('n') - 1]|capitalize }} {{ availability.startAt|date('Y') }}</strong>
                                        <small>{{ availability.startAt|date('H:i') }} - {{ availability.endAt|date('H:i') }}</small>
                                    </td>
                                    <td><em>{{ availability.comment ?: '—' }}</em></td>
                                    <td>{{ availability.recurrenceRule ? 'Hebdo.' : 'Ponctuel' }}</td>
                                    <td><span class="planning-availability-status" data-tone="{{ status }}">{{ status_labels[status]|default(status|capitalize) }}</span></td>
                                    <td>
                                        <div class="planning-availability-row-actions">
                                            {% if not self_service and status == 'submitted' %}
                                                <form method="post" action="{{ path('planning_availability_approve', {id: availability.id}) }}">
                                                    <input type="hidden" name="_token" value="{{ csrf_token('planning_availability_approve_' ~ availability.id) }}">
                                                    <input type="hidden" name="tab" value="{{ active_tab }}">
                                                    <button class="planning-availability-icon-btn is-approve" type="submit" title="Valider"><i class="ti ti-check" aria-hidden="true"></i></button>
                                                </form>
                                                <form method="post" action="{{ path('planning_availability_refuse', {id: availability.id}) }}">
                                                    <input type="hidden" name="_token" value="{{ csrf_token('planning_availability_refuse_' ~ availability.id) }}">
                                                    <input type="hidden" name="tab" value="{{ active_tab }}">
                                                    <button class="planning-availability-icon-btn is-refuse" type="submit" title="Refuser"><i class="ti ti-x" aria-hidden="true"></i></button>
                                                </form>
                                            {% endif %}
                                            {% if status != 'cancelled' %}
                                                <a class="planning-availability-icon-btn" href="{{ path('planning_availability_edit', {id: availability.id}) }}" title="Modifier"><i class="ti ti-pencil" aria-hidden="true"></i></a>
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                            {% else %}
                                <tr><td colspan="{{ self_service ? 6 : 7 }}" class="planning-employee-empty">Aucune disponibilité.</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <footer class="planning-availability-table-footer">
                    <span>Affichage de 1 à {{ availabilities|length }} sur {{ metrics.total }} demandes</span>
                    <div>
                        <button class="data-button data-button--secondary" disabled>Précédent</button>
                        <button class="data-button data-button--primary" type="button">1</button>
                        <button class="data-button data-button--secondary" type="button">Suivant</button>
                    </div>
                </footer>
            </section>

            {% if not self_service %}
                <aside class="planning-availability-side">
                    <section class="planning-availability-calendar">
                        <header>
                            <h2>Aperçu calendrier</h2>
                            <strong>{{ month_names['now'|date('n') - 1]|capitalize }} {{ 'now'|date('Y') }}</strong>
                        </header>
                        <div class="planning-availability-calendar-grid">
                            {% for label in ['LU', 'MA', 'ME', 'JE', 'VE', 'SA', 'DI'] %}<span>{{ label }}</span>{% endfor %}
                            {% for day in 1..21 %}
                                <button class="{{ day == 14 ? 'is-active' : '' }}" type="button">{{ day }}</button>
                            {% endfor %}
                        </div>
                        <div class="planning-availability-calendar-detail">
                            <strong>Détails du 14</strong>
                            {% set first_unavailable = all_availabilities|default([])|filter(a => a.type == 'unavailable')|first %}
                            {% if first_unavailable %}
                                <article>
                                    <i class="ti ti-user-x" aria-hidden="true"></i>
                                    <div>
                                        <strong>{{ first_unavailable.salarie }}</strong>
                                        <span>Indisponible ({{ status_labels[first_unavailable.status]|default(first_unavailable.status) }})</span>
                                    </div>
                                </article>
                            {% else %}
                                <p>Aucune indisponibilité sélectionnée.</p>
                            {% endif %}
                        </div>
                    </section>

                    <section class="planning-availability-month">
                        <h2>Aperçu mensuel</h2>
                        <p><span>Demandes en attente</span><strong>{{ metrics.submitted }}</strong></p>
                        <p><span>Indisponibilités validées</span><strong>{{ metrics.unavailable }}</strong></p>
                        <p><span>Taux de couverture</span><strong>{{ metrics.coverage }}%</strong></p>
                        <div class="planning-employee-progress"><span style="width: {{ metrics.coverage }}%"></span></div>
                    </section>
                </aside>
            {% endif %}
        </div>
    {% endif %}
</div>
{% endblock %}