{% extends 'base.html.twig' %}
{#
  ══════════════════════════════════════════════════════════════════
  Template — Planning mensuel
  ══════════════════════════════════════════════════════════════════
  Affiche tous les employés actifs en lignes (3 sous-lignes chacun)
  et les jours du mois en colonnes, à la manière du Google Sheet.

  Pour chaque employé / chaque jour :
    - Ligne 1 : prix de la prestation (admins uniquement)
    - Ligne 2 : observation  → Pointage.notes  à la sauvegarde
    - Ligne 3 : site         → Pointage.chantier à la sauvegarde

  Droits :
    - ROLE_USER  : voit tout sauf le prix, lecture seule
    - ROLE_ADMIN : voit et modifie tout (prix, statut, observation, site)

  Variables attendues :
    users    : User[]          — employés actifs triés par nom
    jours    : array[]         — [{date, dateStr, dow, isWeekend, isFerie}]
    planning : array           — [userId][dateStr] => PlanningJour|null
    year     : int
    month    : int
    isAdmin  : bool
    statuts  : StatutPointage[]
  ══════════════════════════════════════════════════════════════════
#}

{% block title %}Planning — {{ month|mois_nom }} {{ year }}{% endblock %}
{% block page_title %}Planning mensuel{% endblock %}

{% set moisNoms = {1:'Janvier',2:'Fevrier',3:'Mars',4:'Avril',5:'Mai',6:'Juin',
                   7:'Juillet',8:'Aout',9:'Septembre',10:'Octobre',11:'Novembre',12:'Decembre'} %}
{% set jourCourtsFr = {'1':'L','2':'M','3':'M','4':'J','5':'V','6':'S','7':'D'} %}

{% block body %}

{# ── Navigation mois ── #}
<div class="d-flex flex-wrap align-items-center gap-2 mb-3">
    {% set prevMonth = month - 1 %}{% set prevYear = year %}
    {% if prevMonth < 1 %}{% set prevMonth = 12 %}{% set prevYear = year - 1 %}{% endif %}
    {% set nextMonth = month + 1 %}{% set nextYear = year %}
    {% if nextMonth > 12 %}{% set nextMonth = 1 %}{% set nextYear = year + 1 %}{% endif %}

    {% set navRoute = canEdit ? 'app_planning' : 'app_planning_view' %}
    <a href="{{ path(navRoute, {year: prevYear, month: prevMonth}) }}"
       class="btn btn-sm btn-outline-secondary print-hidden"><i class="bi bi-chevron-left"></i></a>
    <a href="{{ path(navRoute, {year: nextYear, month: nextMonth}) }}"
       class="btn btn-sm btn-outline-secondary print-hidden"><i class="bi bi-chevron-right"></i></a>

    <h5 class="mb-0 fw-bold ms-1">
        <i class="bi bi-calendar2-week me-2 text-primary d-none d-sm-inline"></i>
        {{ moisNoms[month] }} {{ year }}
    </h5>

    <div class="ms-auto">
        <a href="{{ path('app_planning_pdf', {year: year, month: month}) }}"
           class="btn btn-sm btn-danger btn-export-pdf d-inline-flex align-items-center gap-1 print-hidden">
            <i class="bi bi-file-earmark-pdf"></i><span class="d-none d-sm-inline">Exporter PDF</span>
        </a>
    </div>
</div>

{# ── En-tête visible uniquement à l'impression ── #}
<div class="d-none d-print-block mb-2" style="border-bottom:2px solid #79b92c; padding-bottom:4px;">
    <strong style="font-size:1rem;">Planning — {{ moisNoms[month] }} {{ year }}</strong>
    <span style="font-size:.75rem; color:#555; float:right;">Culture Controle — Imprimé le {{ "now"|date("d/m/Y") }}</span>
</div>

{# ── Tableau planning ── #}
<div class="card card-planning mb-3 p-0">
    <div class="card-body p-0">
        <div class="table-responsive planning-scroll">
        <form id="form-planning" method="post" action="{{ path('app_planning', {year: year, month: month}) }}">
        <input type="hidden" name="_token" value="{{ csrf_token('planning_save_' ~ year ~ '_' ~ month) }}">

        <table class="table table-sm table-bordered mb-0 table-planning">
            {# Colgroup : définit les largeurs de façon autoritaire pour table-layout:fixed #}
            <colgroup>
                <col style="width:160px; min-width:160px;">
                <col style="width:32px;  min-width:32px;">
                {% for jour in jours %}<col style="width:95px; min-width:90px;">{% endfor %}
            </colgroup>
            {# ── En-tête jours ── #}
            <thead>
                {# Ligne 0 : numéros de semaine ISO (cellules fusionnées sur les jours de la semaine) #}
                {% set weekGroups = [] %}
                {% set currentWeek = null %}
                {% set currentCount = 0 %}
                {% for jour in jours %}
                    {% set w = jour.date|date('W') %}
                    {% if w != currentWeek %}
                        {% if currentWeek is not null %}
                            {% set weekGroups = weekGroups|merge([{week: currentWeek, count: currentCount}]) %}
                        {% endif %}
                        {% set currentWeek = w %}
                        {% set currentCount = 1 %}
                    {% else %}
                        {% set currentCount = currentCount + 1 %}
                    {% endif %}
                {% endfor %}
                {% if currentWeek is not null %}
                    {% set weekGroups = weekGroups|merge([{week: currentWeek, count: currentCount}]) %}
                {% endif %}
                <tr>
                    <th class="planning-col-name" rowspan="3">Employé</th>
                    <th class="planning-col-label" rowspan="3"></th>
                    {% for wg in weekGroups %}
                    <th colspan="{{ wg.count }}" class="planning-th-week">S{{ wg.week }}</th>
                    {% endfor %}
                </tr>
                {# Ligne 1 : noms courts des jours #}
                <tr>
                    {% for jour in jours %}
                    <th class="text-center planning-col-day {{ jour.isWeekend ? 'planning-th-weekend' : (jour.isFerie ? 'planning-th-ferie' : '') }}">
                        {{ jourCourtsFr[jour.dow] }}
                    </th>
                    {% endfor %}
                </tr>
                {# Ligne 2 : numéros des jours #}
                <tr>
                    {% for jour in jours %}
                    <th class="text-center planning-col-day {{ jour.isWeekend ? 'planning-th-weekend' : (jour.isFerie ? 'planning-th-ferie' : '') }}">
                        {{ jour.date|date('d') }}
                    </th>
                    {% endfor %}
                </tr>
            </thead>

            {# ── Corps — un bloc de 3 lignes par employé ── #}
            <tbody>
            {% for user in users %}
            {# Calculer le statut par défaut de chaque jour pour cet employé #}

            {# ── Ligne 1 : Prix (admin) ── #}
            <tr class="planning-row-prix">
                <td class="planning-col-name fw-semibold" rowspan="3">
                    <div class="planning-name-text" title="{{ user.nomComplet }}">{{ user.nomComplet }}</div>
                </td>
                <td class="planning-col-label">{% if isAdmin %}Prix{% endif %}</td>
                {% for jour in jours %}
                    {% set pj = planning[user.id][jour.dateStr] ?? null %}
                    {% set statutVal = pj ? pj.statut.value : (jour.isWeekend ? 'weekend' : (jour.isFerie ? 'ferie' : 'travaille')) %}
                    {% set couleur = (pj and pj.couleur and statutVal == 'travaille') ? pj.couleur : null %}
                    <td class="planning-cell{% if not couleur %} planning-{{ statutVal }}{% endif %}"
                        data-user="{{ user.id }}" data-date="{{ jour.dateStr }}"
                        {% if couleur %}style="background:{{ couleur }};"{% endif %}>
                        {% if canEdit %}
                        {# Statut select — visible uniquement dans la ligne prix #}
                        <select name="planning[{{ user.id }}][{{ jour.dateStr }}][statut]"
                                class="form-select form-select-sm planning-statut-select mb-1 p-0"
                                style="font-size:.65rem; height:auto;"
                                data-user="{{ user.id }}" data-date="{{ jour.dateStr }}">
                            {% for s in statuts %}
                            <option value="{{ s.value }}" {{ s.value == statutVal ? 'selected' : '' }}>{{ s.label }}</option>
                            {% endfor %}
                        </select>
                        {# Texte du statut affiché uniquement à l'impression (masqué à l'écran) #}
                        <span class="planning-text d-none d-print-block">
                            {% for s in statuts %}{% if s.value == statutVal %}{{ s.label }}{% endif %}{% endfor %}
                        </span>
                        <div class="planning-color-row{% if statutVal != 'travaille' %} d-none{% endif %}">
                            <input type="color"
                                   name="planning[{{ user.id }}][{{ jour.dateStr }}][couleur]"
                                   class="planning-color-input"
                                   value="{{ couleur ?? '#ffffff' }}"
                                   title="Couleur du site"
                                   data-user="{{ user.id }}" data-date="{{ jour.dateStr }}">
                        </div>
                        <input type="number" name="planning[{{ user.id }}][{{ jour.dateStr }}][prix]"
                               class="form-control form-control-sm planning-input mt-1"
                               value="{{ pj and pj.prix is not null ? pj.prix : '' }}"
                               min="0" step="0.01" placeholder="—">
                        {% elseif isAdmin %}
                        {# Admin lecture seule : statut + prix #}
                        <span class="planning-text small text-muted">{{ pj ? pj.statut.label : (jour.isWeekend ? 'Week-end' : (jour.isFerie ? 'Férié' : '')) }}</span>
                        {% if pj and pj.prix is not null %}<span class="d-block fw-semibold" style="font-size:.68rem">{{ pj.prix }} €</span>{% endif %}
                        {% else %}
                        {# Utilisateur : statut visible, prix masqué #}
                        <span class="planning-text small text-muted">{{ pj ? pj.statut.label : (jour.isWeekend ? 'Week-end' : (jour.isFerie ? 'Férié' : '')) }}</span>
                        {% endif %}
                    </td>
                {% endfor %}
            </tr>

            {# ── Ligne 2 : Lieu/Site ── #}
            <tr class="planning-row-site">
                <td class="planning-col-label">Lieu</td>
                {% for jour in jours %}
                    {% set pj = planning[user.id][jour.dateStr] ?? null %}
                    {% set statutVal = pj ? pj.statut.value : (jour.isWeekend ? 'weekend' : (jour.isFerie ? 'ferie' : 'travaille')) %}
                    {% set couleur = (pj and pj.couleur and statutVal == 'travaille') ? pj.couleur : null %}
                    <td class="planning-cell{% if not couleur %} planning-{{ statutVal }}{% endif %}"
                        data-user="{{ user.id }}" data-date="{{ jour.dateStr }}"
                        {% if couleur %}style="background:{{ couleur }};"{% endif %}>
                        {% if canEdit %}
                        <input type="text" name="planning[{{ user.id }}][{{ jour.dateStr }}][site]"
                               class="form-control form-control-sm planning-input"
                               value="{{ pj ? (pj.site ?? '') : '' }}"
                               placeholder="Lieu…" maxlength="100">
                        <span class="planning-text d-none d-print-block">{{ pj ? (pj.site ?? '') : '' }}</span>
                        {% else %}
                        <span class="planning-text">{{ pj ? (pj.site ?? '') : '' }}</span>
                        {% endif %}
                    </td>
                {% endfor %}
            </tr>

            {# ── Ligne 3 : Observation ── #}
            <tr class="planning-row-obs">
                <td class="planning-col-label">Obs</td>
                {% for jour in jours %}
                    {% set pj = planning[user.id][jour.dateStr] ?? null %}
                    {% set statutVal = pj ? pj.statut.value : (jour.isWeekend ? 'weekend' : (jour.isFerie ? 'ferie' : 'travaille')) %}
                    {% set couleur = (pj and pj.couleur and statutVal == 'travaille') ? pj.couleur : null %}
                    <td class="planning-cell{% if not couleur %} planning-{{ statutVal }}{% endif %}"
                        data-user="{{ user.id }}" data-date="{{ jour.dateStr }}"
                        {% if couleur %}style="background:{{ couleur }};"{% endif %}>
                        {% if canEdit %}
                        <textarea name="planning[{{ user.id }}][{{ jour.dateStr }}][observation]"
                                  class="form-control form-control-sm planning-input textarea-notes"
                                  placeholder="Obs…"
                                  maxlength="255">{{ pj ? (pj.observation ?? '') : '' }}</textarea>
                        <span class="planning-text d-none d-print-block">{{ pj ? (pj.observation ?? '') : '' }}</span>
                        {% else %}
                        <span class="planning-text">{{ pj ? (pj.observation ?? '') : '' }}</span>
                        {% endif %}
                    </td>
                {% endfor %}
            </tr>

            {# Ligne séparateur entre employés #}
            <tr class="planning-separator"><td colspan="{{ jours|length + 2 }}"></td></tr>

            {% else %}
            <tr><td colspan="{{ jours|length + 2 }}" class="text-center text-muted py-3">Aucun employé actif.</td></tr>
            {% endfor %}
            </tbody>
        </table>
        </form>
        </div>
    </div>
</div>

{# Bouton flottant sauvegarde #}
{% if canEdit %}
<button type="submit" form="form-planning" class="btn btn-success btn-save-float">
    <i class="bi bi-floppy me-2"></i>Sauvegarder
</button>
{% endif %}

{% endblock %}

{% block javascripts %}
<script>
const STATUTS = ['travaille','teletravail','formation','conge','maladie','absent','ferie','weekend'];

function applyCellColor(userId, date, statut, couleur) {
    const cells = document.querySelectorAll(
        `.planning-cell[data-user="${userId}"][data-date="${date}"]`
    );
    cells.forEach(cell => {
        if (statut === 'travaille' && couleur) {
            // Couleur personnalisée : retirer les classes CSS et appliquer le style inline
            STATUTS.forEach(s => cell.classList.remove('planning-' + s));
            cell.style.background = couleur;
        } else {
            // Couleur statut : retirer le style inline et appliquer la classe
            cell.style.background = '';
            STATUTS.forEach(s => cell.classList.remove('planning-' + s));
            cell.classList.add('planning-' + statut);
        }
    });
}

// Quand le statut change : mettre à jour couleurs + afficher/masquer le color picker
document.querySelectorAll('.planning-statut-select').forEach(sel => {
    sel.addEventListener('change', function () {
        const userId = this.dataset.user;
        const date   = this.dataset.date;
        const statut = this.value;

        // Afficher le color picker uniquement pour "travaille"
        const colorRow = this.closest('td').querySelector('.planning-color-row');
        if (colorRow) {
            colorRow.classList.toggle('d-none', statut !== 'travaille');
        }

        // Lire la couleur courante du picker
        const colorInput = this.closest('td').querySelector('.planning-color-input');
        const couleur = (statut === 'travaille' && colorInput) ? colorInput.value : null;

        applyCellColor(userId, date, statut, couleur);
    });
});

// Quand la couleur change : répercuter sur les 3 cellules
document.querySelectorAll('.planning-color-input').forEach(input => {
    input.addEventListener('input', function () {
        const userId = this.dataset.user;
        const date   = this.dataset.date;
        applyCellColor(userId, date, 'travaille', this.value);
    });
});

// Auto-resize des textareas d'observation dans le planning
function autoResizeTextarea(ta) {
    ta.style.height = 'auto';
    ta.style.height = ta.scrollHeight + 'px';
}
document.querySelectorAll('.planning-input.textarea-notes').forEach(ta => {
    autoResizeTextarea(ta);
    ta.addEventListener('input', () => autoResizeTextarea(ta));
});
</script>
{% endblock %}