@extends('layouts.customer-dashboard')

@section('title', 'My Tour Bookings')

{{-- Breadcrumb --}}
@section('breadcrumb')
<div class="breadcrumb-bar breadcrumb-bg-02 text-center" style="
    position: relative;
    overflow: hidden;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;">

    {{-- Collage background: 5 destinations side by side --}}
    <div style="position:absolute;inset:0;display:flex;gap:3px;">
        <div style="flex:1;background:url('https://images.unsplash.com/photo-1537953773345-d172ccf13cf1?w=400&q=80') center/cover no-repeat;"></div>
        <div style="flex:1;background:url('https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=400&q=80') center/cover no-repeat;"></div>
        <div style="flex:1;background:url('https://images.unsplash.com/photo-1514282401047-d79a71a590e8?w=400&q=80') center/cover no-repeat;"></div>
        <div style="flex:1;background:url('https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=400&q=80') center/cover no-repeat;"></div>
        <div style="flex:1;background:url('https://images.unsplash.com/photo-1548013146-72479768bada?w=400&q=80') center/cover no-repeat;"></div>
    </div>

    {{-- Dark overlay for text readability --}}
    <div style="position:absolute;inset:0;background:rgba(0,0,0,0.50);"></div>

    {{-- Text --}}
    <div style="position:relative;z-index:2;">
        <h2 class="breadcrumb-title mb-2">My Bookings</h2>
        <nav>
            <ol class="breadcrumb justify-content-center mb-0">
                <li class="breadcrumb-item">
                    <a href="{{ url('/') }}"><i class="isax isax-home5"></i></a>
                </li>
                <li class="breadcrumb-item">My Bookings</li>
                <li class="breadcrumb-item active">Tours</li>
            </ol>
        </nav>
    </div>
</div>
@endsection

{{-- Dashboard Content --}}
@section('dashboard-content')

    @php
        $upcoming   = $bookings->filter(fn($b) => $b->status === 'confirmed' && \Carbon\Carbon::parse($b->travel_start_date)->isFuture());
        $past       = $bookings->filter(fn($b) => $b->status === 'confirmed' && \Carbon\Carbon::parse($b->travel_start_date)->isPast());
        $cancelled  = $bookings->filter(fn($b) => $b->status === 'cancelled');
    @endphp

    <!-- Booking Header -->
    <div class="card booking-header">
        <div class="card-body header-content d-flex align-items-center justify-content-between flex-wrap">
            <div>
                <h6>Tour Bookings</h6>
                <p class="fs-14 text-gray-6 fw-normal">
                    Total Bookings: {{ $bookings->count() }} &nbsp;|&nbsp;
                    <span class="text-success fw-medium">Upcoming: {{ $upcoming->count() }}</span> &nbsp;|&nbsp;
                    <span class="text-secondary fw-medium">Past: {{ $past->count() }}</span> &nbsp;|&nbsp;
                    <span class="text-danger fw-medium">Cancelled: {{ $cancelled->count() }}</span>
                </p>
            </div>
            <div class="d-flex align-items-center flex-wrap">
                <div class="input-icon-start me-3 position-relative">
                    <span class="icon-addon">
                        <i class="isax isax-calendar-edit fs-14"></i>
                    </span>
                    <input type="text" class="form-control date-range bookingrange"
                        placeholder="Select" value="Academic Year : 2024 / 2025">
                </div>
                <div class="dropdown">
                    <a href="#"
                        class="dropdown-toggle btn border text-gray-6 rounded fw-normal fs-14 d-inline-flex align-items-center"
                        data-bs-toggle="dropdown">
                        <i class="ti ti-file-export me-2 fs-14 text-gray-6"></i>Export
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end p-3">
                        <li>
                            <a href="#" class="dropdown-item rounded-1">
                                <i class="ti ti-file-type-pdf me-1"></i>Export as PDF
                            </a>
                        </li>
                        <li>
                            <a href="#" class="dropdown-item rounded-1">
                                <i class="ti ti-file-type-xls me-1"></i>Export as Excel
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- /Booking Header -->

    <!-- Summary Stat Cards -->
    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="card text-center py-3 border-0 shadow-sm">
                <div class="card-body py-2">
                    <i class="isax isax-calendar-tick5 fs-28 text-success mb-2 d-block"></i>
                    <h4 class="mb-0 fw-bold text-success">{{ $upcoming->count() }}</h4>
                    <p class="fs-13 text-gray-6 mb-0">Upcoming Tours</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-center py-3 border-0 shadow-sm">
                <div class="card-body py-2">
                    <i class="isax isax-clock5 fs-28 text-secondary mb-2 d-block"></i>
                    <h4 class="mb-0 fw-bold text-secondary">{{ $past->count() }}</h4>
                    <p class="fs-13 text-gray-6 mb-0">Past Tours</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-center py-3 border-0 shadow-sm">
                <div class="card-body py-2">
                    <i class="isax isax-close-circle5 fs-28 text-danger mb-2 d-block"></i>
                    <h4 class="mb-0 fw-bold text-danger">{{ $cancelled->count() }}</h4>
                    <p class="fs-13 text-gray-6 mb-0">Cancelled</p>
                </div>
            </div>
        </div>
    </div>
    <!-- /Summary Stat Cards -->

    <!-- Booking List -->
    <div class="card hotel-list">
        <div class="card-body p-0">
            <div class="list-header d-flex align-items-center justify-content-between flex-wrap">
                <h6>Booking List</h6>
                <div class="d-flex align-items-center flex-wrap">
                    <div class="input-icon-start me-2 position-relative">
                        <span class="icon-addon">
                            <i class="isax isax-search-normal-1 fs-14"></i>
                        </span>
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <div class="dropdown me-3">
                        <a href="#"
                            class="dropdown-toggle text-gray-6 btn rounded border d-inline-flex align-items-center"
                            data-bs-toggle="dropdown">
                            Tour Type
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end p-3">
                            <li><a href="#" class="dropdown-item rounded-1">Adventure Tourism</a></li>
                            <li><a href="#" class="dropdown-item rounded-1">Escorted Tour</a></li>
                            <li><a href="#" class="dropdown-item rounded-1">Ground Tour</a></li>
                        </ul>
                    </div>
                    <div class="dropdown me-3">
                        <a href="#"
                            class="dropdown-toggle text-gray-6 btn rounded border d-inline-flex align-items-center"
                            data-bs-toggle="dropdown">
                            Status
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end p-3">
                            <li><a href="#" class="dropdown-item rounded-1">Upcoming</a></li>
                            <li><a href="#" class="dropdown-item rounded-1">Past</a></li>
                            <li><a href="#" class="dropdown-item rounded-1">Cancelled</a></li>
                        </ul>
                    </div>
                    <div class="d-flex align-items-center sort-by">
                        <span class="fs-14 text-gray-9 fw-medium">Sort By :</span>
                        <div class="dropdown me-3">
                            <a href="#"
                                class="dropdown-toggle text-gray-6 btn rounded d-inline-flex align-items-center"
                                data-bs-toggle="dropdown">
                                Recommended
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end p-3">
                                <li><a href="#" class="dropdown-item rounded-1">Recently Added</a></li>
                                <li><a href="#" class="dropdown-item rounded-1">Ascending</a></li>
                                <li><a href="#" class="dropdown-item rounded-1">Descending</a></li>
                                <li><a href="#" class="dropdown-item rounded-1">Last Month</a></li>
                                <li><a href="#" class="dropdown-item rounded-1">Last 7 Days</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Table -->
            <div class="custom-datatable-filter table-responsive">
                <table class="table datatable">
                    <thead class="thead-light">
                        <tr>
                            <th>Booking ID</th>
                            <th>Tour &amp; Type</th>
                            <th>Travellers</th>
                            <th>Duration</th>
                            <th>Package Price</th>
                            <th>Travel Date</th>
                            <th>Trip Status</th>
                            <th>Booking Status</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>

                        @forelse($bookings as $booking)

                        @php
                            $startDate  = \Carbon\Carbon::parse($booking->travel_start_date);
                            $endDate    = $booking->travel_end_date
                                            ? \Carbon\Carbon::parse($booking->travel_end_date)
                                            : null;
                            $numDays    = $endDate ? $startDate->diffInDays($endDate) : 0;
                            $pkgName    = optional($booking->package)->name  ?? 'N/A';
                            $pkgType    = optional($booking->package)->type  ?? 'N/A';
                            $pkgPrice   = optional($booking->package)->price ?? 0;

                            // Determine trip phase
                            $now = \Carbon\Carbon::now();
                            if ($booking->status === 'cancelled') {
                                $tripStatus = 'cancelled';
                            } elseif ($endDate && $now->gt($endDate)) {
                                $tripStatus = 'completed';
                            } elseif ($now->lt($startDate)) {
                                $tripStatus = 'upcoming';
                            } else {
                                $tripStatus = 'ongoing';
                            }
                        @endphp

                        <tr>
                            {{-- Booking ID --}}
                            <td>
                                <a href="#" class="link-primary fw-medium">#BK-{{ $booking->id }}</a>
                            </td>

                            {{-- Tour & Type --}}
                            <td>
                                <div class="d-flex align-items-center">
                                    <a href="#" class="avatar avatar-lg">
                                        <img 
                                            src="{{ asset('storage/' . $booking->package->photo) }}" 
                                            class="img-fluid rounded-circle" 
                                            alt="tour">
                                    </a>
                                    <div class="ms-2">
                                        <p class="text-dark mb-0 fw-medium fs-14">{{ $pkgName }}</p>
                                        <span class="fs-14 text-gray-6">{{ $pkgType }}</span>
                                    </div>
                                </div>
                            </td>

                            {{-- Travellers --}}
                            <td>
                                <span class="d-block">{{ $booking->adults }} Adults</span>
                                @if($booking->children > 0)
                                    <span class="d-block text-gray-6 fs-13">{{ $booking->children }} Children</span>
                                @endif
                                @if(($booking->infants ?? 0) > 0)
                                    <span class="d-block text-gray-6 fs-13">{{ $booking->infants }} Infants</span>
                                @endif
                            </td>

                            {{-- Duration --}}
                            <td>
                                <span class="d-block">{{ $numDays }} Days</span>
                                <span class="fs-13 text-gray-6">{{ $numDays > 0 ? ($numDays - 1) . ' Nights' : '—' }}</span>
                            </td>

                            {{-- Price --}}
                            <td>&#8377; {{ number_format($pkgPrice) }}</td>

                            {{-- Travel Date --}}
                            <td>
                                <span class="d-block">{{ $startDate->format('d M Y') }}</span>
                                @if($endDate)
                                    <span class="fs-13 text-gray-6">to {{ $endDate->format('d M Y') }}</span>
                                @endif
                            </td>

                            {{-- Trip Status (upcoming / ongoing / completed) --}}
                            <td>
                                @if($tripStatus === 'upcoming')
                                    <span class="badge badge-info">Upcoming</span>
                                @elseif($tripStatus === 'ongoing')
                                    <span class="badge badge-primary">Ongoing</span>
                                @elseif($tripStatus === 'completed')
                                    <span class="badge badge-secondary">Completed</span>
                                @elseif($tripStatus === 'cancelled')
                                    <span class="badge badge-danger">Cancelled</span>
                                @endif
                            </td>

                            {{-- Booking Status (confirmed / cancelled / pending) --}}
                            <td>
                                @if($booking->status === 'pending')
                                    <span class="badge badge-warning">Pending</span>
                                @elseif($booking->status === 'confirmed')
                                    <span class="badge badge-success">Confirmed</span>
                                @elseif($booking->status === 'cancelled')
                                    <span class="badge badge-danger">Cancelled</span>
                                @endif
                            </td>

                            {{-- View --}}
                            <td>
                                <a href="#"
                                   data-bs-toggle="modal"
                                   data-bs-target="#booking-detail-modal"
                                   data-id="{{ $booking->id }}"
                                   data-tour="{{ $pkgName }}"
                                   data-type="{{ $pkgType }}"
                                   data-adults="{{ $booking->adults }}"
                                   data-children="{{ $booking->children }}"
                                   data-infants="{{ $booking->infants ?? 0 }}"
                                   data-start="{{ $startDate->format('d M Y') }}"
                                   data-end="{{ $endDate ? $endDate->format('d M Y') : 'N/A' }}"
                                   data-days="{{ $numDays }}"
                                   data-price="&#8377; {{ number_format($pkgPrice) }}"
                                   data-status="{{ $booking->status }}"
                                   data-tripstatus="{{ $tripStatus }}"
                                   data-message="{{ $booking->message ?? '' }}"
                                   data-name="{{ $booking->full_name }}"
                                   data-email="{{ $booking->email }}"
                                   data-phone="{{ $booking->phone }}"
                                   data-booked="{{ \Carbon\Carbon::parse($booking->created_at)->format('d M Y') }}"
                                >
                                    <i class="isax isax-eye"></i>
                                </a>
                            </td>
                        </tr>

                        @empty
                        <tr>
                            <td colspan="9" class="text-center py-5 text-gray-6">
                                <i class="isax isax-calendar-remove5 fs-36 d-block mb-2"></i>
                                No tour bookings found. <a href="{{ url('/') }}">Explore tours</a>
                            </td>
                        </tr>
                        @endforelse

                    </tbody>
                </table>
            </div>
            <!-- /Table -->

        </div>
    </div>
    <!-- /Booking List -->

    <!-- Pagination -->
    <div class="table-paginate d-flex justify-content-between align-items-center flex-wrap row-gap-3">
        <div class="value d-flex align-items-center">
            <span>Show</span>
            <select>
                <option>5</option>
                <option>10</option>
                <option>20</option>
            </select>
            <span>entries</span>
        </div>
        <div class="d-flex align-items-center justify-content-center">
            <a href="#"><span class="me-3"><i class="isax isax-arrow-left-2"></i></span></a>
            <nav aria-label="Page navigation">
                <ul class="paginations d-flex justify-content-center align-items-center">
                    <li class="page-item me-2">
                        <a class="page-link-1 active d-flex justify-content-center align-items-center" href="#">1</a>
                    </li>
                    <li class="page-item me-2">
                        <a class="page-link-1 d-flex justify-content-center align-items-center" href="#">2</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link-1 d-flex justify-content-center align-items-center" href="#">3</a>
                    </li>
                </ul>
            </nav>
            <a href="#"><span class="ms-3"><i class="isax isax-arrow-right-3"></i></span></a>
        </div>
    </div>
    <!-- /Pagination -->

    <!-- ============================================================ -->
    <!-- Booking Detail Modal                                          -->
    <!-- ============================================================ -->
    <div class="modal fade" id="booking-detail-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">

                <div class="modal-header">
                    <h5>
                        Booking Details
                        <span class="fs-14 fw-medium text-primary" id="modal-booking-id"></span>
                    </h5>
                    <a href="#" data-bs-dismiss="modal" class="btn-close text-dark"></a>
                </div>

                <div class="modal-body">
                    <div class="upcoming-content">

                        <!-- Tour title row -->
                        <div class="upcoming-title mb-4 d-flex align-items-center justify-content-between p-3 rounded">
                            <div class="d-flex align-items-center flex-wrap">
                                <div class="me-2">
                                    <img src="{{ asset('ajyad_front/img/tours/tours-21.jpg') }}"
                                        alt="tour" class="avatar avartar-md avatar-rounded">
                                </div>
                                <div>
                                    <h6 class="mb-1" id="modal-tour-name"></h6>
                                    <div class="title-list">
                                        <p class="d-flex align-items-center pe-2 me-2 border-end border-light fw-normal">
                                            <i class="isax isax-signpost5 me-2"></i>
                                            <span id="modal-tour-type"></span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex gap-2">
                                <span id="modal-trip-status-badge"></span>
                                <span id="modal-status-badge"></span>
                            </div>
                        </div>

                        <!-- Booking Info -->
                        <div class="upcoming-details">
                            <h6 class="mb-2">Booking Info</h6>
                            <div class="row gy-3">
                                <div class="col-lg-3">
                                    <h6 class="fs-14">Booked On</h6>
                                    <p class="text-gray-6 fs-16" id="modal-booked-on"></p>
                                </div>
                                <div class="col-lg-3">
                                    <h6 class="fs-14">Departure Date</h6>
                                    <p class="text-gray-6 fs-16" id="modal-start-date"></p>
                                </div>
                                <div class="col-lg-3">
                                    <h6 class="fs-14">Return Date</h6>
                                    <p class="text-gray-6 fs-16" id="modal-end-date"></p>
                                </div>
                                <div class="col-lg-3">
                                    <h6 class="fs-14">Duration</h6>
                                    <p class="text-gray-6 fs-16" id="modal-days"></p>
                                </div>
                                <div class="col-lg-3">
                                    <h6 class="fs-14">Travellers</h6>
                                    <p class="text-gray-6 fs-16" id="modal-travellers"></p>
                                </div>
                                <div class="col-lg-3">
                                    <h6 class="fs-14">Package Price</h6>
                                    <p class="text-gray-6 fs-16" id="modal-price"></p>
                                </div>
                            </div>
                        </div>

                        <!-- Billing Info -->
                        <div class="upcoming-details">
                            <h6 class="mb-2">Billing Info</h6>
                            <div class="row gy-3">
                                <div class="col-lg-4">
                                    <h6 class="fs-14">Name</h6>
                                    <p class="text-gray-6 fs-16" id="modal-name"></p>
                                </div>
                                <div class="col-lg-4">
                                    <h6 class="fs-14">Email</h6>
                                    <p class="text-gray-6 fs-16" id="modal-email"></p>
                                </div>
                                <div class="col-lg-4">
                                    <h6 class="fs-14">Phone</h6>
                                    <p class="text-gray-6 fs-16" id="modal-phone"></p>
                                </div>
                            </div>
                        </div>

                        <!-- Special Request -->
                        <div class="upcoming-details mb-0" id="modal-message-section" style="display:none;">
                            <h6 class="mb-2">Special Request</h6>
                            <div class="row">
                                <div class="col-lg-8">
                                    <p class="text-gray-6 fs-16" id="modal-message"></p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="modal-footer" id="modal-footer-actions"></div>

            </div>
        </div>
    </div>
    <!-- /Booking Detail Modal -->

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const modalEl = document.getElementById('booking-detail-modal');
    if (!modalEl) return;

    modalEl.addEventListener('show.bs.modal', function (event) {
        const t = event.relatedTarget;

        const id         = t.dataset.id;
        const tour       = t.dataset.tour;
        const type       = t.dataset.type;
        const adults     = t.dataset.adults;
        const children   = t.dataset.children;
        const infants    = t.dataset.infants  || '0';
        const start      = t.dataset.start;
        const end        = t.dataset.end;
        const days       = t.dataset.days;
        const price      = t.dataset.price;
        const status     = t.dataset.status;
        const tripstatus = t.dataset.tripstatus;
        const message    = t.dataset.message  || '';
        const name       = t.dataset.name;
        const email      = t.dataset.email;
        const phone      = t.dataset.phone;
        const booked     = t.dataset.booked;

        modalEl.querySelector('#modal-booking-id').textContent  = '#BK-' + id;
        modalEl.querySelector('#modal-tour-name').textContent   = tour;
        modalEl.querySelector('#modal-tour-type').textContent   = type;
        modalEl.querySelector('#modal-booked-on').textContent   = booked;
        modalEl.querySelector('#modal-start-date').textContent  = start;
        modalEl.querySelector('#modal-end-date').textContent    = end;
        modalEl.querySelector('#modal-days').textContent        = days + ' Days / ' + (parseInt(days) > 0 ? parseInt(days) - 1 : 0) + ' Nights';
        modalEl.querySelector('#modal-price').textContent       = price;
        modalEl.querySelector('#modal-name').textContent        = name;
        modalEl.querySelector('#modal-email').textContent       = email;
        modalEl.querySelector('#modal-phone').textContent       = phone;

        // Travellers
        let travText = adults + ' Adults';
        if (parseInt(children) > 0) travText += ', ' + children + ' Children';
        if (parseInt(infants) > 0)  travText += ', ' + infants + ' Infant(s)';
        modalEl.querySelector('#modal-travellers').textContent = travText;

        // Special request
        const msgSection = modalEl.querySelector('#modal-message-section');
        const msgEl      = modalEl.querySelector('#modal-message');
        if (message.trim() !== '') {
            msgEl.textContent        = message;
            msgSection.style.display = 'block';
        } else {
            msgSection.style.display = 'none';
        }

        // Trip Status badge
        const tripBadges = {
            upcoming:  '<span class="badge badge-info rounded-pill d-inline-flex align-items-center fs-10"><i class="fa-solid fa-circle fs-5 me-1"></i>Upcoming</span>',
            ongoing:   '<span class="badge badge-primary rounded-pill d-inline-flex align-items-center fs-10"><i class="fa-solid fa-circle fs-5 me-1"></i>Ongoing</span>',
            completed: '<span class="badge badge-secondary rounded-pill d-inline-flex align-items-center fs-10"><i class="fa-solid fa-circle fs-5 me-1"></i>Completed</span>',
            cancelled: '<span class="badge badge-danger rounded-pill d-inline-flex align-items-center fs-10"><i class="fa-solid fa-circle fs-5 me-1"></i>Cancelled</span>',
        };
        modalEl.querySelector('#modal-trip-status-badge').innerHTML = tripBadges[tripstatus] ?? '';

        // Booking Status badge
        const bookingBadges = {
            pending:   '<span class="badge badge-warning rounded-pill d-inline-flex align-items-center fs-10"><i class="fa-solid fa-circle fs-5 me-1"></i>Pending</span>',
            confirmed: '<span class="badge badge-success rounded-pill d-inline-flex align-items-center fs-10"><i class="fa-solid fa-circle fs-5 me-1"></i>Confirmed</span>',
            cancelled: '<span class="badge badge-danger rounded-pill d-inline-flex align-items-center fs-10"><i class="fa-solid fa-circle fs-5 me-1"></i>Cancelled</span>',
        };
        modalEl.querySelector('#modal-status-badge').innerHTML = bookingBadges[status] ?? '';

        // Footer actions
        const footer = modalEl.querySelector('#modal-footer-actions');
        if (tripstatus === 'completed') {
            footer.innerHTML = '<a href="#" class="btn btn-md btn-primary">Book Again</a>';
        } else if (tripstatus === 'cancelled' || status === 'cancelled') {
            footer.innerHTML = '<a href="#" class="btn btn-md btn-primary">Reschedule</a>';
        } else if (status === 'confirmed' && tripstatus === 'upcoming') {
            footer.innerHTML = '<button type="button" class="btn btn-md btn-danger" data-bs-dismiss="modal">Cancel Booking</button>';
        } else {
            footer.innerHTML = '';
        }
    });

    // Sidebar submenu toggle
    document.querySelectorAll('.submenu > a').forEach(function (menu) {
        menu.addEventListener('click', function (e) {
            e.preventDefault();
            let parent = this.parentElement;
            parent.classList.toggle('active');
            let submenu = parent.querySelector('ul');
            if (submenu) {
                submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
            }
        });
    });

});
</script>
@endpush