{% extends 'entreprise/entreprise_base.html.twig' %}

{% block title %}Paiement sécurisé | {{ plan.titre }}{% endblock %}

{% block body %}
{# --- VARIABLES INITIALES --- #}
{% set prixMensuel = plan.prix %}
{% set soldeActuel = app.user.entreprise.soldeCredit|default(0) %}
{% set montantAvoirCumule = (mode == 'CHANGEMENT') ? avoir_total|default(0) : 0 %}
{% set soldeDisponibleTotal = soldeActuel + montantAvoirCumule %}

<div class="checkout-container py-5">
    <div class="container">
        <div class="row mb-4">
            <div class="col-12 text-center">
                <span class="badge bg-primary-soft text-primary text-uppercase mb-2 px-3">Paiement Sécurisé</span>
                <h1 class="fw-bold h3">
                    {% if mode == 'RENOUVELLEMENT' %}Renouvellement de votre offre{% else %}Finalisez votre abonnement{% endif %}
                </h1>
                <p class="text-muted">Plan sélectionné : <strong>{{ plan.titre }}</strong></p>
            </div>
        </div>

        <div class="row g-4 justify-content-center">
            {# --- COLONNE GAUCHE : CONFIGURATION ET PAIEMENT --- #}
            <div class="col-lg-7">
                <div class="card shadow-sm p-4 mb-4 border-0 rounded-4">
                    <form action="{{ path('app_entreprise_abonnement_souscrire', {id: plan.id}) }}" method="POST" id="checkout-form">
                        
                        {# --- ÉTAPE 1 : CHOIX DE LA DURÉE --- #}
                        <h5 class="fw-bold mb-4"><span class="badge-step">1</span>Durée de l'engagement</h5>
                        <div class="row g-3 mb-4">
                            {% if plan.prix <= 0 %}
                                {# Cas Plan Gratuit : Bloqué à 3 mois #}
                                <div class="col-12">
                                    <div class="p-3 border rounded-4 bg-success d-flex justify-content-between align-items-center">
                                        <div>
                                            <span class="fw-bold d-block">Période d'essai gratuite</span>
                                            <small class="text-muted">Accès complet pendant 3 mois</small>
                                        </div>
                                        <input type="hidden" name="duree_mois" value="3">
                                        <span class="badge bg-dark">3 Mois</span>
                                    </div>
                                </div>
                            {% else %}
                                {# Cas Plans Payants : Sélection #}
                                {% for mois in [3, 6, 12, 24] %}
                                    <div class="col-md-3 col-6">
                                        <input type="radio" class="btn-check js-duree-input" name="duree_mois" id="duree_{{ mois }}" value="{{ mois }}" {% if mois == 12 %}checked{% endif %}>
                                        <label class="btn btn-outline-primary w-100 py-3 rounded-4" for="duree_{{ mois }}">
                                            <span class="d-block fw-bold h5 mb-0">{{ mois }}</span>
                                            <small>Mois</small>
                                        </label>
                                    </div>
                                {% endfor %}
                            {% endif %}
                        </div>

                        {# --- ÉTAPE 2 : MÉTHODE DE VALIDATION --- #}
                        <h5 class="fw-bold mb-4"><span class="badge-step">2</span>Validation du paiement</h5>

                        {# Alertes dynamiques JS (Gérées par le script en bas) #}
                        <div id="js-alert-container"></div>

                        <div class="form-check payment-option mb-3 ps-0">
                            <input class="form-check-input d-none" type="radio" name="mode_paiement" id="wallet" value="Portefeuille" checked>
                            <label class="form-check-label d-flex align-items-center p-3 rounded-4 w-100 border" for="wallet">
                                <div class="icon-shape bg-indigo-soft me-3">
                                    <i class="fas fa-wallet text-primary"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <span class="d-block fw-bold h6 mb-1">Portefeuille & Avoirs</span>
                                    <small class="text-muted">Disponible : <span class="fw-bold">{{ soldeDisponibleTotal|number_format(0, ',', ' ') }} F.CFA</span></small>
                                </div>
                                <i class="fas fa-check-circle text-primary fs-4"></i>
                            </label>
                        </div>

                        <div id="js-external-payment" style="display:none;">
                            <h6 class="fw-bold mt-4 mb-3">Régler le complément par :</h6>
                            {% include 'entreprise/_payment_methods.html.twig' with {'default_method': 'momo'} %}
                        </div>

                        <button type="submit" class="btn btn-primary btn-lg w-100 py-3 fw-bold rounded-4 shadow mt-4" id="submit-btn">
                            Confirmer l'activation
                        </button>
                    </form>
                </div>
            </div>

            {# --- COLONNE DROITE : RÉSUMÉ DYNAMIQUE --- #}
            <div class="col-lg-4">
                <div class="card shadow-sm border-0 overflow-hidden rounded-4">
                    <div class="p-4 border-bottom bg-dark text-white">
                        <h5 class="fw-bold mb-0">Récapitulatif</h5>
                    </div>
                    
                    <div class="p-4">
                        <div class="d-flex justify-content-between mb-2">
                            <span>Prix mensuel</span>
                            <span class="fw-bold">{{ prixMensuel|number_format(0, ',', ' ') }} F.CFA</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>Durée choisie</span>
                            <span class="fw-bold text-primary"><span id="summary-duree">12</span> mois</span>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between mb-2">
                            <span>Total Brut</span>
                            <span class="fw-bold" id="summary-total-brut">0 F.CFA</span>
                        </div>

                        {% if montantAvoirCumule > 0 %}
                        <div class="d-flex justify-content-between mb-2 text-success">
                            <small>Avoir appliqué (Prorata/Futur)</small>
                            <small>- {{ montantAvoirCumule|number_format(0, ',', ' ') }} F.CFA</small>
                        </div>
                        {% endif %}

                        {% if soldeActuel > 0 %}
                        <div class="d-flex justify-content-between mb-2 text-info">
                            <small>Utilisation solde Wallet</small>
                            <small id="summary-wallet-use">- 0 F.CFA</small>
                        </div>
                        {% endif %}

                        <div class="total-box text-center shadow-sm rounded-4 p-3 mt-3 bg-success" id="net-box">
                            <small class="text-uppercase fw-bold opacity-75" style="font-size: 0.7rem;">Net à payer</small>
                            <div class="h2 fw-bold mb-0" id="summary-net">0 F.CFA</div>
                        </div>

                        <div class="bg-primary-soft p-3 rounded-4 mt-3 small">
                            <div class="d-flex justify-content-between">
                                <span>Nouvelle expiration :</span>
                                <span class="fw-bold text-primary" id="summary-date-fin">--/--/----</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .badge-step { width: 25px; height: 25px; background: #0d6efd; color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; font-size: 0.8rem; vertical-align: middle; }
    .bg-primary-soft { background-color: rgba(13, 110, 253, 0.1); color: #0d6efd; }
    .payment-option label { cursor: pointer; transition: all 0.2s; border: 2px solid #eee; }
    .payment-option input:checked + label { border-color: #0d6efd; background-color: rgba(13, 110, 253, 0.05); }
    .total-box.bg-success { background-color: #198754 !important; color: white; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const prixMensuel = {{ prixMensuel }};
    const soldeDisponibleTotal = {{ soldeDisponibleTotal }};
    const dateBase = new Date(); // En production, basez-vous sur la date de fin actuelle si renouvellement

    const dureeInputs = document.querySelectorAll('.js-duree-input');
    const displayDuree = document.getElementById('summary-duree');
    const displayTotalBrut = document.getElementById('summary-total-brut');
    const displayNet = document.getElementById('summary-net');
    const displayWalletUse = document.getElementById('summary-wallet-use');
    const displayDateFin = document.getElementById('summary-date-fin');
    const netBox = document.getElementById('net-box');
    const externalPaymentDiv = document.getElementById('js-external-payment');
    const alertContainer = document.getElementById('js-alert-container');
    const submitBtn = document.getElementById('submit-btn');

    function updateCalculations() {
        // 1. Durée
        let mois = 0;
        if(prixMensuel <= 0) {
            mois = 3;
        } else {
            mois = parseInt(document.querySelector('.js-duree-input:checked').value);
        }

        // 2. Calculs Financiers
        const totalBrut = prixMensuel * mois;
        const deductionWallet = Math.min(soldeDisponibleTotal, totalBrut);
        const netAPayer = Math.max(0, totalBrut - deductionWallet);

        // 3. Mise à jour UI
        displayDuree.innerText = mois;
        displayTotalBrut.innerText = new Intl.NumberFormat().format(totalBrut) + " F.CFA";
        displayNet.innerText = new Intl.NumberFormat().format(netAPayer) + " F.CFA";
        if(displayWalletUse) displayWalletUse.innerText = "- " + new Intl.NumberFormat().format(deductionWallet) + " F.CFA";

        // 4. Gestion des alertes et boutons
        if (netAPayer <= 0) {
            netBox.classList.add('bg-success', 'text-white');
            netBox.classList.remove('bg-success');
            externalPaymentDiv.style.display = 'none';
            submitBtn.innerHTML = '<i class="fas fa-check-circle me-2"></i> Activer maintenant (Gratuit)';
            alertContainer.innerHTML = `<div class="alert alert-success border-0 rounded-4 p-3 small">
                <i class="fas fa-check-circle me-2"></i> Vos avoirs couvrent la totalité du montant.
            </div>`;
        } else {
            netBox.classList.remove('bg-success', 'text-white');
            netBox.classList.add('bg-success');
            externalPaymentDiv.style.display = 'block';
            submitBtn.innerHTML = `<i class="fas fa-lock me-2"></i> Payer ${new Intl.NumberFormat().format(netAPayer)} F.CFA`;
            alertContainer.innerHTML = '';
        }

        // 5. Calcul Date de Fin (Approximatif côté client pour le visuel)
        let dateFin = new Date();
        dateFin.setMonth(dateFin.getMonth() + mois);
        displayDateFin.innerText = dateFin.toLocaleDateString('fr-FR');
    }

    // Event listeners
    dureeInputs.forEach(input => {
        input.addEventListener('change', updateCalculations);
    });

    // Initialisation
    updateCalculations();
});
</script>
{% endblock %}