@extends('layout.app')

@section('body')

<x-menu-auth>Tableau de bord</x-menu-auth>

        <!-- ======================================================
             CONTENT
        ======================================================= -->

        <main class="px-4 py-8 sm:px-6 lg:px-8">


            <!-- ==================================================
                 WELCOME
            =================================================== -->

            <section class="mb-8">

                <div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between">

                    <div>

                        <p class="mb-2 text-sm text-[var(--content-muted)]">
                            Bonjour {{ Auth::user()->name }} 👋
                        </p>

                        <h2 class="text-3xl font-bold tracking-tight text-[var(--content-primary)] sm:text-4xl">
                            Bienvenue sur votre espace
                        </h2>

                        <p class="mt-3 max-w-2xl text-sm leading-6 text-[var(--content-muted)]">
                            Retrouvez ici les principales informations et actions
                            de votre espace administratif.
                        </p>

                    </div>

                </div>

            </section>



            <!-- ==================================================
                 STATS
            =================================================== -->

            <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">


                <!-- Card 1 -->

                <article class="rounded-2xl border border-[var(--line-subtle)]
                                bg-[var(--surface-panel-strong)]
                                p-5
                                transition-all duration-200
                                hover:-translate-y-0.5
                                hover:border-[var(--line-subtle)]
                                hover:bg-[var(--surface-panel-strong)]">

                    <div class="flex items-start justify-between">

                        <div>

                            <p class="text-sm text-[var(--content-muted)]">
                                Nombre d'enfants
                            </p>

                            <p class="mt-3 text-3xl font-bold tracking-tight text-[var(--content-primary)]">
                                {{  $totalChild }}
                            </p>

                        </div>

                        <div class="flex h-11 w-11 items-center justify-center
                                    rounded-xl
                                    bg-[var(--color-orange)]/10
                                    text-[var(--color-orange)]">

                            <i class="bi bi-people text-xl"></i>

                        </div>

                    </div>

                    {{-- <div class="mt-4 flex items-center gap-2 text-xs">

                        <span class="flex items-center gap-1 text-emerald-400">
                            <i class="bi bi-arrow-up"></i>
                            12%
                        </span>

                        <span class="text-[var(--content-muted)]">
                            depuis le mois dernier
                        </span>

                    </div> --}}

                </article>


                <!-- Card 2 -->

                <article class="rounded-2xl border border-[var(--line-subtle)]
                                bg-[var(--surface-panel-strong)]
                                p-5
                                transition-all duration-200
                                hover:-translate-y-0.5
                                hover:border-[var(--line-subtle)]
                                hover:bg-[var(--surface-panel-strong)]">

                    <div class="flex items-start justify-between">

                        <div>

                            <p class="text-sm text-[var(--content-muted)]">
                                Dossiers complets
                            </p>

                            <p class="mt-3 text-3xl font-bold tracking-tight text-[var(--content-primary)]">
                                {{ $totalRegistrationConfirmed }}
                            </p>

                        </div>

                        <div class="flex h-11 w-11 items-center justify-center
                                    rounded-xl
                                    bg-emerald-500/10
                                    text-emerald-400">

                            <i class="bi bi-check2-circle text-xl"></i>

                        </div>

                    </div>

                    <div class="mt-4">

                        <div class="mb-2 flex items-center justify-between text-xs">

                            <span class="text-[var(--content-muted)]">
                                Progression
                            </span>

                            <span class="font-medium text-[var(--content-muted)]">
                                {{ round(($totalRegistrationConfirmed / $totalRegistration) * 100) }}%
                            </span>

                        </div>

                        <div class="h-1.5 overflow-hidden rounded-full bg-[var(--surface-panel-strong)]">
                            <div
                                class="h-full rounded-full bg-emerald-500"
                                style="width: {{ round(($totalRegistrationConfirmed / $totalRegistration) * 100) }}%;"
                            ></div>
                        </div>

                    </div>

                </article>


                <!-- Card 3 -->

                <article class="rounded-2xl border border-[var(--line-subtle)]
                                bg-[var(--surface-panel-strong)]
                                p-5
                                transition-all duration-200
                                hover:-translate-y-0.5
                                hover:border-[var(--line-subtle)]
                                hover:bg-[var(--surface-panel-strong)]">

                    <div class="flex items-start justify-between">

                        <div>

                            <p class="text-sm text-[var(--content-muted)]">
                                À vérifier
                            </p>

                            <p class="mt-3 text-3xl font-bold tracking-tight text-[var(--content-primary)]">
                                {{  $totalRegistrationNotConfirmed }}
                            </p>

                        </div>

                        <div class="flex h-11 w-11 items-center justify-center
                                    rounded-xl
                                    bg-amber-500/10
                                    text-amber-400">

                            <i class="bi bi-exclamation-triangle text-xl"></i>

                        </div>

                    </div>

                    <p class="mt-4 text-xs text-amber-400/80">
                        Nécessitent votre attention
                    </p>

                </article>


                <!-- Card 4 -->

                <article class="rounded-2xl border border-[var(--line-subtle)]
                                bg-[var(--surface-panel-strong)]
                                p-5
                                transition-all duration-200
                                hover:-translate-y-0.5
                                hover:border-[var(--line-subtle)]
                                hover:bg-[var(--surface-panel-strong)]">

                    <div class="flex items-start justify-between">

                        <div>

                            <p class="text-sm text-[var(--content-muted)]">
                                Activité
                            </p>

                            <p class="mt-3 text-3xl font-bold tracking-tight text-[var(--content-primary)]">
                                {{ $totalActivity }}
                            </p>

                        </div>

                        <div class="flex h-11 w-11 items-center justify-center
                                    rounded-xl
                                    bg-blue-500/10
                                    text-blue-400">

                            <i class="bi bi-calendar text-xl"></i>

                        </div>

                    </div>

                </article>

            </section>

        </main>

    </div>

@endsection