{% extends '@App/app.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 page_header %}{% endblock %}

{% block content %}
    {% include '@App/dashboard/_tabs.html.twig' with {active_tab: 'overview'} only %}
    <section class="capsule-dashboard"
             data-controller="app-dashboard"
             data-app-dashboard-chart-value="{{ dashboard.chart|json_encode|e('html_attr') }}">
        <header class="capsule-dashboard-heading">
            <div class="capsule-dashboard-heading-main">
                <span class="capsule-dashboard-heading-icon"><i class="ti ti-layout-dashboard"></i></span>
                <div>
                    <span class="capsule-dashboard-eyebrow">Vue d’ensemble · {{ dashboard.company_name }}</span>
                    <h1>Bonjour, {{ dashboard.greeting_name }}</h1>
                    <p>Pilotez votre activité, vos finances et vos échéances depuis un seul espace.</p>
                </div>
            </div>
            <div class="capsule-dashboard-heading-actions">
                <label class="capsule-dashboard-year-filter">
                    <span>Exercice</span>
                    <select data-action="change->app-dashboard#changeYear" aria-label="Année analysée">
                        {% for year in dashboard.years %}<option value="{{ year }}" {{ year == dashboard.year ? 'selected' }}>{{ year }}</option>{% endfor %}
                    </select>
                </label>
                <a class="capsule-button capsule-button--secondary" href="{{ path('billing_document_new',{type:'quote'}) }}"><i class="ti ti-file-plus"></i>Nouveau devis</a>
                <a class="capsule-button capsule-button--primary" href="{{ path('billing_document_new',{type:'invoice'}) }}"><i class="ti ti-plus"></i>Nouvelle facture</a>
            </div>
        </header>

        {% if dashboard.financial_visible %}<section class="capsule-dashboard-kpi-grid" aria-label="Indicateurs financiers">
            <article class="capsule-dashboard-kpi is-primary">
                <div class="capsule-dashboard-kpi-top">
                    <span class="capsule-dashboard-kpi-icon"><i class="ti ti-chart-bar"></i></span>
                    <span class="capsule-dashboard-kpi-period">{{ dashboard.year }}</span>
                </div>
                <span class="capsule-dashboard-kpi-label">Chiffre d’affaires facturé HT</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' }}">
                    <i class="ti {{ dashboard.summary.revenue_change is not null and dashboard.summary.revenue_change >= 0 ? 'ti-trending-up' : 'ti-trending-down' }}"></i>
                    {% 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, ',', ' ') }} % par rapport à {{ dashboard.previous_year }}{% endif %}
                </small>
            </article>

            {% if dashboard.payment_visible %}<article class="capsule-dashboard-kpi is-danger">
                <div class="capsule-dashboard-kpi-top">
                    <span class="capsule-dashboard-kpi-icon"><i class="ti ti-alert-triangle"></i></span>
                    <span class="capsule-dashboard-kpi-period">{{ dashboard.summary.late_count }} facture{{ dashboard.summary.late_count != 1 ? 's' }}</span>
                </div>
                <span class="capsule-dashboard-kpi-label">Montant en retard</span>
                <strong>{{ dashboard.summary.late_balance|number_format(2, ',', ' ') }} €</strong>
                <small>Retard moyen de {{ dashboard.summary.average_late_days }} jours</small>
                <a href="{{ path('billing_invoice_index',{status:'overdue'}) }}">Voir les factures <i class="ti ti-arrow-right"></i></a>
            </article>

            <article class="capsule-dashboard-kpi is-success">
                <div class="capsule-dashboard-kpi-top">
                    <span class="capsule-dashboard-kpi-icon"><i class="ti ti-clock-check"></i></span>
                    <span class="capsule-dashboard-kpi-period">30 derniers jours</span>
                </div>
                <span class="capsule-dashboard-kpi-label">Factures récentes à encaisser</span>
                <strong>{{ dashboard.summary.recent_balance|number_format(2, ',', ' ') }} €</strong>
                <small>{{ dashboard.summary.recent_count }} facture{{ dashboard.summary.recent_count != 1 ? 's' }} non payée{{ dashboard.summary.recent_count != 1 ? 's' }}</small>
                <a href="{{ path('billing_invoice_index') }}">Ouvrir la facturation <i class="ti ti-arrow-right"></i></a>
            </article>{% endif %}
        </section>{% endif %}

                    <section class="capsule-dashboard-main-grid">
                        {% if dashboard.financial_visible %}<article class="capsule-dashboard-card capsule-dashboard-financial">
                            <header class="capsule-dashboard-card-title">
                                <div><h2>Suivi financier</h2><p>Évolution mensuelle du CA HT et des dépenses</p></div>
                                <span>{{ dashboard.year }} vs {{ dashboard.previous_year }}</span>
                            </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>{% endif %}

                        <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>
                                {% if dashboard.payment_visible %}<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>{% endif %}
                                <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>

                        {% if dashboard.financial_visible %}<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>
                                {% if dashboard.expense_visible %}<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>{% endif %}
                            </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 HT</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>
                            {% if dashboard.expense_visible %}<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>{% endif %}
                        </article>{% endif %}

                    </section>

                    <section class="capsule-dashboard-bottom-grid">
                        {% if dashboard.financial_visible %}<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>{% endif %}

                        <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>
    </section>
{% endblock %}