@extends('layouts.app')
@section('title', 'Bangladesh Unbound - Bookings')
@section('page-title', 'All Bookings')
@section('breadcrumb')
<!-- Breadcrumb Navigation -->
<nav class="breadcrumb-container d-flex" 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>
    @can('booking-create')
    <a href="{{ route('admin.bookings.create') }}" class="py-1 btn btn-add-booking btn-outline-success ms-auto">
        <i class="bi bi-plus"></i> New Booking
    </a>
    @endcan
</nav>
@endsection
@section('content')
<!-- Search and Filter Section -->
<div class="mb-4 search-filter-container">
    <form action="{{ route('admin.bookings.index') }}" method="GET" id="filterForm">
        @csrf
        @method('GET')
        <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"
                        value="{{ request('search') }}" placeholder="Search by Booking ID, Tour Name, Customer...">
                    <i class="bi bi-search search-icon"></i>
                </div>
            </div>
            <div class="col-md-2">
                <select class="form-select" id="statusFilter" name="status">
                    <option value="">All Status</option>
                    <option value="ongoing" {{ request('status')=='ongoing' ? 'selected' : '' }}>Ongoing</option>
                    <option value="upcoming" {{ request('status')=='upcoming' ? 'selected' : '' }}>Upcoming</option>
                    <option value="completed" {{ request('status')=='completed' ? 'selected' : '' }}>Completed</option>
                    <option value="cancelled" {{ request('status')=='cancelled' ? 'selected' : '' }}>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" {{ request('payment_status')=='paid' ? 'selected' : '' }}>Fully Paid</option>
                    <option value="partial" {{ request('payment_status')=='partial' ? 'selected' : '' }}>Partially Paid
                    </option>
                    <option value="refunded" {{ request('payment_status')=='refunded' ? 'selected' : '' }}>Refunded
                    </option>
                </select>
            </div>
            <div class="col-md-2">
                <select class="form-select" id="entriesPerPage" name="length">
                    @foreach([10,25,50,100] as $size)
                    <option value="{{ $size }}" {{ request('length', 10)==$size ? 'selected' : '' }}>
                        {{ $size }} per page
                    </option>
                    @endforeach
                </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">
                <a href="{{ route('admin.bookings.index') }}" class="btn btn-outline-secondary" id="clearFilters">
                    <i class="bi bi-arrow-clockwise"></i> Clear
                </a>
            </div>
        </div>

    </form>
</div>

<!-- 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>

        @if (request('search') || request('status') || request('payment_status')|| request('length'))
        <div class="mt-2 row">
            <div class="col-md-12">
                <div class="results-info">
                    <span class="text-muted">
                        Showing {{ $query->firstItem() ?? 0 }}-{{ $query->lastItem() ?? 0 }}
                        of {{ $query->total() ?? 0 }} results
                    </span>
                </div>
            </div>
        </div>
        @endif
    </div>
    <div class="overflow-x-auto table-container table-responsive">
        <table class="table mb-0 table-hover">
            <thead>
                <tr class="text-wrap">
                    <th>Booking ID</th>
                    <th>Tour Name</th>
                    <th width="190">Package Details</th>
                    <th>Tour Date</th>
                    <th>Booking Status</th>
                    <th class="text-center">Payment</th>
                    <th width="160">Assigned Team</th>
                    <th>Tour Guide</th>
                    <th>Customer Details</th>
                    @can('booking-view')
                    <th width="150">Actions</th>
                    @endcan
                </tr>
            </thead>
            <tbody>
                @forelse ($query as $booking)
                <tr>
                    <!-- Order ID -->
                    <td><strong>{{ $booking->booking_no ?? '-' }}</strong></td>

                    <!-- Tour Name -->
                    <td>
                        <img src="{{ asset('backend/img/ico/ico-package.svg') }}" alt="Tour" class="table-cell-icon">
                        {{ $booking?->tourPackage?->name ?? '-' }}
                    </td>

                    <!-- Package Details -->
                    <td>
                        <img src="{{ asset('backend/img/ico/ico-package-details.svg') }}" alt="Package"
                            class="table-cell-icon">
                        {{ $booking?->tourPackage?->duration ? $booking?->tourPackage?->duration :
                        calculateDuration($booking?->tourPackage?->from_date, $booking?->tourPackage?->to_date) }}
                    </td>

                    <!-- Tour Date -->
                    <td>
                        @php
                        $startDate = \Carbon\Carbon::parse($booking?->tourPackage?->from_date);
                        $endDate = \Carbon\Carbon::parse($booking?->tourPackage?->to_date);

                        @endphp

                        <div style="width: 100px !important">
                            <img src="{{ asset('backend/img/ico/ico-calendar.svg') }}" alt="Date"
                                class="table-cell-icon">
                            {{ $startDate->format('d M Y') }} - <br> {{ $endDate->format('d M Y') }}
                        </div>
                    </td>

                    <!-- Status -->
                    <td>
                        @switch($booking->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>

                    <!-- Payment -->
                    <td class="text-left">
                        <div class="payment-info">
                            <div class="payment-paid">Paid: ৳{{ number_format($booking?->paid_amount) }}</div>
                            <div class="payment-due">Due: ৳{{ number_format($booking?->due_amount) }}</div>
                            <div class="payment-refunded">Refunded: ৳{{ number_format($booking?->refunded_amount) }}
                            </div>
                            @if ($booking->coupon_amount)
                            <div class="coupon small text-muted">Coupon ৳{{number_format($booking->coupon_amount, 2)}}
                                Used</div>
                            @endif
                        </div>
                    </td>

                    <!-- Assigned Team -->
                    <td>{{ $booking?->tourGuide?->team?->name ?? '-' }}</td>

                    <!-- Tour Guide -->
                    <td>
                        @if ($booking->tourGuide)
                        <div class="guide-info">
                            <img src="{{ asset('backend/img/avatar.jpg') }}" alt="Guide" class="guide-avatar">
                            <div>
                                <div class="fw-semibold">{{ $booking?->tourGuide?->user?->full_name ?? '-' }}
                                </div>
                                <small class="text-muted">{{ $booking?->tourGuide?->user?->phone ?? '-' }}</small>
                            </div>
                        </div>
                        @else
                        <span class="text-muted">-</span>
                        @endif
                    </td>

                    <!-- Customer -->
                    <td>
                        <div class="guide-info">
                            <img src="{{ asset('backend/img/avatar.jpg') }}" alt="Customer" class="guide-avatar">
                            <div>
                                <div class="fw-semibold">{{ $booking?->customer?->full_name ?? '-' }}</div>
                                <small class="text-muted">{{ $booking?->customer?->customerDetails?->country?->name ??
                                    '-' }}</small>
                            </div>
                        </div>
                    </td>

                    <!-- Actions -->
                    @can('booking-view')
                    <td>
                        <a href="{{ route('admin.bookings.details', $booking->id) }}" class="btn btn-view-details">
                            Details <img src="{{ asset('backend/img/ico/ico-map.svg') }}" alt="">
                        </a>
                    </td>
                    @endcan
                </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">
            @include('layouts.partials.pagination-info')
        </div>
    </div>
</div>
@endsection