{% extends 'admin/layout.html.twig' %}
{% block title %}Tableau de bord — WTL{% endblock %}
{% block admin_body %}
    {% set dashboardActions = [{label:'Manuel utilisateur',href:'#userManualModal',icon:'bi-book',attributes:{'data-bs-toggle':'modal','data-bs-target':'#userManualModal'}}] %}
    {% if can_permission('VENUE_CONTACT',2) %}{% set dashboardActions = dashboardActions|merge([{label:'Nouveau contact terrain',href:path('admin_field_contact_new'),icon:'bi-lightning-charge',primary:true}]) %}{% endif %}
    {% include 'admin/ui/_page_header.html.twig' with {
        page_eyebrow: 'Pilotage quotidien',
        page_title: 'Bonjour ' ~ (app.user.displayName ?? app.user.userIdentifier),
        page_subtitle: 'Commencez par les actions à réaliser maintenant. Les indicateurs détaillés restent disponibles plus bas.',
        page_actions: dashboardActions
    } %}

    {% if can_permission('TASKS') %}
    <section class="dashboard-today mb-4" aria-labelledby="dashboardTodayTitle">
        <div class="d-flex justify-content-between align-items-end gap-3 mb-3">
            <div><h2 class="h4 mb-1" id="dashboardTodayTitle">Aujourd’hui</h2><p class="text-secondary mb-0">{{ stats.late }} en retard · {{ stats.next7 }} à traiter dans la fenêtre courante</p></div>
            <a class="btn btn-outline-dark touch-target" href="{{ path('admin_to_process') }}">Tout voir</a>
        </div>
        <div class="daily-action-grid">
            {% for p in toProcess|slice(0,5) %}
                {% set late = p.nextActionDate and p.nextActionDate < today %}
                {% set contact = p.targetContact ?: (p.venueEntity ? p.venueEntity.primaryContact : null) %}
                <article class="daily-action-card {{ late ? 'is-late' : '' }}">
                    <div class="d-flex justify-content-between gap-2 align-items-start"><span class="badge {{ late ? 'text-bg-danger' : 'text-bg-warning' }}">{{ late ? 'En retard' : (p.nextActionDate == today ? 'Aujourd’hui' : 'À venir') }}</span><time class="small text-secondary">{{ p.nextActionDate ? p.nextActionDate|date('d/m') : 'Dès que possible' }}</time></div>
                    <h3 class="h6 mb-1 mt-2">{{ p.nextAction ?: 'Premier contact' }}</h3>
                    <p class="mb-2"><strong>{{ p.venueEntity ? p.venueEntity.name : p.venue }}</strong><span class="d-block small text-secondary">{{ p.venueEntity ? p.venueEntity.city : p.city }}{% if contact %} · {{ contact.name }}{% endif %}</span></p>
                    <a class="btn btn-dark touch-target w-100" href="{{ path('admin_prospection_show',{id:p.id}) }}#next-action">Traiter maintenant</a>
                </article>
            {% else %}
                <div class="empty-state daily-action-empty"><i class="bi bi-check2-circle empty-state-icon" aria-hidden="true"></i><h3 class="h5">Rien d’urgent</h3><p class="text-secondary mb-0">Aucune action n’est attendue dans la fenêtre actuelle.</p></div>
            {% endfor %}
        </div>
    </section>
    {% endif %}
    {% if analyticsConfigured %}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white d-flex flex-column flex-md-row justify-content-between gap-2 align-items-md-center py-3 px-4">
            <div><strong><i class="bi bi-bar-chart-line me-2"></i>Google Analytics</strong><div class="small text-secondary">Trafic du site public — 7 derniers jours.</div></div>
            <a class="btn btn-sm btn-outline-dark" href="{{ path('admin_project_communications') }}">Paramètres Analytics</a>
        </div>
        <div class="card-body p-4">
            {% if analyticsData %}
                <div class="row g-3 mb-4">
                    {% set analyticsCards = [
                        {label:'Utilisateurs actifs', value:analyticsData.activeUsers},
                        {label:'Sessions', value:analyticsData.sessions},
                        {label:'Pages vues', value:analyticsData.pageViews},
                        {label:'Taux d’engagement', value:analyticsData.engagementRate ~ ' %'}
                    ] %}
                    {% for item in analyticsCards %}<div class="col-6 col-xl-3"><div class="border rounded-3 p-3 h-100 bg-light"><div class="small text-secondary">{{ item.label }}</div><div class="fs-4 fw-bold mt-1">{{ item.value }}</div></div></div>{% endfor %}
                </div>
                <div>
                    <div class="small text-uppercase text-secondary fw-semibold mb-2">Pages les plus consultées</div>
                    <div class="mobile-card-list dashboard-mobile-list dashboard-analytics-list">
                        {% for page in analyticsData.topPages %}
                            <article class="dashboard-list-card">
                                <div class="dashboard-card-copy">
                                    <strong class="d-block">{{ page.title ?: page.path }}</strong>
                                    {% if page.title %}<span class="dashboard-page-path small text-secondary">{{ page.path }}</span>{% endif %}
                                </div>
                                <dl class="dashboard-inline-metrics mb-0">
                                    <div><dt>Vues</dt><dd>{{ page.views }}</dd></div>
                                    <div><dt>Utilisateurs</dt><dd>{{ page.users }}</dd></div>
                                </dl>
                            </article>
                        {% else %}
                            <p class="text-secondary mb-0">Aucune donnée disponible pour cette période.</p>
                        {% endfor %}
                    </div>
                    <div class="table-responsive desktop-table-only">
                        <table class="table table-sm align-middle mb-0">
                            <thead><tr><th>Page</th><th class="text-end">Vues</th><th class="text-end">Utilisateurs</th></tr></thead>
                            <tbody>{% for page in analyticsData.topPages %}<tr><td><div class="fw-semibold">{{ page.title ?: page.path }}</div>{% if page.title %}<div class="small text-secondary">{{ page.path }}</div>{% endif %}</td><td class="text-end">{{ page.views }}</td><td class="text-end">{{ page.users }}</td></tr>{% else %}<tr><td colspan="3" class="text-secondary">Aucune donnée disponible pour cette période.</td></tr>{% endfor %}</tbody>
                        </table>
                    </div>
                </div>
            {% else %}
                <div class="alert alert-warning mb-0"><strong>Données Analytics indisponibles.</strong><div class="small mt-1">{{ analyticsError ?: 'Vérifiez la propriété, le compte de service et l’accès Lecteur dans Google Analytics.' }}</div></div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    {% if can_permission('INVOICE') and unpaidInvoices is defined and unpaidInvoices %}
    <div class="card border-0 shadow-sm mb-4 border-warning-subtle">
        <div class="card-header bg-white d-flex justify-content-between align-items-center py-3 dashboard-section-header">
            <div>
                <strong><i class="bi bi-cash-coin me-2 text-warning"></i>Factures à encaisser</strong>
                <div class="small text-secondary">Factures non réglées ou partiellement réglées pour le projet actif.</div>
            </div>
            <span class="badge rounded-pill text-bg-warning">{{ unpaidInvoices|length }}</span>
        </div>
        <div class="mobile-card-list dashboard-mobile-list p-3">
            {% for invoice in unpaidInvoices %}
                {% set paymentStatus = paymentService.status(invoice) %}
                <article class="card business-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start gap-2">
                            <div class="dashboard-card-copy">
                                <div class="small text-secondary">{{ invoice.number }} · {{ invoice.issueDate|date('d/m/Y') }}</div>
                                <strong class="d-block mt-1">{% if invoice.prospection and invoice.prospection.venueEntity %}{{ invoice.prospection.venueEntity.name }}{% elseif invoice.prospection %}{{ invoice.prospection.venue }}{% else %}Client non renseigné{% endif %}</strong>
                            </div>
                            {% if paymentStatus == 'PARTIAL' %}<span class="badge text-bg-warning">Paiement partiel</span>{% else %}<span class="badge text-bg-danger">À encaisser</span>{% endif %}
                        </div>
                        <div class="commercial-document-total mt-3"><span>Reste à encaisser</span><strong>{{ paymentService.remaining(invoice)|number_format(2,',',' ') }} €</strong></div>
                        {% if can_permission('PAYMENT',2) %}
                            <button type="button" class="btn btn-dark touch-target w-100 mt-3" data-bs-toggle="modal" data-bs-target="#mainDashboardPaymentModal-{{ invoice.id }}"><i class="bi bi-cash-coin" aria-hidden="true"></i>Enregistrer un paiement</button>
                        {% else %}
                            <div class="small text-secondary mt-3">Consultation uniquement</div>
                        {% endif %}
                    </div>
                </article>
            {% endfor %}
        </div>
        <div class="table-responsive desktop-table-only">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light"><tr><th>Facture</th><th>Client / lieu</th><th>Émise le</th><th>Statut</th><th class="text-end">Reste à encaisser</th><th class="text-end">Action</th></tr></thead>
                <tbody>
                {% for invoice in unpaidInvoices %}
                    {% set paymentStatus = paymentService.status(invoice) %}
                    <tr>
                        <td class="fw-semibold">{{ invoice.number }}</td>
                        <td>{% if invoice.prospection and invoice.prospection.venueEntity %}{{ invoice.prospection.venueEntity.name }}{% elseif invoice.prospection %}{{ invoice.prospection.venue }}{% else %}—{% endif %}</td>
                        <td>{{ invoice.issueDate|date('d/m/Y') }}</td>
                        <td>{% if paymentStatus == 'PARTIAL' %}<span class="badge text-bg-warning">Partiellement payée</span>{% else %}<span class="badge text-bg-danger">À encaisser</span>{% endif %}</td>
                        <td class="text-end fw-semibold">{{ paymentService.remaining(invoice)|number_format(2,',',' ') }} €</td>
                        <td class="text-end">{% if can_permission('PAYMENT',2) %}<button type="button" class="btn btn-sm btn-dark" data-bs-toggle="modal" data-bs-target="#mainDashboardPaymentModal-{{ invoice.id }}"><i class="bi bi-cash-coin me-1"></i>Enregistrer un paiement</button>{% else %}<span class="small text-secondary">Lecture seule</span>{% endif %}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {% if can_permission('PAYMENT',2) %}
    {% for invoice in unpaidInvoices %}
    <div class="modal fade" id="mainDashboardPaymentModal-{{ invoice.id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form class="modal-content" method="post" action="{{ path('admin_accounting_invoice_payment',{id:invoice.id}) }}">
                <div class="modal-header"><div><h5 class="modal-title mb-0">Paiement — {{ invoice.number }}</h5><div class="small text-secondary">Le reste à encaisser est prérempli.</div></div><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                <div class="modal-body">
                    <input type="hidden" name="_token" value="{{ csrf_token('invoice-payment-' ~ invoice.id) }}">
                    <input type="hidden" name="return_route" value="admin_dashboard">
                    <div class="row g-3">
                        <div class="col-md-6"><label class="form-label">Date</label><input type="date" class="form-control" name="payment_date" value="{{ 'now'|date('Y-m-d') }}" required></div>
                        <div class="col-md-6"><label class="form-label">Montant</label><input class="form-control" name="amount" value="{{ paymentService.remaining(invoice)|number_format(2,'.','') }}" required></div>
                        <div class="col-md-6"><label class="form-label">Compte</label><select class="form-select" name="account_id"><option value="">—</option>{% for a in financialAccounts %}<option value="{{ a.id }}">{{ a.name }}</option>{% endfor %}</select></div>
                        <div class="col-md-6"><label class="form-label">Mode</label><select class="form-select" name="payment_method_id"><option value="">—</option>{% for m in paymentMethods %}<option value="{{ m.id }}">{{ m.name }}</option>{% endfor %}</select></div>
                        <div class="col-12"><label class="form-label">Référence</label><input class="form-control" name="reference"></div>
                        <div class="col-12"><label class="form-label">Notes</label><textarea class="form-control" name="notes" rows="2"></textarea></div>
                    </div>
                </div>
                <div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Annuler</button><button class="btn btn-dark">Enregistrer</button></div>
            </form>
        </div>
    </div>
    {% endfor %}
    {% endif %}
    {% endif %}

    {% if can_permission('PROSPECTION') %}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white d-flex justify-content-between align-items-center py-3 dashboard-section-header">
            <div>
                <strong><i class="bi bi-lightbulb me-2 text-warning"></i>Suggestions de prospection</strong>
                <div class="small text-secondary">Des lieux à prospecter ou recontacter selon leur historique, leurs
                    contacts et leur potentiel.
                </div>
            </div>
            <span class="badge rounded-pill text-bg-dark">{{ prospectionSuggestions|length }}</span>
        </div>
        <div class="mobile-card-list dashboard-mobile-list dashboard-suggestion-list p-3">
            {% for suggestion in prospectionSuggestions %}
                {% set venue = suggestion.venue %}
                <article class="card business-card dashboard-suggestion-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start gap-2">
                            <div class="dashboard-card-copy">
                                <h3 class="h6 mb-1">{{ venue.name }}</h3>
                                <div class="small text-secondary">{{ venue.city }}{% if venue.venueType %} · {{ venue.venueType.name }}{% endif %}</div>
                            </div>
                            <span class="badge {{ suggestion.level == 'Forte' ? 'text-bg-danger' : (suggestion.level == 'Moyenne' ? 'text-bg-warning' : 'text-bg-secondary') }}">Priorité {{ suggestion.level|lower }}</span>
                        </div>
                        {% if venue.approximateBudget %}<div class="small text-secondary mt-2">Budget indicatif : {{ venue.approximateBudget|number_format(0,',',' ') }} €</div>{% endif %}
                        <div class="dashboard-reason-list mt-3">
                            {% for reason in suggestion.reasons %}<span class="badge bg-light text-dark border">{{ reason }}</span>{% endfor %}
                        </div>
                        {% if suggestion.lastProspection or suggestion.lastConcert %}
                            <div class="small text-secondary mt-2">
                                {% if suggestion.lastProspection %}<span class="d-block">Dernière prospection : {{ suggestion.lastProspection|date('d/m/Y') }}</span>{% endif %}
                                {% if suggestion.lastConcert %}<span class="d-block">Dernier concert : {{ suggestion.lastConcert|date('d/m/Y') }}</span>{% endif %}
                            </div>
                        {% endif %}
                        {% if can_permission('PROSPECTION',2) %}
                            <div class="dashboard-suggestion-actions mt-3">
                                <a class="btn btn-dark touch-target" href="{{ path('admin_prospection_new',{venue:venue.id}) }}"><i class="bi bi-bullseye" aria-hidden="true"></i>Prospecter</a>
                                <button class="btn btn-outline-secondary touch-target" data-bs-toggle="modal" data-bs-target="#snoozeSuggestion{{ venue.id }}"><i class="bi bi-clock-history" aria-hidden="true"></i>Reporter</button>
                                <button class="btn btn-outline-danger touch-target" data-bs-toggle="modal" data-bs-target="#ignoreSuggestion{{ venue.id }}"><i class="bi bi-x-lg" aria-hidden="true"></i>Ignorer</button>
                            </div>
                        {% endif %}
                    </div>
                </article>
            {% else %}
                {% include 'admin/ui/_empty_state.html.twig' with {empty_title:'Aucune suggestion',empty_text:'Aucun lieu pertinent à prospecter ou recontacter pour le moment.'} only %}
            {% endfor %}
        </div>
        <div class="table-responsive desktop-table-only" style="max-height:520px;overflow:auto;">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light sticky-top">
                <tr>
                    <th>Lieu</th>
                    <th>Pourquoi maintenant ?</th>
                    <th>Priorité</th>
                    <th class="text-end">Actions</th>
                </tr>
                </thead>
                <tbody>
                {% for suggestion in prospectionSuggestions %}
                    {% set venue = suggestion.venue %}
                    <tr>
                        <td>
                            <strong>{{ venue.name }}</strong>
                            <div
                                class="small text-secondary">{{ venue.city }}{% if venue.venueType %} · {{ venue.venueType.name }}{% endif %}</div>
                            {% if venue.approximateBudget %}
                                <div class="small text-secondary">Budget indicatif
                                : {{ venue.approximateBudget|number_format(0,',',' ') }} €</div>{% endif %}
                        </td>
                        <td>
                            {% for reason in suggestion.reasons %}<span
                                class="badge bg-light text-dark border me-1 mb-1">{{ reason }}</span>{% endfor %}
                            {% if suggestion.lastProspection %}
                                <div class="small text-secondary mt-1">Dernière prospection
                                : {{ suggestion.lastProspection|date('d/m/Y') }}</div>{% endif %}
                            {% if suggestion.lastConcert %}
                                <div class="small text-secondary">Dernier concert
                                : {{ suggestion.lastConcert|date('d/m/Y') }}</div>{% endif %}
                        </td>
                        <td><span
                                class="badge {{ suggestion.level == 'Forte' ? 'text-bg-danger' : (suggestion.level == 'Moyenne' ? 'text-bg-warning' : 'text-bg-secondary') }}">{{ suggestion.level }}</span>
                        </td>
                        <td class="text-end text-nowrap">
                            {% if can_permission('PROSPECTION',2) %}<a class="btn btn-sm btn-dark"
                               href="{{ path('admin_prospection_new',{venue:venue.id}) }}"><i
                                    class="bi bi-bullseye me-1"></i>Prospecter</a>
                            <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
                                    data-bs-target="#snoozeSuggestion{{ venue.id }}" title="Reporter cette suggestion">
                                <i class="bi bi-clock-history"></i></button>
                            <button class="btn btn-sm btn-outline-danger" data-bs-toggle="modal"
                                    data-bs-target="#ignoreSuggestion{{ venue.id }}" title="Ne plus suggérer ce lieu"><i
                                    class="bi bi-x-lg"></i></button>{% endif %}
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="4" class="text-center text-secondary py-4">Aucune suggestion pertinente pour le
                            moment.
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {% if can_permission('PROSPECTION',2) %}
    {% for suggestion in prospectionSuggestions %}
        {% set venue = suggestion.venue %}
        <div class="modal fade" id="snoozeSuggestion{{ venue.id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <div><h5 class="modal-title">Reporter la suggestion</h5>
                            <div class="small text-secondary">{{ venue.name }} — {{ venue.city }}</div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form method="post" action="{{ path('admin_suggestion_snooze',{id:venue.id}) }}">
                        <div class="modal-body">
                            <input type="hidden" name="_token"
                                   value="{{ csrf_token('prospection-suggestion-'~venue.id) }}">
                            <label class="form-label">Quand reproposer ce lieu ?</label>
                            <select class="form-select suggestion-snooze-select" name="duration"
                                    data-custom-target="snoozeCustom{{ venue.id }}">
                                <option value="30">Dans 30 jours</option>
                                <option value="60">Dans 60 jours</option>
                                <option value="90">Dans 90 jours</option>
                                <option value="custom">Choisir une date…</option>
                            </select>
                            <div class="mt-3 d-none" id="snoozeCustom{{ venue.id }}"><label
                                    class="form-label">Date</label><input class="form-control" type="date" name="until">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Annuler
                            </button>
                            <button class="btn btn-dark">Reporter</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="ignoreSuggestion{{ venue.id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <div><h5 class="modal-title">Ne plus suggérer ce lieu</h5>
                            <div class="small text-secondary">{{ venue.name }} — {{ venue.city }}</div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form method="post" action="{{ path('admin_suggestion_ignore',{id:venue.id}) }}">
                        <div class="modal-body">
                            <input type="hidden" name="_token"
                                   value="{{ csrf_token('prospection-suggestion-'~venue.id) }}">
                            <p class="small text-secondary">La raison choisie peut également modifier le statut du lieu
                                pour garder le référentiel propre.</p>
                            <div class="vstack gap-2">
                                <label class="border rounded p-3"><input class="form-check-input me-2" type="radio"
                                                                         name="reason" value="CLOSED" required><strong>Lieu
                                        fermé</strong>
                                    <div class="small text-secondary ms-4">Le lieu passe au statut « Fermé ».</div>
                                </label>
                                <label class="border rounded p-3"><input class="form-check-input me-2" type="radio"
                                                                         name="reason" value="OUT_OF_SCOPE"><strong>Hors
                                        cible</strong>
                                    <div class="small text-secondary ms-4">Le lieu est archivé.</div>
                                </label>
                                <label class="border rounded p-3"><input class="form-check-input me-2" type="radio"
                                                                         name="reason" value="DO_NOT_CONTACT"><strong>Ne
                                        plus démarcher</strong>
                                    <div class="small text-secondary ms-4">Le lieu est archivé.</div>
                                </label>
                                <label class="border rounded p-3"><input class="form-check-input me-2" type="radio"
                                                                         name="reason"
                                                                         value="DUPLICATE"><strong>Doublon</strong>
                                    <div class="small text-secondary ms-4">Le lieu est archivé.</div>
                                </label>
                                <label class="border rounded p-3"><input class="form-check-input me-2" type="radio"
                                                                         name="reason" value="OTHER"><strong>Autre
                                        raison</strong>
                                    <div class="small text-secondary ms-4">Le lieu reste actif mais sort des
                                        suggestions.
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Annuler
                            </button>
                            <button class="btn btn-danger">Confirmer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    {% endfor %}

    {% endif %}

    <div class="row g-3 mb-4">
        <div class="small text-secondary mb-3"><strong>Tunnel historique :</strong> chaque jalon reste compté même si le dossier a ensuite été annulé. <strong>Stock courant :</strong> état présent des représentations.</div>
        {% set cards=[{label:'Prospections',value:stats.total,icon:'bi-geo-alt'},{label:'Contacts envoyés · historique',value:stats.contacted,icon:'bi-send'},{label:'Propositions envoyées · historique',value:stats.proposals,icon:'bi-file-earmark-text'},{label:'Accords obtenus · historique',value:stats.agreements,icon:'bi-hand-thumbs-up'},{label:'Dates programmées · historique',value:stats.scheduledMilestones,icon:'bi-calendar-check'},{label:'Dates programmées · stock',value:stats.currentlyScheduled,icon:'bi-calendar-event'},{label:'Dates annulées · stock',value:stats.currentlyCancelled,icon:'bi-calendar-x'},{label:'Dates jouées · stock',value:stats.currentlyPerformed,icon:'bi-check2-circle'}] %}
        {% for card in cards %}
            <div class="col-6 col-xl-3">
                <div class="card metric-card h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between gap-2">
                            <div>
                                <div class="text-secondary small">{{ card.label }}
                                </div>
                                <div class="fs-3 fw-bold mt-1">{{ card.value }}
                                </div>
                            </div>
                            <div class="metric-icon">
                                <i class="bi {{ card.icon }}">
                                </i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
    <div class="row g-4 mb-4">
        <div class="col-xl-7">
            <div class="card table-card h-100">
                <div class="card-header bg-white border-0 p-4 pb-2">
                    <h2 class="h5 mb-0">Progression commerciale</h2>
                </div>
                <div class="card-body p-4">
                    <canvas id="pipelineChart" height="130">
                    </canvas>
                </div>
            </div>
        </div>
        <div class="col-xl-5">
            <div class="card table-card h-100">
                <div class="card-header bg-white border-0 p-4 pb-2">
                    <h2 class="h5 mb-0">Répartition par statut</h2>
                </div>
                <div class="card-body p-4">
                    <canvas id="statusChart" height="170">
                    </canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="row g-4">
        <div class="col-lg-6">
            <div class="card table-card h-100">
                <div class="card-header bg-white border-0 p-4 pb-2">
                    <h2 class="h5">Répartition par statut</h2>
                </div>
                <div class="card-body p-4 pt-2">
                    <div class="mobile-card-list dashboard-breakdown-list">
                        {% for row in stats.byStatus %}
                            <div class="dashboard-breakdown-row"><span>{{ row.label }}</span><strong>{{ row.total }}</strong></div>
                        {% else %}
                            <p class="text-secondary mb-0">Aucune donnée</p>
                        {% endfor %}
                    </div>
                    <div class="table-responsive desktop-table-only">
                        <table class="table align-middle mb-0">
                            <tbody>
                            {% for row in stats.byStatus %}
                                <tr>
                                    <td>{{ row.label }}
                                    </td>
                                    <td class="text-end fw-semibold">{{ row.total }}
                                    </td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td class="text-secondary">Aucune donnée</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card table-card h-100">
                <div class="card-header bg-white border-0 p-4 pb-2">
                    <h2 class="h5">Répartition par type de lieu</h2>
                </div>
                <div class="card-body p-4 pt-2">
                    <div class="mobile-card-list dashboard-breakdown-list">
                        {% for row in stats.byType %}
                            <div class="dashboard-breakdown-row"><span>{{ row.label }}</span><strong>{{ row.total }}</strong></div>
                        {% else %}
                            <p class="text-secondary mb-0">Aucune donnée</p>
                        {% endfor %}
                    </div>
                    <div class="table-responsive desktop-table-only">
                        <table class="table align-middle mb-0">
                            <tbody>
                            {% for row in stats.byType %}
                                <tr>
                                    <td>{{ row.label }}
                                    </td>
                                    <td class="text-end fw-semibold">{{ row.total }}
                                    </td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td class="text-secondary">Aucune donnée</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="application/json"
            id="dashboard-data">{{ {status:stats.byStatus,pipeline:[stats.contacted,stats.replied,stats.proposals,stats.agreements,stats.scheduledMilestones,stats.performed]}|json_encode|raw }}

    </script>
    {% endif %}
{% include 'admin/_user_manual_modal.html.twig' %}
{% endblock %}

{% block javascripts %}{{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js">
    </script>
    <script>document.querySelectorAll('.suggestion-snooze-select').forEach(select => {
            const sync = () => {
                const target = document.getElementById(select.dataset.customTarget);
                target?.classList.toggle('d-none', select.value !== 'custom');
            };
            select.addEventListener('change', sync);
            sync();
        });</script>
    <script>(() => {
            const el = document.getElementById('dashboard-data');
            if (!el || typeof Chart === 'undefined') return;
            const d = JSON.parse(el.textContent);
            new Chart(document.getElementById('pipelineChart'), {
                type: 'bar',
                data: {
                    labels: ['Contactés', 'Réponses', 'Propositions', 'Accords', 'Programmées', 'Jouées'],
                    datasets: [{label: 'Nombre', data: d.pipeline, backgroundColor: '#b7955d', borderRadius: 8}]
                },
                options: {
                    responsive: true,
                    plugins: {legend: {display: false}},
                    scales: {y: {beginAtZero: true, ticks: {precision: 0}}}
                }
            });
            new Chart(document.getElementById('statusChart'), {
                type: 'doughnut',
                data: {
                    labels: d.status.map(x => x.label),
                    datasets: [{
                        data: d.status.map(x => Number(x.total)),
                        backgroundColor: ['#171717', '#b7955d', '#6c757d', '#8f6f3d', '#adb5bd', '#4b4033', '#d7c6aa', '#343a40', '#91754a', '#c7b594', '#5f6368', '#d9d9d9']
                    }]
                },
                options: {responsive: true, plugins: {legend: {position: 'bottom'}}}
            })
        })();</script>
{% endblock %}