@extends('layouts.app')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')
@section('breadcrumb', '')
@section('content')
<style>
    .dataTables_paginate,
    .paging_simple_numbers {
        display: none !important;
    }

    .table.dataTable.no-footer {
        border-bottom: none !important;
    }

    table th {
        border-bottom: 1px solid #eaeaea !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    table thead th {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .table-hover tbody tr td {
        border-bottom: 1px solid #eaeaea !important;
    }

    .table-hover tbody tr td:last-child,
    .table-hover tbody tr td:first-child {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    td a {
        /* d-flex align-items-center gap-2 */
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
</style>
<!-- Overview Cards -->
<div class="mb-5 overview-cards-container">
    <div class="row g-4">
        <!-- My Bookings Card -->
        <div class="col-md-4">
            <div class="overview-card">
                <div class="overview-card-header">
                    <div class="overview-icon bookings-icon">
                        <img src="{{ asset('backend/img/ico/ico-bookings.svg') }}" alt="Bookings"
                            class="overview-icon-img">
                    </div>
                    <div class="overview-trend positive">
                        <i class="bi bi-calendar-check"></i>
                    </div>
                </div>
                <div class="overview-card-body">
                    <h3 class="overview-number">{{ $customer->totalBookings() }}</h3>
                    <p class="overview-label">Total Bookings</p>
                    <div class="overview-subtitle">
                        <span class="text-success">{{ $customer->upcomingTours() }} upcoming tours</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Spent Card -->
        <div class="col-md-4">
            <div class="overview-card">
                <div class="overview-card-header">
                    <div class="overview-icon spent-icon">
                        <img src="{{ asset('backend/img/ico/ico-payment.svg') }}" alt="Spent" class="overview-icon-img">
                    </div>
                    <div class="overview-trend positive">
                        <i class="bi bi-wallet2"></i>
                    </div>
                </div>
                <div class="overview-card-body">
                    <h3 class="overview-number">{{ $customer->totalSpent() }}</h3>
                    <p class="overview-label">Total Spent</p>
                    <div class="overview-subtitle">
                        <span class="text-success">Lifetime value</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Destinations Visited Card -->
        <div class="col-md-4">
            <div class="overview-card">
                <div class="overview-card-header">
                    <div class="overview-icon destinations-icon">
                        <img src="{{ asset('backend/img/ico/ico-map.svg') }}" alt="Destinations"
                            class="overview-icon-img">
                    </div>
                    <div class="overview-trend positive">
                        <i class="bi bi-geo-alt"></i>
                    </div>
                </div>
                <div class="overview-card-body">
                    <h3 class="overview-number">{{ $customer->completedTours() }}</h3>
                    <p class="overview-label">Places Visited</p>
                    <div class="overview-subtitle">
                        <span class="text-success"> {{ $customer->thisYearCompletedTours() }} new this year</span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- On Going Bookings -->
<div class="mb-4">
    <h3 class="section-title">
        <img src="{{ asset('backend/img/ico/ico-ongoing.svg') }}" alt="Ongoing" class="section-icon">
        On Going Bookings
    </h3>
    <div class="table-container">
        @include('customer.dashboard.partials.ongoing-bookings')
    </div>
</div>

<!-- Upcoming Bookings -->
<div class="mb-4">
    <h3 class="section-title">
        <img src="{{ asset('backend/img/ico/ico-upcoming.svg') }}" alt="Upcoming" class="section-icon">
        Upcoming Bookings
    </h3>
    <div class="table-container">
        @include('customer.dashboard.partials.upcoming-bookings')
    </div>
</div>
@include('customer.booking.partials.pay-due')

<!-- Custom Package/Services Request -->
<div class="mb-4">
    <div class="d-flex align-items-center justify-content-between">
        <h3 class="section-title">
            <img src="{{ asset('backend/img/ico/ico-custom.svg') }}" alt="Custom" class="section-icon">
            Custom Package/Services Request
        </h3>

        {{-- Type filter DropDown --}}
        <div class="mb-4">
            <select id="typeFilter" class="form-select" aria-label="Filter by Type">
                <option value="">All</option>
                <option value="custom-package-request">Custom Package Request</option>
                <option value="service-request">Service Request</option>
            </select>
        </div>
    </div>
    <div class="table-container">
        @include('customer.dashboard.partials.custom-package-and-service-request')
    </div>
    {{-- <div class="table-container">
        <table class="table mb-0 table-hover">
            <thead>
                <tr>
                    <th>Request ID</th>
                    <th>Request Date</th>
                    <th>Package Details</th>
                    <th>Destination</th>
                    <th>Payment Amount</th>
                    <th>Active Status</th>
                    <th>Request Details</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>#346GF3W</td>
                    <td>
                        <img src="{{ asset('backend/img/ico/ico-calendar.svg') }}" alt="Date" class="table-cell-icon">
                        15 Apr 2025
                    </td>
                    <td>
                        <img src="{{ asset('backend/img/ico/ico-package-details.svg') }}" alt="Package"
                            class="table-cell-icon">
                        2 Days, 1 Night
                    </td>
                    <td>Dhaka</td>
                    <td>
                        <div class="payment-info">
                            -
                        </div>
                    </td>
                    <td>
                        <span class="status-new">Requested</span>
                    </td>
                    <td>
                        <a href="{{ url('customer/custom-package-requests/details') }}?id=#346GF3W"
                            class="btn btn-view-details">
                            Details <img src="{{ asset('backend/img/ico/ico-map.svg') }}" alt="">
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>#789ABC2</td>
                    <td>
                        <img src="{{ asset('backend/img/ico/ico-calendar.svg') }}" alt="Date" class="table-cell-icon">
                        12 Apr 2025
                    </td>
                    <td>
                        <img src="{{ asset('backend/img/ico/ico-package-details.svg') }}" alt="Package"
                            class="table-cell-icon">
                        5 Days, 4 Nights
                    </td>
                    <td>Sylhet</td>
                    <td>
                        <div class="payment-info">
                            <div class="payment-paid">$2,800</div>
                        </div>
                    </td>
                    <td>
                        <span class="status-valid">Offer Received</span>
                        <img src="{{ asset('backend/img/ico/ico-status.svg') }}" alt="Status" class="table-cell-icon">
                    </td>
                    <td>
                        <a href="{{ url('customer/custom-package-requests/details') }}?id=#789ABC2"
                            class="btn btn-view-details">
                            Details <img src="{{ asset('backend/img/ico/ico-map.svg') }}" alt="">
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>#123DEF4</td>
                    <td>
                        <img src="{{ asset('backend/img/ico/ico-calendar.svg') }}" alt="Date" class="table-cell-icon">
                        10 Apr 2025
                    </td>
                    <td>
                        <img src="{{ asset('backend/img/ico/ico-package-details.svg') }}" alt="Package"
                            class="table-cell-icon">
                        3 Days, 2 Nights
                    </td>
                    <td>Cox's Bazar</td>
                    <td>
                        <div class="payment-info">
                            <div class="payment-paid">$1,800</div>
                        </div>
                    </td>
                    <td>
                        <span class="status-confirmed">Confirmed</span>
                    </td>
                    <td>
                        <a href="{{ url('customer/custom-package-requests/details') }}?id=#123DEF4"
                            class="btn btn-view-details">
                            Details <img src="{{ asset('backend/img/ico/ico-map.svg') }}" alt="">
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div> --}}
</div>
@endsection
@push('scripts')
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        // Pay Now button click handler
        $(document).on('click', '.btn-pay-now', function () {
            const bookingId = $(this).data('booking-id');
            const dueAmount = $(this).data('due-amount');

            // Show payment modal
            $('#addPaymentModal').modal('show');

            // Fill hidden inputs/fields
            $('#bookingId').val(bookingId);
            $('#paymentAmount').val(dueAmount);
        });
    });
</script>
@endpush