{% extends '@App/base.html.twig' %}

{% block title %}Tableau de bord · {{ project_name }}{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('vendor/matdash/libs/apexcharts/dist/apexcharts.min.js') }}" defer></script>
{% endblock %}

{% block body %}
    {% set current_context = app_current_context() %}
    {% set sidebar_menu = app_menu_items() %}

    <div id="main-wrapper" data-controller="sidebar" data-sidebar-target="wrapper" data-sidebartype="full">
        {% include '@App/partials/layout/_sidebar.html.twig' with {menu: sidebar_menu} only %}

        <div class="page-wrapper">
            {% include '@App/partials/layout/_header.html.twig' with {current_context: current_context} %}

            <div class="body-wrapper capsule-dashboard-body">
                <main class="container-fluid capsule-dashboard"
                      data-controller="app-dashboard"
                      data-app-dashboard-chart-value="{{ dashboard.chart|json_encode|e('html_attr') }}">
                    <section class="capsule-dashboard-hero-grid">
                        <article class="capsule-dashboard-welcome">
                            <h1>Bonjour, {{ dashboard.greeting_name }}</h1>
                            <p>Voici votre vue d’ensemble</p>
                            <span>Chiffre d’affaires total (année)</span>
                            <strong>{{ dashboard.summary.revenue|number_format(2, ',', ' ') }} €</strong>
                            <small class="{{ dashboard.summary.revenue_change is not null and dashboard.summary.revenue_change >= 0 ? 'is-positive' : 'is-negative' }}">
                                <iconify-icon icon="{{ dashboard.summary.revenue_change is not null and dashboard.summary.revenue_change >= 0 ? 'solar:graph-up-linear' : 'solar:graph-down-linear' }}"></iconify-icon>
                                {% if dashboard.summary.revenue_change is null %}Aucune donnée pour {{ dashboard.previous_year }}
                                {% else %}{{ dashboard.summary.revenue_change > 0 ? '+' : '' }}{{ dashboard.summary.revenue_change|number_format(1, ',', ' ') }} % vs année dernière{% endif %}
                            </small>
                        </article>

                        <article class="capsule-dashboard-summary is-danger">
                            <header><span>Factures en retard</span><i><iconify-icon icon="solar:danger-triangle-bold"></iconify-icon></i></header>
                            <strong>{{ dashboard.summary.late_balance|number_format(2, ',', ' ') }} €</strong>
                            <p><b>{{ dashboard.summary.late_count }}</b> facture{{ dashboard.summary.late_count != 1 ? 's' }} en retard <span>(moy. {{ dashboard.summary.average_late_days }} jours)</span></p>
                            <a href="{{ path('billing_invoice_index',{status:'overdue'}) }}">Voir les factures urgentes</a>
                        </article>

                        <article class="capsule-dashboard-summary is-mint">
                            <header><span>Factures validées ≤ 30 j</span><i><iconify-icon icon="solar:calendar-minimalistic-bold-duotone"></iconify-icon></i></header>
                            <strong>{{ dashboard.summary.recent_balance|number_format(2, ',', ' ') }} €</strong>
                            <p><b>{{ dashboard.summary.recent_count }}</b> facture{{ dashboard.summary.recent_count != 1 ? 's' }} non payée{{ dashboard.summary.recent_count != 1 ? 's' }} de moins de 30 jours</p>
                            <a href="{{ path('commercial_calendar_index') }}">Voir le calendrier</a>
                        </article>
                    </section>

                    <section class="capsule-dashboard-main-grid">
                        <article class="capsule-dashboard-card capsule-dashboard-financial">
                            <header class="capsule-dashboard-card-title">
                                <h2>Suivi financier</h2>
                                <label>
                                    <span class="visually-hidden">Année analysée</span>
                                    <select data-action="change->app-dashboard#changeYear">
                                        {% for year in dashboard.years %}<option value="{{ year }}" {{ year == dashboard.year ? 'selected' }}>{{ year }} vs {{ year - 1 }}</option>{% endfor %}
                                    </select>
                                </label>
                            </header>
                            <div class="capsule-dashboard-chart" data-app-dashboard-target="chart" role="img" aria-label="Évolution mensuelle du chiffre d’affaires et des dépenses"></div>
                        </article>

                        <aside class="capsule-dashboard-card capsule-dashboard-calendar">
                            <header class="capsule-dashboard-card-title">
                                <div><h2>Calendrier</h2><p>{{ dashboard.calendar.date|date('d/m/Y') }}</p></div>
                                <span>{{ dashboard.calendar.items|length }} élément{{ dashboard.calendar.items|length != 1 ? 's' }}</span>
                            </header>
                            <div class="capsule-dashboard-calendar-counts">
                                <span><i class="is-amber"></i>{{ dashboard.calendar.task_count }} tâche{{ dashboard.calendar.task_count != 1 ? 's' }}</span>
                                <span><i class="is-blue"></i>{{ dashboard.calendar.appointment_count }} rendez-vous</span>
                            </div>
                            <div class="capsule-dashboard-calendar-list">
                                {% for item in dashboard.calendar.items %}
                                    <a class="is-{{ item.tone }}" href="{{ path(item.route,item.params) }}">
                                        <i><iconify-icon icon="{{ item.kind == 'appointment' ? 'solar:calendar-date-bold-duotone' : 'solar:checklist-minimalistic-bold-duotone' }}"></iconify-icon></i>
                                        <span><strong>{{ item.title }}</strong><small>{{ item.time }} · {{ item.meta }}</small></span>
                                        <iconify-icon icon="solar:alt-arrow-right-linear"></iconify-icon>
                                    </a>
                                {% else %}
                                    <div class="capsule-dashboard-empty"><iconify-icon icon="solar:calendar-mark-broken"></iconify-icon><strong>Journée libre</strong><span>Aucune tâche ni aucun rendez-vous aujourd’hui.</span></div>
                                {% endfor %}
                            </div>
                            <a class="capsule-dashboard-calendar-all" href="{{ path('commercial_calendar_index') }}">Ouvrir le calendrier <iconify-icon icon="solar:arrow-right-linear"></iconify-icon></a>
                        </aside>
                    </section>

                    <section class="capsule-dashboard-secondary-grid">
                        <article class="capsule-dashboard-card capsule-dashboard-quick">
                            <header class="capsule-dashboard-card-title"><h2>Actions rapides</h2></header>
                            <div>
                                <a href="{{ path('billing_document_new',{type:'invoice'}) }}"><i><iconify-icon icon="solar:add-circle-linear"></iconify-icon></i><strong>Nouvelle facture</strong></a>
                                <a href="{{ path('billing_document_new',{type:'quote'}) }}"><i class="is-mint"><iconify-icon icon="solar:document-add-linear"></iconify-icon></i><strong>Nouveau devis</strong></a>
                                <a href="{{ path('billing_payment_new') }}"><i class="is-coral"><iconify-icon icon="solar:wallet-money-linear"></iconify-icon></i><strong>Ajouter un paiement</strong></a>
                                <a href="{{ path('commercial_client_new') }}"><i class="is-blue"><iconify-icon icon="solar:user-plus-linear"></iconify-icon></i><strong>Ajouter un client</strong></a>
                            </div>
                        </article>

                        <article class="capsule-dashboard-card capsule-dashboard-rankings">
                            <header class="capsule-dashboard-card-title">
                                <h2>Classements</h2>
                                <span>{{ dashboard.year }}</span>
                            </header>
                            <nav aria-label="Choisir un classement">
                                <button class="is-active" type="button" data-ranking="clients" data-action="app-dashboard#showRanking">5 meilleurs clients</button>
                                <button type="button" data-ranking="suppliers" data-action="app-dashboard#showRanking">5 plus gros fournisseurs</button>
                                <button type="button" data-ranking="categories" data-action="app-dashboard#showRanking">5 domaines de dépenses</button>
                            </nav>
                            <div class="capsule-dashboard-ranking-panel" data-ranking-panel="clients">
                                <div class="capsule-dashboard-ranking-head"><span>Client</span><span>Dernier projet</span><span>Chiffre d’affaires total</span><span>Statut</span></div>
                                {% for row in dashboard.rankings.clients %}
                                    <div class="capsule-dashboard-ranking-row">
                                        <span><i>{{ row.initials }}</i><strong>{{ row.name }}</strong></span>
                                        <span>{{ row.project }}</span>
                                        <b>{{ row.amount|number_format(2, ',', ' ') }} €</b>
                                        <em class="{{ row.overdue > 0 ? 'is-late' : 'is-current' }}">{{ row.overdue > 0 ? row.overdue|number_format(2, ',', ' ') ~ ' € en retard' : 'À jour' }}</em>
                                    </div>
                                {% else %}<div class="capsule-dashboard-ranking-empty">Aucun chiffre d’affaires sur cette période.</div>{% endfor %}
                            </div>
                            <div class="capsule-dashboard-ranking-panel" data-ranking-panel="suppliers" hidden>
                                <div class="capsule-dashboard-ranking-head is-simple"><span>Fournisseur</span><span>Dépenses annuelles</span></div>
                                {% for row in dashboard.rankings.suppliers %}
                                    <div class="capsule-dashboard-ranking-row is-simple"><span><i>{{ row.initials }}</i><strong>{{ row.name }}</strong></span><b>{{ row.amount|number_format(2, ',', ' ') }} €</b></div>
                                {% else %}<div class="capsule-dashboard-ranking-empty">Aucune dépense fournisseur sur cette période.</div>{% endfor %}
                            </div>
                            <div class="capsule-dashboard-ranking-panel" data-ranking-panel="categories" hidden>
                                <div class="capsule-dashboard-ranking-head is-simple"><span>Domaine de dépenses</span><span>Total</span></div>
                                {% for row in dashboard.rankings.categories %}
                                    <div class="capsule-dashboard-ranking-row is-simple"><span><i>{{ row.initials }}</i><strong>{{ row.name }}</strong><small>{{ row.count }} dépense{{ row.count != 1 ? 's' }}</small></span><b>{{ row.amount|number_format(2, ',', ' ') }} €</b></div>
                                {% else %}<div class="capsule-dashboard-ranking-empty">Aucune catégorie de dépenses sur cette période.</div>{% endfor %}
                            </div>
                        </article>

                    </section>

                    <section class="capsule-dashboard-bottom-grid">
                        <article class="capsule-dashboard-card capsule-dashboard-commercial">
                            <header class="capsule-dashboard-card-title"><div><h2>Activité commerciale</h2><p>Vue d’ensemble des opportunités</p></div><a href="{{ path('commercial_dashboard_index') }}">Voir tout <iconify-icon icon="solar:arrow-right-linear"></iconify-icon></a></header>
                            <div class="capsule-dashboard-mini-kpis">
                                <div class="is-mint"><strong>{{ dashboard.activity.sent_quotes }}</strong><span>Devis envoyés</span></div>
                                <div class="is-green"><strong>{{ dashboard.activity.accepted_quotes }}</strong><span>Devis acceptés</span></div>
                                <div class="is-purple"><strong>{{ dashboard.activity.prospects }}</strong><span>Prospects actifs</span></div>
                            </div>
                            <div class="capsule-dashboard-potential"><span>Montant potentiel en cours</span><strong>{{ dashboard.activity.potential|number_format(2, ',', ' ') }} €</strong><small><iconify-icon icon="solar:fire-linear"></iconify-icon>{{ dashboard.activity.hot_count }} opportunité{{ dashboard.activity.hot_count != 1 ? 's' }} à conclure</small></div>
                            <h3><iconify-icon icon="solar:cup-star-linear"></iconify-icon>Top prospects du mois</h3>
                            <div class="capsule-dashboard-prospects">
                                {% for row in dashboard.activity.top %}
                                    <div><i class="{{ row.chance >= 70 ? 'is-orange' : 'is-red' }}">{{ row.name|slice(0,2)|upper }}</i><span><strong>{{ row.name }}</strong><small>{{ row.reference }}</small></span><b>{{ row.amount|number_format(2, ',', ' ') }} €<small class="{{ row.chance >= 70 ? 'is-good' : 'is-medium' }}">{{ row.chance }} % de chance</small></b></div>
                                {% else %}<div class="capsule-dashboard-ranking-empty">Aucune opportunité active.</div>{% endfor %}
                            </div>
                        </article>

                        <article class="capsule-dashboard-card capsule-dashboard-production">
                            <header class="capsule-dashboard-card-title"><div><h2>Projets & production</h2><p>Suivi opérationnel en temps réel</p></div><a href="{{ path('projet_index') }}">Voir tout <iconify-icon icon="solar:arrow-right-linear"></iconify-icon></a></header>
                            <div class="capsule-dashboard-mini-kpis">
                                <div><strong>{{ dashboard.production.projects }}</strong><span>Projets actifs</span></div>
                                <div class="is-mint"><strong>{{ dashboard.production.new_projects }}</strong><span>Nouveaux</span></div>
                                <div class="is-orange"><strong>{{ dashboard.production.deliveries }}</strong><span>À livrer</span></div>
                            </div>
                            <div class="capsule-dashboard-progress">
                                <header><strong>Avancement global</strong><b>{{ dashboard.production.tasks.completion }} %</b></header>
                                <div><i style="width:{{ dashboard.production.tasks.completion }}%"></i></div>
                                <footer><span>{{ dashboard.production.tasks.done }} tâches terminées</span><span>{{ dashboard.production.tasks.todo + dashboard.production.tasks.progress }} tâches restantes</span></footer>
                            </div>
                            <div class="capsule-dashboard-task-lines">
                                <div><i class="is-done"><iconify-icon icon="solar:check-circle-linear"></iconify-icon></i><span>Tâches terminées</span><strong>{{ dashboard.production.tasks.done }}</strong></div>
                                <div><i class="is-progress"><iconify-icon icon="solar:refresh-circle-linear"></iconify-icon></i><span>Tâches en cours</span><strong>{{ dashboard.production.tasks.progress }}</strong></div>
                                <div><i><iconify-icon icon="solar:record-circle-linear"></iconify-icon></i><span>Tâches non commencées</span><strong>{{ dashboard.production.tasks.todo }}</strong></div>
                            </div>
                            <h3><iconify-icon icon="solar:calendar-date-linear"></iconify-icon>Livraisons proches</h3>
                            <div class="capsule-dashboard-deliveries">
                                {% for item in dashboard.production.upcoming %}
                                    <a href="{{ path('projet_show',{id:item.id}) }}"><span><strong>{{ item.title }}</strong><small>Échéance le {{ item.date|date('d/m/Y') }}</small></span><iconify-icon icon="solar:alt-arrow-right-linear"></iconify-icon></a>
                                {% else %}<div><strong>Aucune livraison proche</strong><span>Les échéances à venir apparaîtront ici.</span></div>{% endfor %}
                            </div>
                        </article>
                    </section>
                </main>
            </div>
        </div>
    </div>

    {% include '@App/partials/layout/_modal.html.twig' %}
    <div id="modal-events" class="d-none"></div>
    {% include '@App/context/_company_context_prompt.html.twig' %}
{% endblock %}