@extends('layouts.app')

@section('title', 'Dashboard')
@section('page_title', 'Dashboard')
@section('page_subtitle', 'Hotel overview for ' . now()->format('F j, Y'))

@section('nav_dashboard', 'bg-teal-50 text-teal-700 font-semibold')

@section('content')

@php
$hour     = now()->hour;
$greeting = $hour < 12 ? 'Good morning' : ($hour < 18 ? 'Good afternoon' : 'Good evening');
$propName = \App\Models\Setting::get('property_name', 'Parkview Hotel CDO');
@endphp

@if (session('success'))
<div class="mb-5 bg-teal-50 border-[0.5px] border-teal-200 rounded-xl px-5 py-3.5 flex items-center gap-3">
    <svg class="w-4 h-4 text-teal-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
    </svg>
    <p class="text-teal-700 text-sm font-medium">{{ session('success') }}</p>
</div>
@endif

{{-- ===== WELCOME ROW ===== --}}
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
    <div>
        <h2 class="text-gray-900 font-bold text-lg">{{ $greeting }}, Front Desk</h2>
        <p class="text-gray-400 text-sm mt-0.5">{{ $propName }} &mdash; {{ now()->format('l, F j, Y \a\t g:i A') }}</p>
    </div>
    <div class="flex items-center gap-2">
        <a href="{{ route('checkin.index') }}"
           class="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-green-700 bg-green-50 hover:bg-green-100 border-[0.5px] border-green-200 rounded-lg transition-colors">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
            </svg>
            Check-in
        </a>
        <a href="{{ route('checkout.index') }}"
           class="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-amber-700 bg-amber-50 hover:bg-amber-100 border-[0.5px] border-amber-200 rounded-lg transition-colors">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
            </svg>
            Check-out
        </a>
        <a href="{{ route('reservations.create') }}"
           class="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-white bg-teal-600 hover:bg-teal-700 rounded-lg transition-colors">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            New Reservation
        </a>
    </div>
</div>

{{-- ===== KPI CARDS ===== --}}
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">

    {{-- Occupancy Rate --}}
    <div class="bg-teal-600 rounded-xl p-4 text-white col-span-2 sm:col-span-1">
        <p class="text-teal-100/70 text-xs font-medium">Occupancy</p>
        <p class="text-3xl font-bold mt-1.5">{{ $stats['occupancy_rate'] }}%</p>
        <div class="mt-2.5 bg-teal-500/50 rounded-full h-1">
            <div class="bg-white/80 rounded-full h-1 transition-all" style="width: {{ $stats['occupancy_rate'] }}%"></div>
        </div>
        <p class="text-teal-100/60 text-[11px] mt-1.5">of {{ $stats['total_rooms'] }} rooms</p>
    </div>

    {{-- In-House --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-4">
        <p class="text-gray-400 text-xs font-medium">In-House</p>
        <div class="flex items-end gap-1.5 mt-1.5">
            <p class="text-2xl font-bold text-gray-900">{{ $stats['in_house'] }}</p>
            <span class="w-2 h-2 bg-green-500 rounded-full mb-1.5 animate-pulse"></span>
        </div>
        <p class="text-gray-400 text-xs mt-1">Guests staying</p>
    </div>

    {{-- Available --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-4">
        <p class="text-gray-400 text-xs font-medium">Available</p>
        <p class="text-2xl font-bold text-gray-900 mt-1.5">{{ $stats['available'] }}</p>
        <p class="text-green-600 text-xs mt-1 font-medium">Ready to sell</p>
    </div>

    {{-- Arrivals --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-4">
        <p class="text-gray-400 text-xs font-medium">Arrivals Today</p>
        <p class="text-2xl font-bold {{ $stats['arrivals_today'] > 0 ? 'text-teal-600' : 'text-gray-900' }} mt-1.5">{{ $stats['arrivals_today'] }}</p>
        <a href="{{ route('checkin.index') }}" class="text-teal-500 hover:text-teal-700 text-xs mt-1 font-medium inline-flex items-center gap-0.5 transition-colors">
            Process check-ins
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        </a>
    </div>

    {{-- Departures --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-4">
        <p class="text-gray-400 text-xs font-medium">Departures Today</p>
        <p class="text-2xl font-bold {{ $stats['departures_today'] > 0 ? 'text-amber-600' : 'text-gray-900' }} mt-1.5">{{ $stats['departures_today'] }}</p>
        <a href="{{ route('checkout.index') }}" class="text-amber-500 hover:text-amber-700 text-xs mt-1 font-medium inline-flex items-center gap-0.5 transition-colors">
            Process check-outs
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        </a>
    </div>

    {{-- Revenue Today --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-4">
        <p class="text-gray-400 text-xs font-medium">Revenue Today</p>
        <p class="text-xl font-bold text-gray-900 mt-1.5">&#8369;{{ number_format($stats['revenue_today'], 0) }}</p>
        <p class="text-gray-400 text-xs mt-1">MTD: &#8369;{{ number_format($stats['revenue_mtd'], 0) }}</p>
    </div>

</div>
{{-- END KPI --}}


{{-- ===== MAIN + SIDEBAR LAYOUT ===== --}}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mb-5">

    {{-- ===== LEFT COLUMN (span 2) ===== --}}
    <div class="lg:col-span-2 space-y-5">

        {{-- TODAY'S ARRIVALS --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
                <div class="flex items-center gap-2.5">
                    <div class="w-2 h-2 bg-teal-500 rounded-full"></div>
                    <h3 class="text-gray-800 font-semibold text-sm">Today's Arrivals</h3>
                    @if ($stats['arrivals_today'] > 0)
                        <span class="bg-teal-100 text-teal-700 text-xs font-bold px-2 py-0.5 rounded-full">{{ $stats['arrivals_today'] }}</span>
                    @endif
                </div>
                <a href="{{ route('checkin.index') }}" class="text-teal-600 hover:text-teal-700 text-xs font-medium transition-colors">View all →</a>
            </div>

            @if ($arrivalsToday->isEmpty())
            <div class="flex items-center gap-3 px-5 py-5">
                <svg class="w-8 h-8 text-gray-200 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <p class="text-gray-400 text-sm">No pending arrivals for today.</p>
            </div>
            @else
            <div class="divide-y divide-gray-50">
                @foreach ($arrivalsToday->take(5) as $res)
                @php $balance = $res->balanceDue(); @endphp
                <div class="flex items-center gap-3 px-5 py-3">
                    <div class="w-8 h-8 rounded-full bg-teal-50 text-teal-700 font-bold text-xs flex items-center justify-center flex-shrink-0 border-[0.5px] border-teal-100">
                        {{ strtoupper(substr($res->guest_name, 0, 1)) }}{{ strtoupper(substr(explode(' ', $res->guest_name)[1] ?? 'X', 0, 1)) }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-gray-800 font-medium text-xs truncate">{{ $res->guest_name }}</p>
                        <p class="text-gray-400 text-[11px]">Room {{ $res->room_no }} · {{ $res->nights }}N · {{ $res->pax }} pax</p>
                    </div>
                    <div class="text-right flex-shrink-0">
                        @if ($balance > 0)
                            <p class="text-gray-900 text-xs font-semibold">&#8369;{{ number_format($balance, 0) }} due</p>
                        @else
                            <p class="text-teal-600 text-xs font-semibold">Fully paid</p>
                        @endif
                        @if ($res->status === 'pending')
                            <span class="text-[10px] text-amber-600 font-medium">Unconfirmed</span>
                        @endif
                    </div>
                    <form action="{{ route('reservations.check-in', $res->id) }}" method="POST" class="flex-shrink-0">
                        @csrf
                        <button type="submit" class="px-3 py-1.5 text-[11px] font-semibold text-white bg-green-600 hover:bg-green-700 rounded-lg transition-colors whitespace-nowrap">
                            Check In
                        </button>
                    </form>
                </div>
                @endforeach
                @if ($arrivalsToday->count() > 5)
                <div class="px-5 py-3">
                    <a href="{{ route('checkin.index') }}" class="text-teal-600 text-xs hover:underline">+{{ $arrivalsToday->count() - 5 }} more arrivals →</a>
                </div>
                @endif
            </div>
            @endif
        </div>

        {{-- TODAY'S DEPARTURES --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
                <div class="flex items-center gap-2.5">
                    <div class="w-2 h-2 bg-amber-400 rounded-full"></div>
                    <h3 class="text-gray-800 font-semibold text-sm">Today's Departures</h3>
                    @if ($stats['departures_today'] > 0)
                        <span class="bg-amber-100 text-amber-700 text-xs font-bold px-2 py-0.5 rounded-full">{{ $stats['departures_today'] }}</span>
                    @endif
                </div>
                <a href="{{ route('checkout.index') }}" class="text-teal-600 hover:text-teal-700 text-xs font-medium transition-colors">View all →</a>
            </div>

            @if ($departuresToday->isEmpty())
            <div class="flex items-center gap-3 px-5 py-5">
                <svg class="w-8 h-8 text-gray-200 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <p class="text-gray-400 text-sm">No pending departures for today.</p>
            </div>
            @else
            <div class="divide-y divide-gray-50">
                @foreach ($departuresToday->take(5) as $res)
                @php $balance = $res->balanceDue(); $overdue = $res->check_out->lt(today()); @endphp
                <div class="flex items-center gap-3 px-5 py-3 {{ $overdue ? 'bg-red-50/40' : '' }}">
                    <div class="w-8 h-8 rounded-full bg-amber-50 text-amber-700 font-bold text-xs flex items-center justify-center flex-shrink-0 border-[0.5px] border-amber-100">
                        {{ strtoupper(substr($res->guest_name, 0, 1)) }}{{ strtoupper(substr(explode(' ', $res->guest_name)[1] ?? 'X', 0, 1)) }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-gray-800 font-medium text-xs truncate">{{ $res->guest_name }}</p>
                        <p class="text-gray-400 text-[11px]">
                            Room {{ $res->room_no }} · {{ $res->nights }}N
                            @if ($overdue) · <span class="text-red-500 font-semibold">Overdue</span> @endif
                        </p>
                    </div>
                    <div class="text-right flex-shrink-0">
                        @if ($balance > 0)
                            <p class="text-red-600 text-xs font-bold">&#8369;{{ number_format($balance, 0) }} due</p>
                        @else
                            <p class="text-teal-600 text-xs font-semibold">Settled</p>
                        @endif
                        <p class="text-gray-400 text-[10px]">Total &#8369;{{ number_format($res->amount, 0) }}</p>
                    </div>
                    <form action="{{ route('reservations.check-out', $res->id) }}" method="POST" class="flex-shrink-0">
                        @csrf
                        <button type="submit" class="px-3 py-1.5 text-[11px] font-semibold text-white bg-amber-500 hover:bg-amber-600 rounded-lg transition-colors whitespace-nowrap">
                            Check Out
                        </button>
                    </form>
                </div>
                @endforeach
                @if ($departuresToday->count() > 5)
                <div class="px-5 py-3">
                    <a href="{{ route('checkout.index') }}" class="text-teal-600 text-xs hover:underline">+{{ $departuresToday->count() - 5 }} more departures →</a>
                </div>
                @endif
            </div>
            @endif
        </div>

    </div>
    {{-- END LEFT COLUMN --}}


    {{-- ===== RIGHT SIDEBAR ===== --}}
    <div class="space-y-5">

        {{-- ROOM STATUS --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
                <h3 class="text-gray-800 font-semibold text-sm">Room Status</h3>
                <a href="{{ route('roomrack.index') }}" class="text-teal-600 hover:text-teal-700 text-xs font-medium transition-colors">Room Rack →</a>
            </div>
            <div class="p-5">

                {{-- Stacked bar --}}
                @php
                $total     = $stats['total_rooms'] ?: 1;
                $available = ($roomCounts['available'] ?? 0) + ($roomCounts['clean'] ?? 0);
                $occupied  = $roomCounts['occupied'] ?? 0;
                $dirty     = $roomCounts['dirty'] ?? 0;
                $maint     = ($roomCounts['maintenance'] ?? 0) + ($roomCounts['out_of_order'] ?? 0);
                @endphp
                <div class="flex rounded-lg overflow-hidden h-3 mb-4 gap-0.5">
                    @if ($available > 0)
                    <div class="bg-green-500 transition-all" style="width: {{ round($available/$total*100) }}%" title="Available: {{ $available }}"></div>
                    @endif
                    @if ($occupied > 0)
                    <div class="bg-teal-600 transition-all" style="width: {{ round($occupied/$total*100) }}%" title="Occupied: {{ $occupied }}"></div>
                    @endif
                    @if ($dirty > 0)
                    <div class="bg-amber-400 transition-all" style="width: {{ round($dirty/$total*100) }}%" title="Dirty: {{ $dirty }}"></div>
                    @endif
                    @if ($maint > 0)
                    <div class="bg-orange-400 transition-all" style="width: {{ round($maint/$total*100) }}%" title="Maintenance: {{ $maint }}"></div>
                    @endif
                </div>

                <div class="space-y-2.5">
                    @foreach ([
                        ['Available / Clean', $available, 'bg-green-500', 'text-green-700'],
                        ['Occupied',          $occupied,  'bg-teal-600',  'text-teal-700'],
                        ['Dirty',             $dirty,     'bg-amber-400', 'text-amber-700'],
                        ['Maintenance / OOO', $maint,     'bg-orange-400','text-orange-700'],
                    ] as [$label, $count, $bg, $text])
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <span class="w-2.5 h-2.5 rounded-sm {{ $bg }}"></span>
                            <span class="text-gray-500 text-xs">{{ $label }}</span>
                        </div>
                        <span class="text-gray-800 text-xs font-bold {{ $text }}">{{ $count }}</span>
                    </div>
                    @endforeach
                </div>

            </div>
        </div>

        {{-- 7-DAY REVENUE --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-5 py-4 border-b border-gray-100">
                <h3 class="text-gray-800 font-semibold text-sm">Revenue — Last 7 Days</h3>
                <p class="text-gray-400 text-xs mt-0.5">From checked-out reservations</p>
            </div>
            <div class="p-5">
                @php $maxRev = $weekRevenue->max('amount') ?: 1; @endphp
                <div class="flex items-end gap-1.5 h-16">
                    @foreach ($weekRevenue as $day)
                    <div class="flex-1 flex flex-col items-center gap-1 group relative">
                        <div class="w-full rounded-t-sm {{ $day['amount'] > 0 ? 'bg-teal-500' : 'bg-gray-100' }} transition-all"
                             style="height: {{ max(3, round($day['amount'] / $maxRev * 48)) }}px">
                        </div>
                        {{-- Tooltip on hover --}}
                        @if ($day['amount'] > 0)
                        <div class="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 hidden group-hover:block bg-gray-800 text-white text-[9px] font-medium px-1.5 py-0.5 rounded whitespace-nowrap z-10">
                            &#8369;{{ number_format($day['amount'], 0) }}
                        </div>
                        @endif
                    </div>
                    @endforeach
                </div>
                <div class="flex gap-1.5 mt-1.5">
                    @foreach ($weekRevenue as $day)
                    <div class="flex-1 text-center">
                        <span class="text-[10px] text-gray-400">{{ $day['label'] }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- BOOKING SOURCES --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
            <div class="px-5 py-4 border-b border-gray-100">
                <h3 class="text-gray-800 font-semibold text-sm">Booking Sources</h3>
            </div>
            <div class="p-5 space-y-3">
                @php $maxSource = $sourceBreakdown->max('total') ?: 1; @endphp
                @foreach ($sourceBreakdown as $src)
                <div>
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-gray-600 text-xs">{{ $src->source }}</span>
                        <span class="text-gray-800 text-xs font-bold">{{ $src->total }}</span>
                    </div>
                    <div class="h-1.5 bg-gray-100 rounded-full">
                        <div class="h-1.5 bg-teal-500 rounded-full transition-all"
                             style="width: {{ round($src->total / $maxSource * 100) }}%"></div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

    </div>
    {{-- END SIDEBAR --}}

</div>
{{-- END MAIN LAYOUT --}}


{{-- ===== RECENT RESERVATIONS ===== --}}
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl">

    <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
        <h3 class="text-gray-800 font-semibold text-sm">Recent Reservations</h3>
        <a href="{{ route('reservations.index') }}" class="text-teal-600 hover:text-teal-700 text-xs font-medium transition-colors">View all →</a>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-gray-100">
                    <th class="text-left text-[11px] font-semibold text-gray-400 uppercase tracking-wider px-5 py-3">Booking #</th>
                    <th class="text-left text-[11px] font-semibold text-gray-400 uppercase tracking-wider px-4 py-3">Guest</th>
                    <th class="text-left text-[11px] font-semibold text-gray-400 uppercase tracking-wider px-4 py-3">Room</th>
                    <th class="text-left text-[11px] font-semibold text-gray-400 uppercase tracking-wider px-4 py-3">Check-in</th>
                    <th class="text-left text-[11px] font-semibold text-gray-400 uppercase tracking-wider px-4 py-3">Check-out</th>
                    <th class="text-center text-[11px] font-semibold text-gray-400 uppercase tracking-wider px-4 py-3">Status</th>
                    <th class="text-right text-[11px] font-semibold text-gray-400 uppercase tracking-wider px-5 py-3">Amount</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @php
                $badges = [
                    'pending'     => 'bg-amber-50 text-amber-700 border-[0.5px] border-amber-200',
                    'confirmed'   => 'bg-teal-50 text-teal-700 border-[0.5px] border-teal-200',
                    'checked_in'  => 'bg-green-50 text-green-700 border-[0.5px] border-green-200',
                    'checked_out' => 'bg-gray-50 text-gray-500 border-[0.5px] border-gray-200',
                    'cancelled'   => 'bg-red-50 text-red-600 border-[0.5px] border-red-200',
                    'no_show'     => 'bg-orange-50 text-orange-600 border-[0.5px] border-orange-200',
                ];
                $labels = [
                    'pending'     => 'Pending',
                    'confirmed'   => 'Confirmed',
                    'checked_in'  => 'Checked In',
                    'checked_out' => 'Checked Out',
                    'cancelled'   => 'Cancelled',
                    'no_show'     => 'No Show',
                ];
                @endphp
                @foreach ($recentReservations as $res)
                <tr class="hover:bg-gray-50/60 transition-colors">
                    <td class="px-5 py-3">
                        <a href="{{ route('reservations.show', $res->id) }}"
                           class="text-teal-600 hover:text-teal-700 font-mono font-medium text-xs">{{ $res->booking_no }}</a>
                    </td>
                    <td class="px-4 py-3">
                        <p class="text-gray-800 text-xs font-medium">{{ $res->guest_name }}</p>
                        <p class="text-gray-400 text-[11px]">{{ $res->source }}</p>
                    </td>
                    <td class="px-4 py-3">
                        <p class="text-gray-700 text-xs font-semibold">Room {{ $res->room_no }}</p>
                        <p class="text-gray-400 text-[11px]">{{ $res->room_type }}</p>
                    </td>
                    <td class="px-4 py-3">
                        <p class="text-gray-700 text-xs">{{ $res->check_in->format('M j, Y') }}</p>
                    </td>
                    <td class="px-4 py-3">
                        <p class="text-gray-700 text-xs">{{ $res->check_out->format('M j, Y') }}</p>
                        <p class="text-gray-400 text-[11px]">{{ $res->nights }}N</p>
                    </td>
                    <td class="px-4 py-3 text-center">
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold {{ $badges[$res->status] ?? 'bg-gray-50 text-gray-500' }}">
                            @if ($res->status === 'checked_in')
                                <span class="w-1.5 h-1.5 bg-green-500 rounded-full mr-1.5 animate-pulse"></span>
                            @endif
                            {{ $labels[$res->status] ?? $res->status }}
                        </span>
                    </td>
                    <td class="px-5 py-3 text-right">
                        <p class="text-gray-900 font-semibold text-xs">&#8369;{{ number_format($res->amount, 0) }}</p>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

</div>

@endsection