@props([
    'with_filters' => 1,
    'categories' => $categories ?? null
])

@section('customStyle')
    <link href='{{ asset("dashboard/$locale/plugins/table/datatable/datatables.css") }}' rel="stylesheet" type="text/css" />
@endsection

<div class="table-responsive">

    @if ($with_filters)

        <div class="filter-container">
            <button class="btn btn-primary filter-button"> <i class="fas fa-filter"></i></button>
            <div class="filters-inputs" style="display: block">
                <form>
                    <div class="form-row">
                        <div class="form-group col-md-3 mb-0">
                            <label for="yearFilter">{{ __('dashboard.During Year') }}</label>
                            <select class="form-control basic " id="yearFilter">
                                <option value="" selected>{{ __('general.all') }}</option>
                                @foreach (range(2021, date('Y')) as $year)
                                    <option value="{{ $year }}">{{ $year }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group col-md-3 mb-0">
                            <label for="monthFilter">{{ __('dashboard.During Month') }}</label>
                            <select class="form-control basic" id="monthFilter">
                                <option value="" selected>{{ __('general.all') }}</option>
                                @foreach (range(1, 12) as $month)
                                    <option value="{{ $month }}">{{ $month }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group col-md-3 mb-0">
                            <label for="dayFilter">{{ __('dashboard.During Day') }}</label>
                            <select class="form-control basic" id="dayFilter">
                                <option value="" selected>{{ __('general.all') }}</option>
                                @foreach (range(1, 31) as $day)
                                    <option value="{{ $day }}">{{ $day }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group col-md-3 mb-0">
                            <label for="createdAtRange">{{ __('validation.attributes.created_at_range') }}</label>
                            <input id="createdAtRange" class="form-control "
                                placeholder="{{ __('validation.attributes.created_at_range') }}">
                        </div>

                        <div class="form-group col-md-3 mb-0">
                            <label for="startDateRange">{{ __('validation.attributes.start_date_range') }}</label>
                            <input id="startDateRange" class="form-control "
                                placeholder="{{ __('validation.attributes.start_date_range') }}">
                        </div>

                        <div class="form-group col-md-3 mb-0">
                            <label for="companyFilter">{{ __('validation.attributes.company') }}</label>
                            <select id="companyFilter" class="form-control ">
                                <option value="" selected>{{ __('general.all') }}</option>
                            </select>
                        </div>

                        <div class="form-group col-md-3 mb-0">
                            <label for="categoryFilter">{{ __('validation.attributes.category') }}</label>
                            <select id="categoryFilter" class="form-control basic">
                                <option value="" selected>{{ __('general.all') }}</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group col-md-3 mb-0">
                            <label for="userFilter">{{ __('dashboard.client') }}</label>
                            <select id="userFilter" class="form-control ">
                                <option value="" selected>{{ __('general.all') }}</option>
                            </select>
                        </div>

                        <div class="form-group col-md-3 mb-0">
                            <label for="isCouponUsedFilter">{{ __('validation.attributes.is_coupon_used') }}</label>
                            <select id="isCouponUsedFilter" class="form-control ">
                                <option value="" selected>{{ __('general.all') }}</option>
                                <option value="1">{{ __('general.yes') }}</option>
                                <option value="0">{{ __('general.no') }}</option>
                            </select>
                        </div>

                        <div class="form-group col-md-3 mb-0">
                            <label for="couponFilter">{{ __('validation.attributes.coupon') }}</label>
                            <select id="couponFilter" class="form-control ">
                                <option value="" selected>{{ __('general.all') }}</option>
                            </select>
                        </div>

                        <div class="form-group col-md-3 mb-0">
                            <label for="paymentMethodFilter">{{ __('validation.attributes.payment_method') }}</label>
                            <select id="paymentMethodFilter" class="form-control ">
                                <option value="" selected>{{ __('general.all') }}</option>
                                <option value="credit_card">{{ __('validation.attributes.credit_card') }}</option>
                                <option value="cash">{{ __('validation.attributes.cash') }}</option>
                                <option value="wallet">{{ __('validation.attributes.wallet') }}</option>
                                <option value="credit_card_with_wallet">
                                    {{ __('validation.attributes.credit_card_with_wallet') }}</option>
                                <option value="cash_with_wallet">{{ __('validation.attributes.cash_with_wallet') }}
                                </option>
                            </select>
                        </div>

                        <div class="form-group col-md-3 mb-0">
                            <label for="statusFilter">{{ __('validation.attributes.status') }}</label>
                            <select id="statusFilter" class="form-control basic" multiple="multiple">
                                {{-- <option value="" selected>{{ __('general.all') }}</option> --}}
                                <option value="confirmed">{{ __('general.confirmed') }}</option>
                                <option value="canceled">{{ __('general.canceled') }}</option>
                                <option value="finished">{{ __('general.finished') }}</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endif

    <table id="reservationsTable" class="table table-hover dataTable text-center">
        <thead>
            <tr>
                <th>#</th>
                <th>{{ __('validation.attributes.reservation_code') }}</th>
                <th>{{ __('validation.attributes.company') }}</th>
                <th>{{ __('validation.attributes.user') }}</th>
                <th>{{ __('validation.attributes.created_at') }}</th>
                <th>{{ __('validation.attributes.start_date') }}</th>
                <th>{{ __('validation.attributes.end_date') }}</th>
                <th>{{ __('validation.attributes.number_of_days') }}</th>
                <th>{{ __('سعر اليوم الواحد') }}</th>
                <th>{{ __('إجمالي الخدمات') }}</th>
                <th>{{ __('إجمالي التأمين') }}</th>
                <th>{{ __('الاجمالي') }}</th>
                <th>{{ __('validation.attributes.vat') }}</th>
                <th>{{ __('dashboard.the_total_amount_includes_tax') }}</th>
                <th>{{ __('dashboard.Paid Amount') }} ({{ __('dashboard.for_our_account') }})</th>
                <th>{{ __('dashboard.Remaining Amount') }}</th>
                <th>{{ __('validation.attributes.discount_amount') }}</th>
                <th>{{ __('dashboard.Payment Method') }}</th>
                <th>{{ __('نوع البطاقة') }}</th>
                <th>{{ __('عمولة بوابة الدفع') }}</th>
                <th>{{ __('dashboard.wallet_balance_used') }}</th>
                <th>{{ __('نسبة العمولة') }}</th>
                <th>{{ __('قيمة العمولة') }}</th>
                <th>{{ __('نوع التسوية') }}</th>
                <th>{{ __('الرقم التسلسلي') }}</th>
                <th>{{ __('dashboard.canceled_at') }}</th>
                <th>{{ __('validation.attributes.cancellation_reason') }}</th>
                <th>{{ __('عمولة رد المبلغ شامل الضريبة') }}</th>
                <th>{{ __('validation.attributes.status') }}</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>#</th>
                <th>{{ __('validation.attributes.reservation_code') }}</th>
                <th>{{ __('validation.attributes.company') }}</th>
                <th>{{ __('validation.attributes.user') }}</th>
                <th>{{ __('validation.attributes.created_at') }}</th>
                <th>{{ __('validation.attributes.start_date') }}</th>
                <th>{{ __('validation.attributes.end_date') }}</th>
                <th>{{ __('validation.attributes.number_of_days') }}</th>
                <th>{{ __('سعر اليوم الواحد') }}</th>
                <th>{{ __('إجمالي الخدمات') }}</th>
                <th>{{ __('إجمالي التأمين') }}</th>
                <th>{{ __('الاجمالي') }}</th>
                <th>{{ __('validation.attributes.vat') }}</th>
                <th>{{ __('dashboard.the_total_amount_includes_tax') }}</th>
                <th>{{ __('dashboard.Paid Amount') }} ({{ __('dashboard.for_our_account') }})</th>
                <th>{{ __('dashboard.Remaining Amount') }}</th>
                <th>{{ __('validation.attributes.discount_amount') }}</th>
                <th>{{ __('dashboard.Payment Method') }}</th>
                <th>{{ __('نوع البطاقة') }}</th>
                <th>{{ __('عمولة بوابة الدفع') }}</th>
                <th>{{ __('dashboard.wallet_balance_used') }}</th>
                <th>{{ __('نسبة العمولة') }}</th>
                <th>{{ __('قيمة العمولة') }}</th>
                <th>{{ __('نوع التسوية') }}</th>
                <th>{{ __('الرقم التسلسلي') }}</th>
                <th>{{ __('dashboard.canceled_at') }}</th>
                <th>{{ __('validation.attributes.cancellation_reason') }}</th>
                <th>{{ __('عمولة رد المبلغ شامل الضريبة') }}</th>
                <th>{{ __('validation.attributes.status') }}</th>
            </tr>
        </tfoot>
    </table>
</div>

@section('customScript')
    @parent

    <script src='{{ asset("dashboard/$locale/plugins/table/datatable/datatables.js") }}'></script>

    <script src='{{ asset('dashboard/datatables/financial.js') }}'></script>
@endsection