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

{% block title %}Refroidissement & Remise en T° HACCP{% endblock %}

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

<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-snowflake me-2 text-info"></i>Refroidissement & Remise en température
        </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>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>

<div class="d-flex align-items-center gap-2 mb-4">
    <a href="{{ path('tenant_haccp_formulaire', {type: 'refroidissement', 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: 'refroidissement', 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>

<div class="alert alert-info border-0 small mb-3">
    <i class="fas fa-info-circle me-2"></i>
    <strong>Règles :</strong>
    Refroidissement : T° initiale ≥ 63°C → T° finale ≤ 10°C en moins de 2h.
    Remise en T° : T° finale ≥ 63°C en moins de 1h.
</div>

<form id="formRefroidissement" 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>

    {# ── Section 1 : Refroidissement rapide ─────────────────────────────────── #}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-info bg-opacity-10 fw-semibold py-2 d-flex justify-content-between align-items-center">
            <span><i class="fas fa-arrow-down me-2 text-info"></i>Refroidissement rapide</span>
            {% if not isFinalized %}
            <button type="button" class="btn btn-info btn-sm" onclick="ajouterLigne('entries','refCount')">
                <i class="fas fa-plus me-1"></i>Ajouter
            </button>
            {% endif %}
        </div>
        <div class="card-body p-0">
            <table class="table table-bordered table-sm align-middle mb-0">
                <thead class="table-secondary">
                    <tr>
                        <th>Date</th><th>Plat / Préparation</th>
                        <th class="text-center">H. début</th><th class="text-center">T° initiale (°C)</th>
                        <th class="text-center">H. fin</th><th class="text-center">T° finale (°C)</th>
                        <th class="text-center">Durée (min)</th>
                        <th>Observations</th>{% if not isFinalized %}<th></th>{% endif %}
                    </tr>
                </thead>
                <tbody id="entriesBody">
                    {% for i, entry in entries %}
                    <tr>
                        <td><input type="date" name="entries[{{ i }}][date]" class="form-control form-control-sm" value="{{ entry.date ?? '' }}" {% if isFinalized %}readonly{% endif %} style="width:130px"></td>
                        <td><input type="text" name="entries[{{ i }}][plat]" class="form-control form-control-sm" value="{{ entry.plat ?? '' }}" {% if isFinalized %}readonly{% endif %}></td>
                        <td><input type="time" name="entries[{{ i }}][heure_debut]" class="form-control form-control-sm text-center" value="{{ entry.heure_debut ?? '' }}" {% if isFinalized %}readonly{% endif %} style="width:100px;margin:auto"></td>
                        <td><input type="number" step="0.1" name="entries[{{ i }}][temp_initiale]" class="form-control form-control-sm text-center" value="{{ entry.temp_initiale ?? '' }}" {% if isFinalized %}readonly{% endif %} placeholder="≥63" style="width:80px;margin:auto"></td>
                        <td><input type="time" name="entries[{{ i }}][heure_fin]" class="form-control form-control-sm text-center" value="{{ entry.heure_fin ?? '' }}" {% if isFinalized %}readonly{% endif %} style="width:100px;margin:auto"></td>
                        <td><input type="number" step="0.1" name="entries[{{ i }}][temp_finale]" class="form-control form-control-sm text-center" value="{{ entry.temp_finale ?? '' }}" {% if isFinalized %}readonly{% endif %} placeholder="≤10" style="width:80px;margin:auto"></td>
                        <td><input type="number" step="1" name="entries[{{ i }}][duree]" class="form-control form-control-sm text-center" value="{{ entry.duree ?? '' }}" readonly style="width:80px;margin:auto" placeholder="Auto"></td>
                        <td><input type="text" name="entries[{{ i }}][observation]" class="form-control form-control-sm" value="{{ entry.observation ?? '' }}" {% if isFinalized %}readonly{% endif %}></td>
                        {% if not isFinalized %}<td><button type="button" class="btn btn-danger btn-sm" onclick="this.closest('tr').remove()"><i class="fas fa-trash"></i></button></td>{% endif %}
                    </tr>
                    {% else %}
                    {% if not isFinalized %}<tr id="noEntries"><td colspan="9" class="text-center text-muted py-2">Aucune ligne</td></tr>{% endif %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {# ── Section 2 : Remise en température ─────────────────────────────────── #}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-warning bg-opacity-10 fw-semibold py-2 d-flex justify-content-between align-items-center">
            <span><i class="fas fa-arrow-up me-2 text-warning"></i>Remise en température</span>
            {% if not isFinalized %}
            <button type="button" class="btn btn-warning btn-sm" onclick="ajouterLigne('remise_entries','remiseCount')">
                <i class="fas fa-plus me-1"></i>Ajouter
            </button>
            {% endif %}
        </div>
        <div class="card-body p-0">
            <table class="table table-bordered table-sm align-middle mb-0">
                <thead class="table-secondary">
                    <tr>
                        <th>Date</th><th>Plat / Préparation</th>
                        <th class="text-center">H. début</th><th class="text-center">T° initiale (°C)</th>
                        <th class="text-center">H. fin</th><th class="text-center">T° finale (°C)</th>
                        <th class="text-center">Durée (min)</th>
                        <th>Observations</th>{% if not isFinalized %}<th></th>{% endif %}
                    </tr>
                </thead>
                <tbody id="remiseBody">
                    {% for i, entry in remiseEntries %}
                    <tr>
                        <td><input type="date" name="remise_entries[{{ i }}][date]" class="form-control form-control-sm" value="{{ entry.date ?? '' }}" {% if isFinalized %}readonly{% endif %} style="width:130px"></td>
                        <td><input type="text" name="remise_entries[{{ i }}][plat]" class="form-control form-control-sm" value="{{ entry.plat ?? '' }}" {% if isFinalized %}readonly{% endif %}></td>
                        <td><input type="time" name="remise_entries[{{ i }}][heure_debut]" class="form-control form-control-sm text-center" value="{{ entry.heure_debut ?? '' }}" {% if isFinalized %}readonly{% endif %} style="width:100px;margin:auto"></td>
                        <td><input type="number" step="0.1" name="remise_entries[{{ i }}][temp_initiale]" class="form-control form-control-sm text-center" value="{{ entry.temp_initiale ?? '' }}" {% if isFinalized %}readonly{% endif %} style="width:80px;margin:auto"></td>
                        <td><input type="time" name="remise_entries[{{ i }}][heure_fin]" class="form-control form-control-sm text-center" value="{{ entry.heure_fin ?? '' }}" {% if isFinalized %}readonly{% endif %} style="width:100px;margin:auto"></td>
                        <td><input type="number" step="0.1" name="remise_entries[{{ i }}][temp_finale]" class="form-control form-control-sm text-center" value="{{ entry.temp_finale ?? '' }}" {% if isFinalized %}readonly{% endif %} placeholder="≥63" style="width:80px;margin:auto"></td>
                        <td><input type="number" step="1" name="remise_entries[{{ i }}][duree]" class="form-control form-control-sm text-center" value="{{ entry.duree ?? '' }}" readonly style="width:80px;margin:auto" placeholder="Auto"></td>
                        <td><input type="text" name="remise_entries[{{ i }}][observation]" class="form-control form-control-sm" value="{{ entry.observation ?? '' }}" {% if isFinalized %}readonly{% endif %}></td>
                        {% if not isFinalized %}<td><button type="button" class="btn btn-danger btn-sm" onclick="this.closest('tr').remove()"><i class="fas fa-trash"></i></button></td>{% endif %}
                    </tr>
                    {% else %}
                    {% if not isFinalized %}<tr id="noRemise"><td colspan="9" class="text-center text-muted py-2">Aucune ligne</td></tr>{% endif %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

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

    {% if not isFinalized %}
    <div class="d-flex gap-2 mt-1">
        <button type="button" class="btn btn-warning" onclick="sauvegarder('draft')"><i class="fas fa-save me-1"></i>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>
let refCount = {{ entries|length }};
let remiseCount = {{ remiseEntries|length }};
const csrfToken = '{{ csrf_token('haccp_form_refroidissement') }}';
const saveUrl   = '{{ path('tenant_haccp_formulaire_sauvegarder', {type: 'refroidissement'}) }}';
const indexUrl  = '{{ path('tenant_haccp_index') }}';

// Calcul automatique durée par délégation d'événement
document.getElementById('formRefroidissement').addEventListener('input', function(e) {
    if (e.target.matches('input[name*="[heure_debut]"], input[name*="[heure_fin]"]')) {
        const tr = e.target.closest('tr');
        const isRemise = e.target.name.startsWith('remise_entries');
        calculerDuree(tr, isRemise);
    }
});

function calculerDuree(tr, isRemise) {
    const debut = tr.querySelector('input[name*="[heure_debut]"]')?.value;
    const fin   = tr.querySelector('input[name*="[heure_fin]"]')?.value;
    const dureeInput = tr.querySelector('input[name*="[duree]"]');
    if (!debut || !fin || !dureeInput) return;
    const [h1, m1] = debut.split(':').map(Number);
    const [h2, m2] = fin.split(':').map(Number);
    let duree = (h2 * 60 + m2) - (h1 * 60 + m1);
    if (duree < 0) duree += 1440; // passage minuit
    dureeInput.value = duree;
    // Validation visuelle (refroidissement : max 150 min, remise : max 90 min)
    const max = isRemise ? 90 : 150;
    dureeInput.classList.remove('border-warning', 'border-danger', 'text-danger', 'text-warning', 'fw-bold');
    if (duree > max) {
        dureeInput.classList.add('border-danger', 'text-danger', 'fw-bold');
    } else if (duree > max * 0.8) {
        dureeInput.classList.add('border-warning', 'text-warning');
    }
}

function ajouterLigne(prefix, counter) {
    const isRemise = prefix === 'remise_entries';
    const bodyId   = isRemise ? 'remiseBody' : 'entriesBody';
    const noId     = isRemise ? 'noRemise' : 'noEntries';
    document.getElementById(noId)?.remove();
    const i = isRemise ? remiseCount++ : refCount++;
    const pInit = isRemise ? '' : '≥63';
    const pFin  = isRemise ? '≥63' : '≤10';
    const tr = document.createElement('tr');
    tr.innerHTML = `
        <td><input type="date" name="${prefix}[${i}][date]" class="form-control form-control-sm" style="width:130px"></td>
        <td><input type="text" name="${prefix}[${i}][plat]" class="form-control form-control-sm" placeholder="Plat"></td>
        <td><input type="time" name="${prefix}[${i}][heure_debut]" class="form-control form-control-sm text-center" style="width:100px;margin:auto"></td>
        <td><input type="number" step="0.1" name="${prefix}[${i}][temp_initiale]" class="form-control form-control-sm text-center" placeholder="${pInit}" style="width:80px;margin:auto"></td>
        <td><input type="time" name="${prefix}[${i}][heure_fin]" class="form-control form-control-sm text-center" style="width:100px;margin:auto"></td>
        <td><input type="number" step="0.1" name="${prefix}[${i}][temp_finale]" class="form-control form-control-sm text-center" placeholder="${pFin}" style="width:80px;margin:auto"></td>
        <td><input type="number" step="1" name="${prefix}[${i}][duree]" class="form-control form-control-sm text-center" readonly style="width:80px;margin:auto" placeholder="Auto"></td>
        <td><input type="text" name="${prefix}[${i}][observation]" class="form-control form-control-sm"></td>
        <td><button type="button" class="btn btn-danger btn-sm" onclick="this.closest('tr').remove()"><i class="fas fa-trash"></i></button></td>
    `;
    document.getElementById(bodyId).appendChild(tr);
}
async function sauvegarder(status) {
    const form = document.getElementById('formRefroidissement');
    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.'); 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 %}