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

{% block title %}Origine des viandes HACCP{% endblock %}

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

{% set especes = [
    {code: 'boeuf',   nom: 'BŒUF',    icon: '🐄'},
    {code: 'porc',    nom: 'PORC',    icon: '🐷'},
    {code: 'veau',    nom: 'VEAU',    icon: '🐮'},
    {code: 'agneau',  nom: 'AGNEAU',  icon: '🐑'},
    {code: 'volaille',nom: 'VOLAILLE',icon: '🐔'}
] %}

<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-drumstick-bite me-2" style="color:#8B4513"></i>Origine des viandes — Affichage obligatoire
        </h1>
        <p class="text-muted mb-0">{{ restaurantNom }}</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="alert alert-info border-0 small mb-4">
    <i class="fas fa-info-circle me-2"></i>
    <strong>Obligation d'affichage :</strong> L'origine des viandes doit être affichée de manière visible et lisible.
    L'affichage doit indiquer le pays d'origine (né, élevé, abattu). Mettez ce document à jour à chaque changement de fournisseur.
    <em>Conformément au décret n°2025-141 du 13 février 2025.</em>
</div>

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

    {% for esp in especes %}
    {% set v = vd[esp.code] ?? {} %}
    <div class="card mb-3 border-2" style="border-color:#667eea !important">
        <div class="card-header text-white fw-bold py-3" style="background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)">
            <span style="font-size:1.4rem">{{ esp.icon }}</span>&nbsp; {{ esp.nom }}
        </div>
        <div class="card-body bg-light">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label small fw-semibold"><i class="fas fa-globe me-1"></i>Pays de naissance</label>
                    <input type="text" name="viandes[{{ esp.code }}][naissance]" class="form-control"
                           value="{{ v.naissance ?? '' }}" placeholder="Ex : France">
                </div>
                <div class="col-md-6">
                    <label class="form-label small fw-semibold"><i class="fas fa-home me-1"></i>Pays d'élevage</label>
                    <input type="text" name="viandes[{{ esp.code }}][elevage]" class="form-control"
                           value="{{ v.elevage ?? '' }}" placeholder="Ex : France">
                </div>
                <div class="col-md-6">
                    <label class="form-label small fw-semibold"><i class="fas fa-industry me-1"></i>Pays d'abattage</label>
                    <input type="text" name="viandes[{{ esp.code }}][abattage]" class="form-control"
                           value="{{ v.abattage ?? '' }}" placeholder="Ex : France">
                </div>
                <div class="col-md-6">
                    <label class="form-label small fw-semibold"><i class="fas fa-truck me-1"></i>Fournisseur</label>
                    <input type="text" name="viandes[{{ esp.code }}][fournisseur]" class="form-control"
                           value="{{ v.fournisseur ?? '' }}" placeholder="Nom du fournisseur">
                </div>
            </div>
        </div>
    </div>
    {% endfor %}

    <div class="card border-warning mb-4">
        <div class="card-body" style="background:rgba(255,193,7,0.08)">
            <h6 class="fw-bold mb-3"><i class="fas fa-calendar-check me-2"></i>Mise à jour du document</h6>
            <div class="row g-3">
                <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"
                           value="{{ formData.date_maj ?? 'now'|date('Y-m-d') }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label small fw-semibold">Responsable</label>
                    <input type="text" name="responsable" class="form-control"
                           value="{{ formData.responsable ?? '' }}" placeholder="Nom du responsable">
                </div>
            </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>
const csrfToken = '{{ csrf_token('haccp_form_origine_viandes') }}';
const saveUrl   = '{{ path('tenant_haccp_formulaire_sauvegarder', {type: 'origine_viandes'}) }}';
const indexUrl  = '{{ path('tenant_haccp_index') }}';

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('formOrigineViandes');
    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 %}