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

{% block title %}Tableau de Bord{% endblock %}

{% block breadcrumb_title %}Tableau de Bord{% endblock %}
{% block page_title %}Tableau de Bord — SALSABIL TRAVEL{% endblock %}

{% block body %}
    {% set nouvelle_statut = constant('App\\Entity\\PreinscriptionTravel::STATUT_NOUVELLE') %}

    {% if is_granted('ROLE_SUPER_ADMIN') %}
        <div class="row">
            <div class="col-12">
                <div class="alert alert-info alert-dismissible fade show" role="alert">
                    <i class="mdi mdi-shield-star mr-2"></i>
                    <strong>Mode Super Administrateur</strong> — Vous avez accès à toutes les fonctionnalités d'administration.
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        </div>
    {% endif %}

    <div class="row">
        <div class="col-xl-3 col-md-6">
            <a class="dashboard-stat-link" href="{{ path('app_admin_preinscription_travel_index', {'statut': nouvelle_statut}) }}">
                <div class="card widget-box-one border border-primary bg-soft-primary">
                    <div class="card-body">
                        <div class="float-right avatar-lg rounded-circle mt-3">
                            <i class="mdi mdi-clipboard-alert font-30 avatar-title text-primary"></i>
                        </div>
                        <div class="wigdet-one-content">
                            <p class="m-0 text-uppercase font-weight-bold text-muted">Préinscriptions nouvelles</p>
                            <h2><span data-plugin="counterup" data-to="{{ stats.preinscriptions_nouvelles|default(0) }}">{{ stats.preinscriptions_nouvelles|default(0) }}</span></h2>
                            <small class="text-muted">{{ stats.preinscriptions_semaine|default(0) }} reçue(s) sur 7 jours</small>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="card widget-box-one border border-warning bg-soft-warning">
                <div class="card-body">
                    <div class="float-right avatar-lg rounded-circle mt-3 text-warning">
                        <i class="mdi mdi-file-find font-30 avatar-title text-warning"></i>
                    </div>
                    <div class="wigdet-one-content">
                        <p class="m-0 text-uppercase font-weight-bold text-muted">Documents à vérifier</p>
                        <h2><span data-plugin="counterup" data-to="{{ stats.documents_a_verifier|default(0) }}">{{ stats.documents_a_verifier|default(0) }}</span></h2>
                        <small class="text-muted">Passeports, photos et pièces reçues</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <a class="dashboard-stat-link" href="{{ path('app_admin_paiement_index') }}">
                <div class="card widget-box-one border border-success bg-soft-success">
                    <div class="card-body">
                        <div class="float-right avatar-lg rounded-circle mt-3 text-success">
                            <i class="mdi mdi-cash-multiple font-30 avatar-title text-success"></i>
                        </div>
                        <div class="wigdet-one-content">
                            <p class="m-0 text-uppercase font-weight-bold text-muted">Total encaissé</p>
                            <h2>{{ stats.total_encaisse|default(0)|number_format(0, ',', ' ') }} XAF</h2>
                            <small class="text-muted">{{ stats.encaisse_mois|default(0)|number_format(0, ',', ' ') }} XAF ce mois</small>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-xl-3 col-md-6">
            <a class="dashboard-stat-link" href="{{ path('app_admin_facture_index') }}">
                <div class="card widget-box-one border border-danger bg-soft-danger">
                    <div class="card-body">
                        <div class="float-right avatar-lg rounded-circle mt-3 text-danger">
                            <i class="mdi mdi-alert-circle font-30 avatar-title text-danger"></i>
                        </div>
                        <div class="wigdet-one-content">
                            <p class="m-0 text-uppercase font-weight-bold text-muted">Reste à encaisser</p>
                            <h2>{{ stats.reste_a_encaisser|default(0)|number_format(0, ',', ' ') }} XAF</h2>
                            <small class="text-muted">Sur {{ stats.factures|default(0) }} facture(s)</small>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="card-box dashboard-mini-stat">
                <span class="dashboard-mini-icon text-primary"><i class="mdi mdi-account-group"></i></span>
                <span class="text-muted">Clients</span>
                <strong>{{ stats.clients|default(0) }}</strong>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card-box dashboard-mini-stat">
                <span class="dashboard-mini-icon text-warning"><i class="mdi mdi-folder-multiple"></i></span>
                <span class="text-muted">Dossiers</span>
                <strong>{{ stats.dossiers|default(0) }}</strong>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card-box dashboard-mini-stat">
                <span class="dashboard-mini-icon text-info"><i class="mdi mdi-earth"></i></span>
                <span class="text-muted">Programmes publiés</span>
                <strong>{{ stats.programmes_publies|default(0) }}</strong>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card-box dashboard-mini-stat">
                <span class="dashboard-mini-icon text-success"><i class="mdi mdi-file-document-box"></i></span>
                <span class="text-muted">Total facturé</span>
                <strong>{{ stats.total_factures|default(0)|number_format(0, ',', ' ') }} XAF</strong>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-8">
            <div class="card-box border-primary">
                <div class="d-flex justify-content-between align-items-center mb-3 admin-page-header dashboard-section-header">
                    <div>
                        <h4 class="header-title mb-0"><b>PROGRAMMES EN COURS</b></h4>
                        <p class="text-muted mb-0">Suivi rapide des programmes publiés : préinscriptions, dossiers, voyageurs et paiements.</p>
                    </div>
                    <div class="admin-page-actions">
                        <a href="{{ path('app_admin_programme_travel_index') }}" class="btn btn-primary btn-sm">
                            <i class="mdi mdi-format-list-bulleted"></i> Tous les programmes
                        </a>
                        <a href="{{ path('app_admin_programme_travel_new') }}" class="btn btn-success btn-sm">
                            <i class="mdi mdi-plus-circle"></i> Nouveau programme
                        </a>
                    </div>
                </div>

                <div class="row">
                    {% for item in programme_summaries|default([]) %}
                        {% set programme = item.programme %}
                        {% set tracking = item.tracking %}
                        <div class="col-xl-6 col-md-6">
                            <div class="dashboard-program-card border rounded p-3 mb-3 h-100">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <span class="badge badge-{{ programme.misEnAvant ? 'primary' : 'info' }}">{{ programme.type }}</span>
                                    <small class="text-muted">{{ programme.formattedPeriod }}</small>
                                </div>
                                <h5 class="mb-1"><a href="{{ path('app_admin_programme_travel_show', {'id': programme.id}) }}">{{ programme.titre }}</a></h5>
                                <p class="text-muted mb-2"><i class="mdi mdi-map-marker"></i> {{ programme.lieu ?: 'Lieu à préciser' }}</p>

                                <div class="row text-center mb-2">
                                    <div class="col-4">
                                        <strong>{{ tracking.totals.preinscriptions|default(0) }}</strong><br>
                                        <small class="text-muted">Préins.</small>
                                    </div>
                                    <div class="col-4">
                                        <strong>{{ tracking.totals.dossiers|default(0) }}</strong><br>
                                        <small class="text-muted">Dossiers</small>
                                    </div>
                                    <div class="col-4">
                                        <strong>{{ tracking.totals.participantsFactures|default(0) }}</strong><br>
                                        <small class="text-muted">Voyageurs</small>
                                    </div>
                                </div>

                                {% if tracking.participantsVoyageurs|default([])|length > 0 %}
                                    <div class="mb-2 small">
                                        <strong>Voyageurs :</strong><br>
                                        {% for participantRow in tracking.participantsVoyageurs|slice(0, 3) %}
                                            <span class="badge badge-light border mr-1 mb-1">{{ participantRow.participant.fullName }}</span>
                                        {% endfor %}
                                        {% if tracking.participantsVoyageurs|length > 3 %}
                                            <span class="badge badge-secondary">+{{ tracking.participantsVoyageurs|length - 3 }}</span>
                                        {% endif %}
                                    </div>
                                {% endif %}

                                <div class="small mb-2">
                                    <div class="d-flex justify-content-between"><span>Encaissé</span><strong class="text-success">{{ tracking.finance.totalPaye|default(0)|number_format(0, ',', ' ') }} XAF</strong></div>
                                    <div class="d-flex justify-content-between"><span>Reste</span><strong class="text-danger">{{ tracking.finance.resteAPayer|default(0)|number_format(0, ',', ' ') }} XAF</strong></div>
                                </div>
                                <a href="{{ path('app_admin_programme_travel_show', {'id': programme.id}) }}#participants-voyageurs" class="btn btn-warning btn-sm btn-block">
                                    <i class="mdi mdi-account-group"></i> Voir voyageurs et suivi
                                </a>
                            </div>
                        </div>
                    {% else %}
                        <div class="col-12">
                            <div class="alert alert-light border mb-0">
                                Aucun programme publié pour le moment. Créez ou publiez un programme pour afficher son suivi ici.
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card-box dashboard-list-card">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4 class="header-title mb-0"><b>Préinscriptions récentes</b></h4>
                    <a href="{{ path('app_admin_preinscription_travel_index') }}" class="btn btn-light btn-sm">Voir tout</a>
                </div>
                {% for preinscription in latest_preinscriptions|default([]) %}
                    <a class="dashboard-list-item" href="{{ path('app_admin_preinscription_travel_show', {'id': preinscription.id}) }}">
                        <span>
                            <strong>{{ preinscription.contactName }}</strong><br>
                            <small class="text-muted">{{ preinscription.reference }} — {{ preinscription.programme ? preinscription.programme.titre : 'Programme non défini' }}</small>
                        </span>
                        <span class="badge badge-{{ preinscription.statut == nouvelle_statut ? 'primary' : 'secondary' }}">{{ preinscription.statut }}</span>
                    </a>
                {% else %}
                    <p class="text-muted mb-0">Aucune préinscription récente.</p>
                {% endfor %}
            </div>

            <div class="card-box dashboard-list-card">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4 class="header-title mb-0"><b>Documents à vérifier</b></h4>
                    <a href="{{ path('app_admin_preinscription_travel_index') }}" class="btn btn-light btn-sm">Préinscriptions</a>
                </div>
                {% for document in latest_documents_to_verify|default([]) %}
                    {% set participant = document.participant %}
                    {% set preinscription = participant ? participant.preinscription : null %}
                    <div class="dashboard-list-item no-link">
                        <span>
                            <strong>{{ participant ? participant.fullName : 'Participant' }}</strong><br>
                            <small class="text-muted">{{ document.typeLabel }}{% if preinscription %} — {{ preinscription.reference }}{% endif %}</small>
                        </span>
                        {% if preinscription %}
                            <a href="{{ path('app_admin_preinscription_travel_show', {'id': preinscription.id}) }}" class="btn btn-warning btn-xs">Ouvrir</a>
                        {% endif %}
                    </div>
                {% else %}
                    <p class="text-muted mb-0">Aucun document en attente de vérification.</p>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-6">
            <div class="card-box dashboard-list-card">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4 class="header-title mb-0"><b>Paiements récents</b></h4>
                    <a href="{{ path('app_admin_paiement_index') }}" class="btn btn-light btn-sm">Voir tout</a>
                </div>
                {% for paiement in latest_paiements|default([]) %}
                    {% set facture = paiement.facture %}
                    {% set dossier = facture ? facture.dossier : null %}
                    <a class="dashboard-list-item" href="{{ path('app_admin_paiement_show', {'id': paiement.id}) }}">
                        <span>
                            <strong>{{ paiement.montant|number_format(0, ',', ' ') }} XAF</strong><br>
                            <small class="text-muted">{{ paiement.datePaiement ? paiement.datePaiement|date('d/m/Y') : '' }} — {{ dossier and dossier.client ? dossier.client.nom : 'Client non défini' }}</small>
                        </span>
                        <span class="badge badge-success">{{ paiement.methodeLabel }}</span>
                    </a>
                {% else %}
                    <p class="text-muted mb-0">Aucun paiement enregistré.</p>
                {% endfor %}
            </div>
        </div>

        <div class="col-xl-6">
            <div class="card-box dashboard-list-card">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4 class="header-title mb-0"><b>Factures avec reste à payer</b></h4>
                    <a href="{{ path('app_admin_facture_index') }}" class="btn btn-light btn-sm">Voir tout</a>
                </div>
                {% for facture in unpaid_factures|default([]) %}
                    {% set dossier = facture.dossier %}
                    <a class="dashboard-list-item" href="{{ path('app_admin_facture_show', {'id': facture.id}) }}">
                        <span>
                            <strong>{{ facture.numero }}</strong><br>
                            <small class="text-muted">{{ dossier and dossier.client ? dossier.client.nom : 'Client non défini' }}</small>
                        </span>
                        <span class="text-danger font-weight-bold">{{ facture.resteAPayer|number_format(0, ',', ' ') }} XAF</span>
                    </a>
                {% else %}
                    <p class="text-muted mb-0">Aucune facture en attente de solde.</p>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            <div class="card-box quick-access-card" onclick="window.location='{{ path('app_admin_client_index') }}'">
                <h5 class="header-title mb-3"><i class="mdi mdi-account-group mr-2 text-primary"></i>Clients</h5>
                <p class="text-muted mb-3">Gérer les clients</p>
                <a href="{{ path('app_admin_client_index') }}" class="btn btn-primary btn-sm"><i class="mdi mdi-arrow-right mr-1"></i> Accéder</a>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card-box quick-access-card" onclick="window.location='{{ path('app_admin_preinscription_travel_index') }}'">
                <h5 class="header-title mb-3"><i class="mdi mdi-clipboard-check mr-2 text-info"></i>Préinscriptions</h5>
                <p class="text-muted mb-3">Traiter les demandes</p>
                <a href="{{ path('app_admin_preinscription_travel_index') }}" class="btn btn-info btn-sm"><i class="mdi mdi-arrow-right mr-1"></i> Accéder</a>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card-box quick-access-card" onclick="window.location='{{ path('app_admin_dossier_index') }}'">
                <h5 class="header-title mb-3"><i class="mdi mdi-folder-multiple mr-2 text-warning"></i>Dossiers</h5>
                <p class="text-muted mb-3">Suivre les dossiers</p>
                <a href="{{ path('app_admin_dossier_index') }}" class="btn btn-warning btn-sm"><i class="mdi mdi-arrow-right mr-1"></i> Accéder</a>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card-box quick-access-card" onclick="window.location='{{ path('app_admin_facture_new') }}'">
                <h5 class="header-title mb-3"><i class="mdi mdi-file-document-plus mr-2 text-success"></i>Nouvelle facture</h5>
                <p class="text-muted mb-3">Créer une facture</p>
                <a href="{{ path('app_admin_facture_new') }}" class="btn btn-success btn-sm"><i class="mdi mdi-arrow-right mr-1"></i> Créer</a>
            </div>
        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .dashboard-stat-link,
        .dashboard-stat-link:hover{
            color: inherit;
            text-decoration: none;
            display: block;
        }
        .dashboard-mini-stat{
            display: flex;
            align-items: center;
            gap: 12px;
            min-height: 82px;
        }
        .dashboard-mini-stat strong{
            display: block;
            margin-left: auto;
            font-size: 1.1rem;
            color: #263238;
            text-align: right;
        }
        .dashboard-mini-icon{
            font-size: 1.8rem;
            line-height: 1;
        }
        .dashboard-section-header{
            gap: 12px;
        }
        .dashboard-program-card{
            background: #fff;
            transition: .2s ease;
        }
        .dashboard-program-card:hover{
            box-shadow: 0 .5rem 1rem rgba(18,38,63,.08);
            transform: translateY(-2px);
        }
        .dashboard-list-card .dashboard-list-item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px solid #eef2f6;
            color: inherit;
            text-decoration: none;
        }
        .dashboard-list-card .dashboard-list-item:last-child{
            border-bottom: 0;
            padding-bottom: 0;
        }
        .dashboard-list-card .dashboard-list-item:hover{
            color: var(--st-blue);
        }
        .dashboard-list-card .dashboard-list-item.no-link:hover{
            color: inherit;
        }
        .btn-xs{
            padding: .15rem .4rem;
            font-size: .72rem;
            line-height: 1.3;
            border-radius: .2rem;
        }
    </style>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/back/libs/jquery-counterup/jquery.counterup.min.js') }}"></script>
    <script src="{{ asset('assets/back/libs/waypoints/lib/jquery.waypoints.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('[data-plugin="counterup"]').each(function() {
                var $this = $(this);
                var value = parseInt($this.data('to')) || parseInt($this.text()) || 0;
                $this.text(value);
            });
        });
    </script>
{% endblock %}