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

{% block title %}Livraisons extérieures 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 moisNoms = {1:'Janvier',2:'Février',3:'Mars',4:'Avril',5:'Mai',6:'Juin',7:'Juillet',8:'Août',9:'Septembre',10:'Octobre',11:'Novembre',12:'Décembre'} %}

<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-truck me-2 text-primary"></i>Livraisons extérieures
        </h1>
        <p class="text-muted mb-0">{{ restaurantNom }} — {{ moisNoms[mois] }} {{ 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>
        {% 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 %}
        {% if docId %}
            <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>
        {% 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 justify-content-between mb-3">
    <a href="{{ path('tenant_haccp_formulaire', {type: 'livraisons', 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 me-1"></i>Mois préc.</a>
    <span class="fw-bold fs-5">{{ moisNoms[mois] }} {{ annee }}</span>
    <a href="{{ path('tenant_haccp_formulaire', {type: 'livraisons', mois: mois == 12 ? 1 : mois + 1, annee: mois == 12 ? annee + 1 : annee}) }}"
       class="btn btn-outline-secondary btn-sm">Mois suiv.<i class="fas fa-chevron-right ms-1"></i></a>
</div>

<div class="alert alert-info border-0 small mb-4">
    <i class="fas fa-thermometer-half me-1 text-danger"></i>
    <strong>Liaison chaude</strong> : température de départ ≥ 63 °C, arrivée ≥ 63 °C &nbsp;|&nbsp;
    <i class="fas fa-thermometer-empty me-1 text-primary"></i>
    <strong>Liaison froide</strong> : température de départ ≤ 4 °C, arrivée ≤ 10 °C
</div>

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

    <div class="card border-0 shadow-sm mb-3">
        <div class="card-body py-2">
            <div class="row g-3">
                <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 class="col-md-4">
                    <label class="form-label small fw-semibold">Date de mise à jour</label>
                    <input type="date" name="date_maj" class="form-control form-control-sm"
                           value="{{ formData.date_maj ?? 'now'|date('Y-m-d') }}" {% if isFinalized %}readonly{% endif %}>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header fw-semibold py-2 d-flex justify-content-between align-items-center"
             style="background:linear-gradient(135deg,#0d6efd22,#0d6efd11); border-left:4px solid #0d6efd">
            <span><i class="fas fa-truck me-2 text-primary"></i>Registre des livraisons</span>
            {% if not isFinalized %}
            <button type="button" class="btn btn-primary btn-sm" onclick="ajouterLigne()">
                <i class="fas fa-plus me-1"></i>Ajouter une livraison
            </button>
            {% endif %}
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-bordered table-sm align-middle mb-0">
                    <thead style="background:#0d6efd; color:#fff;">
                        <tr>
                            <th style="width:110px">Date</th>
                            <th style="width:100px">Liaison</th>
                            <th>Nom du plat</th>
                            <th style="width:90px">H. départ</th>
                            <th style="width:110px">Temp. départ</th>
                            <th style="width:90px">H. arrivée</th>
                            <th style="width:110px">Temp. arrivée</th>
                            <th style="width:90px">Visa livreur</th>
                            <th>Observations</th>
                            {% if not isFinalized %}<th style="width:40px"></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 %}></td>
                            <td>
                                {% if isFinalized %}
                                    {% if entry.liaison == 'chaude' %}<span class="badge bg-danger">🔴 Chaude</span>
                                    {% elseif entry.liaison == 'froide' %}<span class="badge bg-primary">🔵 Froide</span>
                                    {% else %}—{% endif %}
                                {% else %}
                                <select name="entries[{{ i }}][liaison]" class="form-select form-select-sm">
                                    <option value="">—</option>
                                    <option value="chaude" {% if (entry.liaison ?? '') == 'chaude' %}selected{% endif %}>🔴 Chaude</option>
                                    <option value="froide" {% if (entry.liaison ?? '') == 'froide' %}selected{% endif %}>🔵 Froide</option>
                                </select>
                                {% endif %}
                            </td>
                            <td><input type="text" name="entries[{{ i }}][plat]" class="form-control form-control-sm" value="{{ entry.plat ?? '' }}" placeholder="ex: Pot-au-feu…" {% if isFinalized %}readonly{% endif %}></td>
                            <td><input type="time" name="entries[{{ i }}][heure_depart]" class="form-control form-control-sm" value="{{ entry.heure_depart ?? '' }}" {% if isFinalized %}readonly{% endif %}></td>
                            <td>
                                <div class="input-group input-group-sm">
                                    <input type="number" step="0.1" name="entries[{{ i }}][temp_depart]" class="form-control form-control-sm" value="{{ entry.temp_depart ?? '' }}" placeholder="63" {% if isFinalized %}readonly{% endif %}>
                                    <span class="input-group-text">°C</span>
                                </div>
                            </td>
                            <td><input type="time" name="entries[{{ i }}][heure_arrivee]" class="form-control form-control-sm" value="{{ entry.heure_arrivee ?? '' }}" {% if isFinalized %}readonly{% endif %}></td>
                            <td>
                                <div class="input-group input-group-sm">
                                    <input type="number" step="0.1" name="entries[{{ i }}][temp_arrivee]" class="form-control form-control-sm" value="{{ entry.temp_arrivee ?? '' }}" placeholder="63" {% if isFinalized %}readonly{% endif %}>
                                    <span class="input-group-text">°C</span>
                                </div>
                            </td>
                            <td><input type="text" name="entries[{{ i }}][visa_livreur]" class="form-control form-control-sm" value="{{ entry.visa_livreur ?? '' }}" {% if isFinalized %}readonly{% endif %}></td>
                            <td>
                                {% if isFinalized %}
                                    {% if entry.observations ?? '' %}
                                        <span class="badge bg-warning text-dark mb-1"><i class="fas fa-exclamation-triangle me-1"></i>Anomalie</span>
                                        <div class="small">{{ entry.observations }}</div>
                                    {% else %}—{% endif %}
                                {% else %}
                                <textarea name="entries[{{ i }}][observations]" class="form-control form-control-sm" rows="1" placeholder="Anomalie de température, non-conformité…" style="min-width:160px">{{ entry.observations ?? '' }}</textarea>
                                {% 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="10" class="text-center text-muted py-2">Aucune livraison — cliquez sur « Ajouter une livraison »</td></tr>
                        {% endif %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header fw-semibold py-2" style="background:linear-gradient(135deg,#ffc10722,#ffc10711); border-left:4px solid #ffc107">
            <i class="fas fa-exclamation-triangle me-2 text-warning"></i>Observations générales du mois
        </div>
        <div class="card-body">
            <textarea name="observations_generales" class="form-control" rows="4"
                      placeholder="Anomalies récurrentes, actions correctives mises en place, remarques diverses…"
                      {% if isFinalized %}readonly{% endif %}>{{ formData.observations_generales ?? '' }}</textarea>
        </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 lineCount = {{ entries|length }};
const csrfToken = '{{ csrf_token('haccp_form_livraisons') }}';
const saveUrl   = '{{ path('tenant_haccp_formulaire_sauvegarder', {type: 'livraisons'}) }}';
const indexUrl  = '{{ path('tenant_haccp_index') }}';

function ajouterLigne() {
    document.getElementById('noEntries')?.remove();
    const i = lineCount++;
    const tr = document.createElement('tr');
    tr.innerHTML = `
        <td><input type="date" name="entries[${i}][date]" class="form-control form-control-sm"></td>
        <td>
            <select name="entries[${i}][liaison]" class="form-select form-select-sm">
                <option value="">—</option>
                <option value="chaude">🔴 Chaude</option>
                <option value="froide">🔵 Froide</option>
            </select>
        </td>
        <td><input type="text" name="entries[${i}][plat]" class="form-control form-control-sm" placeholder="ex: Pot-au-feu…"></td>
        <td><input type="time" name="entries[${i}][heure_depart]" class="form-control form-control-sm"></td>
        <td><div class="input-group input-group-sm"><input type="number" step="0.1" name="entries[${i}][temp_depart]" class="form-control form-control-sm" placeholder="63"><span class="input-group-text">°C</span></div></td>
        <td><input type="time" name="entries[${i}][heure_arrivee]" class="form-control form-control-sm"></td>
        <td><div class="input-group input-group-sm"><input type="number" step="0.1" name="entries[${i}][temp_arrivee]" class="form-control form-control-sm" placeholder="63"><span class="input-group-text">°C</span></div></td>
        <td><input type="text" name="entries[${i}][visa_livreur]" class="form-control form-control-sm"></td>
        <td><textarea name="entries[${i}][observations]" class="form-control form-control-sm" rows="1" placeholder="Anomalie…" style="min-width:150px"></textarea></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('entriesBody').appendChild(tr);
}

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