@section('page-title', 'Dashboard')
@section('page-description', 'Monitor performance and insights')
<x-layouts.admin>

    <div class="max-w-7xxl mx-auto w-full space-y-6">

        <!-- HEADER -->
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-end gap-4">

            <!-- FILTER -->
            <form method="GET" action="{{ route('admin.dashboard') }}" x-data="{ showActions: false }"
                class="flex flex-col sm:flex-row gap-2 w-full lg:w-auto">

                <div class="relative w-full sm:w-auto">

                    <button type="button" id="dateFilterBtn"
                        class="w-full sm:w-auto flex items-center justify-center gap-2 px-4 py-2.5 bg-white border rounded-xl shadow-sm text-sm hover:bg-gray-50 transition"
                        id="dateFilterBtn" @click="showActions = true">

                        <!-- ICON -->
                        <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>

                        <span id="dateLabel" class="truncate">
                            {{ request('start_date')
                                ? \Carbon\Carbon::parse(request('start_date'))->format('d M') .
                                    ' → ' .
                                    \Carbon\Carbon::parse(request('end_date'))->format('d M')
                                : 'Select Date' }}
                        </span>
                    </button>

                    <!-- hidden picker -->
                    <input type="text" id="dateFilter" class="absolute opacity-0 pointer-events-none">
                </div>

                <input type="hidden" name="start_date" id="start_date" value="{{ request('start_date') }}">
                <input type="hidden" name="end_date" id="end_date" value="{{ request('end_date') }}">

                <div class="hidden sm:flex sm:flex-row gap-2">
                    <!-- Always visible on desktop -->
                    <button type="submit"
                        class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-700 transition">
                        Apply
                    </button>

                    <a href="{{ route('admin.dashboard') }}"
                        class="text-center bg-gray-200 px-4 py-2 rounded-lg text-sm hover:bg-gray-300 transition">
                        Reset
                    </a>
                </div>

                <!-- Mobile only -->
                <div x-show="showActions" x-transition class="flex sm:hidden flex-col gap-2 w-full">

                    <button type="submit"
                        class="w-full bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-700 transition">
                        Apply
                    </button>

                    <a href="{{ route('admin.dashboard') }}"
                        class="w-full text-center bg-gray-200 px-4 py-2 rounded-lg text-sm hover:bg-gray-300 transition">
                        Reset
                    </a>

                </div>
            </form>
        </div>

        <!-- STATS -->
        <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4">

            @php
                $cards = [
                    [
                        'label' => 'Bookings',
                        'value' => $todayBookings,
                        'percentage' => '12%',
                        'bgColor' => 'from-blue-700 to-blue-500',
                        'textColor' => 'text-white',
                        'iconBg' => 'bg-white/10',
                        'iconColor' => 'text-white',
                        'percentageBg' => 'bg-white/20',
                        'percentageColor' => 'text-white',
                        'icon' => '
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-check h-5 w-5" aria-hidden="true"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path><path d="m9 16 2 2 4-4"></path></svg>',
                    ],
                    [
                        'label' => 'Completed',
                        'value' => $allCompletedBookings,
                        'percentage' => '18%',
                        'bgColor' => 'from-white to-white',
                        'textColor' => 'text-gray-600',
                        'iconBg' => 'from-green-600 to-geen-600',
                        'iconColor' => 'text-white',
                        'percentageBg' => 'bg-green-200/50',
                        'percentageColor' => 'text-green-500',
                        'icon' => '
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check h-5 w-5" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg>',
                    ],
                    [
                        'label' => 'Earnings',
                        'value' => "$" . number_format($completedEarning, 2),
                        'percentage' => '10%',
                        'bgColor' => 'from-white to-white',
                        'textColor' => 'text-gray-600',
                        'iconBg' => 'from-blue-600 to-blue-300',
                        'iconColor' => 'text-white',
                        'percentageBg' => 'bg-green-200/50',
                        'percentageColor' => 'text-green-500',
                        'icon' => '
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-dollar-sign h-5 w-5" aria-hidden="true"><line x1="12" x2="12" y1="2" y2="22"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>',
                    ],
                    [
                        'label' => 'Pending',
                        'value' => "$" . number_format($pendingEarning, 2),
                        'percentage' => '6%',
                        'bgColor' => 'from-white to-white',
                        'textColor' => 'text-gray-600',
                        'iconBg' => 'from-orange-600 to-orange-300',
                        'iconColor' => 'text-white',
                        'percentageBg' => 'bg-red-200/50',
                        'percentageColor' => 'text-red-500',
                        'icon' => '
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-5 w-5" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg>',
                    ],
                    [
                        'label' => 'Profit',
                        'value' => "$" . number_format($netProfit, 2),
                        'percentage' => '15%',
                        'bgColor' => 'from-white to-white',
                        'textColor' => 'text-gray-600',
                        'iconBg' => 'from-green-600 to-geen-600',
                        'iconColor' => 'text-white',
                        'percentageBg' => 'bg-green-200/50',
                        'percentageColor' => 'text-green-500',
                        'icon' => '
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-5 w-5" aria-hidden="true"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>',
                    ],
                    [
                        'label' => 'Students',
                        'value' => $totalStudents,
                        'percentage' => '9%',
                        'bgColor' => 'from-white to-white',
                        'textColor' => 'text-gray-600',
                        'iconBg' => 'from-blue-600 to-blue-300',
                        'iconColor' => 'text-white',
                        'percentageBg' => 'bg-green-200/50',
                        'percentageColor' => 'text-green-500',
                        'icon' => '
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-5 w-5" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg>',
                    ],
                ];
            @endphp

            @foreach ($cards as $card)
                <div
                    class="rounded-2xl p-5 shadow-lg relative overflow-hidden bg-gradient-to-br {{ $card['bgColor'] }} {{ $card['textColor'] }}">
                    <!-- Top -->
                    <div class="flex items-start justify-between mb-3">
                        <!-- Icon -->
                        <div
                            class="bg-gradient-to-br {{ $card['iconBg'] }} {{ $card['iconColor'] }} p-3 rounded-full backdrop-blur-sm">
                            {!! $card['icon'] !!}
                        </div>
                        <div
                            class="mt-3 inline-flex items-center gap-1 bg-white/20 px-2 py-1 rounded-full text-xs font-medium {{ $card['percentageBg'] }} {{ $card['percentageColor'] }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="lucide lucide-trending-up h-3 w-3" aria-hidden="true">

                                <path d="M16 7h6v6"></path>
                                <path d="m22 7-8.5 8.5-5-5L2 17"></path>
                            </svg>

                            {{ $card['percentage'] }}
                        </div>
                    </div>

                    <div class="flex items-start justify-between flex-col">
                        <p class="text-sm font-semibold uppercase ">{{ $card['label'] }}</p>
                        <h3 class="text-2xl font-bold">
                            {{ $card['value'] }}
                        </h3>
                    </div>

                </div>
            @endforeach

        </div>

        <!-- LOWER SECTION -->
        <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
            <!-- INSIGHTS -->
            <div class="xl:col-span-2 bg-white border rounded-2xl p-5 shadow-sm">
                <div class="flex justify-between">
                    <div class="flex flex-col mb-3">
                        <div class="flex gap-2 items-center">
                            <span class="text-blue-500">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    class="lucide lucide-sparkles h-4 w-4 text-primary" aria-hidden="true">
                                    <path
                                        d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z">
                                    </path>
                                    <path d="M20 2v4"></path>
                                    <path d="M22 4h-4"></path>
                                    <circle cx="4" cy="20" r="2"></circle>
                                </svg>
                            </span>
                            <h3 class="font-semibold text-gray-800">
                                Insights
                            </h3>
                        </div>
                        <p class="text-sm font-normal text-gray-500">Performance at a glance</p>
                    </div>
                    {{-- <select
                        class="text-sm border-none outline-none ring-0 focus:ring-0 focus:outline-none shadow-none bg-gray-100 py-[5px] rounded-full h-8">
                        <option>This Week</option>
                        <option>This Month</option>
                    </select> --}}
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
                    <div class="p-4 rounded-2xl bg-gray-50 border">
                        <div class="h-8 w-8 rounded-xl flex items-center justify-center bg-blue-500/10 text-blue-500 ">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="lucide lucide-dollar-sign h-4 w-4" aria-hidden="true">
                                <line x1="12" x2="12" y1="2" y2="22"></line>
                                <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                            </svg></div>
                        <p class="text-gray-500 uppercase text-sm mt-4">Net Revenue</p>
                        <p class="text-xl font-bold text-black-600 mt-1">
                            ${{ number_format($allprofit, 2) }}
                        </p>
                        <div class="flex items-start justify-between">
                            <div
                                class="inline-flex items-center gap-1 bg-white/20  py-1 rounded-full text-xs font-medium text-gray-400">
                                +22% vs last week
                            </div>
                        </div>
                    </div>
                    <div class="p-4 rounded-2xl bg-gray-50 border">
                        <div class="h-8 w-8 rounded-xl flex items-center justify-center bg-gray-300/10 text-blue-500 ">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity h-4 w-4"
                                aria-hidden="true">
                                <path
                                    d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2">
                                </path>
                            </svg>
                        </div>
                        <p class="text-gray-500 uppercase text-sm mt-4">Today's Load</p>
                        <p class="text-xl font-bold text-black-600 mt-1">
                            {{ $todayAllbookings }}
                        </p>
                        <div class="flex items-start justify-between">
                            <div
                                class="inline-flex items-center gap-1 bg-white/20  py-1 rounded-full text-xs font-medium text-gray-400">
                                70% capacity
                            </div>
                        </div>
                    </div>
                    <div class="p-4 rounded-2xl bg-gray-50 border">
                        <div
                            class="h-8 w-8 rounded-xl flex items-center justify-center bg-green-500/10 text-green-500 ">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-target h-4 w-4"
                                aria-hidden="true">
                                <circle cx="12" cy="12" r="10"></circle>
                                <circle cx="12" cy="12" r="6"></circle>
                                <circle cx="12" cy="12" r="2"></circle>
                            </svg>
                        </div>
                        <p class="text-gray-500 uppercase text-sm mt-4">Conversion</p>
                        <p class="text-xl font-bold text-black-600 mt-1">
                            {{ $todayBookings > 0 ? round(($completedEarning / max($pendingEarning + $completedEarning, 1)) * 100) : 0 }}%
                        </p>
                        <div class="flex items-start justify-between">
                            <div
                                class="inline-flex items-center gap-1 bg-white/20  py-1 rounded-full text-xs font-medium text-gray-400">
                                +5pt this week
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- OVERVIEW -->
            <div class="flex flex-col gap-4 flex-wrap">
                <div
                    class="rounded-2xl p-5 shadow-lg relative overflow-hidden bg-gradient-to-br from-blue-700 to-blue-500">
                    <div class="flex items-start justify-between flex-col">
                        <p class="text-sm font-semibold uppercase text-gray-100/70">Total Earnings</p>
                        <h3 class="text-2xl font-bold text-white">
                            ${{ number_format($completedTotalEarning, 2) }}
                        </h3>
                    </div>
                    <div class="flex items-start justify-between">
                        <div
                            class="mt-3 inline-flex items-center gap-1 bg-white/20 px-2 py-1 rounded-full text-xs font-medium bg-white/20 text-white">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round"
                                class="lucide lucide-trending-up h-3 w-3" aria-hidden="true">
                                <path d="M16 7h6v6"></path>
                                <path d="m22 7-8.5 8.5-5-5L2 17"></path>
                            </svg>
                            24% from last month
                        </div>
                    </div>
                </div>
                <div class="rounded-2xl p-5 shadow-lg relative overflow-hidden bg-gradient-to-br from-white to-white">
                    <div class="flex items-start justify-between flex-col">
                        <p class="text-sm font-semibold uppercase text-black-500/20">Total Instructors</p>
                        <h3 class="text-2xl font-bold text-black">
                            {{ $totalInstructors }}
                        </h3>
                    </div>
                    <div class="flex items-center mt-3">

                        <div
                            class="h-7 w-7 rounded-full bg-gradient-to-br from-blue-600 to-indigo-600 text-white text-[10px] font-semibold flex items-center justify-center ring-2 ring-white">
                            AK
                        </div>

                        <div
                            class="-ml-2 h-7 w-7 rounded-full bg-gradient-to-br from-emerald-500 to-green-600 text-white text-[10px] font-semibold flex items-center justify-center ring-2 ring-white">
                            JH
                        </div>

                        <div
                            class="-ml-2 h-7 w-7 rounded-full bg-gradient-to-br from-orange-500 to-red-500 text-white text-[10px] font-semibold flex items-center justify-center ring-2 ring-white">
                            SP
                        </div>

                        <div
                            class="-ml-2 h-7 w-7 rounded-full bg-gradient-to-br from-purple-500 to-violet-600 text-white text-[10px] font-semibold flex items-center justify-center ring-2 ring-white">
                            MD
                        </div>

                        <div
                            class="-ml-2 h-7 w-7 rounded-full bg-gradient-to-br from-pink-500 to-rose-600 text-white text-[10px] font-semibold flex items-center justify-center ring-2 ring-white">
                            RL
                        </div>

                        <div class="text-xs text-gray-500 ml-2">
                            {{ $activeInstructors }} active
                        </div>

                    </div>
                </div>
            </div>
        </div>



        <!-- FLATPICKR -->
        <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

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

                const picker = flatpickr("#dateFilter", {
                    mode: "range",
                    dateFormat: "Y-m-d",
                    position: "auto",
                    onChange: function(selectedDates, dateStr, instance) {

                        if (selectedDates.length === 2) {

                            const start = instance.formatDate(selectedDates[0], "Y-m-d");
                            const end = instance.formatDate(selectedDates[1], "Y-m-d");

                            document.getElementById('start_date').value = start;
                            document.getElementById('end_date').value = end;

                            document.getElementById('dateLabel').innerText =
                                instance.formatDate(selectedDates[0], "d M") + " → " +
                                instance.formatDate(selectedDates[1], "d M");
                        }
                    }
                });

                document.getElementById('dateFilterBtn').addEventListener('click', () => {
                    picker.open();
                });

            });
        </script>

</x-layouts.admin>