{% extends 'cantine/_layout.html.twig' %}

{% block title %}Achats{% endblock %}

{% block page_title %}Achats{% endblock %}

{% block body %}
    <style>
        /* Chevron pivote selon l'état ouvert/fermé du panneau "Nouvel achat" (aria-expanded posé par Bootstrap collapse). */
        [data-bs-toggle="collapse"] .chevron-nouvel-achat { transition: transform 0.2s ease; }
        [data-bs-toggle="collapse"][aria-expanded="true"] .chevron-nouvel-achat { transform: rotate(180deg); }
    </style>

    {% if produitsSaisonniers is not empty %}
        <div class="card mb-5 border border-success">
            <div class="card-body">
                <div class="fs-6 fw-bold mb-3">Produits de saison en ce moment</div>
                <div class="d-flex flex-column gap-2">
                    {% for produit in produitsSaisonniers %}
                        <div class="d-flex justify-content-between">
                            <span>{{ produit.libelle }}</span>
                            <span class="text-muted">{{ produit.prixIndicatif|montant }} - jusqu'au {{ produit.dateFin|date('d/m/Y') }}</span>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endif %}

    <div class="card mb-5">
        <div class="card-header cursor-pointer" data-bs-toggle="collapse" data-bs-target="#collapse-nouvel-achat" aria-expanded="false" aria-controls="collapse-nouvel-achat">
            <div class="card-title"><h3>Nouvel achat</h3></div>
            <div class="card-toolbar">
                <i class="ki-outline ki-down fs-1 chevron-nouvel-achat"></i>
            </div>
        </div>
        <div class="collapse" id="collapse-nouvel-achat">
            <div class="card-body pt-0">
            <form method="post" action="{{ path('cantine_achats_nouveau') }}" enctype="multipart/form-data" id="form-achat">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('cantine_achats_nouveau') }}">

                <div class="mb-5">
                    <label class="form-label">Date d'achat *</label>
                    <input type="date" name="date_achat" value="{{ 'now'|date('Y-m-d') }}" required class="form-control form-control-lg" style="max-width: 220px;">
                </div>

                <div id="lignes-achat" class="d-flex flex-column gap-3 mb-3">
                    {% for i in 1..4 %}
                        <div class="d-flex align-items-center gap-2 ligne-achat">
                            <input type="text" name="article[]" class="form-control form-control-lg" placeholder="Ex : 3 kg oignons rouges" inputmode="text" autocomplete="off">
                            <input type="number" name="prix[]" class="form-control form-control-lg montant-ligne" placeholder="Prix" inputmode="numeric" min="0" step="1" style="max-width: 140px;">
                            <button type="button" class="btn btn-icon btn-light-danger btn-sm supprimer-ligne" aria-label="Supprimer cette ligne">
                                <i class="ki-outline ki-trash fs-3"></i>
                            </button>
                        </div>
                    {% endfor %}
                </div>

                <button type="button" id="ajouter-ligne" class="btn btn-light-primary mb-5">
                    <i class="ki-outline ki-plus fs-3"></i> Ajouter un article
                </button>

                <div class="d-flex align-items-center justify-content-between bg-light-primary rounded p-4 mb-5">
                    <span class="fs-4 fw-bold">Total</span>
                    <span class="fs-2 fw-bolder text-primary" id="total-achat">0 FCFA</span>
                </div>

                <div class="mb-5">
                    <label class="form-label">Photos (facultatif - reçu, produits achetés... plusieurs possibles)</label>
                    <input type="file" name="fichiers[]" accept="image/*" capture="environment" multiple class="form-control form-control-lg">
                </div>

                <button type="submit" class="btn btn-primary btn-lg w-100">Enregistrer l'achat</button>
            </form>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Achats</h3></div>
        </div>
        <div class="card-body pt-0">
            {% if historique is empty %}
                <div class="text-muted" id="achats-vide">Aucun achat enregistré.</div>
            {% endif %}
            <div class="d-flex flex-column gap-4" id="liste-achats">
                {% for depense in historique %}
                    <div class="border rounded p-4">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <span class="fs-4 fw-bold">{{ depense.montant|montant }} FCFA</span>
                            {% if depense.statut.value == 'en_attente' %}
                                <span class="badge badge-light-warning">{{ depense.statut.label }}</span>
                            {% elseif depense.statut.value == 'valide' %}
                                <span class="badge badge-light-success">{{ depense.statut.label }}</span>
                            {% else %}
                                <span class="badge badge-light-danger">{{ depense.statut.label }}</span>
                            {% endif %}
                        </div>
                        <div class="fs-6 fw-bold text-primary mb-2">
                            <i class="ki-outline ki-calendar fs-6 me-1"></i>{{ (depense.dateAchat ?? depense.dateSaisie)|date('d/m/Y') }}
                        </div>
                        <div class="text-gray-700" style="white-space: pre-line;">{{ depense.description }}</div>
                        {% if depense.motifRefus %}<div class="text-danger fs-7 mt-2">Motif du refus : {{ depense.motifRefus }}</div>{% endif %}
                        {% if piecesParDepense[depense.id] is not empty %}
                            <div class="d-flex flex-wrap gap-2 mt-2">
                                {% for piece in piecesParDepense[depense.id] %}
                                    <div class="position-relative">
                                        <a href="{{ path('cantine_achats_piece', {pieceId: piece.id}) }}" target="_blank" rel="noopener" title="Voir la photo {{ loop.index }}">
                                            {% if piece.cle ends with '.pdf' %}
                                                <span class="d-flex align-items-center justify-content-center rounded border bg-light-primary" style="width: 56px; height: 56px;">
                                                    <i class="ki-outline ki-file-down fs-2 text-primary"></i>
                                                </span>
                                            {% else %}
                                                <img src="{{ path('cantine_achats_piece', {pieceId: piece.id}) }}" alt="Photo {{ loop.index }}" class="rounded border" style="width: 56px; height: 56px; object-fit: cover;">
                                            {% endif %}
                                        </a>
                                        {% if peutModifier and modifiableParDepense[depense.id] %}
                                            <form method="post" action="{{ path('cantine_achats_piece_supprimer', {pieceId: piece.id}) }}" onsubmit="return confirm('Supprimer cette photo ?');" class="position-absolute top-0 end-0" style="transform: translate(35%, -35%);">
                                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('cantine_achats_piece_supprimer_' ~ piece.id) }}">
                                                <button type="submit" class="btn btn-icon btn-danger btn-sm rounded-circle p-0" style="width: 20px; height: 20px;" aria-label="Supprimer cette photo">
                                                    <i class="ki-outline ki-cross fs-8"></i>
                                                </button>
                                            </form>
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            </div>
                        {% endif %}
                        {% if peutModifier and modifiableParDepense[depense.id] %}
                            <button type="button" class="btn btn-light btn-sm mt-3" data-bs-toggle="collapse" data-bs-target="#collapse-modifier-achat-{{ depense.id }}">Modifier</button>
                            <div class="collapse mt-3" id="collapse-modifier-achat-{{ depense.id }}">
                                <form method="post" action="{{ path('cantine_achats_modifier', {id: depense.id}) }}" enctype="multipart/form-data" class="border-top pt-3">
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('cantine_achats_modifier_' ~ depense.id) }}">
                                    <div class="mb-3">
                                        <label class="form-label">Date d'achat</label>
                                        <input type="date" name="date_achat" value="{{ (depense.dateAchat ?? depense.dateSaisie)|date('Y-m-d') }}" required class="form-control form-control-sm" style="max-width: 200px;">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Détail</label>
                                        <textarea name="description" required class="form-control form-control-sm" rows="3">{{ depense.description }}</textarea>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Montant total (FCFA)</label>
                                        <input type="number" name="montant" value="{{ depense.montant }}" min="0" step="1" required class="form-control form-control-sm" style="max-width: 160px;">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Ajouter une photo (facultatif)</label>
                                        <input type="file" name="fichiers[]" accept="image/*" capture="environment" multiple class="form-control form-control-sm">
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-sm">Enregistrer les corrections</button>
                                </form>
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
            {% if total > historique|length %}
                <div class="text-center mt-5">
                    <button type="button" id="charger-plus" class="btn btn-light-primary">Charger plus</button>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block javascripts_bottom %}
    {{ parent() }}
    <script>
        (function () {
            const conteneur = document.getElementById('lignes-achat');
            const boutonAjouter = document.getElementById('ajouter-ligne');
            const totalAffiche = document.getElementById('total-achat');

            function formaterFcfa(montant) {
                return new Intl.NumberFormat('fr-FR').format(montant) + ' FCFA';
            }

            function recalculerTotal() {
                let total = 0;
                conteneur.querySelectorAll('.montant-ligne').forEach(function (champ) {
                    total += parseFloat(champ.value) || 0;
                });
                totalAffiche.textContent = formaterFcfa(total);
            }

            function creerLigne() {
                const ligne = document.createElement('div');
                ligne.className = 'd-flex align-items-center gap-2 ligne-achat';
                ligne.innerHTML =
                    '<input type="text" name="article[]" class="form-control form-control-lg" placeholder="Article" inputmode="text" autocomplete="off">' +
                    '<input type="number" name="prix[]" class="form-control form-control-lg montant-ligne" placeholder="Prix" inputmode="numeric" min="0" step="1" style="max-width: 140px;">' +
                    '<button type="button" class="btn btn-icon btn-light-danger btn-sm supprimer-ligne" aria-label="Supprimer cette ligne"><i class="ki-outline ki-trash fs-3"></i></button>';
                return ligne;
            }

            boutonAjouter.addEventListener('click', function () {
                const ligne = creerLigne();
                conteneur.appendChild(ligne);
                ligne.querySelector('input[type=text]').focus();
            });

            conteneur.addEventListener('click', function (evenement) {
                const bouton = evenement.target.closest('.supprimer-ligne');
                if (!bouton) {
                    return;
                }
                if (conteneur.querySelectorAll('.ligne-achat').length <= 1) {
                    return;
                }
                bouton.closest('.ligne-achat').remove();
                recalculerTotal();
            });

            conteneur.addEventListener('input', function (evenement) {
                if (evenement.target.classList.contains('montant-ligne')) {
                    recalculerTotal();
                }
            });
        })();

        (function () {
            const boutonChargerPlus = document.getElementById('charger-plus');
            if (!boutonChargerPlus) {
                return;
            }

            const listeAchats = document.getElementById('liste-achats');
            const badgesParStatut = { en_attente: 'badge-light-warning', valide: 'badge-light-success', refuse: 'badge-light-danger' };
            let offset = {{ historique|length }};
            const limite = {{ taillePage }};
            let compteurCollapse = 0;

            function echapperHtml(valeur) {
                if (valeur === null || valeur === undefined) {
                    return '';
                }
                return String(valeur)
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#39;');
            }

            function creerCarteAchat(achat, peutModifier) {
                const carte = document.createElement('div');
                carte.className = 'border rounded p-4';

                const badgeClasse = badgesParStatut[achat.statut] || 'badge-light-danger';
                const motifHtml = achat.motifRefus
                    ? '<div class="text-danger fs-7 mt-2">Motif du refus : ' + echapperHtml(achat.motifRefus) + '</div>'
                    : '';
                const pieces = achat.pieces || [];
                const vignettesHtml = pieces.map(function (piece, index) {
                    const apercu = piece.estPdf
                        ? '<span class="d-flex align-items-center justify-content-center rounded border bg-light-primary" style="width: 56px; height: 56px;"><i class="ki-outline ki-file-down fs-2 text-primary"></i></span>'
                        : '<img src="' + echapperHtml(piece.url) + '" alt="Photo ' + (index + 1) + '" class="rounded border" style="width: 56px; height: 56px; object-fit: cover;">';
                    let vignette = '<div class="position-relative">' +
                        '<a href="' + echapperHtml(piece.url) + '" target="_blank" rel="noopener" title="Voir la photo ' + (index + 1) + '">' + apercu + '</a>';
                    if (peutModifier && achat.modifiable) {
                        vignette += '<form method="post" action="' + echapperHtml(piece.urlSupprimer) + '" onsubmit="return confirm(\'Supprimer cette photo ?\');" class="position-absolute top-0 end-0" style="transform: translate(35%, -35%);">' +
                            '<input type="hidden" name="_csrf_token" value="' + echapperHtml(piece.csrfSupprimer) + '">' +
                            '<button type="submit" class="btn btn-icon btn-danger btn-sm rounded-circle p-0" style="width: 20px; height: 20px;" aria-label="Supprimer cette photo"><i class="ki-outline ki-cross fs-8"></i></button>' +
                            '</form>';
                    }
                    return vignette + '</div>';
                }).join('');
                const piecesHtml = pieces.length > 0 ? '<div class="d-flex flex-wrap gap-2 mt-2">' + vignettesHtml + '</div>' : '';

                let modifierHtml = '';
                if (peutModifier && achat.modifiable) {
                    compteurCollapse += 1;
                    const idCollapse = 'collapse-modifier-achat-charge-' + compteurCollapse;
                    modifierHtml =
                        '<button type="button" class="btn btn-light btn-sm mt-3" data-bs-toggle="collapse" data-bs-target="#' + idCollapse + '">Modifier</button>' +
                        '<div class="collapse mt-3" id="' + idCollapse + '">' +
                        '<form method="post" action="' + echapperHtml(achat.urlModifier) + '" enctype="multipart/form-data" class="border-top pt-3">' +
                        '<input type="hidden" name="_csrf_token" value="' + echapperHtml(achat.csrfModifier) + '">' +
                        '<div class="mb-3"><label class="form-label">Date d\'achat</label>' +
                        '<input type="date" name="date_achat" value="' + echapperHtml(achat.dateAchatIso) + '" required class="form-control form-control-sm" style="max-width: 200px;"></div>' +
                        '<div class="mb-3"><label class="form-label">Détail</label>' +
                        '<textarea name="description" required class="form-control form-control-sm" rows="3">' + echapperHtml(achat.description) + '</textarea></div>' +
                        '<div class="mb-3"><label class="form-label">Montant total (FCFA)</label>' +
                        '<input type="number" name="montant" value="' + echapperHtml(achat.montant) + '" min="0" step="1" required class="form-control form-control-sm" style="max-width: 160px;"></div>' +
                        '<div class="mb-3"><label class="form-label">Ajouter une photo (facultatif)</label>' +
                        '<input type="file" name="fichiers[]" accept="image/*" capture="environment" multiple class="form-control form-control-sm"></div>' +
                        '<button type="submit" class="btn btn-primary btn-sm">Enregistrer les corrections</button>' +
                        '</form></div>';
                }

                carte.innerHTML =
                    '<div class="d-flex justify-content-between align-items-start mb-2">' +
                    '<span class="fs-4 fw-bold">' + new Intl.NumberFormat('fr-FR').format(achat.montant) + ' FCFA</span>' +
                    '<span class="badge ' + badgeClasse + '">' + echapperHtml(achat.statutLabel) + '</span>' +
                    '</div>' +
                    '<div class="fs-6 fw-bold text-primary mb-2"><i class="ki-outline ki-calendar fs-6 me-1"></i>' + echapperHtml(achat.date) + '</div>' +
                    '<div class="text-gray-700" style="white-space: pre-line;">' + echapperHtml(achat.description) + '</div>' +
                    motifHtml + piecesHtml + modifierHtml;

                return carte;
            }

            boutonChargerPlus.addEventListener('click', function () {
                boutonChargerPlus.disabled = true;

                fetch('{{ path('cantine_achats_donnees') }}?offset=' + offset + '&limit=' + limite)
                    .then(function (reponse) { return reponse.json(); })
                    .then(function (donnees) {
                        donnees.items.forEach(function (achat) {
                            listeAchats.appendChild(creerCarteAchat(achat, donnees.peutModifier));
                        });
                        offset += donnees.items.length;
                        boutonChargerPlus.disabled = false;
                        if (offset >= donnees.total) {
                            boutonChargerPlus.remove();
                        }
                    });
            });
        })();
    </script>
{% endblock %}