{# templates/entreprise/wallet/index.html.twig #}
{% extends 'entreprise/entreprise_base.html.twig' %}

{% block title %}Mon Portefeuille | {{ app.user.entreprise.raisonSociale }}{% endblock %}

{% block body %}
<div class="container-fluid py-4 px-md-4 conterner-express">
    
    {# --- EN-TÊTE HARMONISÉ --- #}
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
        <div class="d-flex align-items-center">
           
            <div>
                <h3 class="page-header page-header-top mb-1">Mon Portefeuille</h3>
                <p class="text-muted small mb-0">Gestion des crédits et transactions de <strong>{{ app.user.entreprise.raisonSociale }}</strong></p>
            </div>
        </div>
        <span class="badge bg-light text-dark border px-3 py-2 rounded-pill shadow-sm small">
            ID Entreprise : #{{ app.user.entreprise.id }}
        </span>
    </div>

    {% include 'flash_messages.html.twig' %}

    <div class="row g-4">
        {# --- COLONNE GAUCHE : SOLDE ET SÉCURITÉ --- #}
        <div class="col-12 col-lg-4">
            {# CARTE DE SOLDE MODERNE #}
            <div class="card border-0 shadow-sm rounded-4 wallet-gradient text-white p-4 mb-4 position-relative overflow-hidden">
                <div class="position-relative z-index-1">
                    <div class="info-label text-white-50 mb-2">Solde Disponible</div>
                    <div class="d-flex align-items-baseline">
                        <span class="display-5 fw-bold">{{ app.user.entreprise.soldeCredit|number_format(0, '.', ' ') }}</span>
                        <span class="ms-2 fw-medium opacity-75">F.CFA</span>
                    </div>
                    <div class="mt-4 pt-3 border-top border-white-10">
                        <p class="mb-0 small opacity-75 italic">
                            <i class="fas fa-info-circle me-1"></i> Crédits utilisables pour vos abonnements.
                        </p>
                    </div>
                </div>
                {# Icône de fond décorative #}
                <i class="fas fa-credit-card position-absolute bottom-0 end-0 opacity-10 mb-n3 me-n2" style="font-size: 8rem; transform: rotate(-15deg);"></i>
            </div>

            <div class="card border-0 shadow-sm rounded-4 p-4 bg-white border-start border-4 border-success">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0 bg-soft-success text-success p-3 rounded-circle me-3">
                        <i class="fas fa-shield-alt fa-lg"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1">Paiement Sécurisé</h6>
                        <p class="small text-muted mb-0 italic">Certifié SSL par nos partenaires bancaires.</p>
                    </div>
                </div>
            </div>
        </div>
        
        {# --- COLONNE DROITE : FORMULAIRE DE RECHARGEMENT --- #}
        <div class="col-12 col-lg-8">
            <div class="card border-0 shadow-sm rounded-4 p-4 p-md-5 bg-white">
                <div class="mb-4">
                    <h5 class="fw-bold border-bottom pb-2">Alimenter mon compte</h5>
                    <p class="text-muted small italic">Sélectionnez un montant prédéfini ou saisissez manuellement votre recharge.</p>
                </div>

                <form action="{{ path('app_entreprise_wallet_checkout') }}" method="GET" id="wallet-form">
                    <div class="row g-3">
                        {% for montant in [5000, 10000, 25000, 50000] %}
                        <div class="col-6 col-md-3">
                            <input type="radio" class="btn-check" name="amount" id="amt{{ montant }}" value="{{ montant }}" {% if loop.first %}checked{% endif %}>
                            <label class="btn btn-outline-success w-100 py-3 rounded-3 fw-bold amount-label transition-all" for="amt{{ montant }}">
                                {{ montant|number_format(0, '.', ' ') }} <small>F.CFA</small>
                            </label>
                        </div>
                        {% endfor %}

                        <div class="col-12 mt-4">
                            <label class="info-label mb-2">Montant personnalisé</label>
                            <div class="input-group input-group-lg shadow-none">
                                <span class="input-group-text bg-light border-end-0 text-muted ps-4"><i class="fas fa-edit small"></i></span>
                                <input type="number" name="custom_amount" id="custom_amount" class="form-control border-start-0 ps-2 shadow-none bg-light" placeholder="Saisir un montant (ex: 75000)" min="500">
                                <span class="input-group-text bg-white fw-bold px-4">F.CFA</span>
                            </div>
                        </div>

                        <div class="col-12 mt-4">
                            <button type="submit" class="btn btn-dark btn-lg w-100 rounded-3 py-3 fw-bold shadow-sm hover-up">
                                <i class="fas fa-rocket me-2"></i>Procéder au paiement
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {# --- SECTION HISTORIQUE --- #}
    <div class="mt-5">
        <div class="d-flex align-items-center mb-4">
            <h5 class="fw-bold mb-0">Historique des transactions</h5>
            <hr class="flex-grow-1 ms-3 opacity-10">
        </div>
        
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden bg-white">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 table-custom">
                    <thead class="bg-light">
                        <tr class="info-label text-muted">
                            <th class="ps-4 py-3">Date & Heure</th>
                            <th class="py-3">Désignation</th>
                            <th class="py-3">Type</th>
                            <th class="py-3">Montant</th>
                            <th class="py-3 text-center">Statut</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for transaction in transactions %}
                            <tr>
                                <td class="ps-4">
                                    <span class="d-block fw-bold text-dark">{{ transaction.createdAt|date('d/m/Y') }}</span>
                                    <small class="text-muted">{{ transaction.createdAt|date('H:i') }}</small>
                                </td>
                                <td>
                                    <span class="d-block fw-medium text-dark">{{ transaction.libelle }}</span>
                                    <code class="text-muted x-small">REF_{{ transaction.id }}</code>
                                </td>
                                <td>
                                    {% set badgeStyle = {
                                        'RECHARGEMENT': 'bg-soft-info text-info',
                                        'PAIEMENT_ABO': 'bg-soft-warning text-warning',
                                        'REMBOURSEMENT': 'bg-soft-success text-success'
                                    }[transaction.type] | default('bg-soft-secondary text-secondary') %}
                                    <span class="status-pill {{ badgeStyle }}">{{ transaction.type }}</span>
                                </td>
                                <td nowrap="nowrap">
                                    <span class="fw-bold {{ transaction.montant > 0 ? 'text-success' : 'text-danger' }}">
                                        {{ transaction.montant > 0 ? '+' : '' }}{{ transaction.montant|number_format(0, '.', ' ') }} <small>F.CFA</small>
                                    </span>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-soft-success text-success rounded-pill px-3 py-2">
                                        <i class="fas fa-check-circle me-1"></i> Confirmé
                                    </span>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="5" class="text-center py-5">
                                    <div class="py-4">
                                        <i class="fas fa-history fa-3x text-light mb-3"></i>
                                        <p class="text-muted">Aucune transaction enregistrée pour le moment.</p>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}



{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const customInput = document.getElementById('custom_amount');
            const radios = document.querySelectorAll('input[name="amount"]');

            // 1. Initialisation : Si un bouton est coché par défaut, on remplit le champ
            const checkedRadio = document.querySelector('input[name="amount"]:checked');
            if (checkedRadio) {
                customInput.value = checkedRadio.value;
            }

            // 2. Quand on clique sur un bouton montant prédéfini
            radios.forEach(radio => {
                radio.addEventListener('change', function() {
                    if (this.checked) {
                        // On remplit automatiquement le champ avec la valeur du bouton
                        customInput.value = this.value;
                    }
                });
            });

            // 3. Quand on commence à taper manuellement dans le champ personnalisé
            customInput.addEventListener('input', function() {
                // On cherche si la valeur saisie correspond exactement à l'un des boutons
                let matchFound = false;
                radios.forEach(radio => {
                    if (radio.value === this.value) {
                        radio.checked = true;
                        matchFound = true;
                    }
                });

                // Si l'utilisateur tape un montant qui n'est pas dans les boutons, on décoche tout
                if (!matchFound) {
                    radios.forEach(el => el.checked = false);
                }
            });
        });
    </script>
{% endblock %}