{% extends 'app/base.html.twig' %}

{% block title %}Plan de nettoyage/désinfection HACCP{% endblock %}

{% block body %}
{% set isFinalized = document and document.status == 'finalized' %}
{% set docId = document ? document.id : null %}
{% set formData = document ? document.form_data : {} %}

{# Zones par défaut si pas encore de données sauvegardées #}
{% set zonesDefaut = {
    'generales': {
        'titre': 'SURFACES ET ÉQUIPEMENTS GÉNÉRAUX',
        'items': [
            {zone: 'Sols, grilles, siphons',       frequence: 'Quotidien',    produit: 'Détergent/désinfectant',   realisations: []},
            {zone: 'Plans de travail',              frequence: 'Quotidien',    produit: 'Désinfectant alimentaire', realisations: []},
            {zone: 'Lave-mains, poubelles',         frequence: 'Quotidien',    produit: 'Détergent/désinfectant',   realisations: []},
            {zone: 'Portes et poignées',            frequence: 'Hebdomadaire', produit: 'Détergent/désinfectant',   realisations: []},
            {zone: 'Placards et armoires',          frequence: 'Hebdomadaire', produit: 'Détergent',                realisations: []},
            {zone: 'Murs et carrelages',            frequence: 'Hebdomadaire', produit: 'Détergent/désinfectant',   realisations: []},
        ]
    },
    'froid': {
        'titre': 'ÉQUIPEMENTS DE FROID',
        'items': [
            {zone: 'Réfrigérateur / Chambre froide positive', frequence: 'Hebdomadaire', produit: 'Détergent/désinfectant', realisations: []},
            {zone: 'Congélateur / Chambre froide négative',   frequence: 'Mensuel',       produit: 'Détergent/désinfectant', realisations: []},
            {zone: 'Cellule de refroidissement',              frequence: 'Quotidien',     produit: 'Détergent/désinfectant', realisations: []},
        ]
    },
    'cuisson': {
        'titre': 'ÉQUIPEMENTS DE CUISSON',
        'items': [
            {zone: 'Four / Plaques de cuisson', frequence: 'Quotidien',    produit: 'Dégraissant', realisations: []},
            {zone: 'Hottes et filtres',         frequence: 'Hebdomadaire', produit: 'Dégraissant', realisations: []},
            {zone: 'Friteuse',                  frequence: 'Quotidien',    produit: 'Dégraissant', realisations: []},
        ]
    },
    'lavage': {
        'titre': 'ÉQUIPEMENTS DE LAVAGE',
        'items': [
            {zone: 'Lave-vaisselle / Lave-batterie', frequence: 'Quotidien', produit: 'Détergent/désinfectant', realisations: []},
            {zone: 'Plonge manuelle',                frequence: 'Quotidien', produit: 'Détergent/désinfectant', realisations: []},
        ]
    },
    'materiels': {
        'titre': 'MATÉRIELS ET USTENSILES',
        'items': [
            {zone: 'Couteaux et planches à découper', frequence: 'Quotidien', produit: 'Désinfectant alimentaire', realisations: []},
            {zone: 'Bacs gastronormes',               frequence: 'Quotidien', produit: 'Détergent/désinfectant',   realisations: []},
            {zone: 'Balance',                         frequence: 'Quotidien', produit: 'Détergent/désinfectant',   realisations: []},
            {zone: 'Trancheur',                       frequence: 'Quotidien', produit: 'Désinfectant alimentaire', realisations: []},
        ]
    }
} %}

{% set categories = (formData.categories is defined and formData.categories is not empty) ? formData.categories : zonesDefaut %}

<div class="d-flex justify-content-between align-items-start mb-3 flex-wrap gap-2">
    <div>
        <h1 class="h3 fw-bold page-title mb-1">
            <i class="fas fa-spray-can me-2 text-warning"></i>Plan de nettoyage/désinfection
        </h1>
        <p class="text-muted mb-0">{{ restaurantNom }} — {{ ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'][mois-1] }} {{ annee }}</p>
    </div>
    <div class="d-flex gap-2 align-items-center">
        {% if isFinalized %}
            <span class="badge bg-danger fs-6 px-3 py-2"><i class="fas fa-lock me-1"></i>Verrouillé</span>
            <a href="{{ path('tenant_haccp_formulaire_pdf', {id: docId}) }}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-file-pdf me-1"></i>Télécharger PDF
            </a>
        {% elseif docId %}
            <span class="badge bg-warning text-dark fs-6 px-3 py-2"><i class="fas fa-edit me-1"></i>Brouillon</span>
        {% endif %}
        <a href="{{ path('tenant_haccp_index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left me-1"></i>Retour
        </a>
    </div>
</div>

{# ── Navigation mois ─────────────────────────────────────────────────────── #}
<div class="d-flex align-items-center gap-2 mb-4">
    <a href="{{ path('tenant_haccp_formulaire', {type: 'nettoyage', mois: mois == 1 ? 12 : mois - 1, annee: mois == 1 ? annee - 1 : annee}) }}"
       class="btn btn-outline-secondary btn-sm"><i class="fas fa-chevron-left"></i></a>
    <span class="fw-semibold">{{ ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'][mois-1] }} {{ annee }}</span>
    <a href="{{ path('tenant_haccp_formulaire', {type: 'nettoyage', mois: mois == 12 ? 1 : mois + 1, annee: mois == 12 ? annee + 1 : annee}) }}"
       class="btn btn-outline-secondary btn-sm"><i class="fas fa-chevron-right"></i></a>
</div>

<form id="formNettoyage" novalidate>
    <input type="hidden" name="document_id" value="{{ docId }}">
    <input type="hidden" name="mois" value="{{ mois }}">
    <input type="hidden" name="annee" value="{{ annee }}">

    <div class="card border-0 shadow-sm mb-3">
        <div class="card-body py-2">
            <div class="col-md-4">
                <label class="form-label small fw-semibold">Responsable</label>
                <input type="text" name="responsable" class="form-control form-control-sm"
                       value="{{ formData.responsable ?? '' }}" {% if isFinalized %}readonly{% endif %}>
            </div>
        </div>
    </div>

    {# ── Tableau par catégorie ─────────────────────────────────────────────── #}
    {% for catKey, cat in categories %}
    <div class="card border-0 shadow-sm mb-3" id="cat-{{ catKey }}">
        <div class="card-header bg-success text-white fw-semibold py-2 small text-uppercase d-flex justify-content-between align-items-center">
            <span>{{ cat.titre }}</span>
            {% if not isFinalized %}
            <button type="button" class="btn btn-sm btn-light text-success fw-semibold"
                    onclick="ajouterEquipement('{{ catKey }}')">
                <i class="fas fa-plus me-1"></i>Ajouter équipement
            </button>
            {% endif %}
        </div>
        <div class="card-body p-0">
            <table class="table table-bordered table-sm align-middle mb-0" id="table-{{ catKey }}">
                <thead class="table-secondary">
                    <tr>
                        <th style="width:23%">Zone / Équipement</th>
                        <th style="width:13%">Fréquence</th>
                        <th style="width:16%">Produit utilisé</th>
                        <th style="width:10%">Date</th>
                        <th style="width:13%">Responsable</th>
                        <th>Observations</th>
                        {% if not isFinalized %}<th style="width:4%" class="text-center">×</th>{% endif %}
                    </tr>
                </thead>
                <tbody>
                    {% for i, item in cat.items %}
                    {# Rétrocompatibilité : ancien format sans réalisations #}
                    {% set realisations = item.realisations is defined ? item.realisations : (item.fait is defined ? [{date: item.date_realisation ?? '', responsable: '', observations: item.observation ?? ''}] : []) %}
                    {# Ligne équipement - éditable #}
                    <tr class="table-light equipement-header-row" data-cat="{{ catKey }}" data-idx="{{ i }}">
                        <td>
                            <input type="text" class="form-control form-control-sm fw-semibold"
                                   name="categories[{{ catKey }}][items][{{ i }}][zone]"
                                   value="{{ item.zone }}"
                                   placeholder="Nom équipement"
                                   {% if isFinalized %}readonly{% endif %}>
                        </td>
                        <td>
                            {% if isFinalized %}
                                <span class="badge bg-info text-dark">{{ item.frequence }}</span>
                                <input type="hidden" name="categories[{{ catKey }}][items][{{ i }}][frequence]" value="{{ item.frequence }}">
                            {% else %}
                                <select name="categories[{{ catKey }}][items][{{ i }}][frequence]" class="form-select form-select-sm">
                                    {% for opt in ['Quotidien','Hebdomadaire','Mensuel','Après chaque utilisation'] %}
                                    <option value="{{ opt }}" {% if item.frequence == opt %}selected{% endif %}>{{ opt }}</option>
                                    {% endfor %}
                                </select>
                            {% endif %}
                        </td>
                        <td>
                            <input type="text" class="form-control form-control-sm"
                                   name="categories[{{ catKey }}][items][{{ i }}][produit]"
                                   value="{{ item.produit }}"
                                   placeholder="Produit..."
                                   {% if isFinalized %}readonly{% endif %}>
                        </td>
                        <td colspan="3" class="ps-2">
                            <input type="hidden" name="categories[{{ catKey }}][titre]" value="{{ cat.titre }}">
                            {% if not isFinalized %}
                            <button type="button" class="btn btn-sm btn-outline-success py-0 px-2"
                                    onclick="ajouterRealisation('{{ catKey }}', {{ i }})">
                                <i class="fas fa-plus me-1"></i>Réalisation
                            </button>
                            {% endif %}
                        </td>
                        {% if not isFinalized %}
                        <td class="text-center">
                            <button type="button" class="btn btn-sm btn-outline-danger py-0 px-2"
                                    onclick="supprimerEquipement(this)" title="Supprimer cet équipement">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </td>
                        {% endif %}
                    </tr>
                    {# Lignes réalisations #}
                    {% if realisations is not empty %}
                        {% for j, real in realisations %}
                        <tr class="realisation-row" data-cat="{{ catKey }}" data-item="{{ i }}">
                            <td class="text-muted small ps-3">└─ Intervention #{{ j + 1 }}</td>
                            <td></td>
                            <td></td>
                            <td>
                                <input type="date" class="form-control form-control-sm"
                                       name="categories[{{ catKey }}][items][{{ i }}][realisations][{{ j }}][date]"
                                       value="{{ real.date ?? '' }}"
                                       {% if isFinalized %}readonly{% endif %}>
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm"
                                       name="categories[{{ catKey }}][items][{{ i }}][realisations][{{ j }}][responsable]"
                                       value="{{ real.responsable ?? '' }}"
                                       placeholder="Prénom..."
                                       {% if isFinalized %}readonly{% endif %}>
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm"
                                       name="categories[{{ catKey }}][items][{{ i }}][realisations][{{ j }}][observations]"
                                       value="{{ real.observations ?? '' }}"
                                       placeholder="Observations..."
                                       {% if isFinalized %}readonly{% endif %}>
                            </td>
                            {% if not isFinalized %}
                            <td class="text-center">
                                <button type="button" class="btn btn-sm btn-outline-danger py-0 px-1"
                                        onclick="supprimerRealisation(this)" title="Supprimer">
                                    <i class="fas fa-times"></i>
                                </button>
                            </td>
                            {% endif %}
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr class="realisation-empty-row" data-cat="{{ catKey }}" data-item="{{ i }}">
                            <td colspan="{% if not isFinalized %}7{% else %}6{% endif %}" class="text-muted small fst-italic ps-4">
                                Aucune réalisation enregistrée
                            </td>
                        </tr>
                    {% endif %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endfor %}

    {# ── Signature ─────────────────────────────────────────────────────────── #}
    {% include 'app/haccp/_signature.html.twig' with {formData: formData, isFinalized: isFinalized} %}

    {% if not isFinalized %}
    <div class="d-flex gap-2 mt-3">
        <button type="button" class="btn btn-warning" onclick="sauvegarder('draft')">
            <i class="fas fa-save me-1"></i>Enregistrer brouillon
        </button>
        <button type="button" class="btn btn-success" onclick="sauvegarder('finalized')">
            <i class="fas fa-lock me-1"></i>Finaliser
        </button>
        {% if docId %}
        <a href="{{ path('tenant_haccp_formulaire_pdf', {id: docId}) }}" class="btn btn-outline-secondary">
            <i class="fas fa-file-pdf me-1"></i>PDF
        </a>
        {% endif %}
    </div>
    <div id="saveMsg" class="mt-3" style="display:none"></div>
    {% endif %}
</form>

{% if not isFinalized %}
<script>
const csrfToken = '{{ csrf_token('haccp_form_nettoyage') }}';
const saveUrl   = '{{ path('tenant_haccp_formulaire_sauvegarder', {type: 'nettoyage'}) }}';
const indexUrl  = '{{ path('tenant_haccp_index') }}';
const today = new Date().toISOString().split('T')[0];

function ajouterRealisation(catKey, itemIdx) {
    const table = document.getElementById('table-' + catKey);
    const tbody = table.querySelector('tbody');
    // Supprimer la ligne "Aucune réalisation" si présente
    tbody.querySelectorAll(`.realisation-empty-row[data-cat="${catKey}"][data-item="${itemIdx}"]`)
         .forEach(r => r.remove());
    const existing = tbody.querySelectorAll(`.realisation-row[data-cat="${catKey}"][data-item="${itemIdx}"]`);
    const j = existing.length;
    const colCount = table.querySelectorAll('thead th').length;
    const tr = document.createElement('tr');
    tr.className = 'realisation-row';
    tr.dataset.cat  = catKey;
    tr.dataset.item = itemIdx;
    tr.innerHTML = `
        <td class="text-muted small ps-3">└─ Intervention #${j + 1}</td>
        <td></td><td></td>
        <td><input type="date" class="form-control form-control-sm"
                   name="categories[${catKey}][items][${itemIdx}][realisations][${j}][date]"
                   value="${today}"></td>
        <td><input type="text" class="form-control form-control-sm"
                   name="categories[${catKey}][items][${itemIdx}][realisations][${j}][responsable]"
                   placeholder="Prénom..."></td>
        <td><input type="text" class="form-control form-control-sm"
                   name="categories[${catKey}][items][${itemIdx}][realisations][${j}][observations]"
                   placeholder="Observations..."></td>
        <td class="text-center">
            <button type="button" class="btn btn-sm btn-outline-danger py-0 px-1"
                    onclick="supprimerRealisation(this)" title="Supprimer">
                <i class="fas fa-times"></i>
            </button>
        </td>`;
    // Insérer après la dernière réalisation existante, ou après la ligne équipement
    const siblings = tbody.querySelectorAll(`.realisation-row[data-cat="${catKey}"][data-item="${itemIdx}"]`);
    const refRow = siblings.length > 0
        ? siblings[siblings.length - 1]
        : tbody.querySelector(`.equipement-header-row[data-cat="${catKey}"][data-idx="${itemIdx}"]`);
    refRow.after(tr);
}

function supprimerRealisation(btn) {
    const tr = btn.closest('tr');
    const catKey  = tr.dataset.cat;
    const itemIdx = tr.dataset.item;
    tr.remove();
    const table = document.getElementById('table-' + catKey);
    const tbody = table.querySelector('tbody');
    const remaining = tbody.querySelectorAll(`.realisation-row[data-cat="${catKey}"][data-item="${itemIdx}"]`);
    if (remaining.length === 0) {
        const equipRow = tbody.querySelector(`.equipement-header-row[data-cat="${catKey}"][data-idx="${itemIdx}"]`);
        const colCount = table.querySelectorAll('thead th').length;
        const emptyTr = document.createElement('tr');
        emptyTr.className = 'realisation-empty-row';
        emptyTr.dataset.cat  = catKey;
        emptyTr.dataset.item = itemIdx;
        emptyTr.innerHTML = `<td colspan="${colCount}" class="text-muted small fst-italic ps-4">Aucune réalisation enregistrée</td>`;
        equipRow.after(emptyTr);
    }
    renumeroterRealisations(catKey, itemIdx);
}

function renumeroterRealisations(catKey, itemIdx) {
    const tbody = document.getElementById('table-' + catKey).querySelector('tbody');
    tbody.querySelectorAll(`.realisation-row[data-cat="${catKey}"][data-item="${itemIdx}"]`)
         .forEach((row, j) => {
             row.querySelector('td:first-child').textContent = `└─ Intervention #${j + 1}`;
             row.querySelectorAll('input').forEach(inp => {
                 inp.name = inp.name.replace(/\[realisations\]\[\d+\]/, `[realisations][${j}]`);
             });
         });
}

function ajouterEquipement(catKey) {
    const table = document.getElementById('table-' + catKey);
    const tbody = table.querySelector('tbody');
    const colCount = table.querySelectorAll('thead th').length;
    const existing = tbody.querySelectorAll(`.equipement-header-row[data-cat="${catKey}"]`);
    const i = existing.length;
    const trEquip = document.createElement('tr');
    trEquip.className = 'table-light equipement-header-row';
    trEquip.dataset.cat = catKey;
    trEquip.dataset.idx = i;
    trEquip.innerHTML = `
        <td><input type="text" class="form-control form-control-sm fw-semibold"
                   name="categories[${catKey}][items][${i}][zone]"
                   placeholder="Nom équipement"></td>
        <td><select name="categories[${catKey}][items][${i}][frequence]" class="form-select form-select-sm">
            <option value="Quotidien">Quotidien</option>
            <option value="Hebdomadaire">Hebdomadaire</option>
            <option value="Mensuel">Mensuel</option>
            <option value="Après chaque utilisation">Après chaque utilisation</option>
        </select></td>
        <td><input type="text" class="form-control form-control-sm"
                   name="categories[${catKey}][items][${i}][produit]"
                   placeholder="Produit..."></td>
        <td colspan="3" class="ps-2">
            <button type="button" class="btn btn-sm btn-outline-success py-0 px-2"
                    onclick="ajouterRealisation('${catKey}', ${i})">
                <i class="fas fa-plus me-1"></i>Réalisation
            </button>
        </td>
        <td class="text-center">
            <button type="button" class="btn btn-sm btn-outline-danger py-0 px-2"
                    onclick="supprimerEquipement(this)" title="Supprimer">
                <i class="fas fa-trash-alt"></i>
            </button>
        </td>`;
    tbody.appendChild(trEquip);
    const trEmpty = document.createElement('tr');
    trEmpty.className = 'realisation-empty-row';
    trEmpty.dataset.cat  = catKey;
    trEmpty.dataset.item = i;
    trEmpty.innerHTML = `<td colspan="${colCount}" class="text-muted small fst-italic ps-4">Aucune réalisation enregistrée</td>`;
    tbody.appendChild(trEmpty);
}

function supprimerEquipement(btn) {
    const equipRow = btn.closest('.equipement-header-row');
    const catKey   = equipRow.dataset.cat;
    const itemIdx  = equipRow.dataset.idx;
    const tbody    = equipRow.closest('tbody');
    tbody.querySelectorAll(`[data-cat="${catKey}"][data-item="${itemIdx}"]`).forEach(r => r.remove());
    equipRow.remove();
    renumeroterEquipements(catKey);
}

function renumeroterEquipements(catKey) {
    const tbody = document.getElementById('table-' + catKey).querySelector('tbody');
    const equipRows = tbody.querySelectorAll(`.equipement-header-row[data-cat="${catKey}"]`);
    equipRows.forEach((row, i) => {
        const oldIdx = row.dataset.idx;
        if (oldIdx == i) return;
        row.dataset.idx = i;
        row.querySelectorAll('input, select').forEach(inp => {
            inp.name = inp.name.replace(`[items][${oldIdx}]`, `[items][${i}]`);
        });
        tbody.querySelectorAll(`[data-item="${oldIdx}"][data-cat="${catKey}"]`).forEach(tr => {
            tr.dataset.item = i;
            tr.querySelectorAll('input').forEach(inp => {
                inp.name = inp.name.replace(`[items][${oldIdx}]`, `[items][${i}]`);
            });
        });
    });
}

function renumeroterNettoyage() {
    document.querySelectorAll('.equipement-header-row').forEach(row => {
        renumeroterEquipements(row.dataset.cat);
    });
}

async function sauvegarder(status) {
    renumeroterNettoyage();
    const form = document.getElementById('formNettoyage');
    const data = new FormData(form);
    data.set('status', status);
    data.set('_token', csrfToken);
    if (status === 'finalized') {
        const nomEl  = document.querySelector('[name="signature_nom"]');
        const dateEl = document.querySelector('[name="signature_date"]');
        const certEl = document.getElementById('signCertif');
        if (!nomEl?.value.trim() || !dateEl?.value || !certEl?.checked) {
            afficherMsg('error', 'Signature complète obligatoire pour finaliser.'); return;
        }
        if (!confirm('Finaliser ce document ? Il sera verrouillé.')) return;
    }
    try {
        const resp = await fetch(saveUrl, {method: 'POST', body: data});
        const json = await resp.json();
        if (json.success) {
            if (json.document_id) document.querySelector('[name="document_id"]').value = json.document_id;
            if (status === 'draft') {
                window.location.href = indexUrl;
            } else {
                afficherMsg('success', json.message);
                setTimeout(() => location.reload(), 1200);
            }
        } else { afficherMsg('error', json.message ?? 'Erreur.'); }
    } catch(e) { afficherMsg('error', 'Erreur réseau.'); }
}

function afficherMsg(type, msg) {
    const el = document.getElementById('saveMsg');
    el.innerHTML = `<div class="alert alert-${type === 'success' ? 'success' : 'danger'} border-0 py-2">${msg}</div>`;
    el.style.display = 'block';
    if (type === 'success') setTimeout(() => el.style.display = 'none', 3000);
}
</script>
{% endif %}
{% endblock %}