@extends('layouts/layoutMaster')

@section('title', 'eCommerce Product List - Apps')

@section('vendor-style')
@vite([
'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
'resources/assets/vendor/libs/select2/select2.scss'
])
@endsection

@section('vendor-script')
@vite([
'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
'resources/assets/vendor/libs/select2/select2.js'
])
@endsection

@section('page-script')
@vite([
'resources/assets/js/hybrid-package-list.js'
])
@endsection

@section('content')
<!-- Product List Widget -->
<div class="card mb-6">
    <div class="card-widget-separator-wrapper">
        <div class="card-body card-widget-separator">
            <div class="row gy-4 gy-sm-1">
                <div class="col-sm-6 col-lg-3">
                    <div class="d-flex justify-content-between align-items-start card-widget-1 border-end pb-4 pb-sm-0">
                        <div>
                            <p class="mb-1">Total Packages</p>
                            <h4 class="mb-1">{{$totalPackages}}</h4>                            
                        </div>
                        <span class="avatar me-sm-6">
                            <span class="avatar-initial bg-label-secondary rounded"><i class="ti-26px ti ti-wallet text-heading"></i></span>

                        </span>
                    </div>
                    <hr class="d-none d-sm-block d-lg-none me-6">
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="d-flex justify-content-between align-items-start card-widget-2 border-end pb-4 pb-sm-0">
                        <div>
                            <p class="mb-1">Active Packages</p>
                            <h4 class="mb-1">{{$activePackages}}</h4>                            
                        </div>
                        <span class="avatar p-2 me-lg-6">
                            <span class="avatar-initial bg-label-secondary rounded"><i class="ti-26px ti ti-checks text-heading"></i></span>
                        </span>
                    </div>
                    <hr class="d-none d-sm-block d-lg-none">
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="d-flex justify-content-between align-items-start border-end pb-4 pb-sm-0 card-widget-3">
                        <div>
                            <p class="mb-1">In-Active Packages</p>
                            <h4 class="mb-1">{{$inactivePackages}}</h4>                            
                        </div>
                        <span class="avatar p-2 me-sm-6">
                            <span class="avatar-initial bg-label-secondary rounded text-heading">
                                <i class="ti-26px ti ti-calendar-stats text-heading"></i>
                            </span>
                        </span>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <p class="mb-1">Popular Packages</p>
                            <h4 class="mb-1">{{$totalPopularPackages}}</h4>                            
                        </div>
                        <span class="avatar p-2">
                            <span class="avatar-initial bg-label-secondary rounded"><i class="ti-26px ti ti-alert-octagon text-heading"></i></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Product List Table -->
<div class="card">
    <div class="card-header">
        <h5 class="card-title">Filter</h5>
        <form class="booking-filter-form pt-0" id="bookingFilterForm">
            <div class="d-flex justify-content-between align-items-center row pt-4 gap-6 gap-md-0">
                <div class="col-md-4 product_status">
                    <label class="form-label">Package Status</label>
                    <select id="BookingStatus" class="form-select text-capitalize">
                        <option value="">Status</option>
                        @foreach($filters['statuses'] as $bookingStatus)
                        <option value="{{ $bookingStatus }}">
                            @php
                            $statusLabels = [
                            1 => 'Active',
                            0 => 'Pending',
                            2 => 'Inactive'
                            ];
                            @endphp
                            {{ $statusLabels[$bookingStatus] ?? 'Unknown' }}
                        </option>
                        @endforeach

                    </select>
                </div>
                <div class="col-md-4 product_status">
                    <label class="form-label">Package Types</label>
                    <select id="PackageType" class="form-select text-capitalize">
                        <option value="">Package Types</option>
                        @foreach($filters['uniquePackageTypes'] as $code => $airline_name)
                        <option value="{{$code}}">{{$airline_name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4 product_status">
                    <label class="form-label">Package Category</label>
                    <select id="PackageCategory" class="form-select text-capitalize">
                        <option value="">Package Categories</option>
                        @foreach($filters['uniquePackageCategories'] as $code => $airline_name)
                        <option value="{{$code}}">{{$airline_name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4 product_status">
                    <label class="form-label">Pricing Types</label>
                    <select id="PricingTypes" class="form-select text-capitalize">
                        <option value="">Pricing Types</option>
                        @foreach($filters['uniquePricingTypes'] as $code => $rbd)
                        <option value="{{$rbd}}">{{$rbd}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4 product_status">
                    <label class="form-label">Staff</label>
                    <select id="staff" class="form-select text-capitalize">
                        <option value="">Employee</option>
                        @foreach($filters['users'] as $code => $rbd)
                        <option value="{{$code}}">{{$rbd}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4 product_status">
                    <label class="form-label">Package Cities</label>
                    <select id="PackageCity" class="form-select form-control">
                        <option value="">All</option>
                        @foreach($filters['uniqueCities'] as $key=>$city)
                        <option value="{{ $key }}">{{ $city }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4 product_status">
                    <label class="form-label">Package Country</label>
                    <select id="PackageCountry" class="form-select form-control">
                        <option value="">All</option>
                        @foreach($filters['uniquePackageCountries'] as $key=>$city)
                        <option value="{{ $key }}">{{ $city }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4 mt-2">
                    <button type="submit" class="btn btn-primary  me-3 data-submit">Submit</button>
                </div>
            </div>
        </form>
    </div>
    <div class="card-datatable table-responsive">
        <table class="datatables-products table">
            <thead class="border-top">
                <tr>
                    <th></th>
                    <th>Package</th>
                    <th>Category</th>
                    <th>Price</th>                   
<!--                    <th>Booking Type</th>-->
                    <th>No. Of Nights</th>
                    <th>Cities</th>
                    <th>Countries</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@endsection