@extends('base_html')
@section('title', 'Tableau de bord')
@section('meta_content_description', 'totati')
@section('meta_robots', 'noindex,nofollow')
@section('content')
    <div class="flex h-full flex-col" x-data="{
        loading: false,
        navSelected: true,
        active: '{{ session('activeTab') ?? 'home' }}',
        load(routeName, key) {
            this.loading = true;
            this.active = key;
            fetch(routeName)
                .then(html => {
                    this.loading = false;
                });
        }
    }">
        <!-- Top nav-->
        <header x-data="{ open: false }" @keydown.window.escape="open = false"
            class="relative flex h-16 shrink-0 items-center bg-white">
            <!-- Logo area -->
            <div class="static inset-y-0 left-0 lg:shrink-0">
                <button @click="load('{{ route('admin.home') }}', 'home'); navSelected = true;"
                    class="flex h-16 items-center justify-center bg-secondary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-dark w-20">
                    <img class="h-8 w-auto" src="{{ asset('images/logo/logo_without_bg.webp') }}" alt="Your Company">
                </button>
            </div>
        </header>
        <!-- Bottom section -->
        <div class="flex min-h-0 flex-1 overflow-hidden">
            <!-- Narrow sidebar-->
            <nav aria-label="Sidebar" class="block shrink-0 lg:overflow-y-auto bg-dark">
                <div class="relative flex w-20 flex-col space-y-3 p-3">
                    <button @click="load('{{ route('admin.gallery') }}', 'gallery'); navSelected = true;"
                        :class="active === 'gallery' ? 'bg-secondary' : 'bg-dark'"
                        class="text-white shrink-0 hover:bg-gray-700 inline-flex items-center justify-center h-14 w-14 rounded-lg">
                        <span class="sr-only">Galerie</span>
                        <i class="fa-solid fa-images"></i>
                    </button>

                    <button @click="load('{{ route('admin.actuality') }}', 'actuality'); navSelected = true;"
                        :class="active === 'actuality' ? 'bg-secondary' : 'bg-dark'"
                        class="text-white hover:bg-gray-700 shrink-0 inline-flex items-center justify-center h-14 w-14 rounded-lg">
                        <span class="sr-only">Actualités</span>
                        <i class="fa-regular fa-newspaper"></i>
                    </button>

                    <button @click="load('{{ route('admin.profile') }}', 'profile'); navSelected = true;"
                        :class="active === 'profile' ? 'bg-secondary' : 'bg-dark'"
                        class="text-white hover:bg-gray-700 shrink-0 inline-flex items-center justify-center h-14 w-14 rounded-lg">
                        <span class="sr-only">Profile</span>
                        <i class="fa-solid fa-user-astronaut"></i>
                    </button>
                </div>
            </nav>
            <div x-show="loading" class="mt-2 w-full h-[55vh] flex justify-center items-center">
                <span class="w-15 h-15 border-8 border-dashed rounded-full border-t-lime-400 animate-spin"></span>
            </div>

            <div x-show="active === 'home' && navSelected && !loading" class="w-full">
                @include('admin.partial.home', compact('galleries', 'actualities'))
            </div>
            <div x-show="active === 'gallery' && navSelected && !loading"
                class="w-full {{ $galleries->isempty() ? 'h-[55vh]' : '' }}">
                @include('admin.partial.gallery', compact('galleries', 'categories'))
            </div>
            <div x-show="active === 'actuality' && navSelected && !loading" class="w-full {{ $actualities->isempty() ? 'h-[55vh]' : '' }}">
                @include('admin.partial.actuality', compact('actualities'))
            </div>
            <div x-show="active === 'profile' && navSelected && !loading" class="w-full">
                @include('admin.partial.profile')
            </div>
        </div>
    </div>
@endsection