@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',

  'resources/assets/vendor/libs/@form-validation/form-validation.scss'
])
@endsection

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

@section('page-script')
@vite([
'resources/assets/js/booking-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 Bookings</p>
                            <h4 class="mb-1">{{$total_bookings}}</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">Confirmed</p>
                            <h4 class="mb-1">{{$completed_bookings}}</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">Pending</p>
                            <h4 class="mb-1">{{$pending_bookings}}</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">Failed</p>
                            <h4 class="mb-1">{{$failed_bookings}}</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">
                    <select id="BookingStatus" class="form-select text-capitalize">
                        <option value="">Booking Status</option>
                        @foreach($filters['statuses'] as $bookingStatus)
                        <option value="{{$bookingStatus}}">{{$bookingStatus}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4 product_category">
                    <select id="PaymentMethod" class="form-select text-capitalize">
                        <option value="">Payment Method</option>
                        @foreach($filters['paymentMethods'] as $paymentMethods)
                        <option value="{{$paymentMethods}}">{{$paymentMethods}}</option>
                        @endforeach
                    </select>            
                </div>
                <div class="col-md-4 product_stock">
                    <select id="PaymentStatus" class="form-select text-capitalize">
                        <option value="">Payment Status</option>
                        @foreach($filters['paymentStatuses'] as $paymentStatuses)
                        <option value="{{$paymentStatuses}}">{{$paymentStatuses}}</option>
                        @endforeach
                    </select>      
                </div>
                <div class="col-md-4 product_stock">
                    <select id="userType" class="form-select text-capitalize">
                        <option value="">User Type</option>                       
                        <option value="0">Guest</option> 
                        <option value="4">B2C</option> 
                        <option value="2">B2B</option> 
                    </select>      
                </div>
                <div class="col-md-4">
                   <input type="date" class="form-control text-capitalize" id="bookingDate" placeholder="YYYY-MM-DD" />          
                </div>
                <div class="col-md-4 mt-2">
                    <button type="submit" class="btn btn-primary  me-3 data-submit">Submit</button>
                    <input type="hidden" id="module" name="module" value="{{$module}}">
                </div>
            </div>
        </form>
    </div>
    <div class="card-datatable table-responsive">
        <input type="hidden" id="module" value="{{$module}}">
        <table class="datatables-products table">
            <thead class="border-top">
                <tr>
                    <th></th>
                    <th>Booking</th>
                    <th>Date</th>
                    <th>Confirmation</th>
                    <th>Customer</th>
                    <th>Price</th>
                    <th>Status</th>
                    <th>Method</th>
                    <th>Payment</th>
                    <th>actions</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@endsection