@extends('layouts.app')

@section('content')
@php
    /*
    |--------------------------------------------------------------------------
    | Type de tableau de bord
    |--------------------------------------------------------------------------
    |
    | Le dashboard est partagé entre les gestionnaires et les juristes.
    | Cette variable nous permet simplement d'adapter les informations
    | affichées sans créer une seconde vue.
    |
    */
    $estJuriste = auth()->user()->role === 'juriste';
@endphp

<style>
    .dashboard-page {
        padding: 22px 24px;
    }

    /*
    |--------------------------------------------------------------------------
    | En-tête
    |--------------------------------------------------------------------------
    */
    .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px;
    }

    .dashboard-title {
        margin: 0;
        color: var(--ss-primary);
        font-size: 1.55rem;
        font-weight: 700;
    }

    .dashboard-subtitle {
        margin-top: 3px;
        color: var(--ss-muted);
        font-size: .87rem;
    }

    .dashboard-year {
        display: flex;
        align-items: center;
        gap: 8px;

        padding: 7px 10px;

        background: var(--ss-white);
        border: 1px solid var(--ss-border);
        border-radius: var(--ss-radius);
    }

    .dashboard-year i {
        color: var(--ss-primary);
    }

    .dashboard-year select {
        border: 0;
        box-shadow: none !important;
        background: transparent;
    }

    /*
    |--------------------------------------------------------------------------
    | KPI
    |--------------------------------------------------------------------------
    */
    .dashboard-kpis {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-bottom: 18px;
    }

    .dashboard-kpi {
        display: flex;
        align-items: center;
        gap: 14px;

        padding: 17px;

        background: var(--ss-white);
        border: 1px solid var(--ss-border);
        border-radius: var(--ss-radius);

        box-shadow: 0 3px 12px rgba(31, 87, 86, .05);
    }

    .dashboard-kpi-icon {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 43px;
        height: 43px;
        min-width: 43px;

        border-radius: 11px;

        background: rgba(147, 217, 219, .27);
        color: var(--ss-primary);

        font-size: 1.05rem;
    }

    .dashboard-kpi-label {
        color: var(--ss-muted);
        font-size: .7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .dashboard-kpi-value {
        margin-top: 2px;

        color: var(--ss-text);
        font-size: 1.35rem;
        font-weight: 700;
    }

    /*
     * Mise en avant du CA annuel.
     */
    .dashboard-kpi.main {
        background: var(--ss-primary);
        border-color: var(--ss-primary);
    }

    .dashboard-kpi.main .dashboard-kpi-icon {
        background: rgba(255,255,255,.13);
        color: var(--ss-white);
    }

    .dashboard-kpi.main .dashboard-kpi-label {
        color: rgba(255,255,255,.7);
    }

    .dashboard-kpi.main .dashboard-kpi-value {
        color: var(--ss-white);
    }

    /*
    |--------------------------------------------------------------------------
    | Graphique + tableau
    |--------------------------------------------------------------------------
    */
    .dashboard-grid {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(280px, .8fr);
        gap: 16px;
    }

    .dashboard-card {
        background: var(--ss-white);
        border: 1px solid var(--ss-border);
        border-radius: var(--ss-radius);
        overflow: hidden;

        box-shadow: 0 3px 12px rgba(31, 87, 86, .05);
    }

    .dashboard-card-header {
        padding: 14px 17px;
        border-bottom: 1px solid var(--ss-border);
    }

    .dashboard-card-title {
        color: var(--ss-primary);
        font-weight: 700;
        font-size: .95rem;
    }

    .dashboard-card-subtitle {
        margin-top: 2px;
        color: var(--ss-muted);
        font-size: .72rem;
    }

    /*
    |--------------------------------------------------------------------------
    | Graphique
    |--------------------------------------------------------------------------
    */
    .dashboard-chart {
        height: 330px;
        padding: 18px;
    }

    /*
    |--------------------------------------------------------------------------
    | Tableau
    |--------------------------------------------------------------------------
    */
    .dashboard-month-table {
        width: 100%;
        margin: 0;
        font-size: .79rem;
    }

    .dashboard-month-table th {
        padding: 9px 13px;

        background: var(--ss-background);
        color: var(--ss-primary);

        font-size: .67rem;
        text-transform: uppercase;
    }

    .dashboard-month-table td {
        padding: 8px 13px;
        border-bottom: 1px solid #edf5f5;
    }

    .dashboard-month-table tr:last-child td {
        border-bottom: 0;
    }

    .month-ca {
        color: var(--ss-primary);
        font-weight: 700;
    }

    .month-empty {
        color: #b9c7c7;
    }

    .dashboard-total-row td {
        background: #eaf5f5;
        color: var(--ss-primary);
        font-weight: 700;
    }

    @media (max-width: 1000px) {
        .dashboard-kpis {
            grid-template-columns: 1fr;
        }

        .dashboard-grid {
            grid-template-columns: 1fr;
        }
    }
</style>


<div class="dashboard-page">

    {{-- ================================================================
         EN-TÊTE
    ================================================================= --}}

    <div class="dashboard-header">

        <div>

            <h1 class="dashboard-title">
                Tableau de bord
            </h1>

            <div class="dashboard-subtitle">

				@if($estJuriste)

					Suivi de vos prestations juridiques et de votre chiffre d'affaires

				@else

					Suivi de votre portefeuille et de votre chiffre d'affaires

				@endif

			</div>

        </div>


        {{-- 
			|--------------------------------------------------------------------------
			| Sélection de l'année
			|--------------------------------------------------------------------------
			|
			| On permet uniquement :
			| - l'année en cours
			| - l'année précédente
			|
			--}}
			<form method="GET" action="{{ route('dashboard') }}">

				<select
					name="annee"
					class="form-select"
					onchange="this.form.submit()"
				>

					{{-- Année en cours --}}
					<option
						value="{{ now()->year }}"
						{{ $annee == now()->year ? 'selected' : '' }}
					>
						{{ now()->year }}
					</option>

					{{-- Année précédente --}}
					<option
						value="{{ now()->year - 1 }}"
						{{ $annee == now()->year - 1 ? 'selected' : '' }}
					>
						{{ now()->year - 1 }}
					</option>

				</select>

			</form>

    </div>


    {{-- ================================================================
         INDICATEURS
    ================================================================= --}}

    <div class="dashboard-kpis">

        {{-- CA annuel --}}
        <div class="dashboard-kpi main">

            <div class="dashboard-kpi-icon">
                <i class="bi bi-graph-up-arrow"></i>
            </div>

            <div>

                <div class="dashboard-kpi-label">

					@if($estJuriste)

						CA juridique {{ $annee }}

					@else

						CA {{ $annee }} (Hors DSN)

					@endif

				</div>

                <div class="dashboard-kpi-value">

                    {{ number_format(
                        $caAnnuel,
                        2,
                        ',',
                        ' '
                    ) }} €

                </div>

            </div>

        </div>


        {{-- ================================================================
			 Deuxième indicateur
		================================================================= --}}
		<div class="dashboard-kpi">

			<div class="dashboard-kpi-icon">

				@if($estJuriste)

					{{-- Icône adaptée aux prestations juridiques --}}
					<i class="bi bi-calendar-check"></i>

				@else

					{{-- Icône portefeuille pour les gestionnaires --}}
					<i class="bi bi-people"></i>

				@endif

			</div>

			<div>

				@if($estJuriste)

					{{--
					|--------------------------------------------------------------------------
					| Dashboard juriste
					|--------------------------------------------------------------------------
					|
					| Une juriste n'a pas de portefeuille client.
					| On affiche donc son CA du mois courant à la place.
					|
					--}}
					<div class="dashboard-kpi-label">
						CA du mois
					</div>

					<div class="dashboard-kpi-value">

						{{ number_format(
							$caMoisCourant,
							2,
							',',
							' '
						) }} €

					</div>

				@else

					{{--
					|--------------------------------------------------------------------------
					| Dashboard gestionnaire
					|--------------------------------------------------------------------------
					--}}
					<div class="dashboard-kpi-label">
						Portefeuille
					</div>

					<div class="dashboard-kpi-value">
						{{ $nombreClients }} clients
					</div>

				@endif

			</div>

		</div>


        {{-- Moyenne mensuelle --}}
        <div class="dashboard-kpi">

            <div class="dashboard-kpi-icon">
                <i class="bi bi-calculator"></i>
            </div>

            <div>

                <div class="dashboard-kpi-label">
                    Moyenne mensuelle
                </div>

                <div class="dashboard-kpi-value">

                    {{ number_format(
                        $caMoyenMensuel,
                        2,
                        ',',
                        ' '
                    ) }} €

                </div>

            </div>

        </div>

    </div>


    {{-- ================================================================
         GRAPHIQUE + TABLEAU
    ================================================================= --}}

    <div class="dashboard-grid">


        {{-- ============================================================
             GRAPHIQUE
        ============================================================= --}}

        <div class="dashboard-card">

            <div class="dashboard-card-header">

                <div class="dashboard-card-title">
                    Évolution du chiffre d'affaires
                </div>

                <div class="dashboard-card-subtitle">

					@if($estJuriste)

						Prestations juridiques réalisées sur l'année {{ $annee }}

					@else

						Chiffre d'affaires mensuel sur l'année {{ $annee }} (hors DSN)

					@endif

				</div>

            </div>


            <div class="dashboard-chart">

                <canvas id="caAnnuelChart"></canvas>

            </div>

        </div>


        {{-- ============================================================
             TABLEAU MENSUEL
        ============================================================= --}}

        <div class="dashboard-card">

            <div class="dashboard-card-header">

                <div class="dashboard-card-title">
                    Détail mensuel
                </div>

                <div class="dashboard-card-subtitle">

					@if($estJuriste)

						CA juridique réalisé mois par mois

					@else

						CA réalisé mois par mois (hors DSN)

					@endif

				</div>

            </div>


            <table class="dashboard-month-table">

                <thead>

                    <tr>
                        <th>Mois</th>
                       <th class="text-end">

							@if($estJuriste)
								CA juridique
							@else
								CA (Hors DSN)
							@endif

						</th>
                    </tr>

                </thead>

                <tbody>

                    @foreach($caParMois as $ligne)

                        <tr>

                            <td>
                                {{ $ligne['mois'] }}
                            </td>

                            <td class="text-end">

                                @if($ligne['ca'] > 0)

                                    <span class="month-ca">

                                        {{ number_format(
                                            $ligne['ca'],
                                            2,
                                            ',',
                                            ' '
                                        ) }} €

                                    </span>

                                @else

                                    <span class="month-empty">
                                        —
                                    </span>

                                @endif

                            </td>

                        </tr>

                    @endforeach


                    <tr class="dashboard-total-row">

                        <td>
                            TOTAL
                        </td>

                        <td class="text-end">

                            {{ number_format(
                                $caAnnuel,
                                2,
                                ',',
                                ' '
                            ) }} €

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </div>

</div>


{{-- ================================================================
     CHART.JS
================================================================= --}}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {

    /*
    |--------------------------------------------------------------------------
    | Données envoyées par Laravel
    |--------------------------------------------------------------------------
    */

    const labels = @json(
        $caParMois->pluck('mois_court')->values()
    );

    const chiffresAffaires = @json(
        $caParMois->pluck('ca')->values()
    );


    /*
    |--------------------------------------------------------------------------
    | Couleurs Suivi Social
    |--------------------------------------------------------------------------
    */

    const couleurPrincipale = '#1f5756';
    const couleurSecondaire = '#93d9db';


    /*
    |--------------------------------------------------------------------------
    | Graphique annuel
    |--------------------------------------------------------------------------
    */

    const canvas = document.getElementById(
        'caAnnuelChart'
    );

    new Chart(canvas, {

        type: 'line',

        data: {

            labels: labels,

            datasets: [
                {
                    label: 'Chiffre d’affaires',

                    data: chiffresAffaires,

                    borderColor:
                        couleurPrincipale,

                    backgroundColor:
                        'rgba(147, 217, 219, 0.22)',

                    fill: true,

                    tension: 0.35,

                    borderWidth: 3,

                    pointRadius: 4,

                    pointHoverRadius: 6,

                    pointBackgroundColor:
                        couleurPrincipale,

                    pointBorderColor:
                        '#ffffff',

                    pointBorderWidth: 2
                }
            ]
        },

        options: {

            responsive: true,

            maintainAspectRatio: false,

            interaction: {
                intersect: false,
                mode: 'index'
            },

            plugins: {

                legend: {
                    display: false
                },

                tooltip: {

                    callbacks: {

                        label: function(context) {

                            return new Intl.NumberFormat(
                                'fr-FR',
                                {
                                    style: 'currency',
                                    currency: 'EUR'
                                }
                            ).format(
                                context.parsed.y
                            );
                        }

                    }

                }

            },

            scales: {

                x: {

                    grid: {
                        display: false
                    },

                    ticks: {
                        color: '#6c7c7c'
                    }

                },

                y: {

                    beginAtZero: true,

                    grid: {
                        color: 'rgba(216, 236, 236, .7)'
                    },

                    ticks: {

                        color: '#6c7c7c',

                        callback: function(value) {

                            return new Intl.NumberFormat(
                                'fr-FR',
                                {
                                    notation: 'compact'
                                }
                            ).format(value) + ' €';

                        }

                    }

                }

            }

        }

    });

});
</script>

@endsection