@extends('backend.app')

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

@section('content')
    <div class="content fs-6 d-flex flex-column flex-column-fluid" id="kt_content">
        <div class="toolbar" id="kt_toolbar">
            <div class="container-fluid d-flex flex-stack flex-wrap flex-sm-nowrap">
                <div class="d-flex flex-column align-items-start justify-content-center flex-wrap me-2">
                    <h1 class="text-dark fw-bold my-1 fs-2">Booking Details: {{ $booking->booking_reference }}</h1>
                    <ul class="breadcrumb fw-semibold fs-base my-1">
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                        </li>
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('admin.bookings.index') }}" class="text-muted text-hover-primary">Bookings</a>
                        </li>
                        <li class="breadcrumb-item text-dark">Details</li>
                    </ul>
                </div>
                <div class="d-flex align-items-center py-1">
                    <a href="{{ route('admin.bookings.index') }}" class="btn btn-sm btn-light btn-active-primary">
                        Back to List
                    </a>
                </div>
            </div>
        </div>

        <div class="post fs-6 d-flex flex-column-fluid" id="kt_post">
            <div class="container-xxl">
                <div class="row g-5 g-xl-8">
                    <!-- Customer & Event Info -->
                    <div class="col-xl-6">
                        <div class="card card-xl-stretch mb-xl-8">
                            <div class="card-header align-items-center border-0 mt-4">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="fw-bold text-dark">Customer & Event Information</span>
                                </h3>
                            </div>
                            <div class="card-body pt-3">
                                <div class="d-flex align-items-sm-center mb-7">
                                    <div class="d-flex flex-row-fluid flex-wrap align-items-center">
                                        <div class="flex-grow-1 me-2">
                                            <span class="text-gray-800 fw-bold d-block fs-6">Customer Name</span>
                                            <span class="text-muted fw-semibold d-block fs-7">{{ $booking->customer_name }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-sm-center mb-7">
                                    <div class="d-flex flex-row-fluid flex-wrap align-items-center">
                                        <div class="flex-grow-1 me-2">
                                            <span class="text-gray-800 fw-bold d-block fs-6">Customer Email</span>
                                            <span class="text-muted fw-semibold d-block fs-7">{{ $booking->customer_email }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-sm-center mb-7">
                                    <div class="d-flex flex-row-fluid flex-wrap align-items-center">
                                        <div class="flex-grow-1 me-2">
                                            <span class="text-gray-800 fw-bold d-block fs-6">Customer Phone</span>
                                            <span class="text-muted fw-semibold d-block fs-7">{{ $booking->customer_phone ?? 'N/A' }}</span>
                                        </div>
                                    </div>
                                </div>
                                @if($booking->special_request)
                                <div class="d-flex align-items-sm-center mb-7">
                                    <div class="d-flex flex-row-fluid flex-wrap align-items-center">
                                        <div class="flex-grow-1 me-2">
                                            <span class="text-gray-800 fw-bold d-block fs-6">Special Request</span>
                                            <div class="mt-2 p-3 bg-light-warning border border-warning border-dashed rounded">
                                                <span class="text-warning fw-semibold fs-7">
                                                    <i class="fas fa-exclamation-circle me-1"></i>{{ $booking->special_request }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @else
                                <div class="d-flex align-items-sm-center mb-7">
                                    <div class="d-flex flex-row-fluid flex-wrap align-items-center">
                                        <div class="flex-grow-1 me-2">
                                            <span class="text-gray-800 fw-bold d-block fs-6">Special Request</span>
                                            <span class="text-muted fw-semibold d-block fs-7">None</span>
                                        </div>
                                    </div>
                                </div>
                                @endif
                                <div class="separator mb-7"></div>
                                <div class="d-flex align-items-sm-center mb-7">
                                    <div class="d-flex flex-row-fluid flex-wrap align-items-center">
                                        <div class="flex-grow-1 me-2">
                                            <span class="text-gray-800 fw-bold d-block fs-6">Event Title</span>
                                            <span class="text-muted fw-semibold d-block fs-7">{{ $booking->event ? $booking->event->title : 'N/A' }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-sm-center mb-7">
                                    <div class="d-flex flex-row-fluid flex-wrap align-items-center">
                                        <div class="flex-grow-1 me-2">
                                            <span class="text-gray-800 fw-bold d-block fs-6">Event Date</span>
                                            <span class="text-muted fw-semibold d-block fs-7">{{ $booking->event && $booking->event->event_date ? $booking->event->event_date->format('d M Y') : 'N/A' }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Payment Info -->
                    <div class="col-xl-6">
                        <div class="card card-xl-stretch mb-xl-8">
                            <div class="card-header align-items-center border-0 mt-4">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="fw-bold text-dark">Payment Details</span>
                                </h3>
                            </div>
                            <div class="card-body pt-3">
                                <div class="d-flex align-items-sm-center mb-7">
                                    <div class="d-flex flex-row-fluid flex-wrap align-items-center">
                                        <div class="flex-grow-1 me-2">
                                            <span class="text-gray-800 fw-bold d-block fs-6">Payment Status</span>
                                            @php
                                                $status = $booking->payment_status?->value ?? 'pending';
                                                $badgeClass = match ($status) {
                                                    'paid' => 'badge-light-success',
                                                    'failed' => 'badge-light-danger',
                                                    'expired' => 'badge-light-info',
                                                    'cancelled' => 'badge-light-secondary',
                                                    default => 'badge-light-warning',
                                                };
                                            @endphp
                                            <span class="badge {{ $badgeClass }} mt-1">{{ ucfirst($status) }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-sm-center mb-7">
                                    <div class="d-flex flex-row-fluid flex-wrap align-items-center">
                                        <div class="flex-grow-1 me-2">
                                            <span class="text-gray-800 fw-bold d-block fs-6">Total Amount</span>
                                            <span class="text-muted fw-semibold d-block fs-7">${{ number_format($booking->total_amount, 2) }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-sm-center mb-7">
                                    <div class="d-flex flex-row-fluid flex-wrap align-items-center">
                                        <div class="flex-grow-1 me-2">
                                            <span class="text-gray-800 fw-bold d-block fs-6">Service Charge</span>
                                            <span class="text-muted fw-semibold d-block fs-7">${{ number_format($booking->service_charge_total, 2) }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-sm-center mb-7">
                                    <div class="d-flex flex-row-fluid flex-wrap align-items-center">
                                        <div class="flex-grow-1 me-2">
                                            <span class="text-gray-800 fw-bold d-block fs-6">Stripe Session ID</span>
                                            <span class="text-muted fw-semibold d-block fs-7">{{ $booking->session_id ?? 'N/A' }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-sm-center mb-7">
                                    <div class="d-flex flex-row-fluid flex-wrap align-items-center">
                                        <div class="flex-grow-1 me-2">
                                            <span class="text-gray-800 fw-bold d-block fs-6">Payment Reference</span>
                                            <span class="text-muted fw-semibold d-block fs-7">{{ $booking->payment_reference ?? 'N/A' }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Seats List -->
                <div class="card card-xl-stretch mb-5 mb-xl-8">
                    <div class="card-header border-0 pt-5">
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bold fs-3 mb-1">Booked Seats</span>
                        </h3>
                    </div>
                    <div class="card-body py-3">
                        <div class="table-responsive">
                            <table class="table align-middle gs-0 gy-4">
                                <thead>
                                    <tr class="fw-bold text-muted bg-light">
                                        <th class="ps-4 min-w-100px rounded-start">Row</th>
                                        <th class="min-w-100px">Column</th>
                                        <th class="min-w-100px rounded-end">Seat Number</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($booking->bookingSeats as $bookingSeat)
                                        <tr>
                                            <td class="ps-4">
                                                <span class="text-dark fw-bold d-block mb-1 fs-6">{{ $bookingSeat->seat->row_label ?? 'N/A' }}</span>
                                            </td>
                                            <td>
                                                <span class="text-dark fw-bold d-block mb-1 fs-6">{{ $bookingSeat->seat->column_no ?? 'N/A' }}</span>
                                            </td>
                                            <td>
                                                <span class="badge badge-light-primary fs-7">{{ $bookingSeat->seat->seat_number ?? 'N/A' }}</span>
                                            </td>
                                        </tr>
                                    @endforeach
                                    @if($booking->bookingSeats->isEmpty())
                                        <tr>
                                            <td colspan="3" class="text-center text-muted">No seats booked.</td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection