@extends('admin.layouts.master')

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

@section('content')
    <!--begin::Exit Button-->
    <div class="d-flex justify-content-start mb-5">
        <a href="{{ route('admin.bookings.index') }}" class="btn btn-sm btn-light-primary">
            <i class="bi bi-arrow-left fs-4 me-1"></i> Exit
        </a>
    </div>
    <!--end::Exit Button-->

    <!--begin::Layout-->
    <div class="d-flex flex-column flex-lg-row">
        <!--begin::Content-->
        <div class="flex-lg-row-fluid me-lg-15">
            <!--begin::Card-->
            <div class="card card-flush pt-3 mb-5 mb-xl-10">
                <!--begin::Card header-->
                <div class="card-header">
                    <!--begin::Card title-->
                    <div class="card-title">
                        <h2 class="fw-bolder">Booking Overview</h2>
                    </div>
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <!--begin::Section-->
                    <div class="mb-10">
                        <!--begin::Title-->
                        <h5 class="mb-4 text-muted text-uppercase fw-bold">Reservation Details</h5>
                        <!--end::Title-->
                        <div class="d-flex flex-wrap py-5">
                            <!--begin::Row-->
                            <div class="flex-equal me-5 mb-5" style="min-width: 200px">
                                <table class="table table-flush fw-bold gy-1">
                                    <tr>
                                        <td class="text-muted min-w-125px w-125px">Booking ID</td>
                                        <td class="text-gray-800">#BK-{{ str_pad($booking->id, 6, '0', STR_PAD_LEFT) }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted min-w-125px w-125px">Status</td>
                                        <td>
                                            <span
                                                class="badge badge-light-{{ $booking->booking_status == 'Confirmed' ? 'success' : 'warning' }} fw-bolder">
                                                {{ $booking->booking_status }}
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted min-w-125px w-125px">Check-In</td>
                                        <td class="text-gray-800 fw-bolder">
                                            {{ $booking->check_in_date->format('D, d M Y') }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted min-w-125px w-125px">Check-Out</td>
                                        <td class="text-gray-800 fw-bolder">
                                            {{ $booking->check_out_date->format('D, d M Y') }}
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <!--end::Row-->
                            <!--begin::Row-->
                            <div class="flex-equal mb-5" style="min-width: 200px">
                                <table class="table table-flush fw-bold gy-1">
                                    <tr>
                                        <td class="text-muted min-w-125px w-125px">Room</td>
                                        <td class="text-gray-800">{{ $booking->room->room_name }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted min-w-125px w-125px">Room Type</td>
                                        <td class="text-gray-800">{{ $booking->room->room_type }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted min-w-125px w-125px">Guests</td>
                                        <td class="text-gray-800">{{ $booking->total_guests }} Personen</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted min-w-125px w-125px">Total Amount</td>
                                        <td class="text-primary fs-4 fw-bolder">INR
                                            {{ number_format($booking->total_amount, 2) }}
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <!--end::Row-->
                        </div>
                    </div>
                    <!--end::Section-->

                    <!--begin::Section-->
                    <div class="mb-0">
                        <h5 class="mb-4 text-muted text-uppercase fw-bold">Payment History</h5>
                        @if($booking->payment)
                            <div class="table-responsive">
                                <table class="table align-middle table-row-dashed fs-6 gy-4 mb-0">
                                    <thead>
                                        <tr
                                            class="border-bottom border-gray-200 text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                                            <th class="min-w-150px">Transaction ID</th>
                                            <th class="min-w-125px">Method</th>
                                            <th class="min-w-125px">Amount</th>
                                            <th class="min-w-125px">Status</th>
                                            <th class="min-w-125px">Date</th>
                                        </tr>
                                    </thead>
                                    <tbody class="fw-bold text-gray-800">
                                        <tr>
                                            <td>
                                                <span
                                                    class="text-gray-800 text-hover-primary">{{ $booking->payment->transaction_id }}</span>
                                            </td>
                                            <td>{{ $booking->payment->payment_method }}</td>
                                            <td>INR {{ number_format($booking->payment->amount_paid, 2) }}</td>
                                            <td>
                                                <span
                                                    class="badge badge-light-success fw-bolder">{{ $booking->payment->payment_status }}</span>
                                            </td>
                                            <td>{{ $booking->payment->payment_date->format('d M Y, h:i A') }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="notice d-flex bg-light-warning rounded border-warning border border-dashed p-6">
                                <span class="svg-icon svg-icon-2tx svg-icon-warning me-4">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none">
                                        <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
                                        <rect x="11" y="14" width="7" height="2" rx="1" transform="rotate(-90 11 14)"
                                            fill="black" />
                                        <rect x="11" y="17" width="2" height="2" rx="1" transform="rotate(-90 11 17)"
                                            fill="black" />
                                    </svg>
                                </span>
                                <div class="d-flex flex-stack flex-grow-1">
                                    <div class="fw-bold">
                                        <h4 class="text-gray-900 fw-bolder">No Payment Recorded!</h4>
                                        <div class="fs-6 text-gray-700">This booking does not have any recorded payment yet.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                    <!--end::Section-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Card-->
        </div>
        <!--end::Content-->
        <!--begin::Sidebar-->
        <div class="flex-column flex-lg-row-auto w-100 w-lg-300px w-xl-400px mb-10">
            <!--begin::Card-->
            <div class="card card-flush pt-3 mb-0">
                <!--begin::Card header-->
                <div class="card-header">
                    <!--begin::Card title-->
                    <div class="card-title">
                        <h2>Customer Profile</h2>
                    </div>
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <!--begin::User Summary-->
                    <div class="d-flex flex-center flex-column mb-10">
                        <!--begin::Avatar-->
                        <div class="symbol symbol-100px symbol-circle mb-7">
                            <div class="symbol-label fs-1 fw-bold bg-danger text-light">
                                {{ substr($booking->user->full_name, 0, 1) }}
                            </div>
                        </div>
                        <!--end::Avatar-->
                        <!--begin::Name-->
                        <a href="#"
                            class="fs-3 text-gray-800 text-hover-primary fw-bolder mb-1">{{ $booking->user->full_name }}</a>
                        <!--end::Name-->
                        <!--begin::Position-->
                        <div class="fs-5 fw-bold text-muted mb-6">Registered Member</div>
                        <!--end::Position-->
                    </div>
                    <!--end::User Summary-->

                    <!--begin::Details-->
                    <div class="d-flex flex-stack fs-4 py-3">
                        <div class="fw-bolder rotate collapsible" data-bs-toggle="collapse" href="#kt_customer_view_details"
                            role="button" aria-expanded="false" aria-controls="kt_customer_view_details">Contact Details
                            <span class="ms-2 rotate-180">
                                <span class="svg-icon svg-icon-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none">
                                        <path
                                            d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z"
                                            fill="black" />
                                    </svg>
                                </span>
                            </span>
                        </div>
                    </div>
                    <!--end::Details-->
                    <div class="separator separator-dashed my-3"></div>
                    <!--begin::Details content-->
                    <div id="kt_customer_view_details" class="collapse show">
                        <div class="py-5 fs-6">
                            <!--begin::Details item-->
                            <div class="fw-bolder mt-5">Email</div>
                            <div class="text-gray-600">
                                <a href="mailto:{{ $booking->user->email }}"
                                    class="text-gray-600 text-hover-primary">{{ $booking->user->email }}</a>
                            </div>
                            <!--begin::Details item-->
                            <div class="fw-bolder mt-5">Phone</div>
                            <div class="text-gray-600">{{ $booking->user->phone_number }}</div>
                            <!--begin::Details item-->
                            @if($booking->user->comment)
                                <div class="fw-bolder mt-5">Special Request</div>
                                <div class="text-gray-600 italic">"{{ $booking->user->comment }}"</div>
                            @endif
                        </div>
                    </div>
                    <!--end::Details content-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Card-->
        </div>
        <!--end::Sidebar-->
    </div>
    <!--end::Layout-->
@endsection