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

{% block title %}Espace Client — GestRestoSco{% endblock %}

{% block body %}
<div class="container-fluid px-4 py-4">

    {# ── Hero ───────────────────────────────────────────────────────────────── #}
    <div class="card border-0 shadow-sm mb-4"
         style="background: linear-gradient(135deg, var(--app-primary, #2563eb) 0%, #1d4ed8 100%); color: #fff;">
        <div class="card-body p-4 p-md-5">
            <div class="row align-items-center g-4">
                <div class="col-auto">
                    <div class="rounded-circle d-flex align-items-center justify-content-center bg-white bg-opacity-25"
                         style="width:72px;height:72px;font-size:2rem;">
                        <i class="fas fa-school" style="color:#fff;"></i>
                    </div>
                </div>
                <div class="col">
                    <h1 class="h2 fw-bold mb-1">{{ tenant.name }}</h1>
                    <p class="mb-0 opacity-75">
                        <i class="fas fa-user-circle me-1"></i>
                        {{ user.prenom }} {{ user.nom }}
                        <span class="badge bg-white bg-opacity-25 ms-2" style="font-size:.75rem;color:#fff;">
                            {{ user.role|capitalize }}
                        </span>
                    </p>
                </div>
                <div class="col-auto">
                    {% if tenant.active %}
                        <span class="badge bg-success fs-6 px-3 py-2">
                            <i class="fas fa-check-circle me-1"></i> Abonnement actif
                        </span>
                    {% else %}
                        <span class="badge bg-danger fs-6 px-3 py-2">
                            <i class="fas fa-times-circle me-1"></i> Abonnement inactif
                        </span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {# ── Indicateurs ─────────────────────────────────────────────────────────── #}
    <div class="row g-3 mb-4">
        <div class="col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3 p-3">
                    <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                         style="width:48px;height:48px;background:#dbeafe;color:#1d4ed8;font-size:1.1rem;">
                        <i class="fas fa-building"></i>
                    </div>
                    <div class="overflow-hidden">
                        <div class="text-muted small">Établissement</div>
                        <div class="fw-semibold text-truncate">{{ tenant.name }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3 p-3">
                    <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                         style="width:48px;height:48px;background:#dcfce7;color:#16a34a;font-size:1.1rem;">
                        <i class="fas fa-circle{% if not tenant.active %}-xmark{% endif %}"></i>
                    </div>
                    <div>
                        <div class="text-muted small">Statut</div>
                        <div class="fw-semibold">
                            {% if tenant.active %}
                                <span class="text-success">Actif</span>
                            {% else %}
                                <span class="text-danger">Inactif</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3 p-3">
                    <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                         style="width:48px;height:48px;background:#fef9c3;color:#ca8a04;font-size:1.1rem;">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <div>
                        <div class="text-muted small">Client depuis</div>
                        <div class="fw-semibold">
                            {% if tenant.createdAt %}
                                {{ tenant.createdAt|date('d/m/Y') }}
                            {% else %}
                                —
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3 p-3">
                    <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                         style="width:48px;height:48px;background:#ede9fe;color:#7c3aed;font-size:1.1rem;">
                        <i class="fas fa-tag"></i>
                    </div>
                    <div>
                        <div class="text-muted small">Identifiant</div>
                        <div class="fw-semibold font-monospace small">{{ tenant.slug }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# ── Cartes principales ───────────────────────────────────────────────────── #}
    <div class="row g-4">

        {# Support & Tickets — carte principale #}
        <div class="col-lg-6">
            <div class="card border-0 shadow h-100"
                 style="border-left: 4px solid var(--app-primary, #2563eb) !important;">
                <div class="card-body p-4 d-flex flex-column">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                             style="width:56px;height:56px;background:var(--app-primary,#2563eb);color:#fff;font-size:1.4rem;">
                            <i class="fas fa-headset"></i>
                        </div>
                        <div>
                            <h5 class="card-title mb-0 fw-bold">Support &amp; Tickets</h5>
                            <small class="text-muted">Espace membre WebTransform</small>
                        </div>
                    </div>

                    <p class="text-muted mb-4">
                        Créez et suivez vos tickets de support directement depuis votre espace membre WebTransform.
                        Notre équipe technique vous répond <strong>sous 24h</strong> en jours ouvrés.
                    </p>

                    <div class="list-group list-group-flush mb-4">
                        <div class="list-group-item border-0 px-0 py-2 d-flex align-items-center gap-2">
                            <i class="fas fa-ticket-alt text-primary" style="width:18px;"></i>
                            <span class="small">Suivi en temps réel de vos demandes</span>
                        </div>
                        <div class="list-group-item border-0 px-0 py-2 d-flex align-items-center gap-2">
                            <i class="fas fa-comments text-primary" style="width:18px;"></i>
                            <span class="small">Échanges directs avec le support technique</span>
                        </div>
                        <div class="list-group-item border-0 px-0 py-2 d-flex align-items-center gap-2">
                            <i class="fas fa-history text-primary" style="width:18px;"></i>
                            <span class="small">Historique complet de vos demandes</span>
                        </div>
                    </div>

                    <div class="mt-auto">
                        <a href="{{ webtransform_url }}/espace-membre"
                           target="_blank" rel="noopener noreferrer"
                           class="btn btn-primary btn-lg w-100 fw-semibold">
                            <i class="fas fa-external-link-alt me-2"></i>
                            Accéder à l'espace membre
                        </a>
                        <p class="text-center text-muted small mt-2 mb-0">
                            <i class="fas fa-info-circle me-1"></i>
                            Un compte est requis — contactez-nous à
                            <a href="mailto:services@webtransform.fr" class="text-muted">services@webtransform.fr</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        {# Formulaire de contact #}
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-4 d-flex flex-column">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                             style="width:56px;height:56px;background:#fce7f3;color:#be185d;font-size:1.4rem;">
                            <i class="fas fa-paper-plane"></i>
                        </div>
                        <div>
                            <h5 class="card-title mb-0 fw-bold">Envoyer un message</h5>
                            <small class="text-muted">Notre équipe vous répond sous 24h</small>
                        </div>
                    </div>

                    {# Alerte résultat de l'envoi #}
                    <div id="contact-alert" class="alert d-none mb-3" role="alert"></div>

                    <form id="contact-form" class="d-flex flex-column flex-grow-1 gap-3" novalidate>
                        <input type="hidden" name="_token" value="{{ csrf_token('espace_client_contact') }}">

                        <div>
                            <label for="contact-email" class="form-label small fw-semibold mb-1">
                                Votre email de retour <span class="text-danger">*</span>
                            </label>
                            <input type="email" id="contact-email" name="email"
                                   class="form-control form-control-sm"
                                   placeholder="votre@email.fr" required>
                        </div>

                        <div class="row g-2">
                            <div class="col-8">
                                <label for="contact-sujet" class="form-label small fw-semibold mb-1">
                                    Sujet <span class="text-danger">*</span>
                                </label>
                                <input type="text" id="contact-sujet" name="sujet"
                                       class="form-control form-control-sm"
                                       placeholder="Décrivez brièvement votre demande" required>
                            </div>
                            <div class="col-4">
                                <label for="contact-urgence" class="form-label small fw-semibold mb-1">Urgence</label>
                                <select id="contact-urgence" name="urgence" class="form-select form-select-sm">
                                    <option value="basse">🟢 Basse</option>
                                    <option value="normale" selected>🟡 Normale</option>
                                    <option value="haute">🔴 Haute</option>
                                </select>
                            </div>
                        </div>

                        <div class="flex-grow-1">
                            <label for="contact-message" class="form-label small fw-semibold mb-1">
                                Message <span class="text-danger">*</span>
                            </label>
                            <textarea id="contact-message" name="message"
                                      class="form-control form-control-sm"
                                      rows="5" placeholder="Décrivez votre problème en détail…" required
                                      style="resize:vertical;min-height:120px;"></textarea>
                        </div>

                        <div class="mt-auto">
                            <button type="submit" id="contact-submit"
                                    class="btn btn-danger w-100 fw-semibold">
                                <i class="fas fa-paper-plane me-2"></i>
                                Envoyer le message
                            </button>
                            <p class="text-center text-muted small mt-2 mb-0">
                                <i class="fas fa-lock me-1"></i>
                                Message envoyé de façon sécurisée à notre équipe
                            </p>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {# Documentation #}
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                             style="width:56px;height:56px;background:#ede9fe;color:#7c3aed;font-size:1.4rem;">
                            <i class="fas fa-book-open"></i>
                        </div>
                        <div>
                            <h5 class="card-title mb-0 fw-bold">Documentation</h5>
                            <small class="text-muted">Guides et ressources</small>
                        </div>
                    </div>

                    <div class="list-group list-group-flush">
                        <a href="{{ webtransform_url }}/guide-utilisateur"
                           target="_blank" rel="noopener noreferrer"
                           class="list-group-item list-group-item-action border-0 rounded px-3 py-3 mb-1 d-flex align-items-center gap-3">
                            <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                                 style="width:40px;height:40px;background:#ede9fe;color:#7c3aed;">
                                <i class="fas fa-book" style="font-size:.9rem;"></i>
                            </div>
                            <div>
                                <div class="fw-semibold small">Guide utilisateur complet</div>
                                <small class="text-muted">Documentation de toutes les fonctionnalités</small>
                            </div>
                            <i class="fas fa-external-link-alt ms-auto text-muted small"></i>
                        </a>

                        <a href="{{ webtransform_url }}/faq"
                           target="_blank" rel="noopener noreferrer"
                           class="list-group-item list-group-item-action border-0 rounded px-3 py-3 d-flex align-items-center gap-3">
                            <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                                 style="width:40px;height:40px;background:#ecfdf5;color:#059669;">
                                <i class="fas fa-question-circle" style="font-size:.9rem;"></i>
                            </div>
                            <div>
                                <div class="fw-semibold small">Foire aux questions (FAQ)</div>
                                <small class="text-muted">Réponses aux questions les plus fréquentes</small>
                            </div>
                            <i class="fas fa-external-link-alt ms-auto text-muted small"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        {# Mon compte #}
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-4 d-flex flex-column">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                             style="width:56px;height:56px;background:#dbeafe;color:#1d4ed8;font-size:1.4rem;">
                            <i class="fas fa-user-cog"></i>
                        </div>
                        <div>
                            <h5 class="card-title mb-0 fw-bold">Mon compte</h5>
                            <small class="text-muted">Informations et sécurité</small>
                        </div>
                    </div>

                    <div class="list-group list-group-flush flex-grow-1">
                        <div class="list-group-item border-0 px-3 py-3 mb-1 d-flex align-items-center gap-3">
                            <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                                 style="width:40px;height:40px;background:#dbeafe;color:#1d4ed8;">
                                <i class="fas fa-user" style="font-size:.9rem;"></i>
                            </div>
                            <div>
                                <div class="fw-semibold small">{{ user.prenom }} {{ user.nom }}</div>
                                <small class="text-muted">{{ user.role|capitalize }}</small>
                            </div>
                        </div>

                        <div class="list-group-item border-0 px-3 py-3 d-flex align-items-center gap-3">
                            <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                                 style="width:40px;height:40px;background:#dbeafe;color:#1d4ed8;">
                                <i class="fas fa-at" style="font-size:.9rem;"></i>
                            </div>
                            <div>
                                <div class="fw-semibold small font-monospace">{{ user.username }}</div>
                                <small class="text-muted">Identifiant de connexion</small>
                            </div>
                        </div>
                    </div>

                    <a href="{{ path('tenant_change_password') }}"
                       class="btn btn-outline-primary w-100 mt-3 fw-semibold">
                        <i class="fas fa-key me-2"></i>
                        Changer de mot de passe
                    </a>
                </div>
            </div>
        </div>

    </div>{# /row principale #}

    {# ── Bannière info #}
    <div class="card border-0 mt-4" style="background:#f0f9ff;border-left:4px solid #0284c7 !important;">
        <div class="card-body py-3 px-4 d-flex align-items-center gap-3">
            <i class="fas fa-info-circle text-info fs-5 flex-shrink-0"></i>
            <div class="small text-muted">
                Pour toute question concernant votre abonnement, votre facturation ou un renouvellement,
                contactez notre équipe via le formulaire ci-dessus ou à <a><strong>services@webtransform.fr</strong></a>.
            </div>
        </div>
    </div>

</div>

<script>
(function () {
    var form    = document.getElementById('contact-form');
    var btn     = document.getElementById('contact-submit');
    var alertEl = document.getElementById('contact-alert');

    if (!form) return;

    form.addEventListener('submit', async function (e) {
        e.preventDefault();

        var email   = document.getElementById('contact-email').value.trim();
        var sujet   = document.getElementById('contact-sujet').value.trim();
        var message = document.getElementById('contact-message').value.trim();

        if (!email || !sujet || !message) {
            showAlert('danger', 'Veuillez remplir tous les champs obligatoires.');
            return;
        }

        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Envoi en cours…';

        try {
            var resp = await fetch('{{ path('tenant_espace_client_contact') }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: new URLSearchParams(new FormData(form))
            });

            var data = await resp.json();

            if (data.success) {
                showAlert('success', '<i class="fas fa-check-circle me-2"></i>' + data.message);
                form.reset();
            } else {
                showAlert('danger', '<i class="fas fa-exclamation-circle me-2"></i>' + data.message);
            }
        } catch (err) {
            showAlert('danger', 'Erreur réseau. Veuillez réessayer.');
        } finally {
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-paper-plane me-2"></i>Envoyer le message';
        }
    });

    function showAlert(type, html) {
        alertEl.className = 'alert alert-' + type + ' small py-2';
        alertEl.innerHTML = html;
        alertEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
})();
</script>
{% endblock %}