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

{% block title %}Traçabilité 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-barcode me-2 text-secondary"></i>Fiche de Traçabilité
        </h1>
        <p class="text-muted mb-0">{{ restaurantNom }} — {{ moisNoms[mois] }} {{ annee }}</p>
    </div>
    <div class="d-flex gap-2 align-items-center">
        {% if docId %}
            <span class="badge bg-warning text-dark fs-6 px-3 py-2"><i class="fas fa-edit me-1"></i>En cours</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>
        {% 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: 'tracabilite', 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: 'tracabilite', 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-warning border-0 small mb-4">
    <i class="fas fa-info-circle me-2"></i>
    <strong>Instructions :</strong> Remplissez une ligne par jour de repas. Conservez les étiquettes des produits et les bons de livraison.
</div>

<form id="formTracabilite" 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 ?? '' }}">
                </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') }}">
                </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">
            <span><i class="fas fa-list-alt me-2"></i>Registre de traçabilité</span>
            <button type="button" class="btn btn-primary btn-sm" onclick="ajouterLigne()">
                <i class="fas fa-plus me-1"></i>Ajouter une ligne
            </button>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-bordered table-sm align-middle mb-0">
                    <thead class="table-dark">
                        <tr>
                            <th style="width:120px">Date du repas</th>
                            <th style="width:22%">Menu servi</th>
                            <th style="width:22%">Produits utilisés</th>
                            <th style="width:120px">N° de lot</th>
                            <th>Fournisseur</th>
                            <th style="width:80px">Visa</th>
                            <th style="width:40px"></th>
                        </tr>
                    </thead>
                    <tbody id="entriesBody">
                        {% for i, entry in entries %}
                        <tr>
                            <td><input type="date" name="entries[{{ i }}][date_repas]" class="form-control form-control-sm" value="{{ entry.date_repas ?? (entry.date ?? '') }}"></td>
                            <td><textarea name="entries[{{ i }}][menu_servi]" class="form-control form-control-sm" rows="2">{{ entry.menu_servi ?? '' }}</textarea></td>
                            <td><textarea name="entries[{{ i }}][produits_utilises]" class="form-control form-control-sm" rows="2">{{ entry.produits_utilises ?? '' }}</textarea></td>
                            <td><input type="text" name="entries[{{ i }}][numero_lot]" class="form-control form-control-sm" value="{{ entry.numero_lot ?? (entry.lot ?? '') }}"></td>
                            <td><input type="text" name="entries[{{ i }}][fournisseur]" class="form-control form-control-sm" value="{{ entry.fournisseur ?? '' }}"></td>
                            <td><input type="text" name="entries[{{ i }}][visa]" class="form-control form-control-sm" value="{{ entry.visa ?? '' }}"></td>
                            <td><button type="button" class="btn btn-danger btn-sm" onclick="this.closest('tr').remove()"><i class="fas fa-trash"></i></button></td>
                        </tr>
                        {% else %}
                        <tr id="noEntries"><td colspan="7" class="text-center text-muted py-2">Aucune ligne — cliquez sur « Ajouter une ligne »</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

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

<script>
let lineCount = {{ entries|length }};
const csrfToken = '{{ csrf_token('haccp_form_tracabilite') }}';
const saveUrl   = '{{ path('tenant_haccp_formulaire_sauvegarder', {type: 'tracabilite'}) }}';
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_repas]" class="form-control form-control-sm"></td>
        <td><textarea name="entries[${i}][menu_servi]" class="form-control form-control-sm" rows="2"></textarea></td>
        <td><textarea name="entries[${i}][produits_utilises]" class="form-control form-control-sm" rows="2"></textarea></td>
        <td><input type="text" name="entries[${i}][numero_lot]" class="form-control form-control-sm"></td>
        <td><input type="text" name="entries[${i}][fournisseur]" class="form-control form-control-sm"></td>
        <td><input type="text" name="entries[${i}][visa]" 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('entriesBody').appendChild(tr);
}


async function sauvegarder() {
    const btn = document.querySelector('button[onclick="sauvegarder()"]');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Enregistrement…';
    const form = document.getElementById('formTracabilite');
    const data = new FormData(form);
    data.set('status', 'draft');
    data.set('_token', csrfToken);
    try {
        const resp = await fetch(saveUrl, {method: 'POST', body: data});
        const json = await resp.json();
        if (json.success) {
            window.location.href = indexUrl;
        } else {
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-save me-1"></i>Enregistrer';
            afficherMsg('error', json.message ?? 'Erreur.');
        }
    } catch(e) {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-save me-1"></i>Enregistrer';
        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';
}
</script>
{% endblock %}