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

{% block title %}Planning mensuel{% endblock %}
{% block page_header %}{% endblock %}

{% block content %}
{% set french_days = {
    1: 'L',
    2: 'M',
    3: 'M',
    4: 'J',
    5: 'V',
    6: 'S',
    7: 'D'
} %}
{% set french_months = {
    1: 'Janvier',
    2: 'Février',
    3: 'Mars',
    4: 'Avril',
    5: 'Mai',
    6: 'Juin',
    7: 'Juillet',
    8: 'Août',
    9: 'Septembre',
    10: 'Octobre',
    11: 'Novembre',
    12: 'Décembre'
} %}
{% set current_query = app.request.query.all %}
{% set month_label = french_months[calendar.start|date('n')] ~ ' ' ~ calendar.start|date('Y') %}

<div class="data-page planning-monthly-page" data-controller="planning-weekly">
    <div class="planning-monthly-topbar">
        <div class="data-breadcrumb"><span>Plannings</span><i class="ti ti-chevron-right" aria-hidden="true"></i><strong>{{ month_label }}</strong></div>
        <div class="planning-monthly-actions">
            <a class="data-button data-button--secondary" href="{{ path('planning_export_index') }}"><i class="ti ti-download" aria-hidden="true"></i>Exporter</a>
            {% if calendar.isEditable %}
                <form method="post" action="{{ path('planning_month_publish') }}">
                    <input type="hidden" name="month" value="{{ calendar.start|date('Y-m-d') }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('planning_month_publish_' ~ calendar.start|date('Y-m')) }}">
                    <button class="data-button data-button--secondary" type="submit"><i class="ti ti-send" aria-hidden="true"></i>Publier</button>
                </form>
            {% endif %}
            <a class="data-button data-button--primary" href="{{ path('planning_shift_new') }}"><i class="ti ti-plus" aria-hidden="true"></i>Nouveau shift</a>
        </div>
    </div>

    <div class="planning-monthly-toolbar">
        <div class="planning-monthly-title">
            <h1>{{ month_label }}</h1>
            <div class="planning-monthly-nav">
                <button class="data-button data-button--secondary" type="button" data-action="planning-weekly#go" data-url="{{ path('planning_month', current_query|merge({month: calendar.previousMonth})) }}"><i class="ti ti-chevron-left" aria-hidden="true"></i></button>
                <button class="data-button data-button--secondary" type="button" data-action="planning-weekly#go" data-url="{{ path('planning_month', {month: calendar.start|date('Y-m')}) }}">{{ month_label }}</button>
                <button class="data-button data-button--secondary" type="button" data-action="planning-weekly#go" data-url="{{ path('planning_month', current_query|merge({month: calendar.nextMonth})) }}"><i class="ti ti-chevron-right" aria-hidden="true"></i></button>
            </div>
        </div>

        <div class="planning-monthly-actions">
            <div class="planning-weekly__views" aria-label="Vues planning">
                <a href="{{ path('planning_week', {start: calendar.start|date('Y-m-d')}) }}">Jour</a>
                <a href="{{ path('planning_week', {start: calendar.start|date('Y-m-d')}) }}">Semaine</a>
                <a class="is-active" href="{{ path('planning_month', current_query) }}">Mois</a>
                <a href="{{ path('planning_team') }}">Équipe</a>
            </div>
            <form class="planning-monthly-filters" method="get">
                <input type="hidden" name="month" value="{{ calendar.selectedMonth }}">
                <select name="etablissement" aria-label="Établissement" data-action="planning-weekly#submit">
                    <option value="">Tous les établissements</option>
                    {% for etablissement in etablissements %}
                        <option value="{{ etablissement.id }}" {{ app.request.query.get('etablissement') == etablissement.id ? 'selected' : '' }}>{{ etablissement.nom }}</option>
                    {% endfor %}
                </select>
                <select name="service" aria-label="Service" data-action="planning-weekly#submit">
                    <option value="">Tous les services</option>
                    {% for service in services %}
                        <option value="{{ service.id }}" {{ app.request.query.get('service') == service.id ? 'selected' : '' }}>{{ service.nom }}</option>
                    {% endfor %}
                </select>
            </form>
        </div>
    </div>

    <section class="planning-month-table"
        data-controller="planning-drag"
        style="--planning-month-columns: 260px {% for column in calendar.columns %}{{ column.type == 'day' ? '52px' : '64px' }} {% endfor %}72px;"
    >
        <div class="planning-month-table__header">
            <div class="planning-month-table__employee-head">Salariés <span>({{ calendar.rows|length }})</span></div>
            {% for column in calendar.columns %}
                {% if column.type == 'day' %}
                    <div class="planning-month-table__head {{ column.isToday ? 'is-today' : '' }} {{ column.isWeekend ? 'is-weekend' : '' }}">
                        <span>{{ french_days[column.date|date('N')] }}</span>
                        <strong>{{ column.date|date('j') }}</strong>
                    </div>
                {% else %}
                    <div class="planning-month-table__head planning-month-table__head--week">
                        <span>Sem.</span>
                    </div>
                {% endif %}
            {% endfor %}
            <div class="planning-month-table__head planning-month-table__head--month">
                <span>Mois</span>
            </div>
        </div>

        <div class="planning-month-table__body">
            {% for row in calendar.rows %}
                {% set salarie = row.employee %}
                {% set photo_path = salarie.photo ? salarie.photo|trim : null %}
                {% set avatar_src = photo_path ? (photo_path starts with 'http://' or photo_path starts with 'https://' ? photo_path : asset(photo_path starts with '/' ? photo_path|slice(1) : photo_path)) : null %}
                {% set initials = (salarie.prenom|default('?')|first ~ salarie.nom|default('')|first)|upper %}
                <div class="planning-month-table__row">
                    <div class="planning-month-table__employee">
                        <span class="data-avatar {{ avatar_src ? '' : 'data-avatar--initials' }}">
                            {% if avatar_src %}
                                <img src="{{ avatar_src }}" alt="{{ salarie }}">
                            {% else %}
                                {{ initials }}
                            {% endif %}
                        </span>
                        <div>
                            <strong>{{ salarie }}</strong>
                            <span>{{ salarie.employeeService ? salarie.employeeService.nom : (salarie.employeeJob ? salarie.employeeJob.nom : 'Employé') }}</span>
                        </div>
                    </div>

                    {% for column in calendar.columns %}
                        {% if column.type == 'week' %}
                            {% set week_minutes = row.weekTotals[column.weekKey]|default(0) %}
                            <div class="planning-month-table__week-total">{{ (week_minutes / 60)|number_format(week_minutes % 60 == 0 ? 0 : 1, ',', ' ') }}h</div>
                        {% else %}
                            {% set day_key = column.key %}
                            {% set cell = row.cells[day_key] %}
                            {% set editable_schedule = calendar.editableScheduleByDate[day_key]|default(null) %}
                            <div class="planning-month-table__cell {{ column.isWeekend ? 'is-weekend' : '' }}"
                                {% if editable_schedule %}
                                    data-planning-drag-target="cell"
                                    data-date="{{ day_key }}"
                                    data-salarie-id="{{ salarie.id }}"
                                    data-cell-modal-url="{{ path('planning_schedule_cell_modal', {id: editable_schedule.id, date: day_key, salarieId: salarie.id, returnToWeek: 1}) }}"
                                    data-action="click->planning-drag#openCellModal dragover->planning-drag#allowDrop dragleave->planning-drag#leaveDrop drop->planning-drag#drop"
                                {% endif %}
                            >
                                {% if cell.leaves is not empty %}
                                    {% set leave = cell.leaves|first %}
                                    {% set leave_label = leave.leaveType ? leave.leaveType.nom|lower : '' %}
                                    {% set leave_tone = leave_label matches '/malad|arrêt/' ? 'sick' : 'leave' %}
                                    <div class="planning-month-leave planning-month-leave--{{ leave_tone }}">{{ leave_tone == 'sick' ? 'Maladie' : 'Congé' }}</div>
                                {% else %}
                                    {% for assignment in cell.assignments|slice(0, 2) %}
                                        {% set shift = assignment.shift %}
                                        {% set start_hour = shift.startTime ? shift.startTime|date('H') : '08' %}
                                        {% set tone = start_hour >= '18' or start_hour < '06' ? 'night' : (start_hour >= '12' ? 'afternoon' : 'morning') %}
                                        {% set shift_schedule = shift.schedule %}
                                        {% set shift_editable = shift_schedule and shift_schedule.status in ['draft', 'ready'] %}
                                        {% set shift_state = shift_editable ? 'draft' : 'published' %}
                                        <div class="planning-month-shift planning-month-shift--{{ tone }} planning-month-shift--{{ shift_state }}"
                                            {% if shift_editable %}
                                                draggable="true"
                                                data-planning-drag-target="shift"
                                                data-shift-id="{{ shift.id }}"
                                                data-assignment-id="{{ assignment.id }}"
                                                data-move-url="{{ path('planning_shift_move', {id: shift.id}) }}"
                                                data-edit-modal-url="{{ path('planning_shift_edit_modal', {id: shift.id, returnToWeek: 1, weekStart: shift_schedule and shift_schedule.periodStart ? shift_schedule.periodStart|date('Y-m-d') : calendar.start|date('Y-m-d')}) }}"
                                                data-csrf-token="{{ csrf_token('planning_shift_move_' ~ shift.id) }}"
                                                data-action="dragstart->planning-drag#dragStart dragend->planning-drag#dragEnd click->planning-drag#openEditModal"
                                            {% endif %}
                                        >
                                            <strong>{{ shift.startTime|date('H:i') }}-{{ shift.endTime|date('H:i') }}</strong>
                                            <span>{{ shift.title ?: (tone == 'night' ? 'Nuit' : 'Matin') }}</span>
                                        </div>
                                    {% endfor %}
                                    {% if cell.assignments|length > 2 %}
                                        <span class="planning-month-more">+{{ cell.assignments|length - 2 }}</span>
                                    {% elseif editable_schedule and cell.assignments is empty %}
                                        <button class="planning-month-empty" type="button" aria-label="Ajouter un shift">+</button>
                                    {% endif %}
                                {% endif %}
                            </div>
                        {% endif %}
                    {% endfor %}

                    <div class="planning-month-table__month-total {{ row.hasAlert ? 'is-alert' : '' }}">{{ (row.totalMinutes / 60)|number_format(row.totalMinutes % 60 == 0 ? 0 : 1, ',', ' ') }}h</div>
                </div>
            {% else %}
                <div class="planning-roster__empty">Aucun salarié actif.</div>
            {% endfor %}
        </div>

        <footer class="planning-month-table__footer">
            <div class="planning-week-table__legend">
                <span data-tone="published">Matin</span>
                <span data-tone="draft">Après-midi</span>
                <span data-tone="night">Nuit</span>
                <span data-tone="leave">Congé</span>
                <span data-tone="sick">Maladie</span>
                <span data-tone="conflict"><i class="ti ti-alert-triangle" aria-hidden="true"></i>Conflit</span>
            </div>
            <div class="planning-month-summary">
                <span>Total prévisionnel : <strong>{{ (calendar.totalMinutes / 60)|number_format(1, ',', ' ') }}h</strong></span>
                <span>Conflits : <strong>{{ conflicts|length }}</strong></span>
            </div>
        </footer>
    </section>
</div>
{% endblock %}