{% extends 'admin/layout.html.twig' %}
{% block title %}Tableau de bord — WTL{% endblock %}
{% block admin_body %}
    <div class="d-flex flex-column flex-md-row justify-content-between gap-3 align-items-md-center mb-4">
        <div>
            <h1 class="h2 mb-1">Tableau de bord</h1>
            <p class="text-secondary mb-0">Les actions urgentes d'abord, puis la vue d’ensemble.</p>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <button type="button" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#userManualModal">
                <i class="bi bi-book me-1"></i>Manuel utilisateur
            </button>
            {% if can_permission('PROSPECTION', 2) %}<a class="btn btn-dark" href="{{ path('admin_prospection_new') }}">
                <i class="bi bi-plus-lg me-1"></i>Nouvelle prospection</a>{% endif %}
        </div>
    </div>
    {% if can_permission('TASKS') %}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
            <div>
                <strong>
                    <i class="bi bi-exclamation-diamond me-2">
                    </i>À traiter maintenant</strong>
                <div class="small text-white-50">Retards, actions du jour et prochaines échéances.</div>
            </div>
            {% if can_permission('TASKS') %}<a class="btn btn-sm btn-outline-light" href="{{ path('admin_to_process') }}">Vue complète</a>{% endif %}
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                <tr>
                    <th>Date</th>
                    <th>Lieu</th>
                    <th>Action</th>
                    <th>Responsable / créateur</th>
                    <th>
                    </th>
                </tr>
                </thead>
                <tbody>
                {% for p in toProcess|slice(0,8) %}
                    <tr class="{{ p.nextActionDate and p.nextActionDate < today ? 'table-danger' : '' }}">
                        <td class="text-nowrap">{{ p.nextActionDate ? p.nextActionDate|date('d/m/Y') : 'Dès que possible' }}
                        </td>
                        <td>
                            <strong>{{ p.venueEntity ? p.venueEntity.name : p.venue }}
                            </strong>
                            <div class="small text-secondary">{{ p.venueEntity ? p.venueEntity.city : p.city }}
                            </div>
                        </td>
                        <td>{{ p.nextAction ?: 'Premier contact' }}
                        </td>
                        <td>{{ p.createdBy ? p.createdBy.displayName : '—' }}
                        </td>
                        <td class="text-end">
                            <a class="btn btn-sm btn-dark"
                               href="{{ path('admin_prospection_show',{id:p.id}) }}">Traiter</a>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="5" class="text-center text-secondary py-4">Rien d'urgent actuellement.</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </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">
            <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="table-responsive">
            <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">
            <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="table-responsive" 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">
        {% set cards=[{label:'Prospections',value:stats.total,icon:'bi-geo-alt'},{label:'Contacts envoyés',value:stats.contacted,icon:'bi-send'},{label:'Réponses / échanges',value:stats.replied,icon:'bi-chat-dots'},{label:'Propositions',value:stats.proposals,icon:'bi-file-earmark-text'},{label:'Dates confirmées',value:stats.confirmed,icon:'bi-calendar-check'},{label:'Dates réalisées',value:stats.performed,icon:'bi-check2-circle'},{label:'Relances en retard',value:stats.late,icon:'bi-exclamation-triangle'},{label:'Taux de réponse',value:stats.responseRate ~ ' %',icon:'bi-graph-up-arrow'}] %}
        {% 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="table-responsive">
                        <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="table-responsive">
                        <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.confirmed,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', 'Confirmées', 'Réalisé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 %}