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

{% block title %}Contrôle de réception 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 ?? [] %}

<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-success"></i>Contrôle de réception
        </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: 'reception', 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: 'reception', 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>

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

    <div class="card border-0 shadow-sm mb-4" id="entriesContainer">
        <div class="card-header bg-transparent fw-semibold py-3 d-flex justify-content-between align-items-center">
            <span><i class="fas fa-list me-2 text-success"></i>Lignes de réception</span>
            {% if not isFinalized %}
            <button type="button" class="btn btn-success btn-sm" onclick="ajouterLigne()">
                <i class="fas fa-plus me-1"></i>Ajouter une ligne
            </button>
            {% endif %}
        </div>
        <div class="card-body p-0">
            <table class="table table-bordered table-sm align-middle mb-0" id="tableEntries">
                <thead class="table-secondary">
                    <tr>
                        <th>Date</th>
                        <th>Fournisseur</th>
                        <th>Produit</th>
                        <th>N° de lot</th>
                        <th class="text-center">T° livraison (°C)</th>
                        <th class="text-center">DLC</th>
                        <th class="text-center">Emballage OK</th>
                        <th class="text-center">Conforme</th>
                        <th>Observations</th>
                        <th class="text-center">Visa</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 }}][fournisseur]" class="form-control form-control-sm" value="{{ entry.fournisseur ?? '' }}" {% if isFinalized %}readonly{% endif %}></td>
                        <td><input type="text" name="entries[{{ i }}][produit]" class="form-control form-control-sm" value="{{ entry.produit ?? '' }}" {% if isFinalized %}readonly{% endif %}></td>
                        <td><input type="text" name="entries[{{ i }}][numero_lot]" class="form-control form-control-sm" value="{{ entry.numero_lot ?? '' }}" {% if isFinalized %}readonly{% endif %}></td>
                        <td><input type="number" step="0.1" name="entries[{{ i }}][temperature]" class="form-control form-control-sm text-center" value="{{ entry.temperature ?? '' }}" {% if isFinalized %}readonly{% endif %} style="width:80px;margin:auto"></td>
                        <td><input type="date" name="entries[{{ i }}][dlc]" class="form-control form-control-sm" value="{{ entry.dlc ?? '' }}" {% if isFinalized %}readonly{% endif %} style="width:130px"></td>
                        <td class="text-center"><input type="checkbox" class="form-check-input" name="entries[{{ i }}][emballage_ok]" value="1" {% if entry.emballage_ok ?? false %}checked{% endif %} {% if isFinalized %}disabled{% endif %}></td>
                        <td class="text-center"><input type="checkbox" class="form-check-input" name="entries[{{ i }}][conforme]" value="1" {% if entry.conforme ?? false %}checked{% endif %} {% if isFinalized %}disabled{% endif %}></td>
                        <td><input type="text" name="entries[{{ i }}][observation]" class="form-control form-control-sm" value="{{ entry.observation ?? '' }}" {% if isFinalized %}readonly{% endif %}></td>
                        <td><input type="text" name="entries[{{ i }}][visa]" class="form-control form-control-sm text-center" value="{{ entry.visa ?? '' }}" {% if isFinalized %}readonly{% endif %} style="width:70px;margin:auto" placeholder="Initiales"></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="11" class="text-center text-muted py-3">Aucune ligne — cliquez sur "Ajouter une ligne"</td></tr>
                    {% else %}
                    <tr><td colspan="10" class="text-center text-muted py-3">Aucune entrée enregistrée.</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 lineCount = {{ entries|length }};
const csrfToken = '{{ csrf_token('haccp_form_reception') }}';
const saveUrl   = '{{ path('tenant_haccp_formulaire_sauvegarder', {type: 'reception'}) }}';
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" style="width:130px"></td>
        <td><input type="text" name="entries[${i}][fournisseur]" class="form-control form-control-sm" placeholder="Fournisseur"></td>
        <td><input type="text" name="entries[${i}][produit]" class="form-control form-control-sm" placeholder="Produit"></td>
        <td><input type="text" name="entries[${i}][numero_lot]" class="form-control form-control-sm" placeholder="N° lot"></td>
        <td><input type="number" step="0.1" name="entries[${i}][temperature]" class="form-control form-control-sm text-center" style="width:80px;margin:auto"></td>
        <td><input type="date" name="entries[${i}][dlc]" class="form-control form-control-sm" style="width:130px"></td>
        <td class="text-center"><input type="checkbox" class="form-check-input" name="entries[${i}][emballage_ok]" value="1"></td>
        <td class="text-center"><input type="checkbox" class="form-check-input" name="entries[${i}][conforme]" value="1"></td>
        <td><input type="text" name="entries[${i}][observation]" class="form-control form-control-sm" placeholder="Observations"></td>
        <td><input type="text" name="entries[${i}][visa]" class="form-control form-control-sm text-center" style="width:70px;margin:auto" placeholder="Initiales"></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('formReception');
    const data = new FormData(form);
    form.querySelectorAll('input[type=checkbox]:not(:checked)').forEach(cb => data.set(cb.name, '0'));
    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 %}