{% extends '@Routine/routine/layout.html.twig' %}

{% block routine_title %}Calendrier des routines{% endblock %}
{% block routine_header %}{% endblock %}

{% block routine_content %}
<div class="commercial-calendar routine-calendar-page"
     data-controller="routine-calendar"
     data-routine-calendar-events-url-value="{{ path('routine_calendar_events') }}"
     data-routine-calendar-initial-date-value="{{ start|date('Y-m-d') }}">
    <header class="calendar-header">
        <div>
            <h1 class="capsule-titre">Calendrier</h1>
            <p class="capsule-sous-titre">Visualisez et organisez toutes les tâches récurrentes de la société active.</p>
        </div>
        <div class="calendar-header-actions">
            <a class="capsule-button capsule-button--secondary" href="{{ path('routine_task_index') }}"><i class="ti ti-list-check"></i>Liste des tâches</a>
            <a class="capsule-button capsule-button--primary" href="{{ path('routine_task_new') }}"><i class="ti ti-plus"></i>Nouvelle tâche</a>
        </div>
    </header>

    <section class="calendar-status-bar">
        <span class="calendar-connection is-connected"><i class="ti ti-repeat"></i>Routines de la société active</span>
        <span class="text-muted small">Cliquez sur une tâche pour ouvrir sa fiche.</span>
    </section>

    <div class="calendar-layout">
        <aside class="calendar-sidebar">
            <fieldset class="calendar-filter">
                <legend>Statuts</legend>
                {% set statuses = {
                    todo: 'À faire',
                    in_progress: 'En cours',
                    postponed: 'Reportées',
                    awaiting_validation: 'À valider',
                    done: 'Terminées',
                    skipped: 'Ignorées',
                    cancelled: 'Annulées'
                } %}
                {% for value, label in statuses %}
                    <label class="calendar-check"><input type="checkbox" value="{{ value }}" {{ value not in ['skipped', 'cancelled'] ? 'checked' : '' }} data-routine-calendar-target="statusFilter" data-action="change->routine-calendar#filter"> {{ label }}</label>
                {% endfor %}
            </fieldset>
            <fieldset class="calendar-filter">
                <legend>Priorités</legend>
                {% set priorities = [
                    {value:'low', label:'Basse', color:'#64748b'},
                    {value:'normal', label:'Normale', color:'#1769e0'},
                    {value:'high', label:'Haute', color:'#f59e0b'},
                    {value:'urgent', label:'Urgente', color:'#dc3545'}
                ] %}
                {% for priority in priorities %}
                    <label class="calendar-check"><input type="checkbox" value="{{ priority.value }}" checked data-routine-calendar-target="priorityFilter" data-action="change->routine-calendar#filter"><span class="calendar-dot" style="--dot:{{ priority.color }}"></span>{{ priority.label }}</label>
                {% endfor %}
            </fieldset>
        </aside>

        <main class="calendar-card routine-calendar-card">
            <div class="calendar-toolbar">
                <div class="calendar-nav">
                    <button type="button" aria-label="Période précédente" data-action="routine-calendar#previous"><i class="ti ti-chevron-left"></i></button>
                    <button type="button" data-action="routine-calendar#today">Aujourd’hui</button>
                    <button type="button" aria-label="Période suivante" data-action="routine-calendar#next"><i class="ti ti-chevron-right"></i></button>
                </div>
                <h2 data-routine-calendar-target="periodLabel"></h2>
                <div class="calendar-views" role="group" aria-label="Vue du calendrier">
                    <button type="button" data-view="dayGridMonth" data-action="routine-calendar#setView" class="active">Mois</button>
                    <button type="button" data-view="timeGridWeek" data-action="routine-calendar#setView">Semaine</button>
                    <button type="button" data-view="timeGridDay" data-action="routine-calendar#setView">Jour</button>
                    <button type="button" data-view="listMonth" data-action="routine-calendar#setView">Agenda</button>
                </div>
            </div>
            <div class="calendar-loading" data-routine-calendar-target="loading" hidden><span class="spinner-border spinner-border-sm"></span> Chargement…</div>
            <div class="calendar-canvas routine-fullcalendar" data-routine-calendar-target="calendar" aria-live="polite"></div>
            <noscript><p class="calendar-empty">JavaScript doit être activé pour afficher le calendrier.</p></noscript>
        </main>
    </div>
</div>
{% endblock %}