@extends('layouts.app')

@section('namePage', 'Dashboard')

@php
    $colorClassMap = [
        'blue' => [
            'bg' => 'bg-blue-100',
            'dark' => 'dark:bg-blue-900',
            'text' => 'text-blue-500',
            'border' => 'border-blue-500',
        ],
        'red' => [
            'bg' => 'bg-red-100',
            'dark' => 'dark:bg-red-900',
            'text' => 'text-red-500',
            'border' => 'border-red-500',
        ],
        'yellow' => [
            'bg' => 'bg-yellow-100',
            'dark' => 'dark:bg-yellow-900',
            'text' => 'text-yellow-500',
            'border' => 'border-yellow-500',
        ],
        'green' => [
            'bg' => 'bg-green-100',
            'dark' => 'dark:bg-green-900',
            'text' => 'text-green-500',
            'border' => 'border-green-500',
        ],
        'indigo' => [
            'bg' => 'bg-indigo-100',
            'dark' => 'dark:bg-indigo-900',
            'text' => 'text-indigo-500',
            'border' => 'border-indigo-500',
        ],
        'zinc' => [
            'bg' => 'bg-zinc-100',
            'dark' => 'dark:bg-zinc-900',
            'text' => 'text-zinc-500',
            'border' => 'border-zinc-500',
        ],
        'neutral' => [
            'bg' => 'bg-neutral-100',
            'dark' => 'dark:bg-neutral-900',
            'text' => 'text-neutral-500',
            'border' => 'border-neutral-500',
        ],
        'purple' => [
            'bg' => 'bg-purple-100',
            'dark' => 'dark:bg-purple-900',
            'text' => 'text-purple-500',
            'border' => 'border-purple-500',
        ],
        'teal' => [
            'bg' => 'bg-teal-100',
            'dark' => 'dark:bg-teal-900',
            'text' => 'text-teal-500',
            'border' => 'border-teal-500',
        ],
    ];

    $cards = [
        
        [
            'title' => 'Outlook Daily dan Weekly',
            'count' => $jumlahOutlook . ' Outlook',
            'color' => 'red',
            'icon' =>  'fa-folder',
            'route' => 'outlookfolder.index',
        ],
        [
            'title' => 'Materi e-Book',
            'count' => $jumlahMateri . ' Materi',
            'color' => 'blue',
            'icon' => 'fa-book',
            'route' => 'folder.index',
        ],
        [
            'title' => 'Quiz Dikerjakan',
            'count' => $riwayatUserLogin . ' Kuis',
            'color' => 'yellow',
            'icon' =>  'fa-person-circle-question',
            'route' => 'riwayat.index',
        ],
        [
            'title' => 'Piagam',
            'count' => $jumlahSertifikat . ' Sertifikat',
            'color' => 'green',
            'icon' =>  'fa-duotone fa-regular fa-certificate',
            'route' => 'sertifikat.index',
        ],
        [
            'title' => 'User Aktif',
            'count' => $jumlahUser . ' User',
            'color' => 'purple',
            'icon' => 'fa-users',
            // 'route' => 'trainer.index',
        ],
    ];

    if (Auth::check() && Auth::user()->role === 'Admin') {
        // $cards[] = [
        //     'title' => 'User Aktif',
        //     'count' => $jumlahUser . ' User',
        //     'color' => 'purple',
        //     'icon' => 'fa-users',
        //     'route' => 'trainer.index',
        // ];

        $cards[] = [
            'title' => 'Jumlah Admin',
            'count' => $jumlahAdmin . ' Admin',
            'color' => 'teal',
            'icon' => 'fa-user-shield',
            'route' => 'admin.index',
        ];
    }
@endphp

@section('content')
    <h1 class="text-3xl font-semibold mb-2">Dashboard</h1>
    <p class="mb-6">Selamat datang kembali, {{ Auth::user()->name }}!</p>

    @if ($isIncomplete)
        <div class="bg-yellow-100 border border-yellow-400 text-yellow-700 rounded mb-6 flex items-center" role="alert">
            <div class="p-3 bg-yellow-400">
                <strong class="font-bold">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                </strong>
            </div>
            <div class="ps-3">
                <span class="block sm:inline">
                    Lengkapi data diri Anda untuk pengalaman yang lebih baik.
                    <a href="{{ route('profile.edit') }}" class="underline text-yellow-700 ml-2">Klik di sini</a>
                </span>
            </div>
        </div>
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        @foreach ($cards as $card)
            @php
                $color = $card['color'];
                $classes = $colorClassMap[$color] ?? $colorClassMap['blue'];
            @endphp

            @if (!empty($card['route']))
                <a href="{{ route($card['route']) }}" class="block hover:no-underline">
            @endif

            <div
                class="bg-white dark:bg-gray-800 {{ $classes['border'] }} border-l-4 rounded-lg shadow hover:scale-105 transition-all duration-300">
                <div class="flex items-center p-5">
                    <div class="{{ $classes['text'] }} px-6 py-5 {{ $classes['bg'] }} {{ $classes['dark'] }} rounded-full">
                        <i class="fa-solid {{ $card['icon'] }} text-2xl"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">{{ $card['title'] }}</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-300">{{ $card['count'] }}</p>
                    </div>
                </div>
            </div>

            @if (!empty($card['route']))
                </a>
            @endif
        @endforeach
    </div>
@endsection