@section('title', 'Customer Details')
@section('heading', 'Customer Details')

<div>

    @push('styles')
        <link rel="stylesheet" href="/assets/css/custom/details.css">
    @endpush

    <div id="kt_content_container" class="container-xxl">
        <div class="row mt-3">
            <div class="col-lg-4 col-md-6 mb-4 mt-5 font-family: 'Roboto'">
                <div class="card custom-card mb-4">
                    <div class="card-header-col text-center">
                        <div class="ellipse mt-3"></div>
                        <h4 class="mt-5 customer-title">{{ $customer->name }}</h4>
                    </div>
                
                </div>
            </div>
            <div class="col-lg-8 col-md-6">
                <div class="card-r mb-4">
                    <div class="card mb-4"
                        style="opacity: 1; position: relative; background-color: transparent; border-bottum: none;">
                        <div class="card-header d-flex align-items-center" style="border-bottom: 0 !important;">
                            <h4 class="history">
                                Tour History <span
                                    style="color: #F4404B; font-size: 18px;">({{ $totalBookings }})</span>
                            </h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @foreach ($displayedBookings as $booking)
                                <div class="col-sm-6 mb-3">
                                    <div class="tour-card border p-3 custom-tour-card">
                                        <img src="/assets/tenancy/images/helicopter.png" alt="Tour Image"
                                            class="tour-image custom-tour-image">
                                        <p class="tour-count">{{ $booking['tour']['seats'] ?? 'N/A' }}</p>
                                        <img src="/assets/tenancy/images/user2.png" alt="New Image"
                                            class="custom-user-image">
                                        <p class="tour-date">
                                            {{ \Carbon\Carbon::parse($booking['booking_date'])->format('m/d/y') }}</p>
                                        <p class="tour-title">{{ $booking['tour']['name'] }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        @if ($totalBookings > $displayedBookings->count())
                            <div class="text-center mt-3">
                                <a href="#" class="load-more-text" style="color: #F4404B; font-size: 18px;"
                                    wire:click.prevent="loadMore"><strong>Load More</strong></a>
                            </div>
                        @endif
                    </div>
                </div>
                <!-- Order Records Section -->
                <div class="accordion" id="kt_accordion_1">
                    <div class="accordion-item" style="border-radius: 20px; overflow: hidden;">
                        <h2 class="accordion-header" id="kt_accordion_1_header_1">
                            <button class="accordion-button collapsed fs-4 fw-bold" type="button"
                                data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_1" aria-expanded="false"
                                aria-controls="kt_accordion_1_body_1" style="border-radius: 10px 10px 0 0;">
                                Order Records
                            </button>
                        </h2>
                        <div id="kt_accordion_1_body_1" class="accordion-collapse collapse"
                            aria-labelledby="kt_accordion_1_header_1" data-bs-parent="#kt_accordion_1">
                            <div class="accordion-body" style="border-radius: 0 0 10px 10px;">
                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                                    architecto beatae vitae dicta sunt explicabo.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordion mt-3" id="kt_accordion_2">
                    <div class="accordion-item mt-4" style="border-radius: 20px; overflow: hidden;">
                        <h2 class="accordion-header" id="kt_accordion_2_header_2">
                            <button class="accordion-button collapsed fs-4 fw-bold" type="button"
                                data-bs-toggle="collapse" data-bs-target="#kt_accordion_2_body_2" aria-expanded="false"
                                aria-controls="kt_accordion_1_body_1" style="border-radius: 10px 10px 0 0;">
                                Payment Methods
                            </button>
                        </h2>
                        <div id="kt_accordion_2_body_2" class="accordion-collapse collapse"
                            aria-labelledby="kt_accordion_2_header_2" data-bs-parent="#kt_accordion_1">
                            <div class="accordion-body" style="border-radius: 0 0 10px 10px;">
                                <p>Visa Card</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>