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

{% block title %}Produits vendus{% endblock %}

{% block page_title %}Produits vendus & stock{% endblock %}

{% block body %}
    {% if is_granted('ROLE_DIRECTION') %}
        <div class="card mb-5 mb-xl-8">
            <div class="card-header border-0 pt-6">
                <div class="card-title"><h3>Nouveau produit</h3></div>
            </div>
            <div class="card-body pt-0">
                <form method="post" action="{{ path('comptabilite_produits_vendus_nouveau') }}" class="row g-3 align-items-end">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('produits_vendus_nouveau') }}">
                    <div class="col-md-4">
                        <label class="form-label">Nom *</label>
                        <input type="text" name="nom" placeholder="Uniforme, Tenue de sport..." required class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Prix *</label>
                        <input type="text" name="prix" required class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Stock initial *</label>
                        <input type="number" name="quantite_stock" min="0" value="0" required class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Seuil d'alerte</label>
                        <input type="number" name="seuil_alerte" min="0" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary">Créer</button>
                    </div>
                </form>
            </div>
        </div>
    {% endif %}

    <div class="card mb-5 mb-xl-8">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Catalogue</h3></div>
        </div>
        <div class="card-body pt-0">
            {% if produits is empty %}
                <div class="text-muted">Aucun produit pour l'instant.</div>
            {% else %}
                <div class="table-responsive">
                    <table class="table align-middle table-row-dashed fs-6 gy-5">
                        <thead>
                            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                <th>Nom</th>
                                <th>Prix</th>
                                <th>Stock</th>
                                <th>Statut</th>
                                {% if is_granted('ROLE_DIRECTION') %}<th></th>{% endif %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for produit in produits %}
                                <tr>
                                    <td>{{ produit.nom }}</td>
                                    <td>{{ produit.prix }}</td>
                                    <td>
                                        {{ produit.quantiteStock }}
                                        {% if produit.estSousLeSeuil %}
                                            <span class="badge badge-light-warning ms-2">Stock bas</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if produit.actif %}
                                            <span class="badge badge-light-success">Actif</span>
                                        {% else %}
                                            <span class="badge badge-light">Désactivé</span>
                                        {% endif %}
                                    </td>
                                    {% if is_granted('ROLE_DIRECTION') %}
                                        <td>
                                            {% if produit.actif %}
                                                <form method="post" action="{{ path('comptabilite_produits_vendus_desactiver', {id: produit.id}) }}">
                                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('produits_vendus_desactiver_' ~ produit.id) }}">
                                                    <button type="submit" class="btn btn-light btn-sm">Désactiver</button>
                                                </form>
                                            {% else %}
                                                <form method="post" action="{{ path('comptabilite_produits_vendus_activer', {id: produit.id}) }}">
                                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('produits_vendus_activer_' ~ produit.id) }}">
                                                    <button type="submit" class="btn btn-light-success btn-sm">Activer</button>
                                                </form>
                                            {% endif %}
                                        </td>
                                    {% endif %}
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>
    </div>

    <div class="row g-5">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header border-0 pt-6">
                    <div class="card-title"><h3>Vente</h3></div>
                </div>
                <div class="card-body pt-0">
                    {% if produitsActifs is empty or enfants is empty %}
                        <div class="text-muted">
                            {% if produitsActifs is empty %}Aucun produit actif à vendre.{% else %}Aucun enfant actif.{% endif %}
                        </div>
                    {% else %}
                        <form method="post" action="{{ path('comptabilite_produits_vendus_vente', {id: 0}) }}" id="form-vente" class="row g-3">
                            <input type="hidden" name="_csrf_token" value="">
                            <div class="col-12">
                                <label class="form-label">Produit *</label>
                                <select name="produit" id="vente-produit" required class="form-select">
                                    {% for produit in produitsActifs %}
                                        <option value="{{ produit.id }}" data-csrf="{{ csrf_token('produits_vendus_vente_' ~ produit.id) }}">{{ produit.nom }} ({{ produit.quantiteStock }} en stock)</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-6">
                                <label class="form-label">Enfant *</label>
                                <select name="enfant" required class="form-select">
                                    <option value=""></option>
                                    {% for enfant in enfants %}
                                        <option value="{{ enfant.id }}">{{ enfant.prenom }} {{ enfant.nom }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-6">
                                <label class="form-label">Quantité *</label>
                                <input type="number" name="quantite" min="1" value="1" required class="form-control">
                            </div>
                            {% if caisses is not empty %}
                                <div class="col-12">
                                    <label class="form-label">Caisse</label>
                                    <select name="caisse" class="form-select">
                                        <option value="0"></option>
                                        {% for caisse in caisses %}
                                            <option value="{{ caisse.id }}">{{ caisse.nom }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            {% endif %}
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">Vendre</button>
                            </div>
                        </form>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header border-0 pt-6">
                    <div class="card-title"><h3>Réapprovisionnement</h3></div>
                </div>
                <div class="card-body pt-0">
                    {% if produitsActifs is empty or categories is empty %}
                        <div class="text-muted">
                            {% if produitsActifs is empty %}Aucun produit actif.{% else %}Aucune catégorie de dépense active.{% endif %}
                        </div>
                    {% else %}
                        <form method="post" action="{{ path('comptabilite_produits_vendus_reapprovisionnement', {id: 0}) }}" enctype="multipart/form-data" id="form-reappro" class="row g-3">
                            <input type="hidden" name="_csrf_token" value="">
                            <div class="col-12">
                                <label class="form-label">Produit *</label>
                                <select name="produit" id="reappro-produit" required class="form-select">
                                    {% for produit in produitsActifs %}
                                        <option value="{{ produit.id }}" data-csrf="{{ csrf_token('produits_vendus_reappro_' ~ produit.id) }}">{{ produit.nom }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-6">
                                <label class="form-label">Quantité *</label>
                                <input type="number" name="quantite" min="1" value="1" required class="form-control">
                            </div>
                            <div class="col-6">
                                <label class="form-label">Montant total *</label>
                                <input type="text" name="montant" required class="form-control">
                            </div>
                            <div class="col-6">
                                <label class="form-label">Catégorie de dépense *</label>
                                <select name="categorie" required class="form-select">
                                    {% for categorie in categories %}
                                        <option value="{{ categorie.id }}">{{ categorie.libelle }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            {% if caisses is not empty %}
                                <div class="col-6">
                                    <label class="form-label">Caisse</label>
                                    <select name="caisse" class="form-select">
                                        <option value="0"></option>
                                        {% for caisse in caisses %}
                                            <option value="{{ caisse.id }}">{{ caisse.nom }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            {% endif %}
                            <div class="col-12">
                                <label class="form-label">Pièce justificative</label>
                                <input type="file" name="fichier" class="form-control">
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">Enregistrer</button>
                            </div>
                        </form>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts_bottom %}
    {{ parent() }}
    <script>
        (function () {
            function brancherFormulaireDynamique(formId, selectId, urlModele) {
                const form = document.getElementById(formId);
                const select = document.getElementById(selectId);
                if (!form || !select) {
                    return;
                }

                function synchroniser() {
                    const option = select.options[select.selectedIndex];
                    if (!option) {
                        return;
                    }
                    form.action = urlModele.replace('0', option.value);
                    form.querySelector('input[name="_csrf_token"]').value = option.dataset.csrf;
                }

                select.addEventListener('change', synchroniser);
                synchroniser();
            }

            brancherFormulaireDynamique('form-vente', 'vente-produit', '{{ path('comptabilite_produits_vendus_vente', {id: 0}) }}');
            brancherFormulaireDynamique('form-reappro', 'reappro-produit', '{{ path('comptabilite_produits_vendus_reapprovisionnement', {id: 0}) }}');
        })();
    </script>
{% endblock %}