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

{% set is_edit = produit and produit.id is defined %}

{% block title %}{{ is_edit ? 'Modifier le produit' : 'Nouveau produit' }} — Mercuriale{% endblock %}

{% block body %}
<div class="d-flex align-items-center justify-content-between mb-4">
    <h1 class="h4 fw-bold mb-0 page-title">
        <i class="fas fa-tags me-2"></i>
        {{ is_edit ? 'Modifier « ' ~ produit.nom_produit ~ ' »' : 'Nouveau produit mercuriale' }}
    </h1>
    <a href="{{ path('tenant_mercuriales_index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i>Retour
    </a>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm rounded-3">
            <div class="card-body p-4">
                <form method="post" action="{{ action }}" novalidate>
                    <input type="hidden" name="_token" value="{{ csrf_token(token) }}">

                    <div class="row g-3">

                        <div class="col-12">
                            <label for="nom_produit" class="form-label fw-semibold">
                                Nom du produit <span class="text-danger">*</span>
                            </label>
                            <input type="text" id="nom_produit" name="nom_produit" class="form-control"
                                   value="{{ produit.nom_produit ?? '' }}" required autofocus>
                        </div>

                        <div class="col-sm-6">
                            <label for="fournisseur_id" class="form-label fw-semibold">Fournisseur</label>
                            <select id="fournisseur_id" name="fournisseur_id" class="form-select">
                                <option value="">— Aucun —</option>
                                {% for f in fournisseurs %}
                                    <option value="{{ f.id }}" {{ (produit.fournisseur_id ?? '') == f.id ? 'selected' }}>
                                        {{ f.nom }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-sm-6">
                            <label for="reference_fournisseur" class="form-label fw-semibold">Référence fournisseur</label>
                            <input type="text" id="reference_fournisseur" name="reference_fournisseur" class="form-control"
                                   value="{{ produit.reference_fournisseur ?? '' }}" placeholder="Ex: REF-2025-001">
                        </div>

                        <div class="col-sm-6">
                            <label for="categorie" class="form-label fw-semibold">Catégorie</label>
                            <select id="categorie" name="categorie" class="form-select">
                                <option value="">— Aucune —</option>
                                {% for cat in categories %}
                                    <option value="{{ cat }}" {{ (produit.categorie ?? '') == cat ? 'selected' }}>{{ cat }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-sm-6">
                            <label for="unite" class="form-label fw-semibold">Unité</label>
                            <select id="unite" name="unite" class="form-select">
                                {% for u in ['kg', 'g', 'L', 'cL', 'mL', 'pièce', 'boîte', 'sachet', 'carton', 'litre'] %}
                                    <option value="{{ u }}" {{ (produit.unite ?? 'kg') == u ? 'selected' }}>{{ u }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-sm-4">
                            <label class="form-label fw-semibold" id="prix_saisi_label">
                                Prix unitaire HT <span class="text-danger">*</span>
                            </label>
                            <div class="btn-group d-flex mb-2" role="group" aria-label="Mode saisie prix">
                                <input type="radio" class="btn-check" name="prix_mode" id="mode_ht" value="ht" checked autocomplete="off">
                                <label class="btn btn-outline-secondary btn-sm flex-fill" for="mode_ht">Saisie HT</label>
                                <input type="radio" class="btn-check" name="prix_mode" id="mode_ttc" value="ttc" autocomplete="off">
                                <label class="btn btn-outline-secondary btn-sm flex-fill" for="mode_ttc">Saisie TTC</label>
                            </div>
                            <div class="input-group">
                                <input type="number" id="prix_saisi" class="form-control"
                                       value="{{ produit.prix_unitaire_ht ?? '' }}" required min="0" step="0.0001"
                                       placeholder="0.0000">
                                <span class="input-group-text">€</span>
                            </div>
                            <input type="hidden" name="prix_unitaire_ht" id="prix_unitaire_ht_hidden"
                                   value="{{ produit.prix_unitaire_ht ?? '' }}">
                            <div id="prix_preview" class="mt-1"></div>
                        </div>

                        <div class="col-sm-4">
                            <label for="taux_tva" class="form-label fw-semibold">TVA</label>
                            <select id="taux_tva" name="taux_tva" class="form-select">
                                {% for t in [0, 5.5, 10, 20] %}
                                    <option value="{{ t }}" {{ (produit.taux_tva ?? 5.5)|number_format(1) == t|number_format(1) ? 'selected' }}>{{ t }} %</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-sm-4">
                            <label for="date_prix" class="form-label fw-semibold">Date du tarif</label>
                            <input type="date" id="date_prix" name="date_prix" class="form-control"
                                   value="{{ produit.date_prix ?? ''|date('Y-m-d') }}">
                        </div>

                        <div class="col-sm-6">
                            <label for="origine" class="form-label fw-semibold">Origine</label>
                            <input type="text" id="origine" name="origine" class="form-control"
                                   value="{{ produit.origine ?? '' }}" placeholder="Ex : France, Espagne…">
                        </div>

                        <div class="col-sm-6">
                            <label for="label" class="form-label fw-semibold">Label</label>
                            <select id="label" name="label" class="form-select">
                                <option value="">— Aucun —</option>
                                {% for l in labels %}
                                    <option value="{{ l.label_mercuriale }}"
                                        {{ (produit.label ?? '') == l.label_mercuriale ? 'selected' }}
                                        title="{{ l.categorie_egalim }}">
                                        {{ l.label_mercuriale }}
                                        {% if l.categorie_egalim == 'bio' %}🌿{% elseif l.categorie_egalim == 'durable' %}♻️{% endif %}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="bio" name="bio" value="1"
                                       {{ produit.bio ?? 0 ? 'checked' }}>
                                <label class="form-check-label fw-semibold" for="bio">
                                    <span class="badge bg-success me-1"><i class="fas fa-leaf"></i> Bio</span>
                                    Produit issu de l'agriculture biologique
                                </label>
                            </div>
                        </div>

                        <div class="col-12">
                            <label for="description" class="form-label fw-semibold">Description</label>
                            <textarea id="description" name="description" class="form-control" rows="2">{{ produit.description ?? '' }}</textarea>
                        </div>

                        <div class="col-12">
                            <label for="allergenes" class="form-label fw-semibold">Allergènes</label>
                            <input type="text" id="allergenes" name="allergenes" class="form-control"
                                   value="{{ produit.allergenes ?? '' }}" placeholder="Ex : Gluten, Lactose…">
                        </div>

                    </div>{# /row #}

                    <hr class="my-4">
                    <div class="d-flex gap-2 justify-content-end">
                        <a href="{{ path('tenant_mercuriales_index') }}" class="btn btn-outline-secondary">Annuler</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>{{ is_edit ? 'Enregistrer les modifications' : 'Ajouter le produit' }}
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>

    {# ── Colonne historique ────────────────────────────────────────────── #}
    {% if is_edit and historique is defined and historique is not empty %}
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm rounded-3">
            <div class="card-header bg-transparent fw-semibold py-3">
                <i class="fas fa-history me-2 text-muted"></i>Historique des prix
            </div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    <thead class="table-light">
                        <tr><th>Date</th><th class="text-end">Prix HT</th><th>TVA</th></tr>
                    </thead>
                    <tbody>
                        {% for h in historique %}
                        <tr>
                            <td class="small">{{ h.date_prix|date('d/m/Y') }}</td>
                            <td class="text-end small">{{ h.prix_unitaire_ht|number_format(4, ',', ' ') }} €</td>
                            <td class="small text-muted">{{ h.taux_tva }} %</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}

</div>

<script>
(function () {
    var labelEl   = document.getElementById('prix_saisi_label');
    var inputEl   = document.getElementById('prix_saisi');
    var hiddenEl  = document.getElementById('prix_unitaire_ht_hidden');
    var previewEl = document.getElementById('prix_preview');
    var tvaEl     = document.getElementById('taux_tva');
    var modeHT    = document.getElementById('mode_ht');
    var modeTTC   = document.getElementById('mode_ttc');

    if (!inputEl) return;

    function getTva() { return parseFloat(tvaEl.value) || 0; }

    function calcPreview() {
        var val   = parseFloat(String(inputEl.value).replace(',', '.')) || 0;
        var tva   = getTva();
        var coeff = 1 + tva / 100;

        if (modeHT.checked) {
            hiddenEl.value = val.toFixed(4);
            labelEl.innerHTML = 'Prix unitaire HT <span class="text-danger">*</span>';
            previewEl.innerHTML = val > 0
                ? '<small class="text-muted">→ TTC : <strong>' + (val * coeff).toFixed(4) + ' €</strong></small>'
                : '';
        } else {
            var ht = coeff > 0 ? val / coeff : val;
            hiddenEl.value = ht.toFixed(4);
            labelEl.innerHTML = 'Prix unitaire TTC <span class="text-danger">*</span>';
            previewEl.innerHTML = val > 0
                ? '<small class="text-muted">→ HT : <strong>' + ht.toFixed(4) + ' €</strong></small>'
                : '';
        }
    }

    function switchMode() {
        var val   = parseFloat(String(inputEl.value).replace(',', '.')) || 0;
        var tva   = getTva();
        var coeff = 1 + tva / 100;
        if (val > 0) {
            if (modeTTC.checked) {
                inputEl.value = (val * coeff).toFixed(4);
            } else {
                inputEl.value = coeff > 0 ? (val / coeff).toFixed(4) : val.toFixed(4);
            }
        }
        calcPreview();
    }

    inputEl.addEventListener('input', calcPreview);
    tvaEl.addEventListener('change', calcPreview);
    modeHT.addEventListener('change', switchMode);
    modeTTC.addEventListener('change', switchMode);
    inputEl.closest('form').addEventListener('submit', calcPreview);

    calcPreview();
})();
</script>
{% endblock %}