@extends('layouts.customer-dashboard')

@section('title', 'My Enquiries')

{{-- Breadcrumb --}}
@section('breadcrumb')
<div class="breadcrumb-bar breadcrumb-bg-02 text-center">
    <h2 class="breadcrumb-title mb-2">My Enquiries</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">Enquiries</li>
        </ol>
    </nav>
</div>
@endsection

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

@php
    $pendingCount   = $statusCounts['pending']   ?? 0;
    $confirmedCount = $statusCounts['confirmed'] ?? 0;
    $cancelledCount = $statusCounts['cancelled'] ?? 0;
@endphp

    <!-- 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 Enquiries</h6>
                <p class="fs-14 text-gray-6 fw-normal">
                    Total Enquiries: {{ $enquiries->total() }} &nbsp;|&nbsp;
                    <span class="text-warning fw-medium">Pending: {{ $pendingCount }}</span> &nbsp;|&nbsp;
                    <span class="text-success fw-medium">Confirmed: {{ $confirmedCount }}</span> &nbsp;|&nbsp;
                    <span class="text-danger fw-medium">Cancelled: {{ $cancelledCount }}</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>
    <!-- /Header -->

    <!-- Summary Info Banner -->
    <div class="alert alert-info d-flex align-items-center gap-2 fs-14 mb-4" role="alert">
        <i class="isax isax-info-circle5 fs-18"></i>
        <span>
            Enquiries are tour requests you've submitted. Our team will review and confirm them within 24 hours.
            Once confirmed, they'll also appear under <a href="{{ route('customer.tour_booking') }}" class="fw-medium">Tour Bookings</a>.
        </span>
    </div>

    <!-- Enquiry 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>Enquiry 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 enquiries">
                    </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">Pending</a></li>
                            <li><a href="#" class="dropdown-item rounded-1">Confirmed</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">
                                Latest First
                            </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">
                    <thead class="thead-light">
                        <tr>
                            <th>Tour &amp; Type</th>
                            <th>Travellers</th>
                            <th>Duration</th>
                            <th>Est. Price</th>
                            <th>Requested Date</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>

                        @forelse($enquiries 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;
                        @endphp

                        <tr>
                            {{-- Tour & Type --}}
                            <td>
                                <div class="d-flex align-items-center">
                                    <a href="#" class="avatar avatar-lg">
                                        <img src="{{ asset('ajyad_front/img/tours/tours-20.jpg') }}"
                                            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>{{ $numDays > 0 ? $numDays . ' Days' : '—' }}</td>

                            {{-- Estimated Price --}}
                            <td>
                                &#8377; {{ number_format($pkgPrice) }}
                                <br><span class="fs-11 text-gray-6">(Estimated)</span>
                            </td>

                            {{-- Requested 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>

                            {{-- Status --}}
                            <td>
                                @if($booking->status === 'pending')
                                    <span class="badge badge-warning">Awaiting Confirmation</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="#enquiry-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-message="{{ $booking->message ?? '' }}"
                                   data-name="{{ $booking->full_name }}"
                                   data-email="{{ $booking->email }}"
                                   data-phone="{{ $booking->phone }}"
                                   data-submitted="{{ \Carbon\Carbon::parse($booking->created_at)->format('d M Y, h:i A') }}"
                                >
                                    <i class="isax isax-eye"></i>
                                </a>
                            </td>
                        </tr>

                        @empty
                        <tr>
                            <td colspan="7" class="text-center py-5 text-gray-6">
                                <i class="isax isax-message-question5 fs-36 d-block mb-2"></i>
                                You haven't submitted any enquiries yet. <a href="{{ url('/') }}">Browse packages</a>
                            </td>
                        </tr>
                        @endforelse

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

        </div>
    </div>
    <!-- /Enquiry List -->

    <!-- Laravel Pagination -->
    @if($enquiries->hasPages())
    <div class="table-paginate d-flex justify-content-between align-items-center flex-wrap row-gap-3">
        <div class="value">
            <span class="fs-14 text-gray-6">
                Showing {{ $enquiries->firstItem() }} to {{ $enquiries->lastItem() }}
                of {{ $enquiries->total() }} enquiries
            </span>
        </div>
        <div class="d-flex align-items-center justify-content-center">
            {{ $enquiries->onEachSide(1)->links() }}
        </div>
    </div>
    @endif
    <!-- /Laravel Pagination -->

    <!-- ============================================================ -->
    <!-- Enquiry Detail Modal                                          -->
    <!-- ============================================================ -->
    <div class="modal fade" id="enquiry-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>
                        Enquiry Details
                        <span class="fs-14 fw-medium text-primary" id="modal-enquiry-id"></span>
                    </h5>
                    <a href="#" data-bs-dismiss="modal" class="btn-close text-dark"></a>
                </div>

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

                        <!-- Info banner inside modal -->
                        <div class="alert alert-warning fs-13 py-2 mb-3" id="modal-pending-notice" style="display:none;">
                            <i class="isax isax-clock5 me-1"></i>
                            This enquiry is currently <strong>awaiting confirmation</strong>. Our team will contact you shortly.
                        </div>

                        <!-- 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>
                            <span id="modal-status-badge"></span>
                        </div>

                        <!-- Enquiry Info -->
                        <div class="upcoming-details">
                            <h6 class="mb-2">Enquiry Info</h6>
                            <div class="row gy-3">
                                <div class="col-lg-3">
                                    <h6 class="fs-14">Submitted On</h6>
                                    <p class="text-gray-6 fs-16" id="modal-submitted-on"></p>
                                </div>
                                <div class="col-lg-3">
                                    <h6 class="fs-14">Requested Travel 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">No of Days</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">Estimated Price</h6>
                                    <p class="text-gray-6 fs-16" id="modal-price"></p>
                                </div>
                            </div>
                        </div>

                        <!-- Contact Info -->
                        <div class="upcoming-details">
                            <h6 class="mb-2">Contact Info</h6>
                            <div class="row gy-3">
                                <div class="col-lg-4">
                                    <h6 class="fs-14">Full Name</h6>
                                    <p class="text-gray-6 fs-16" id="modal-name"></p>
                                </div>
                                <div class="col-lg-4">
                                    <h6 class="fs-14">Email Address</h6>
                                    <p class="text-gray-6 fs-16" id="modal-email"></p>
                                </div>
                                <div class="col-lg-4">
                                    <h6 class="fs-14">Phone Number</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 / Notes</h6>
                            <div class="row">
                                <div class="col-lg-8">
                                    <p class="text-gray-6 fs-16 fst-italic" id="modal-message"></p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

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

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

@endsection

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

    const modalEl = document.getElementById('enquiry-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 message   = t.dataset.message  || '';
        const name      = t.dataset.name;
        const email     = t.dataset.email;
        const phone     = t.dataset.phone;
        const submitted = t.dataset.submitted;

        modalEl.querySelector('#modal-enquiry-id').textContent   = '#ENQ-' + id;
        modalEl.querySelector('#modal-tour-name').textContent    = tour;
        modalEl.querySelector('#modal-tour-type').textContent    = type;
        modalEl.querySelector('#modal-submitted-on').textContent = submitted;
        modalEl.querySelector('#modal-start-date').textContent   = start;
        modalEl.querySelector('#modal-end-date').textContent     = end;
        modalEl.querySelector('#modal-days').textContent         = days + ' Days';
        modalEl.querySelector('#modal-price').textContent        = price + ' (Estimated)';
        modalEl.querySelector('#modal-name').textContent         = name;
        modalEl.querySelector('#modal-email').textContent        = email;
        modalEl.querySelector('#modal-phone').textContent        = phone;

        // Pending notice banner
        const notice = modalEl.querySelector('#modal-pending-notice');
        notice.style.display = (status === 'pending') ? 'block' : 'none';

        // 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';
        }

        // Status badge
        const badges = {
            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>Awaiting Confirmation</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 = badges[status] ?? '';

        // Footer actions
        const footer = modalEl.querySelector('#modal-footer-actions');
        if (status === 'pending') {
            footer.innerHTML = '<button type="button" class="btn btn-md btn-danger" data-bs-dismiss="modal">Cancel Enquiry</button>';
        } else if (status === 'confirmed') {
            footer.innerHTML = '<a href="{{ route('customer.tour_booking') }}" class="btn btn-md btn-success">View in My Bookings</a>';
        } else if (status === 'cancelled') {
            footer.innerHTML = '<a href="{{ url('/') }}" class="btn btn-md btn-primary">Submit New Enquiry</a>';
        } 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