@extends('admin.layouts.app')
@section('title', 'Reception')
@section('page-title', 'Front Desk')

@section('content')
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500">Pending</p>
                <p class="text-3xl font-bold text-yellow-600">{{ $stats['pending'] }}</p>
            </div>
            <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
                <i class="fas fa-clock text-yellow-600"></i>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500">Confirmed</p>
                <p class="text-3xl font-bold text-blue-600">{{ $stats['confirmed'] }}</p>
            </div>
            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                <i class="fas fa-check-circle text-blue-600"></i>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500">Checked In</p>
                <p class="text-3xl font-bold text-green-600">{{ $stats['checked_in'] }}</p>
            </div>
            <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                <i class="fas fa-user-check text-green-600"></i>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500">Checked Out Today</p>
                <p class="text-3xl font-bold text-gray-600">{{ $stats['checked_out'] }}</p>
            </div>
            <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
                <i class="fas fa-sign-out-alt text-gray-600"></i>
            </div>
        </div>
    </div>
</div>

<div class="flex justify-between items-center mb-6">
    <div class="flex gap-2">
        <a href="{{ route('reception.index') }}" class="px-4 py-2 rounded-lg {{ !request('status') ? 'bg-navy text-white' : 'bg-white border' }}">
            All
        </a>
        <a href="{{ route('reception.index', ['status' => 'pending']) }}" class="px-4 py-2 rounded-lg {{ request('status') == 'pending' ? 'bg-yellow-500 text-white' : 'bg-white border' }}">
            Pending
        </a>
        <a href="{{ route('reception.index', ['status' => 'active']) }}" class="px-4 py-2 rounded-lg {{ request('status') == 'active' ? 'bg-green-500 text-white' : 'bg-white border' }}">
            Active
        </a>
        <a href="{{ route('reception.index', ['status' => 'checked_out']) }}" class="px-4 py-2 rounded-lg {{ request('status') == 'checked_out' ? 'bg-gray-500 text-white' : 'bg-white border' }}">
            Checked Out
        </a>
    </div>
    <div class="flex gap-2">
        <a href="{{ route('reception.walkin') }}" class="px-4 py-2 bg-gold text-white rounded-lg hover:bg-gold-dark">
            <i class="fas fa-user-plus mr-2"></i>Walk-in Check-in
        </a>
    </div>
</div>

<div class="bg-white rounded-xl shadow-sm overflow-hidden">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Guest</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Room</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Check-in</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Check-out</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Balance</th>
                <th class="px-6 py-4 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
            @forelse($bookings as $booking)
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4">
                    <p class="font-medium text-navy">{{ $booking->guest_name }}</p>
                    <p class="text-sm text-gray-500">{{ $booking->guest_phone }}</p>
                    <p class="text-xs text-gray-400">{{ $booking->booking_number }}</p>
                </td>
                <td class="px-6 py-4">
                    {{ $booking->room?->room_number ?? '-' }}
                    <br>
                    <span class="text-sm text-gray-500">{{ $booking->roomType?->name }}</span>
                </td>
                <td class="px-6 py-4">
                    {{ $booking->check_in_date->format('M d, Y') }}
                </td>
                <td class="px-6 py-4">
                    {{ $booking->check_out_date->format('M d, Y') }}
                </td>
                <td class="px-6 py-4">
                    @php
                        $statusClass = match($booking->booking_status) {
                            'pending' => 'bg-yellow-100 text-yellow-700',
                            'confirmed' => 'bg-blue-100 text-blue-700',
                            'checked_in' => 'bg-green-100 text-green-700',
                            'checked_out' => 'bg-gray-100 text-gray-700',
                            'cancelled' => 'bg-red-100 text-red-700',
                            default => 'bg-gray-100 text-gray-700',
                        };
                    @endphp
                    <span class="px-2 py-1 rounded-full text-xs {{ $statusClass }}">
                        {{ ucfirst(str_replace('_', ' ', $booking->booking_status)) }}
                    </span>
                </td>
                <td class="px-6 py-4 font-semibold">
                    ₦ {{ number_format($booking->balance, 0) }}
                </td>
                <td class="px-6 py-4 text-right">
                    <div class="flex justify-end gap-2">
                        <a href="{{ route('reception.folio', $booking) }}" class="px-3 py-1 bg-navy text-white rounded text-sm hover:bg-navy-light">
                            Folio
                        </a>
                        @if($booking->booking_status === 'confirmed')
                        <a href="{{ route('reception.checkin', $booking) }}" class="px-3 py-1 bg-green-500 text-white rounded text-sm hover:bg-green-600">
                            Check In
                        </a>
                        @elseif($booking->booking_status === 'checked_in')
                        <a href="{{ route('reception.checkout', $booking) }}" class="px-3 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600">
                            Check Out
                        </a>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="7" class="px-6 py-12 text-center text-gray-500">
                    No bookings found
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-6">
    {{ $bookings->links() }}
</div>
@endsection