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

{% block title %}Mon compte{% endblock %}

{% block body %}
<div class="content-header" data-aos="fade-down">
    <h1 class="content-title">Mon compte</h1>
    <p class="content-subtitle">Gérez vos informations personnelles et votre abonnement</p>
</div>

{% if success %}
<div class="alert alert-success alert-success-modern d-flex align-items-center mb-4" role="alert" data-aos="fade-up">
    <i class="fas fa-check-circle me-3 fs-4"></i>
    <div>
        <strong>Succès !</strong> Vos paramètres ont été mis à jour avec succès.
    </div>
</div>
{% endif %}

{% if stripeError %}
<div class="alert alert-warning d-flex align-items-center mb-4" role="alert" data-aos="fade-up">
    <i class="fas fa-exclamation-triangle me-3 fs-4"></i>
    <div>
        <strong>Attention !</strong> {{ stripeError }}
    </div>
</div>
{% endif %}

<div class="row g-4">
    <!-- Colonne gauche : Profil -->
    <div class="col-lg-4" data-aos="fade-up">
        <div class="modern-card text-center">
            <div class="mb-4">
                <div class="profile-avatar mx-auto">
                    {{ user.email|slice(0, 2)|upper }}
                </div>
            </div>
            <h4 class="fw-bold mb-1">{{ user.firstname | capitalize }} {{ user.lastname | upper }}</h4>
            <p class="text-muted mb-3">{{ user.email }}</p>

            {% if site and site.product %}
            <div class="mt-4 p-3" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; color: white;">
                <div class="d-flex align-items-center justify-content-center">
                    <i class="fas fa-crown me-2"></i>
                    <span class="fw-semibold">{{ site.product.name }}</span>
                </div>
            </div>
            {% endif %}

            <hr class="my-4">

            <div class="text-start">
                <h6 class="fw-bold mb-3">
                    <i class="fas fa-info-circle me-2" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
                    Informations
                </h6>

                {% if site %}
                <div class="d-flex align-items-start mb-2">
                    <i class="fas fa-globe text-muted me-2 mt-1"></i>
                    <span class="text-muted small">{{ site.name }}</span>
                </div>
                {% endif %}

                {% if user %}
                <div class="d-flex align-items-start mb-2">
                    <i class="fas fa-envelope text-muted me-2 mt-1"></i>
                    <span class="text-muted small">{{ user.email }}</span>
                </div>
                {% endif %}

                {% if site %}
                <div class="d-flex align-items-start">
                    <i class="fas fa-globe text-muted me-2 mt-1"></i>
                    {% if site.domainActif and site.domain %}
                        <a href="{{ site.domain }}" target="_blank" class="text-decoration-none small">
                            {{ site.domain }}
                            <i class="fas fa-external-link-alt ms-1" style="font-size: 0.7rem;"></i>
                        </a>
                    {% else %}
                        <a href="{{ path('site_home', {'siteName':site.internalName}) }}" target="_blank" class="text-decoration-none small">
                            {{ site.internalName }}
                            <i class="fas fa-external-link-alt ms-1" style="font-size: 0.7rem;"></i>
                        </a>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Colonne droite : Formulaires -->
    <div class="col-lg-8">
        {% if invoiceUpcoming is not null and customer is not null %}
        <div class="modern-card mb-4" data-aos="fade-up">
            <h5 class="fw-bold mb-4">
                <i class="fas fa-credit-card me-2" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
                Mon abonnement
            </h5>

            <div class="alert alert-info d-flex align-items-center mb-4" style="background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)); border: 1px solid #667eea;">
                <i class="fas fa-calendar-alt me-3 fs-4" style="color: #667eea;"></i>
                <div>
                    <strong>Prochain prélèvement :</strong> {{ invoiceUpcoming.next_payment_attempt|date("d/m/Y") }}
                    <br>
                    <small class="text-muted">
                        Offre : {{ site.product ? site.product.name : 'N/A' }}
                        ({{ invoiceUpcoming.period_start|date("d/m/Y") }} - {{ invoiceUpcoming.period_end|date("d/m/Y") }})
                        - Montant : <strong>{{ (invoiceUpcoming.amount_due / 100) | number_format(2,',',' ') }} € TTC</strong>
                    </small>
                </div>
            </div>

            <h6 class="fw-semibold mb-3">Moyens de paiement</h6>

            <div class="d-flex justify-content-end mb-3">
                <a href="{{ path('bo-account-card-add') }}" class="btn-gradient">
                    <i class="fas fa-plus me-2"></i>
                    Ajouter une carte
                </a>
            </div>

            <div class="table-responsive">
                <table class="table align-middle">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center">Type</th>
                            <th class="text-center">Statut</th>
                            <th>Titulaire</th>
                            <th>Carte</th>
                            <th>Expiration</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if cards is not null and cards|length > 0 %}
                            {% for card in cards %}
                                <tr>
                                    <td class="text-center">
                                        {% if card.brand == 'Visa' %}
                                            <img src="{{ asset('/assets/img/payment/visa.png') }}" height="24" alt="VISA">
                                        {% elseif card.brand == 'MasterCard' %}
                                            <i class="fab fa-cc-mastercard fa-2x text-danger"></i>
                                        {% else %}
                                            {{ card.brand }}
                                        {% endif %}
                                    </td>
                                    <td class="text-center">
                                        {% if customer.default_source is not null and customer.default_source.id == card.id %}
                                            <span class="badge" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                                                <i class="fas fa-star me-1"></i> Par défaut
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td>{{ card.name }}</td>
                                    <td><code>**** {{ card.last4 }}</code></td>
                                    <td>{{ card.exp_month }}/{{ card.exp_year }}</td>
                                    <td class="text-center">
                                        <div class="btn-group" role="group">
                                            {% if customer.default_source is null or customer.default_source.id != card.id %}
                                                <a href="{{ path('bo-account-card-default', {'id':card.id}) }}" class="btn btn-sm btn-outline-primary" title="Définir par défaut">
                                                    <i class="fas fa-star"></i>
                                                </a>
                                            {% endif %}
                                            <a href="{{ path('bo-account-card-delete', {'id':card.id}) }}" class="btn btn-sm btn-outline-danger" title="Supprimer">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr>
                                <td colspan="6" class="text-center text-muted py-4">
                                    <i class="fas fa-credit-card fa-3x mb-2 d-block" style="opacity: 0.3;"></i>
                                    Aucune carte enregistrée
                                </td>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endif %}

        <!-- Informations postales -->
        <div class="modern-card" data-aos="fade-up" data-aos-delay="100">
            <h5 class="fw-bold mb-4">
                <i class="fas fa-map-marked-alt me-2" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
                Informations de facturation
            </h5>

            {{ form_start(form, {'attr': {'id': 'billing-form'}}) }}

            <div class="row g-3">
                <div class="col-12">
                    <label class="form-label fw-semibold">{{ form_label(form.societyName, 'Nom de la société') }}</label>
                    {{ form_widget(form.societyName, {'attr':{'class':'form-control'}}) }}
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">{{ form_label(form.address1, 'Adresse ligne 1') }}</label>
                    {{ form_widget(form.address1, {'attr':{'class':'form-control'}}) }}
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">{{ form_label(form.address2, 'Adresse ligne 2 (optionnel)') }}</label>
                    {{ form_widget(form.address2, {'attr':{'class':'form-control'}}) }}
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-semibold">{{ form_label(form.postalCode, 'Code postal') }}</label>
                    {{ form_widget(form.postalCode, {'attr':{'class':'form-control'}}) }}
                </div>

                <div class="col-md-8">
                    <label class="form-label fw-semibold">{{ form_label(form.city, 'Ville') }}</label>
                    {{ form_widget(form.city, {'attr':{'class':'form-control'}}) }}
                </div>
            </div>

            <div class="d-flex justify-content-end gap-3 mt-4">
                <button class="btn-gradient" type="submit">
                    <i class="fas fa-save me-2"></i>
                    Enregistrer les modifications
                </button>
            </div>

            {{ form_end(form) }}
        </div>
    </div>
</div>

<style>
    .profile-avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        font-weight: bold;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .btn-group .btn {
        border-radius: 6px;
        margin: 0 2px;
    }

    .btn-outline-primary {
        color: #667eea;
        border-color: #667eea;
    }

    .btn-outline-primary:hover {
        background: #667eea;
        color: white;
    }

    .btn-outline-danger {
        color: #dc3545;
        border-color: #dc3545;
    }

    .btn-outline-danger:hover {
        background: #dc3545;
        color: white;
    }

    .table > :not(caption) > * > * {
        padding: 1rem 0.75rem;
    }

    .table-light {
        background-color: #f8f9fa;
    }
</style>
{% endblock %}