@extends('layouts.admin')

@section('title', 'Dashboard')
@section('header-title', 'Dashboard')

@section('content')
    <div class="dashboard-shell flex flex-col">
    <div class="mb-5 flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
        <div>
            <p class="text-sm font-semibold text-blue-600">OPERATIONS OVERVIEW</p>
            <h1 class="mt-1 text-2xl font-bold tracking-tight text-slate-950 xl:text-3xl"><span id="dashboard-greeting">Good Morning</span>, {{ auth()->user()->name }}</h1>
            <p class="mt-1 text-sm text-slate-500">Here is what is happening with your travel operations today.</p>
        </div>
        <a href="{{ route('admin.bookings.create') }}" class="inline-flex items-center justify-center gap-2 rounded-xl bg-blue-600 px-4 py-3 text-sm font-bold text-white shadow-lg shadow-blue-600/20 hover:bg-blue-700">
            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg> New booking
        </a>
    </div>

    <div class="grid gap-5 sm:grid-cols-2 xl:grid-cols-4">
        @foreach ($stats as $stat)
            @php
                $colors = [
                    'blue' => 'bg-blue-50 text-blue-600',
                    'violet' => 'bg-violet-50 text-violet-600',
                    'emerald' => 'bg-emerald-50 text-emerald-600',
                    'amber' => 'bg-amber-50 text-amber-600',
                ];
            @endphp
            <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                <div class="flex items-start justify-between">
                    <div><p class="text-sm font-medium text-slate-500">{{ $stat['label'] }}</p><p class="mt-1 text-2xl font-bold text-slate-950">{{ $stat['value'] }}</p></div>
                    <span class="grid size-10 place-items-center rounded-xl {{ $colors[$stat['tone']] }}">
                        <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19V9M10 19V5M16 19v-8M22 19V2"/></svg>
                    </span>
                </div>
                <p class="mt-2 text-xs text-slate-400">{{ $stat['meta'] }}</p>
            </article>
        @endforeach
    </div>

    <div class="mt-5 grid flex-1 gap-5 xl:grid-cols-[1.6fr_1fr]">
        <section class="flex h-full flex-col rounded-2xl border border-slate-200 bg-white shadow-sm">
            <div class="flex items-center justify-between border-b border-slate-100 px-5 py-4">
                <div><h2 class="font-bold text-slate-900">Recent bookings</h2><p class="mt-1 text-xs text-slate-500">Latest company and customer trips</p></div>
                <a href="{{ route('admin.bookings.index') }}" class="inline-flex items-center gap-1 text-sm font-semibold text-blue-600 transition hover:text-blue-800">
                    View all
                    <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>
                </a>
            </div>
            @if ($recentBookings->isEmpty())
            <div class="grid min-h-60 place-items-center px-6 py-8 text-center">
                <div>
                    <span class="mx-auto grid size-14 place-items-center rounded-2xl bg-slate-100 text-slate-400">
                        <svg class="size-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14H3V6a2 2 0 0 1 2-2"/></svg>
                    </span>
                    <h3 class="mt-4 text-sm font-bold text-slate-800">No bookings yet</h3>
                    <p class="mt-1 max-w-xs text-sm leading-6 text-slate-500">Your latest bookings will appear here after you create the first one.</p>
                </div>
            </div>
            @else
            <div class="divide-y divide-slate-100">
                @foreach ($recentBookings as $booking)
                    <a href="{{ route('admin.bookings.show', $booking) }}" class="dashboard-recent-booking group flex flex-col gap-3 px-5 py-3 transition hover:bg-slate-50 sm:flex-row sm:items-center">
                        <span class="dashboard-booking-icon grid size-10 shrink-0 place-items-center rounded-xl bg-blue-50 text-blue-600 transition group-hover:bg-blue-100">
                            <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14H3V6a2 2 0 0 1 2-2"/></svg>
                        </span>
                        <div class="min-w-0 flex-1">
                            <div class="flex flex-wrap items-center gap-2">
                                <p class="font-bold text-slate-900">{{ $booking->booking_number }}</p>
                                <span class="rounded-full bg-blue-50 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide text-blue-700">{{ str($booking->status)->replace('_', ' ') }}</span>
                            </div>
                            <p class="mt-1 truncate text-sm text-slate-500">{{ $booking->company?->name ?? $booking->customer?->name }} · {{ $booking->pickup_location }} → {{ $booking->drop_location }}</p>
                        </div>
                        <div class="shrink-0 sm:text-right">
                            <p class="text-sm font-bold text-slate-800">₹{{ number_format((float) $booking->estimated_amount, 2) }}</p>
                            <p class="mt-1 text-xs text-slate-400">{{ $booking->pickup_at->format('d M Y, h:i A') }}</p>
                        </div>
                        <svg class="dashboard-booking-arrow hidden size-4 shrink-0 text-slate-300 transition group-hover:translate-x-1 group-hover:text-blue-600 sm:block" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>
                    </a>
                @endforeach
            </div>
            @endif
        </section>

        <section class="flex h-full flex-col rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
            <h2 class="font-bold text-slate-900">Quick actions</h2>
            <p class="mt-1 text-xs text-slate-500">Common admin tasks</p>
            <div class="mt-4 grid flex-1 auto-rows-fr grid-cols-2 gap-3">
                @foreach ([
                    ['Add company', 'blue', 'M12 5v14M5 12h14', route('admin.companies.create')],
                    ['Add customer', 'violet', 'M12 5v14M5 12h14', route('admin.customers.create')],
                    ['Add vehicle', 'emerald', 'M12 5v14M5 12h14', route('admin.vehicles.create')],
                    ['New quotation', 'amber', 'M12 5v14M5 12h14', route('admin.quotations.create')],
                ] as [$label, $tone, $path, $url])
                    @php
                        $quickColors = [
                            'blue' => 'bg-blue-50 text-blue-700 hover:bg-blue-100',
                            'violet' => 'bg-violet-50 text-violet-700 hover:bg-violet-100',
                            'emerald' => 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100',
                            'amber' => 'bg-amber-50 text-amber-700 hover:bg-amber-100',
                        ];
                    @endphp
                    <a href="{{ $url }}" class="flex min-h-20 flex-col items-center justify-center gap-2 rounded-xl text-center text-xs font-bold transition {{ $quickColors[$tone] }}">
                        <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="{{ $path }}"/></svg>{{ $label }}
                    </a>
                @endforeach
            </div>
        </section>
    </div>
    </div>
    <script>
        function updateDashboardGreeting() {
            const hour = new Date().getHours();
            const greeting = hour < 12 ? 'Good Morning' : (hour < 17 ? 'Good Afternoon' : 'Good Evening');
            document.getElementById('dashboard-greeting').textContent = greeting;
        }

        updateDashboardGreeting();
        window.setInterval(updateDashboardGreeting, 60000);
    </script>
@endsection