@extends('layouts.app')
@section('title', 'Bangladesh Unbound - Bookings')
@section('page-title', 'All Bookings')
@section('breadcrumb')
<!-- Breadcrumb Navigation -->
<nav class="breadcrumb-container" aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('admin.dashboard') }}">
                <img src="{{ asset('backend/img/ico/ico-dashboard.svg') }}" alt="Dashboard" class="breadcrumb-icon">
                Dashboard
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <img src="{{ asset('backend/img/ico/ico-bookings.svg') }}" alt="Bookings" class="breadcrumb-icon">
            All Bookings
        </li>
    </ol>
</nav>
@endsection
@section('content')
<!-- Search and Filter Section -->
<form action="{{ route('customer.bookings.index') }}" method="get" id="searchBookingsForm">
    <div class="mb-4 search-filter-container">
        <div class="row align-items-center">
            <div class="col-md-4">
                <div class="search-box">
                    <input type="text" class="form-control" id="searchBookings" name="search"
                        placeholder="Search by Order ID, Tour Name, Guide...">
                    <i class="bi bi-search search-icon"></i>
                </div>
            </div>
            <div class="col-md-2">
                <select class="form-select" id="statusFilter" name="booking_status">
                    <option value="">All Status</option>
                    <option value="ongoing">Ongoing</option>
                    <option value="upcoming">Upcoming</option>
                    <option value="completed">Completed</option>
                    <option value="cancelled">Cancelled</option>
                </select>
            </div>
            <div class="col-md-2">
                <select class="form-select" id="paymentFilter" name="payment_status">
                    <option value="">All Payments</option>
                    <option value="paid">Fully Paid</option>
                    <option value="partial">Partially Paid</option>
                </select>
            </div>
            <div class="col-md-2">
                <select class="form-select" id="entriesPerPage" name="per_page">
                    <option value="10">10 per page</option>
                    <option value="25">25 per page</option>
                    <option value="50">50 per page</option>
                </select>
            </div>
            <div class="col-md-1">
                <button class="btn btn-search" id="searchButton">
                    <i class="bi bi-search"></i> Search
                </button>
            </div>
            <div class="col-md-1">
                <button class="btn btn-outline-secondary" id="clearFilters">
                    <i class="bi bi-arrow-clockwise"></i> Clear
                </button>
            </div>
        </div>
    </div>
</form>

<!-- All Bookings -->
<div class="mb-4">
    <div class="mb-3 d-flex justify-content-between align-items-center">
        <h3 class="mb-0 section-title">
            <img src="{{ asset('backend/img/ico/ico-bookings.svg') }}" alt="Bookings" class="section-icon">
            All Bookings
        </h3>
        <div class="results-info">
            <span class="text-muted">Showing <span id="showingStart">1</span>-<span id="showingEnd">5</span> of <span
                    id="totalResults">5</span> results</span>
        </div>
    </div>
    <div class="table-container">
        <table class="table mb-0 table-hover">
            <thead>
                <tr>
                    <th>Order ID</th>
                    <th>Tour Name</th>
                    <th>Package Details</th>
                    <th>Tour Date</th>
                    <th>Active Status</th>
                    <th class="text-center">Payment</th>
                    <th>Tour Guide</th>
                    <th class="px-5 d-flex align-items-center justify-content-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                <!-- Ongoing Booking -->
                @forelse ($bookings['data'] as $item)
                <tr>
                    <td>
                        <strong>
                            {{ $item['booking_no'] }}
                        </strong>
                    </td>
                    <td>
                        <img src="{{ asset('backend/img/ico/ico-package.svg') }}" alt="Tour" class="table-cell-icon">
                        {{ $item['tour_package_name'] }}
                    </td>
                    <td>
                        <img src="{{ asset('backend/img/ico/ico-package-details.svg') }}" alt="Package"
                            class="table-cell-icon">
                        {{ $item['tour_package_duration'] }}
                    </td>
                    <!-- Tour Date -->
                    <td>
                        @php
                        $fromDate = $item['tour_package_from_date'] ?? null;
                        $toDate = $item['tour_package_to_date'] ?? null;

                        $fromFormatted = $fromDate ? \Carbon\Carbon::parse($fromDate)->format('d M Y') : null;
                        $toFormatted = $toDate ? \Carbon\Carbon::parse($toDate)->format('d M Y') : null;
                        @endphp

                        <div style="width: 140px !important;">
                            <img src="{{ asset('backend/img/ico/ico-calendar.svg') }}" alt="Date"
                                class="table-cell-icon">
                            @if ($fromFormatted && $toFormatted)
                            {{ $fromFormatted }} - <br>{{ $toFormatted }}
                            @else
                            <span class="text-muted">N/A</span>
                            @endif
                        </div>
                    </td>

                    <td>
                        @switch($item['booking_status_name'])
                        @case('Ongoing')
                        <span class="badge bg-success">Ongoing</span>
                        @break
                        @case('Upcoming')
                        <span class="badge bg-info">Upcoming</span>
                        @break
                        @case('Completed')
                        <span class="badge bg-success">Completed</span>
                        @break
                        @case('Booked')
                        <span class="badge bg-warning text-dark">Booked</span>
                        @break
                        @case('Cancelled')
                        <span class="badge bg-danger">Cancelled</span>
                        @break
                        @default
                        <span class="badge bg-secondary">Unknown</span>
                        @endswitch
                    </td>
                    <td class="text-center">
                        <div class="payment-info">
                            <div class="payment-paid">৳ {{ number_format($item['paid_amount'], 2) }} Paid</div>
                            @if ($item['due_amount'] > 0)
                            <div class="payment-due">৳ {{ number_format($item['due_amount'], 2) }} Due</div>
                            @endif
                            @if ($item['coupon_amount'])
                            <div class="coupon small text-muted">Coupon ৳{{number_format($item['coupon_amount'], 2)}}
                                Used</div>
                            @endif
                            @if ($item['due_amount'] > 0)
                            <button class="mt-2 btn btn-pay-now" data-booking-id="{{ $item['id'] }}"
                                data-due-amount="{{ $item['due_amount'] }}">
                                Pay Now <img src="{{ asset('backend/img/ico/ico-cart.svg') }}" alt="Pay-Now-Icon">
                            </button>
                            @endif
                        </div>
                    </td>
                    <td>
                        <div class="guide-info">
                            <img src="{{ asset('backend/img/avatar.jpg') }}" alt="Guide" class="guide-avatar">
                            <div>
                                <div class="fw-semibold">
                                    {{ $item['tour_guide_first_name'] }} {{ $item['tour_guide_last_name'] }}
                                </div>
                                <small class="text-muted">
                                    {{ $item['tour_guide_phone'] }}
                                </small>
                            </div>
                        </div>
                    </td>
                    <td>
                        <a href="{{route('customer.bookings.details', $item['id'])}}" class="btn btn-view-details"
                            data-booking-id="{{ $item['id'] }}">
                            Details <img src="{{ asset('backend/img/ico/ico-map.svg') }}" alt="Details-Icon">
                        </a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="10" class="text-center text-muted">No bookings found.</td>
                </tr>
                @endforelse

            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="pagination-container pagination-container-padding">
        <div class="row align-items-center">
            <div class="col-md-6">
                <div class="pagination-info">
                    {{-- <span class="text-muted">
                        Showing <span id="paginationStart">{{ $bookings['from'] }}</span>
                        to <span id="paginationEnd">{{ $bookings['to'] }}</span>
                        of <span id="paginationTotal">{{ $bookings['total'] }}</span> entries
                    </span> --}}
                </div>

            </div>
            <div class="col-md-6">
                <nav aria-label="Bookings pagination">
                    <ul class="mb-0 pagination justify-content-end" id="paginationControls">
                        @foreach ($bookings['links'] as $link)
                        <li
                            class="page-item {{ $link['active'] ? 'active' : '' }} {{ $link['url'] == null ? 'disabled' : '' }}">
                            <a class="page-link" href="{{ $link['url'] }}" data-page="{{ $link['url'] }}">{!!
                                $link['label'] !!}</a>
                        </li>
                        @endforeach
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
@endsection
@include('customer.booking.partials.pay-due')
@push('scripts')
<script>
    $(document).ready(function() {
             // Open payment modal when Pay Now button is clicked
             $('.btn-pay-now').click(function() {
                 const bookingId = $(this).data('booking-id');
                 const dueAmount = $(this).data('due-amount');
                 $('#addPaymentModal').modal('show');
                 $('#bookingId').val(bookingId);
                 $('#paymentAmount').val(dueAmount);
             });
             // Populate data from url
             $('#searchBookings').val('{{ request('search') }}');
             $('#statusFilter').val('{{ request('booking_status') }}');
             $('#paymentFilter').val('{{ request('payment_status') }}');
             $('#entriesPerPage').val('{{ request('per_page') }}');
             // Clear filters functionality
             $('#clearFilters').click(function() {
                 $('#searchBookings').val('');
                 $('#statusFilter').val('');
                 $('#paymentFilter').val('');
                 $('#entriesPerPage').val('');
                 $('#searchBookingsForm').submit();
             });
             // Search functionality
             $('#searchButton').click(function() {
                 $('#searchBookingsForm').submit();
             });
         });
</script>
@endpush