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

{% block title %}Export PDF Sélectif HACCP{% endblock %}

{% block body %}
<div class="d-flex justify-content-between align-items-start mb-4 flex-wrap gap-2">
    <div>
        <h1 class="h3 fw-bold page-title mb-1">
            <i class="fas fa-file-pdf me-2 text-danger"></i>Export PDF Sélectif HACCP
        </h1>
        <p class="text-muted mb-0">Sélectionnez vos critères et générez un PDF consolidé</p>
    </div>
    <a href="{{ path('tenant_haccp_index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i>Retour
    </a>
</div>

<div class="alert alert-info border-0 small mb-4">
    <i class="fas fa-info-circle me-2"></i>
    <strong>Comment ça fonctionne :</strong>
    Choisissez une <strong>année</strong>, une <strong>plage de mois</strong> et les <strong>catégories</strong> à inclure,
    puis cliquez sur <em>Prévisualiser</em> pour voir les documents disponibles. Ensuite, générez le PDF consolidé.
</div>

<div class="row g-4">
    {# ── Panneau de filtres ─────────────────────────────────────────────── #}
    <div class="col-md-4">
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header fw-semibold" style="background:linear-gradient(135deg,#0d6efd22,#0d6efd11); border-left:4px solid #0d6efd">
                <i class="fas fa-filter me-2 text-primary"></i>Critères de sélection
            </div>
            <div class="card-body">
                <form id="filterForm">
                    <input type="hidden" name="_token" value="{{ csrf_token('haccp_export_selectif') }}">

                    {# Année #}
                    <div class="mb-3">
                        <label class="form-label fw-semibold small">Année</label>
                        <select name="annee" id="annee" class="form-select form-select-sm">
                            {% for y in (anneeActuelle - 3)..(anneeActuelle + 1) %}
                            <option value="{{ y }}" {% if y == anneeActuelle %}selected{% endif %}>{{ y }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    {# Plage de mois #}
                    <div class="mb-3">
                        <label class="form-label fw-semibold small">Période</label>
                        <div class="row g-2">
                            <div class="col-6">
                                <label class="form-label small text-muted mb-1">De</label>
                                <select name="mois_debut" id="moisDebut" class="form-select form-select-sm">
                                    {% set moisNoms = ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] %}
                                    {% for i in 1..12 %}
                                    <option value="{{ i }}" {% if i == 1 %}selected{% endif %}>{{ moisNoms[i-1] }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-6">
                                <label class="form-label small text-muted mb-1">À</label>
                                <select name="mois_fin" id="moisFin" class="form-select form-select-sm">
                                    {% for i in 1..12 %}
                                    <option value="{{ i }}" {% if i == 12 %}selected{% endif %}>{{ moisNoms[i-1] }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="mt-2 d-flex gap-1 flex-wrap">
                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="setPeriode('mois')">Ce mois</button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="setPeriode('trimestre')">Ce trimestre</button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="setPeriode('annee')">Toute l'année</button>
                        </div>
                    </div>

                    {# Statut #}
                    <div class="mb-3">
                        <label class="form-label fw-semibold small">Statut</label>
                        <select name="status" class="form-select form-select-sm">
                            <option value="">Tous (brouillons + finalisés)</option>
                            <option value="finalized">Finalisés uniquement</option>
                            <option value="draft">Brouillons uniquement</option>
                        </select>
                    </div>

                    {# Catégories #}
                    <div class="mb-2">
                        <label class="form-label fw-semibold small d-flex justify-content-between">
                            <span>Catégories</span>
                            <span>
                                <a href="#" class="small text-primary text-decoration-none" onclick="toggleAll(true);return false">Tout</a> /
                                <a href="#" class="small text-secondary text-decoration-none" onclick="toggleAll(false);return false">Aucun</a>
                            </span>
                        </label>
                        {% for typeCode, typeInfo in formTypes %}
                        <div class="form-check form-check-sm">
                            <input class="form-check-input category-cb" type="checkbox"
                                   name="categories[]" value="{{ typeInfo.categorie }}"
                                   id="cat_{{ typeCode }}" checked>
                            <label class="form-check-label small" for="cat_{{ typeCode }}">
                                <i class="{{ typeInfo.icone }} me-1 text-primary small"></i>{{ typeInfo.label }}
                            </label>
                        </div>
                        {% endfor %}
                    </div>
                </form>
            </div>
        </div>
    </div>

    {# ── Panneau de prévisualisation ───────────────────────────────────── #}
    <div class="col-md-8">
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header fw-semibold d-flex justify-content-between align-items-center"
                 style="background:linear-gradient(135deg,#19875422,#19875411); border-left:4px solid #198754">
                <span><i class="fas fa-eye me-2 text-success"></i>Prévisualisation</span>
                <button type="button" id="btnPreview" class="btn btn-primary btn-sm" onclick="previsualiser()">
                    <i class="fas fa-search me-1"></i>Prévisualiser
                </button>
            </div>
            <div class="card-body">
                {# Stats #}
                <div id="statsBar" class="row text-center mb-3" style="display:none!important">
                    <div class="col-4">
                        <div class="h4 text-primary mb-0 fw-bold" id="statDocs">0</div>
                        <div class="small text-muted">Documents</div>
                    </div>
                    <div class="col-4">
                        <div class="h4 text-success mb-0 fw-bold" id="statFinalises">0</div>
                        <div class="small text-muted">Finalisés</div>
                    </div>
                    <div class="col-4">
                        <div class="h4 text-warning mb-0 fw-bold" id="statBrouillons">0</div>
                        <div class="small text-muted">Brouillons</div>
                    </div>
                </div>

                {# Zone résultat #}
                <div id="previewZone">
                    <div class="text-center text-muted py-5">
                        <i class="fas fa-search fa-3x mb-3 opacity-25"></i>
                        <p>Cliquez sur <strong>Prévisualiser</strong> pour voir les documents disponibles.</p>
                    </div>
                </div>

                <div id="msgZone" class="mt-2" style="display:none"></div>
            </div>
        </div>

        {# Bouton générer #}
        <div class="d-flex justify-content-end gap-2 mt-1">
            <button type="button" id="btnGenerer" class="btn btn-danger btn-lg" disabled onclick="genererPDF()">
                <i class="fas fa-download me-2"></i>Générer et télécharger le PDF
            </button>
        </div>
    </div>
</div>

<script>
const previewUrl = '{{ path('tenant_haccp_export_selectif_preview') }}';
const genererUrl = '{{ path('tenant_haccp_export_selectif_generer') }}';
const moisNoms   = ['','Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];

function toggleAll(checked) {
    document.querySelectorAll('.category-cb').forEach(cb => cb.checked = checked);
}

function setPeriode(type) {
    const now = new Date();
    const moisDebut = document.getElementById('moisDebut');
    const moisFin   = document.getElementById('moisFin');
    const annee     = document.getElementById('annee');

    if (type === 'mois') {
        moisDebut.value = now.getMonth() + 1;
        moisFin.value   = now.getMonth() + 1;
    } else if (type === 'trimestre') {
        const t = Math.floor(now.getMonth() / 3);
        moisDebut.value = t * 3 + 1;
        moisFin.value   = t * 3 + 3;
    } else if (type === 'annee') {
        moisDebut.value = 1;
        moisFin.value   = 12;
    }
    annee.value = now.getFullYear();
}

async function previsualiser() {
    const btn = document.getElementById('btnPreview');
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Recherche…';
    btn.disabled = true;
    document.getElementById('btnGenerer').disabled = true;
    document.getElementById('msgZone').style.display = 'none';

    try {
        const form = document.getElementById('filterForm');
        const data = new FormData(form);
        const resp = await fetch(previewUrl, { method: 'POST', body: data });
        const json = await resp.json();

        if (json.error) throw new Error(json.error);

        const docs       = json.documents;
        const finalises  = docs.filter(d => d.status === 'finalized').length;
        const brouillons = docs.length - finalises;

        // Stats
        document.getElementById('statDocs').textContent       = docs.length;
        document.getElementById('statFinalises').textContent  = finalises;
        document.getElementById('statBrouillons').textContent = brouillons;
        document.getElementById('statsBar').style.display     = '';

        // Table
        if (docs.length === 0) {
            document.getElementById('previewZone').innerHTML = `
                <div class="alert alert-warning border-0">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Aucun document trouvé pour ces critères.
                </div>`;
            document.getElementById('btnGenerer').disabled = true;
        } else {
            let rows = docs.map(d => `
                <tr>
                    <td>${d.mois_nom} ${d.annee}</td>
                    <td>${d.label}</td>
                    <td><span class="badge ${d.status === 'finalized' ? 'bg-success' : 'bg-warning text-dark'}">
                        ${d.status_label}</span></td>
                </tr>`).join('');
            document.getElementById('previewZone').innerHTML = `
                <div class="table-responsive" style="max-height:380px;overflow-y:auto">
                    <table class="table table-sm table-bordered table-hover mb-0">
                        <thead class="table-primary sticky-top">
                            <tr><th>Période</th><th>Type de formulaire</th><th>Statut</th></tr>
                        </thead>
                        <tbody>${rows}</tbody>
                    </table>
                </div>`;
            document.getElementById('btnGenerer').disabled = false;
        }
    } catch (e) {
        afficherMsg('danger', 'Erreur : ' + e.message);
        document.getElementById('btnGenerer').disabled = true;
    } finally {
        btn.innerHTML = '<i class="fas fa-search me-1"></i>Prévisualiser';
        btn.disabled  = false;
    }
}

function genererPDF() {
    const form = document.getElementById('filterForm');
    const fd   = new FormData(form);

    const params = new URLSearchParams();
    params.set('annee',      fd.get('annee'));
    params.set('mois_debut', fd.get('mois_debut'));
    params.set('mois_fin',   fd.get('mois_fin'));
    params.set('status',     fd.get('status'));
    fd.getAll('categories[]').forEach(c => params.append('categories[]', c));

    window.location.href = genererUrl + '?' + params.toString();
}

function afficherMsg(type, msg) {
    const el = document.getElementById('msgZone');
    el.innerHTML = `<div class="alert alert-${type} border-0 py-2 small">${msg}</div>`;
    el.style.display = 'block';
}
</script>
{% endblock %}