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

{% block title %}Relevé de températures HACCP{% endblock %}

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

<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-thermometer-half me-2 text-primary"></i>Relevé de températures
        </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>

{% if equipements is empty %}
<div class="alert alert-warning border-0">
    <i class="fas fa-exclamation-triangle me-2"></i>
    <strong>Aucun équipement configuré.</strong>
    <a href="{{ path('tenant_haccp_equipements') }}" class="alert-link">Configurez vos équipements →</a>
</div>
{% else %}

{# ── Navigation mois/année ────────────────────────────────────────────────── #}
<div class="d-flex align-items-center gap-2 mb-4">
    <a href="{{ path('tenant_haccp_formulaire', {type: 'temperature', 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: 'temperature', 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="formTemperature" {% if not isFinalized %}novalidate{% endif %}>
    <input type="hidden" name="document_id" value="{{ docId }}">
    <input type="hidden" name="mois" value="{{ mois }}">
    <input type="hidden" name="annee" value="{{ annee }}">

    {# ── Responsable ────────────────────────────────────────────────────── #}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <div class="row g-3 align-items-end">
                <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>
    </div>

    {# ── Tableau des relevés ─────────────────────────────────────────────── #}
    {% set joursData = formData.equipements ?? {} %}
    {% for eq in equipements %}
    <div class="card border-0 shadow-sm mb-3">
        <div class="card-header bg-primary bg-opacity-10 fw-semibold py-2 d-flex justify-content-between align-items-center">
            <span>
                <i class="fas fa-thermometer-half me-2 text-primary"></i>{{ eq.nom }}
                {% if eq.type is defined %}<span class="badge bg-secondary ms-2 fw-normal" style="font-size:0.7rem">{{ eq.type }}</span>{% endif %}
                {% if eq.zone is defined and eq.zone %}<span class="text-muted small ms-2">— {{ eq.zone }}</span>{% endif %}
            </span>
            {% if eq.temperature_min is not null %}
            <span class="small text-muted">Seuils : <strong>{{ eq.temperature_min }}°C</strong> → <strong>{{ eq.temperature_max }}°C</strong></span>
            {% endif %}
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-bordered table-sm align-middle mb-0">
                    <thead>
                        <tr class="table-dark">
                            <th class="text-center" style="width:42px">Jour</th>
                            {% for jour in 1..31 %}
                            <th class="text-center p-0" style="min-width:60px">{{ jour }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {# Ligne Arrivée #}
                        <tr>
                            <td class="text-center small fw-semibold bg-light">Arr.</td>
                            {% for jour in 1..31 %}
                            {% set valArr = joursData[eq.id ~ '_' ~ jour ~ '_arrivee'] ?? '' %}
                            <td class="p-0 text-center">
                                <input type="number" step="0.1"
                                       name="equipements[{{ eq.id }}_{{ jour }}_arrivee]"
                                       class="form-control form-control-sm text-center temp-input p-0 border-0"
                                       style="width:58px;min-width:58px;margin:auto;font-size:0.8rem"
                                       data-min="{{ eq.temperature_min }}" data-max="{{ eq.temperature_max }}"
                                       value="{{ valArr }}"
                                       {% if isFinalized %}readonly{% endif %}
                                       placeholder="—">
                            </td>
                            {% endfor %}
                        </tr>
                        {# Ligne Départ #}
                        <tr>
                            <td class="text-center small fw-semibold bg-light">Dép.</td>
                            {% for jour in 1..31 %}
                            {% set valDep = joursData[eq.id ~ '_' ~ jour ~ '_depart'] ?? '' %}
                            <td class="p-0 text-center">
                                <input type="number" step="0.1"
                                       name="equipements[{{ eq.id }}_{{ jour }}_depart]"
                                       class="form-control form-control-sm text-center temp-input p-0 border-0"
                                       style="width:58px;min-width:58px;margin:auto;font-size:0.8rem"
                                       data-min="{{ eq.temperature_min }}" data-max="{{ eq.temperature_max }}"
                                       value="{{ valDep }}"
                                       {% if isFinalized %}readonly{% endif %}
                                       placeholder="—">
                            </td>
                            {% endfor %}
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        {# ── Observations / Incidents ────────────────────────────────── #}
        <div class="card-footer bg-white border-top pt-3 pb-3">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="small fw-semibold text-secondary"><i class="fas fa-exclamation-circle me-1 text-warning"></i>Observations &amp; incidents du mois</span>
                {% if not isFinalized %}
                <button type="button" class="btn btn-outline-secondary btn-sm py-0 px-2"
                        onclick="ajouterObs(this, '{{ eq.id }}')"
                        style="font-size:0.75rem">
                    <i class="fas fa-plus me-1"></i>Ajouter
                </button>
                {% endif %}
            </div>
            <table class="table table-sm table-bordered mb-0 obs-table" data-eq="{{ eq.id }}" style="font-size:0.82rem">
                <thead class="table-light">
                    <tr>
                        <th style="width:55px" class="text-center">Jour</th>
                        <th>Observation / Anomalie</th>
                        <th>Action corrective</th>
                        {% if not isFinalized %}<th style="width:36px"></th>{% endif %}
                    </tr>
                </thead>
                <tbody>
                    {# Lignes sauvegardées #}
                    {% set obsList = joursData[eq.id ~ '_obs'] ?? [] %}
                    {% if obsList is not empty and obsList is iterable %}
                        {% for obs in obsList %}
                        <tr>
                            <td class="text-center">
                                <input type="number" min="1" max="31"
                                       name="equipements[{{ eq.id }}_obs][{{ loop.index0 }}][jour]"
                                       class="form-control form-control-sm text-center p-0 border-0"
                                       value="{{ obs.jour ?? '' }}"
                                       style="width:50px;margin:auto"
                                       {% if isFinalized %}readonly{% endif %}>
                            </td>
                            <td>
                                <input type="text"
                                       name="equipements[{{ eq.id }}_obs][{{ loop.index0 }}][observation]"
                                       class="form-control form-control-sm border-0"
                                       value="{{ obs.observation ?? '' }}"
                                       placeholder="Ex : température 8°C, panne compresseur…"
                                       {% if isFinalized %}readonly{% endif %}>
                            </td>
                            <td>
                                <input type="text"
                                       name="equipements[{{ eq.id }}_obs][{{ loop.index0 }}][action]"
                                       class="form-control form-control-sm border-0"
                                       value="{{ obs.action ?? '' }}"
                                       placeholder="Ex : appel technicien, transfert produits…"
                                       {% if isFinalized %}readonly{% endif %}>
                            </td>
                            {% if not isFinalized %}
                            <td class="text-center">
                                <button type="button" class="btn btn-link text-danger p-0" onclick="this.closest('tr').remove()" title="Supprimer"><i class="fas fa-times"></i></button>
                            </td>
                            {% endif %}
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr class="obs-empty-row"><td colspan="{{ isFinalized ? 3 : 4 }}" class="text-center text-muted fst-italic py-2" style="font-size:0.78rem">Aucune observation ce mois</td></tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
    {% endfor %}

    {# ── Signature ──────────────────────────────────────────────────────── #}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-transparent fw-semibold py-3">
            <i class="fas fa-signature me-2"></i>Signature
        </div>
        <div class="card-body">
            <div class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label class="form-label small fw-semibold">Nom du signataire</label>
                    <input type="text" name="signature_nom" class="form-control form-control-sm"
                           value="{{ formData.signature_nom ?? '' }}" {% if isFinalized %}readonly{% endif %}>
                </div>
                <div class="col-md-3">
                    <label class="form-label small fw-semibold">Date de signature</label>
                    <input type="date" name="signature_date" class="form-control form-control-sm"
                           value="{{ formData.signature_date ?? '' }}" {% if isFinalized %}readonly{% endif %}>
                </div>
                <div class="col-md-5">
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" name="signature_certif" id="signCertif"
                               value="1" {% if formData.signature_certif ?? false %}checked{% endif %}
                               {% if isFinalized %}disabled{% endif %}>
                        <label class="form-check-label small" for="signCertif">
                            Je certifie l'exactitude des relevés ci-dessus
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if not isFinalized %}
    {# ── Boutons ─────────────────────────────────────────────────────────── #}
    <div class="d-flex gap-2">
        <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 et verrouiller
        </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 (brouillon)
        </a>
        {% endif %}
    </div>

    <div id="saveMsg" class="mt-3" style="display:none"></div>
    {% endif %}
</form>
{% endif %}

{% if not isFinalized %}
<script>
const csrfToken = '{{ csrf_token('haccp_form_temperature') }}';
const saveUrl   = '{{ path('tenant_haccp_formulaire_sauvegarder', {type: 'temperature'}) }}';

// Coloration selon seuils
document.querySelectorAll('.temp-input').forEach(input => {
    input.addEventListener('input', () => colorerTemp(input));
    colorerTemp(input); // à la charge de la page
});

function colorerTemp(input) {
    const val  = parseFloat(input.value);
    const tMin = parseFloat(input.dataset.min);
    const tMax = parseFloat(input.dataset.max);
    const td   = input.closest('td');
    input.classList.remove('bg-danger', 'bg-success', 'bg-opacity-25');
    if (td) td.classList.remove('bg-danger-subtle', 'bg-success-subtle');
    if (input.value === '') return;
    if (!isNaN(tMin) && !isNaN(tMax)) {
        if (val < tMin || val > tMax) {
            input.classList.add('bg-danger', 'bg-opacity-25');
            if (td) td.classList.add('bg-danger-subtle');
        } else {
            input.classList.add('bg-success', 'bg-opacity-25');
        }
    }
}

async function sauvegarder(status) {
    renumeroterObs();
    const form = document.getElementById('formTemperature');
    const data = new FormData(form);
    data.set('status', status);
    data.set('_token', csrfToken);

    if (status === 'finalized') {
        if (!document.querySelector('[name="signature_nom"]').value.trim() ||
            !document.querySelector('[name="signature_date"]').value ||
            !document.getElementById('signCertif').checked) {
            afficherMsg('error', 'Signature complète obligatoire pour finaliser.');
            return;
        }
        if (!confirm('Finaliser ce document ? Il sera verrouillé et ne pourra plus être modifié.')) return;
    }

    try {
        const resp = await fetch(saveUrl, { method: 'POST', body: data });
        const json = await resp.json();
        if (json.success) {
            if (status === 'draft') {
                window.location.href = '{{ path('tenant_haccp_index') }}';
                return;
            }
            afficherMsg('success', json.message);
            if (json.document_id) {
                document.querySelector('[name="document_id"]').value = json.document_id;
            }
            if (status === 'finalized') {
                setTimeout(() => location.reload(), 1200);
            }
        } else {
            afficherMsg('error', json.message ?? 'Erreur lors de la sauvegarde.');
        }
    } 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);
}

// ── Observations dynamiques ──────────────────────────────────────────────────
function ajouterObs(btn, eqId) {
    const tbody = btn.closest('.card-footer').querySelector('.obs-table tbody');
    // Supprimer la ligne placeholder si présente
    const emptyRow = tbody.querySelector('.obs-empty-row');
    if (emptyRow) emptyRow.remove();
    const idx = tbody.querySelectorAll('tr').length;
    const tr = document.createElement('tr');
    tr.innerHTML = `
        <td class="text-center">
            <input type="number" min="1" max="31"
                   name="equipements[${eqId}_obs][${idx}][jour]"
                   class="form-control form-control-sm text-center p-0 border-0"
                   style="width:50px;margin:auto" placeholder="—">
        </td>
        <td>
            <input type="text"
                   name="equipements[${eqId}_obs][${idx}][observation]"
                   class="form-control form-control-sm border-0"
                   placeholder="Ex : température 8°C, panne compresseur…">
        </td>
        <td>
            <input type="text"
                   name="equipements[${eqId}_obs][${idx}][action]"
                   class="form-control form-control-sm border-0"
                   placeholder="Ex : appel technicien, transfert produits…">
        </td>
        <td class="text-center">
            <button type="button" class="btn btn-link text-danger p-0" onclick="this.closest('tr').remove()" title="Supprimer">
                <i class="fas fa-times"></i>
            </button>
        </td>`;
    tbody.appendChild(tr);
    tr.querySelector('input').focus();
}

// Renumérote les indices obs avant envoi (évite les trous si lignes supprimées)
function renumeroterObs() {
    document.querySelectorAll('.obs-table').forEach(table => {
        const eqId = table.dataset.eq;
        table.querySelectorAll('tbody tr:not(.obs-empty-row)').forEach((tr, idx) => {
            tr.querySelectorAll('input[name]').forEach(input => {
                input.name = input.name.replace(
                    /equipements\[([^\]]+)_obs\]\[\d+\]/,
                    `equipements[${eqId}_obs][${idx}]`
                );
            });
        });
    });
}
</script>
{% endif %}
{% endblock %}