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

{% block title %}Distribution HACCP{% endblock %}

{% block body %}
{% set isFinalized = document and document.status == 'finalized' %}
{% set docId = document ? document.id : null %}
{% set formData = document ? document.form_data : {} %}
{% set entriesFroid = formData.entries_froid ?? [] %}
{% set entriesChaud = formData.entries_chaud ?? [] %}

<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-utensils me-2 text-success"></i>Distribution — Contrôle des 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>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: 'distribution', 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: 'distribution', 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="row g-2 mb-3">
    <div class="col-md-4">
        <div class="alert alert-info border-0 small mb-0"><i class="fas fa-snowflake me-2"></i><strong>Froid :</strong> T° ≤ 4°C</div>
    </div>
    <div class="col-md-4">
        <div class="alert alert-danger border-0 small mb-0"><i class="fas fa-fire me-2"></i><strong>Chaud :</strong> T° ≥ 63°C</div>
    </div>
</div>

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

    {# ── Plats froids ─────────────────────────────────────────────────────── #}
    <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-snowflake me-2 text-info"></i>Plats froids <span class="badge bg-info ms-1">≤ 4°C</span></span>
            {% if not isFinalized %}
            <button type="button" class="btn btn-info btn-sm" onclick="ajouterLigne('froid')">
                <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>Repas / Plat</th><th class="text-center">T° mesurée (°C)</th>
                        <th>Heure</th><th class="text-center">Conforme</th><th>Observations</th>
                        {% if not isFinalized %}<th></th>{% endif %}
                    </tr>
                </thead>
                <tbody id="froidBody">
                    {% for i, entry in entriesFroid %}
                    <tr>
                        <td><input type="date" name="entries_froid[{{ 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_froid[{{ i }}][repas]" class="form-control form-control-sm" value="{{ entry.repas ?? '' }}" {% if isFinalized %}readonly{% endif %}></td>
                        <td>
                            <input type="number" step="0.1" name="entries_froid[{{ i }}][temperature]"
                                   class="form-control form-control-sm text-center temp-froid"
                                   value="{{ entry.temperature ?? '' }}" {% if isFinalized %}readonly{% endif %} style="width:80px;margin:auto">
                        </td>
                        <td><input type="time" name="entries_froid[{{ i }}][heure]" class="form-control form-control-sm" value="{{ entry.heure ?? '' }}" {% if isFinalized %}readonly{% endif %} style="width:110px"></td>
                        <td class="text-center">
                            <input type="hidden" name="entries_froid[{{ i }}][conforme]" value="0">
                            <input type="checkbox" name="entries_froid[{{ i }}][conforme]" value="1"
                                   class="form-check-input" {% if entry.conforme ?? false %}checked{% endif %}
                                   {% if isFinalized %}disabled{% endif %}>
                        </td>
                        <td><input type="text" name="entries_froid[{{ 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="noFroid"><td colspan="7" class="text-center text-muted py-2">Aucune ligne</td></tr>{% endif %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {# ── Plats chauds ─────────────────────────────────────────────────────── #}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-danger bg-opacity-10 fw-semibold py-2 d-flex justify-content-between align-items-center">
            <span><i class="fas fa-fire me-2 text-danger"></i>Plats chauds <span class="badge bg-danger ms-1">≥ 63°C</span></span>
            {% if not isFinalized %}
            <button type="button" class="btn btn-danger btn-sm" onclick="ajouterLigne('chaud')">
                <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>Repas / Plat</th><th class="text-center">T° mesurée (°C)</th>
                        <th>Heure</th><th class="text-center">Conforme</th><th>Observations</th>
                        {% if not isFinalized %}<th></th>{% endif %}
                    </tr>
                </thead>
                <tbody id="chaudBody">
                    {% for i, entry in entriesChaud %}
                    <tr>
                        <td><input type="date" name="entries_chaud[{{ 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_chaud[{{ i }}][repas]" class="form-control form-control-sm" value="{{ entry.repas ?? '' }}" {% if isFinalized %}readonly{% endif %}></td>
                        <td>
                            <input type="number" step="0.1" name="entries_chaud[{{ i }}][temperature]"
                                   class="form-control form-control-sm text-center temp-chaud"
                                   value="{{ entry.temperature ?? '' }}" {% if isFinalized %}readonly{% endif %} style="width:80px;margin:auto">
                        </td>
                        <td><input type="time" name="entries_chaud[{{ i }}][heure]" class="form-control form-control-sm" value="{{ entry.heure ?? '' }}" {% if isFinalized %}readonly{% endif %} style="width:110px"></td>
                        <td class="text-center">
                            <input type="hidden" name="entries_chaud[{{ i }}][conforme]" value="0">
                            <input type="checkbox" name="entries_chaud[{{ i }}][conforme]" value="1"
                                   class="form-check-input" {% if entry.conforme ?? false %}checked{% endif %}
                                   {% if isFinalized %}disabled{% endif %}>
                        </td>
                        <td><input type="text" name="entries_chaud[{{ 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="noChaud"><td colspan="7" 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 froidCount = {{ entriesFroid|length }};
let chaudCount = {{ entriesChaud|length }};
const csrfToken = '{{ csrf_token('haccp_form_distribution') }}';
const saveUrl   = '{{ path('tenant_haccp_formulaire_sauvegarder', {type: 'distribution'}) }}';
const indexUrl  = '{{ path('tenant_haccp_index') }}';

function ajouterLigne(type) {
    const bodyId = type === 'froid' ? 'froidBody' : 'chaudBody';
    const noId   = type === 'froid' ? 'noFroid' : 'noChaud';
    const prefix = type === 'froid' ? 'entries_froid' : 'entries_chaud';
    const i      = type === 'froid' ? froidCount++ : chaudCount++;
    document.getElementById(noId)?.remove();
    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}][repas]" class="form-control form-control-sm" placeholder="Repas / Plat"></td>
        <td><input type="number" step="0.1" name="${prefix}[${i}][temperature]" class="form-control form-control-sm text-center temp-${type}" style="width:80px;margin:auto" oninput="colorTemp(this,'${type}')"></td>
        <td><input type="time" name="${prefix}[${i}][heure]" class="form-control form-control-sm" style="width:110px"></td>
        <td class="text-center">
            <input type="hidden" name="${prefix}[${i}][conforme]" value="0">
            <input type="checkbox" name="${prefix}[${i}][conforme]" value="1" class="form-check-input">
        </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);
}

function colorTemp(input, type) {
    const val = parseFloat(input.value);
    if (isNaN(val)) { input.classList.remove('bg-success','bg-danger','bg-opacity-25'); return; }
    const ok = type === 'froid' ? val <= 4 : val >= 63;
    input.classList.toggle('bg-success', ok);
    input.classList.toggle('bg-danger', !ok);
    input.classList.add('bg-opacity-25');
}
// Colorer les inputs existants
document.querySelectorAll('.temp-froid').forEach(el => colorTemp(el, 'froid'));
document.querySelectorAll('.temp-chaud').forEach(el => colorTemp(el, 'chaud'));

async function sauvegarder(status) {
    const form = document.getElementById('formDistribution');
    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 %}