@extends('layouts.app')

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

@section('content')
    <div class="container mx-auto px-4 py-8">
        @if(session('success'))
            <div class="mb-6 bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded">
                {{ session('success') }}
            </div>
        @endif

        <h1 class="text-3xl font-bold text-gray-900 mb-6">Booking Confirmation</h1>

        @if(!$booking)
            <div class="bg-white shadow rounded p-6">
                <p class="text-gray-700">No recent bookings found.</p>
                <a href="{{ route('sevas.index') }}" class="inline-block mt-4 px-4 py-2 bg-red-700 text-white rounded hover:bg-red-800">Book a Seva</a>
            </div>
        @else
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="lg:col-span-2 space-y-6">
                    <div class="bg-white shadow rounded">
                        <div class="p-6 border-b border-gray-200">
                            <h2 class="text-xl font-semibold text-gray-900">Booking Details</h2>
                        </div>
                        <div class="p-6">
                            <dl class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div>
                                    <dt class="text-sm text-gray-500">Confirmation Code</dt>
                                    <dd class="text-gray-900 font-medium">{{ $booking->confirmation_code }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm text-gray-500">Booking Date</dt>
                                    <dd class="text-gray-900 font-medium">{{ optional($booking->booking_date)->format('D, d M Y') }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm text-gray-500">Quantity</dt>
                                    <dd class="text-gray-900 font-medium">{{ $booking->quantity }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm text-gray-500">Status</dt>
                                    <dd>
                                        <span class="inline-flex items-center rounded px-2 py-1 text-sm font-medium {{ $booking->status === 'confirmed' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                            {{ ucfirst($booking->status) }}
                                        </span>
                                    </dd>
                                </div>
                                <div class="sm:col-span-2">
                                    <dt class="text-sm text-gray-500">Devotee</dt>
                                    <dd class="text-gray-900 font-medium">
                                        {{ data_get($booking->devotee_details, 'name') }}
                                        <span class="text-gray-500"> | </span>
                                        {{ data_get($booking->devotee_details, 'email') }}
                                        <span class="text-gray-500"> | </span>
                                        {{ data_get($booking->devotee_details, 'phone') }}
                                    </dd>
                                </div>
                                @if(data_get($booking->devotee_details, 'gotram'))
                                    <div class="sm:col-span-2">
                                        <dt class="text-sm text-gray-500">Gotram</dt>
                                        <dd class="text-gray-900 font-medium">{{ data_get($booking->devotee_details, 'gotram') }}</dd>
                                    </div>
                                @endif
                                @if(data_get($booking->devotee_details, 'requirements'))
                                    <div class="sm:col-span-2">
                                        <dt class="text-sm text-gray-500">Special Requirements</dt>
                                        <dd class="text-gray-900">{{ data_get($booking->devotee_details, 'requirements') }}</dd>
                                    </div>
                                @endif
                            </dl>
                        </div>
                    </div>

                    <div class="bg-white shadow rounded">
                        <div class="p-6 border-b border-gray-200">
                            <h2 class="text-xl font-semibold text-gray-900">Items Booked</h2>
                        </div>
                        <div class="p-6">
                            <div class="space-y-4">
                                @foreach(($booking->cart_data ?? []) as $id => $item)
                                    <div class="flex items-start justify-between border-b border-gray-200 pb-4">
                                        <div>
                                            <h3 class="text-md font-medium text-gray-900">{{ ucwords(data_get($item, 'name')) }}</h3>
                                            <p class="text-gray-600 text-sm">Date: {{ \Carbon\Carbon::parse(data_get($item, 'date'))->format('D, d M Y') }}</p>
                                            @if(data_get($item, 'time_slot'))
                                                <p class="text-gray-600 text-sm">Time: {{ data_get($item, 'time_slot') }}</p>
                                            @endif
                                            <p class="text-gray-600 text-sm">Slots: {{ data_get($item, 'slots') }}</p>
                                        </div>
                                        <div class="text-right">
                                            <p class="text-lg font-semibold text-gray-900">₹{{ number_format((float) data_get($item, 'price', 0) * (int) data_get($item, 'slots', 1), 2) }}</p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <div class="space-y-6">
                    <div class="bg-white shadow rounded">
                        <div class="p-6 border-b border-gray-200">
                            <h2 class="text-xl font-semibold text-gray-900">Payment Summary</h2>
                        </div>
                        <div class="p-6 space-y-3">
                            <div class="flex justify-between">
                                <span class="text-gray-600">Total Amount</span>
                                <span class="text-gray-900 font-semibold">₹{{ number_format((float) $booking->total_amount, 2) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Order ID</span>
                                <span class="text-gray-900">{{ optional($booking->order)->id }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Payment Status</span>
                                <span class="text-gray-900">{{ optional($booking->order)->payment_status ?? 'completed' }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white shadow rounded p-6">
                        <a href="{{ route('sevas.index') }}" class="w-full block text-center px-6 py-3 bg-red-700 text-white rounded hover:bg-red-800">Book More Sevas</a>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection