@extends('layouts.app')

@section('title', 'Finances · ' . $organization->name)
@section('eyebrow', 'Espace Finances')
@section('heading', 'Cockpit Finances')

@section('content')
<div class="finance-cockpit">
    <section class="finance-cockpit-intro">
        <div>
            <span>RÉFÉRENCE PARTAGÉE</span>
            <h2>La situation financière en un coup d’œil</h2>
            <p>
                Les mêmes indicateurs sont affichés à toutes les
                personnes autorisées à consulter l’espace Finances.
            </p>
        </div>

        <a
            class="btn secondary"
            href="{{ route('tenant.transactions.index') }}"
        >
            Ouvrir les transactions
        </a>
    </section>

    <section class="finance-cockpit-kpis">
        @foreach($kpis as $kpi)
            <article class="finance-kpi tone-{{ $kpi['tone'] }}">
                <span>{{ $kpi['label'] }}</span>
                <b>{{ $kpi['value'] }}</b>
                <p>{{ $kpi['detail'] }}</p>
            </article>
        @endforeach
    </section>

    <section class="finance-cockpit-main">
        <article class="finance-trajectory-card">
            <header>
                <div>
                    <span>TRAJECTOIRE ANNUELLE</span>
                    <h3>Trésorerie réelle et projetée</h3>
                    <p>
                        Réel jusqu’à juillet, prévisionnel ensuite.
                    </p>
                </div>

                <div class="finance-chart-legend">
                    <span><i class="income"></i>Encaissements</span>
                    <span><i class="expense"></i>Décaissements</span>
                    <span><i class="balance"></i>Solde</span>
                </div>
            </header>

            <div
                class="finance-trajectory-chart"
                data-finance-chart='@json($trajectory)'
                role="img"
                aria-label="Trajectoire mensuelle de trésorerie"
            ></div>
        </article>

        <aside class="finance-attention-card">
            <header>
                <span>À TRAITER</span>
                <h3>Points d’attention</h3>
            </header>

            <div class="finance-attention-list">
                @forelse($attention as $item)
                    <a
                        href="{{ $item['link'] }}"
                        class="finance-attention-item tone-{{ $item['tone'] }}"
                    >
                        <span class="finance-attention-marker"></span>

                        <span class="finance-attention-copy">
                            <b>{{ $item['label'] }}</b>
                            <span>{{ $item['detail'] }}</span>
                        </span>

                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <path d="m9 6 6 6-6 6"/>
                        </svg>
                    </a>
                @empty
                    <div class="finance-attention-empty">
                        <b>Aucun point bloquant</b>
                        <span>
                            Les indicateurs financiers sont à jour.
                        </span>
                    </div>
                @endforelse
            </div>
        </aside>
    </section>

    <section class="finance-cockpit-links">
        <a href="{{ route('tenant.transactions.index') }}">
            <span>Transactions</span>
            <b>Consulter et catégoriser</b>
        </a>

        <a href="{{ route('tenant.transactions.reconciliation') }}">
            <span>Rapprochement</span>
            <b>Valider les correspondances</b>
        </a>

        <a href="{{ route('tenant.budget.index') }}">
            <span>Budget</span>
            <b>Suivre le prévisionnel</b>
        </a>

        <a href="{{ route('tenant.psu.index') }}">
            <span>PSU</span>
            <b>Calculer et simuler</b>
        </a>
    </section>
</div>
@endsection