@extends('layouts.customer-dashboard')

@section('title', 'Dashboard')

{{-- Breadcrumb --}}
@section('breadcrumb')
<div class="breadcrumb-bar breadcrumb-bg-04 text-center"
     style="background-image: url('{{ asset('ajyad_front/img/bg/breadcrumb-bg-04.jpg') }}'),
                               url('https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1920&q=90');
            background-size: cover, cover;
            background-position: center, center;
            background-repeat: no-repeat, no-repeat;">
    <h2 class="breadcrumb-title mb-2">Dashboard</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 active">Dashboard</li>
        </ol>
    </nav>
</div>
@endsection

{{-- Dashboard Content ONLY — no sidebar, no header, no footer --}}
@section('dashboard-content')

{{-- Alert --}}
<div class="alert alert-teal alert-dismissible d-flex align-items-center border-0 mb-4 fade show">
    <i class="isax isax-info-circle5 me-2"></i>
    Reminder about your upcoming booking Hotel Hayat on 15 May 2025 at 09:30 AM. We look forward to seeing you!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        <i class="fas fa-xmark"></i>
    </button>
</div>

{{-- Stats Cards --}}
<div class="row">
    <div class="col-xl-4">
        <div class="card shadow-none">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <span class="avatar avatar-xl rounded-circle bg-primary me-3">
                        <i class="isax isax-calendar-15 fs-36"></i>
                    </span>
                    <div>
                        <h3>{{ $bookings->count() }}</h3>
                        <p>Total Bookings</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="card shadow-none">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <span class="avatar avatar-xl rounded-circle bg-secondary me-3">
                        <i class="isax isax-money-send5 fs-36"></i>
                    </span>
                    <div>
                        <h3>$5.3K</h3>
                        <p>Total Transactions</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="card shadow-none">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <span class="avatar avatar-xl rounded-circle bg-purple me-3">
                        <i class="isax isax-money-tick5 fs-36"></i>
                    </span>
                    <div>
                        <h3>$5965</h3>
                        <p>Average Value</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Recent Bookings + Statistics --}}
<div class="row">

    {{-- Recent Bookings --}}
    <div class="col-xl-7 d-flex">
        <div class="card shadow-none flex-fill">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h6>Recent Bookings</h6>
                </div>

                @forelse($bookings as $booking)
                    @php
                        $today = \Carbon\Carbon::today();
                        $start = \Carbon\Carbon::parse($booking->travel_start_date);
                        $end   = $booking->travel_end_date
                                    ? \Carbon\Carbon::parse($booking->travel_end_date)
                                    : $start;

                        if ($booking->status == 'pending') {
                            $status = 'Pending';
                            $badge  = 'badge-warning text-dark';
                        } elseif ($booking->status == 'cancelled') {
                            $status = 'Cancelled';
                            $badge  = 'badge-danger';
                        } else {
                            if ($today->lt($start)) {
                                $status = 'Upcoming';
                                $badge  = 'badge-purple';
                            } elseif ($today->between($start, $end)) {
                                $status = 'In Progress';
                                $badge  = 'badge-info';
                            } else {
                                $status = 'Completed';
                                $badge  = 'badge-success';
                            }
                        }
                    @endphp

                    <div class="card shadow-none mb-2">
                        <div class="card-body py-2 px-3">
                            <div class="d-flex align-items-center">
                                <div class="avatar avatar-md flex-shrink-0 me-2">
                                    <img src="{{ asset('ajyad_front/img/hotels/hotel-15.jpg') }}"
                                         class="img-fluid rounded-circle" alt="Img">
                                </div>
                                <div class="flex-fill">
                                    <span class="badge badge-soft-info badge-xs rounded-pill mb-1">
                                        {{ $booking->package->name ?? 'Package' }}
                                    </span>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <h6 class="fs-15 mb-1 text-truncate">{{ $booking->full_name }}</h6>
                                        <span class="badge {{ $badge }} badge-sm rounded-pill">{{ $status }}</span>
                                    </div>
                                    <div class="d-flex align-items-center small">
                                        <span class="me-2">
                                            <i class="isax isax-calendar-25 me-1"></i>
                                            {{ \Carbon\Carbon::parse($booking->travel_start_date)->format('d M Y') }}
                                        </span>
                                        <span>
                                            <i class="isax isax-user me-1"></i>
                                            {{ $booking->adults }} Adults
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <p class="text-center">No bookings found</p>
                @endforelse

            </div>
        </div>
    </div>

    {{-- Booking Statistics --}}
    <div class="col-xl-5 d-flex">
        <div class="card shadow-none flex-fill">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h6>Bookings Statistics</h6>
                    <div class="dropdown">
                        <a href="#"
                           class="dropdown-toggle btn bg-light-200 btn-sm text-gray-6 rounded-pill fw-normal fs-14 d-inline-flex align-items-center"
                           data-bs-toggle="dropdown">
                            <i class="isax isax-calendar-2 me-2 fs-14 text-gray-6"></i>January
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end p-3">
                            <li><a href="#" class="dropdown-item rounded-1"><i class="ti ti-point-filled me-1"></i>January</a></li>
                            <li><a href="#" class="dropdown-item rounded-1"><i class="ti ti-point-filled me-1"></i>February</a></li>
                            <li><a href="#" class="dropdown-item rounded-1"><i class="ti ti-point-filled me-1"></i>March</a></li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="mb-0">
                        <p class="mb-0">Total Amount Spend</p>
                        <h3>$2659</h3>
                    </div>
                    <div id="tours_chart"></div>
                    <p class="fs-14">
                        <span class="text-success">+21%</span> increased compared to last year
                    </p>
                </div>
            </div>
        </div>
    </div>

</div>

{{-- Quick Book Categories --}}
<div class="row justify-content-center">
    @foreach([
        ['img' => 'hotels/hotel-15.jpg',   'count' => '968 Hotels',  'link' => 'hotel-grid.html'],
        ['img' => 'flight/flight-07.jpg',  'count' => '689 Flights', 'link' => 'flight-grid.html'],
        ['img' => 'tours/tours-24.jpg',    'count' => '985 Tours',   'link' => 'tour-grid.html'],
        ['img' => 'cars/car-11.jpg',       'count' => '698 Cars',    'link' => 'car-grid.html'],
        ['img' => 'cruise/cruise-15.jpg',  'count' => '968 Cruise',  'link' => 'cruise-grid.html'],
    ] as $item)
    <div class="col-xl col-lg-4 col-sm-6">
        <div class="tours-item mb-4">
            <a href="{{ $item['link'] }}" class="tours-img">
                <img src="{{ asset('ajyad_front/img/' . $item['img']) }}" class="img-fluid w-100" alt="img">
            </a>
            <div class="tours-content text-center">
                <h6 class="fs-16 fw-medium">{{ $item['count'] }}</h6>
                <a href="{{ $item['link'] }}" class="link-primary text-decoration-underline">Book Now</a>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- Spending Chart + Most Booked Services --}}
<div class="row">

    {{-- Spending Chart --}}
    <div class="col-xl-6 col-xxl-7 d-flex">
        <div class="card shadow-none flex-fill">
            <div class="card-body pb-0">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h6>Spending For Bookings</h6>
                    <div class="dropdown">
                        <a href="#"
                           class="dropdown-toggle btn bg-light-200 btn-sm text-gray-6 rounded-pill fw-normal fs-14 d-inline-flex align-items-center"
                           data-bs-toggle="dropdown">
                            <i class="isax isax-calendar-2 me-2 fs-14 text-gray-6"></i>2025
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end p-3">
                            <li><a href="#" class="dropdown-item rounded-1"><i class="ti ti-point-filled me-1"></i>2025</a></li>
                            <li><a href="#" class="dropdown-item rounded-1"><i class="ti ti-point-filled me-1"></i>2024</a></li>
                            <li><a href="#" class="dropdown-item rounded-1"><i class="ti ti-point-filled me-1"></i>2023</a></li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="mb-2">
                        <p class="mb-0">Spending For Bookings</p>
                        <div class="d-flex align-items-center">
                            <h3 class="me-2">$20,659</h3>
                            <p class="fs-14">
                                <span class="badge badge-soft-success badge-md border border-success rounded-pill me-2">
                                    <i class="isax isax-arrow-up-3"></i>12%
                                </span>vs last years
                            </p>
                        </div>
                    </div>
                    <div id="transcation_chart"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- Most Booked Services --}}
    <div class="col-xl-6 col-xxl-5 d-flex">
        <div class="card shadow-none flex-fill">
            <div class="card-body">
                <h6 class="mb-4">Most Booked Services</h6>

                @foreach([
                    ['img' => 'flight/flight-01.jpg', 'name' => 'Cloudrider 789',     'link' => 'flight-details.html', 'badge' => 'badge-soft-teal',   'type' => 'Flight',  'date' => '25 Apr 2025'],
                    ['img' => 'hotels/hotel-21.jpg',  'name' => 'The Luxe Haven',     'link' => 'hotel-details.html',  'badge' => 'badge-soft-info',   'type' => 'Hotel',   'date' => '16 May 2025'],
                    ['img' => 'cars/car-09.jpg',      'name' => 'Ford Mustang 4.0 AT','link' => 'car-details.html',   'badge' => 'badge-soft-purple', 'type' => 'Car',     'date' => '25 May 2025'],
                    ['img' => 'cruise/cruise-26.jpg', 'name' => 'Super Aquamarine',   'link' => 'cruise-details.html','badge' => 'badge-soft-cyan',   'type' => 'Cruise',  'date' => '18 Jun 2025'],
                    ['img' => 'tours/tours-29.jpg',   'name' => 'Mystic Falls',       'link' => 'tour-details.html',  'badge' => 'badge-soft-pink',   'type' => 'Tour',    'date' => '25 May 2025'],
                ] as $i => $service)
                <div class="d-flex justify-content-between align-items-center {{ $i < 4 ? 'mb-4' : '' }}">
                    <div class="d-flex align-items-center">
                        <a href="{{ $service['link'] }}" class="avatar avatar-lg flex-shrink-0 me-2">
                            <img src="{{ asset('ajyad_front/img/' . $service['img']) }}"
                                 class="img-fluid rounded-circle" alt="Img">
                        </a>
                        <div>
                            <h6 class="fs-16">
                                <a href="{{ $service['link'] }}">{{ $service['name'] }}</a>
                                <span class="badge {{ $service['badge'] }} badge-xs rounded-pill">
                                    <i class="isax isax-signpost me-1"></i>{{ $service['type'] }}
                                </span>
                            </h6>
                            <p class="fs-14">Last Booked : {{ $service['date'] }}</p>
                        </div>
                    </div>
                    <a href="{{ $service['link'] }}" class="btn rebook-btn btn-sm">
                        <i class="isax isax-calendar-add5 me-1"></i>Rebook
                    </a>
                </div>
                @endforeach

            </div>
        </div>
    </div>

</div>

{{-- Notifications + Recent Invoices --}}
<div class="row">

    {{-- Notifications --}}
    <div class="col-xl-5 d-flex">
        <div class="card shadow-none flex-fill">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h6>Notifications</h6>
                    <div class="dropdown">
                        <a href="#"
                           class="dropdown-toggle btn bg-light-200 btn-sm text-gray-6 rounded-pill fw-normal fs-14 d-inline-flex align-items-center"
                           data-bs-toggle="dropdown">
                            <i class="isax isax-document-filter me-2 fs-14 text-gray-6"></i>All
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end p-3">
                            <li><a href="#" class="dropdown-item rounded-1"><i class="ti ti-point-filled me-1"></i>All</a></li>
                            <li><a href="#" class="dropdown-item rounded-1"><i class="ti ti-point-filled me-1"></i>Recent</a></li>
                        </ul>
                    </div>
                </div>

                @foreach([
                    ['bg' => 'bg-primary',   'icon' => 'isax-info-circle5',      'title' => 'Pre-Tour Information',      'msg' => 'Your Mountain Valley tour is on 15 May 2024. Please arrive at Los Angeles.'],
                    ['bg' => 'bg-purple',    'icon' => 'isax-calendar-remove5',  'title' => 'Rescheduling Notification', 'msg' => 'Your Hotel Booking of Suite Room on 15 Jan 2025 has been rescheduled to 20 May 2025.'],
                    ['bg' => 'bg-teal',      'icon' => 'isax-calendar-edit5',    'title' => 'Booking Confirmation',      'msg' => 'Thank you for choosing Air India. Your adventure is set for 21 Jan 2025 at 04:45 PM.'],
                    ['bg' => 'bg-secondary', 'icon' => 'isax-color-swatch5',     'title' => 'Special Offer Notification','msg' => 'Book your next tour with us by Jan 2025 to avail the offer.'],
                ] as $i => $notif)
                <div class="d-flex align-items-center {{ $i < 3 ? 'mb-3' : '' }}">
                    <span class="avatar avatar-lg {{ $notif['bg'] }} rounded-circle flex-shrink-0 me-2">
                        <i class="isax {{ $notif['icon'] }}"></i>
                    </span>
                    <div class="flex-fill overflow-hidden">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <h6 class="fs-15 mb-1 text-truncate">{{ $notif['title'] }}</h6>
                            <p class="fs-14 text-primary text-nowrap">1 day ago</p>
                        </div>
                        <p class="fs-14 two-line-ellipsis">{{ $notif['msg'] }}</p>
                    </div>
                </div>
                @endforeach

            </div>
        </div>
    </div>

    {{-- Recent Invoices --}}
    <div class="col-xl-7 d-flex">
        <div class="card shadow-none flex-fill">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h6>Recent Invoices</h6>
                    <div class="dropdown">
                        <a href="#"
                           class="dropdown-toggle btn bg-light-200 btn-sm text-gray-6 rounded-pill fw-normal fs-14 d-inline-flex align-items-center"
                           data-bs-toggle="dropdown">
                            <i class="isax isax-document-filter me-2 fs-14 text-gray-6"></i>All
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end p-3">
                            <li><a href="#" class="dropdown-item rounded-1"><i class="ti ti-point-filled me-1"></i>All</a></li>
                            <li><a href="#" class="dropdown-item rounded-1"><i class="ti ti-point-filled me-1"></i>Recent</a></li>
                        </ul>
                    </div>
                </div>

                @foreach([
                    ['img' => 'flight/flight-01.jpg', 'title' => 'Cloudrider 789',     'link' => 'flight-details.html', 'inv' => '#INV12565', 'date' => '15 May 2024', 'amount' => '$569'],
                    ['img' => 'hotels/hotel-24.jpg',  'title' => 'The Luxe Haven',     'link' => 'hotel-details.html',  'inv' => '#INV12564', 'date' => '13 May 2024', 'amount' => '$430'],
                    ['img' => 'cars/car-07.jpg',      'title' => 'Ford Mustang 4.0 AT','link' => 'car-details.html',   'inv' => '#INV12563', 'date' => '10 May 2024', 'amount' => '$380'],
                    ['img' => 'cruise/cruise-02.jpg', 'title' => 'Super Aquamarine',   'link' => 'cruise-details.html','inv' => '#INV12562', 'date' => '04 May 2024', 'amount' => '$475'],
                ] as $i => $invoice)
                <div class="card shadow-none {{ $i < 3 ? 'mb-4' : 'mb-0' }}">
                    <div class="card-body p-2">
                        <div class="d-flex align-items-center">
                            <a href="{{ $invoice['link'] }}" class="avatar avatar-lg rounded-circle flex-shrink-0 me-2">
                                <img src="{{ asset('ajyad_front/img/' . $invoice['img']) }}"
                                     class="img-fluid rounded-circle" alt="Img">
                            </a>
                            <div class="d-flex justify-content-between align-items-center flex-fill">
                                <div>
                                    <h6 class="fs-16 fw-medium mb-1">
                                        <a href="{{ $invoice['link'] }}">{{ $invoice['title'] }}</a>
                                    </h6>
                                    <div class="d-flex align-items-center flex-wrap">
                                        <a href="invoices.html" class="fs-14 link-primary border-end pe-2 me-2 mb-0">{{ $invoice['inv'] }}</a>
                                        <p class="fs-14">Date: {{ $invoice['date'] }}</p>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <h6 class="fw-medium mb-1">{{ $invoice['amount'] }}</h6>
                                    <p class="fs-14 text-success">Paid</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach

            </div>
        </div>
    </div>

</div>

@endsection