@extends('layouts.admin')

@section('title', 'Booking Details')

@section('content')
<div class="space-y-6 max-w-5xl mx-auto">
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div class="flex items-center gap-4">
            <a href="{{ route('admin.bookings') }}" class="w-10 h-10 rounded-full bg-white shadow-sm border border-gray-100 flex items-center justify-center text-gray-500 hover:text-[#0c2340] hover:bg-gray-50 transition-colors">
                <i data-feather="arrow-left" class="w-5 h-5"></i>
            </a>
            <div>
                <h2 class="font-serif text-2xl text-[#0c2340]">Booking #{{ $booking->booking_reference }}</h2>
                <p class="text-sm text-gray-500">{{ $booking->created_at->format('M d, Y h:i A') }}</p>
            </div>
        </div>
        
        <div class="flex items-center gap-3">
            @php
                $statusClasses = [
                    'pending' => 'bg-yellow-100 text-yellow-800 border-yellow-200',
                    'confirmed' => 'bg-green-100 text-green-800 border-green-200',
                    'cancelled' => 'bg-red-100 text-red-800 border-red-200',
                ];
                $class = $statusClasses[$booking->status] ?? 'bg-gray-100 text-gray-800 border-gray-200';
            @endphp
            <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold border {{ $class }}">
                Status: {{ ucfirst($booking->status) }}
            </span>
            
            <form action="{{ route('admin.bookings.update-status', $booking->id) }}" method="POST" class="flex items-center gap-2">
                @csrf
                @method('PUT')
                <select name="status" class="px-4 py-2 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] text-sm">
                    <option value="pending" {{ $booking->status == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="confirmed" {{ $booking->status == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                    <option value="cancelled" {{ $booking->status == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                </select>
                <button type="submit" class="bg-[#0c2340] text-white px-4 py-2 rounded-xl text-sm font-medium hover:bg-[#c9a84c] hover:text-[#0c2340] transition-colors">Update</button>
            </form>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Customer Info -->
        <div class="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
            <h3 class="font-serif text-xl text-[#0c2340] mb-6 flex items-center gap-2">
                <i data-feather="user" class="w-5 h-5 text-[#c9a84c]"></i> Customer Details
            </h3>
            <div class="space-y-4">
                <div>
                    <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Name</p>
                    <p class="font-medium text-[#0c2340]">{{ $booking->user->name }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Email</p>
                    <p class="font-medium text-[#0c2340]"><a href="mailto:{{ $booking->user->email }}" class="text-blue-600 hover:underline">{{ $booking->user->email }}</a></p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Phone</p>
                    <p class="font-medium text-[#0c2340]">{{ $booking->user->phone ?? 'N/A' }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Special Requirements</p>
                    <p class="text-sm text-[#0c2340] bg-gray-50 p-3 rounded-xl mt-1 border border-gray-100">{{ $booking->special_requirements ?: 'None provided.' }}</p>
                </div>
            </div>
        </div>

        <!-- Package Info -->
        <div class="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
            <h3 class="font-serif text-xl text-[#0c2340] mb-6 flex items-center gap-2">
                <i data-feather="map" class="w-5 h-5 text-[#c9a84c]"></i> Package Details
            </h3>
            <div class="space-y-4">
                <div>
                    <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Package Name</p>
                    <p class="font-medium text-[#0c2340]">{{ $booking->package->title }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Destination</p>
                    <p class="font-medium text-[#0c2340]">{{ $booking->package->destination }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Travel Date</p>
                    <p class="font-medium text-[#0c2340]">{{ \Carbon\Carbon::parse($booking->travel_date)->format('M d, Y') }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Total People</p>
                    <p class="font-medium text-[#0c2340]">{{ $booking->total_people }} Pax</p>
                </div>
                <div class="pt-4 border-t border-gray-100 text-center">
                    <a href="{{ route('packages.show', $booking->package->slug) }}" target="_blank" class="text-sm text-[#c9a84c] font-medium hover:text-[#0c2340] transition-colors inline-flex items-center gap-1">
                        View Package on Site <i data-feather="external-link" class="w-3 h-3"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- Payment Info -->
        <div class="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
            <h3 class="font-serif text-xl text-[#0c2340] mb-6 flex items-center gap-2">
                <i data-feather="dollar-sign" class="w-5 h-5 text-[#c9a84c]"></i> Payment Summary
            </h3>
            
            <div class="space-y-4 mb-6">
                <div class="flex justify-between items-center pb-2 border-b border-gray-50">
                    <span class="text-gray-500 text-sm">Price per person</span>
                    <span class="font-medium text-[#0c2340]">{{ $booking->package->has_discount ? $booking->package->formatted_discount_price : $booking->package->formatted_price }}</span>
                </div>
                <div class="flex justify-between items-center pb-2 border-b border-gray-50">
                    <span class="text-gray-500 text-sm">Total People</span>
                    <span class="font-medium text-[#0c2340]">x{{ $booking->total_people }}</span>
                </div>
                <div class="flex justify-between items-center pt-2">
                    <span class="text-gray-800 font-bold">Total Amount</span>
                    <span class="font-bold text-[#0c2340] text-xl">{{ $booking->formatted_total_amount }}</span>
                </div>
            </div>

            @if($booking->payment)
                <div class="bg-gray-50 rounded-2xl p-5 border border-gray-100">
                    <div class="flex items-center gap-3 mb-3">
                        <div class="w-8 h-8 rounded-full {{ $booking->payment->status == 'completed' ? 'bg-green-100 text-green-600' : 'bg-yellow-100 text-yellow-600' }} flex items-center justify-center shrink-0">
                            <i data-feather="{{ $booking->payment->status == 'completed' ? 'check' : 'clock' }}" class="w-4 h-4"></i>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 uppercase tracking-wider">Payment Status</p>
                            <p class="font-bold text-gray-900">{{ ucfirst($booking->payment->status) }}</p>
                        </div>
                    </div>
                    <div class="text-xs text-gray-500 space-y-1">
                        <p>Ref: <span class="font-mono text-gray-900">{{ $booking->payment->payment_reference }}</span></p>
                        <p>Method: <span class="uppercase text-gray-900">{{ $booking->payment->payment_method }}</span></p>
                        @if($booking->payment->paid_at)
                            <p>Paid at: {{ \Carbon\Carbon::parse($booking->payment->paid_at)->format('M d, Y h:i A') }}</p>
                        @endif
                    </div>
                    <div class="mt-4 text-center">
                        <a href="{{ route('admin.payments.detail', $booking->payment->payment_reference) }}" class="text-sm font-medium text-blue-600 hover:text-blue-800">View full payment details</a>
                    </div>
                </div>
            @else
                <div class="bg-red-50 text-red-600 rounded-2xl p-5 text-center border border-red-100">
                    <i data-feather="alert-circle" class="w-6 h-6 mx-auto mb-2"></i>
                    <p class="font-medium text-sm">No payment record found.</p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection