@extends('admin.layouts.app')
@section('title', 'Booking Details')
@section('page-title', 'Booking ' . $booking->booking_number)

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Main Info -->
    <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6">
        <div class="flex justify-between items-start mb-6">
            <div>
                <h2 class="text-2xl font-bold text-navy">{{ $booking->guest_name }}</h2>
                <p class="text-gray-500">{{ $booking->booking_number }}</p>
            </div>
            <div class="flex items-center gap-2">
                @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-3 py-1 rounded-full text-sm {{ $statusClass }}">
                    {{ ucfirst(str_replace('_', ' ', $booking->booking_status)) }}
                </span>
                @if($booking->booking_status === 'pending')
                    <a href="{{ route('admin.bookings.confirm', $booking) }}" class="px-3 py-1 bg-green-500 text-white rounded-full text-sm hover:bg-green-600">
                        Confirm
                    </a>
                @endif
            </div>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            <div class="p-3 bg-gray-50 rounded-lg">
                <p class="text-sm text-gray-500">Room</p>
                <p class="font-semibold">{{ $booking->room?->room_number ?? 'Not Assigned' }}</p>
            </div>
            <div class="p-3 bg-gray-50 rounded-lg">
                <p class="text-sm text-gray-500">Type</p>
                <p class="font-semibold">{{ $booking->roomType?->name }}</p>
            </div>
            <div class="p-3 bg-gray-50 rounded-lg">
                <p class="text-sm text-gray-500">Check-in</p>
                <p class="font-semibold">{{ $booking->check_in_date->format('M d, Y') }}</p>
            </div>
            <div class="p-3 bg-gray-50 rounded-lg">
                <p class="text-sm text-gray-500">Check-out</p>
                <p class="font-semibold">{{ $booking->check_out_date->format('M d, Y') }}</p>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-6 mb-6">
            <div>
                <h4 class="font-semibold text-navy mb-3">Guest Details</h4>
                <div class="space-y-2 text-sm">
                    <p><span class="text-gray-500">Phone:</span> {{ $booking->guest_phone }}</p>
                    <p><span class="text-gray-500">Email:</span> {{ $booking->guest_email ?? 'N/A' }}</p>
                    <p><span class="text-gray-500">ID:</span> {{ $booking->guest_id_type ?? 'N/A' }} - {{ $booking->guest_id_number ?? '' }}</p>
                </div>
            </div>
            <div>
                <h4 class="font-semibold text-navy mb-3">Booking Summary</h4>
                <div class="space-y-2 text-sm">
                    <p><span class="text-gray-500">Guests:</span> {{ $booking->adults }} Adults{{ $booking->children > 0 ? ', ' . $booking->children . ' Children' : '' }}</p>
                    <p><span class="text-gray-500">Nights:</span> {{ $booking->nights }}</p>
                    <p><span class="text-gray-500">Source:</span> {{ ucfirst($booking->source) }}</p>
                </div>
            </div>
        </div>

        @if($booking->special_requests)
        <div class="mb-6 p-4 bg-yellow-50 rounded-lg">
            <h4 class="font-semibold text-yellow-800 mb-2">Special Requests</h4>
            <p class="text-sm text-yellow-700">{{ $booking->special_requests }}</p>
        </div>
        @endif

        <div class="flex justify-between items-center pt-6 border-t">
            <div>
                @if($booking->booking_status === 'pending')
                    <form action="{{ route('admin.bookings.cancel', $booking) }}" method="POST" class="inline">
                        @csrf
                        <button type="submit" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600" onclick="return confirm('Cancel this booking?')">
                            Cancel Booking
                        </button>
                    </form>
                @endif
            </div>
            <a href="{{ route('reception.folio', $booking) }}" class="px-4 py-2 bg-navy text-white rounded-lg hover:bg-navy-light">
                <i class="fas fa-file-invoice mr-2"></i>View Folio
            </a>
        </div>
    </div>

    <!-- Payment Summary -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="font-bold text-navy mb-4">Payment Summary</h3>
        <div class="space-y-3 mb-6">
            <div class="flex justify-between">
                <span class="text-gray-600">Room ({{ $booking->nights }} nights)</span>
                <span>₦ {{ number_format($booking->subtotal, 0) }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-600">Tax (16%)</span>
                <span>₦ {{ number_format($booking->tax_amount, 0) }}</span>
            </div>
            @if($booking->discount_amount > 0)
            <div class="flex justify-between text-green-600">
                <span>Discount</span>
                <span>- ₦ {{ number_format($booking->discount_amount, 0) }}</span>
            </div>
            @endif
            <div class="flex justify-between font-bold text-lg pt-3 border-t">
                <span>Total</span>
                <span class="text-gold">₦ {{ number_format($booking->total_amount, 0) }}</span>
            </div>
        </div>

        <div class="p-3 bg-gray-50 rounded-lg text-sm">
            <p class="flex justify-between mb-1">
                <span class="text-gray-500">Payment:</span>
                <span class="capitalize">{{ $booking->payment_method }}</span>
            </p>
            <p class="flex justify-between">
                <span class="text-gray-500">Status:</span>
                <span class="capitalize">{{ $booking->payment_status }}</span>
            </p>
        </div>
    </div>
</div>
@endsection