@extends('admin.layouts.index')

@section('content')
    <ul class="nav nav-tabs">
        <li class="nav-item"><a class="nav-link {{ current_tab('#restaurants') }}" data-toggle="tab" href="#restaurants">@lang('global.restaurants')</a></li>
        <li class="nav-item"><a class="nav-link {{ current_tab('#stores') }}" data-toggle="tab" href="#stores">@lang('global.stores')</a></li>
        <li class="nav-item"><a class="nav-link {{ current_tab('#charities') }}" data-toggle="tab" href="#charities">@lang('global.charities')</a></li>
        <li class="nav-item"><a class="nav-link {{ current_tab('#spas') }}" data-toggle="tab" href="#spas">@lang('global.spas')</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade {{ current_tab('#restaurants') }}" id="restaurants" role="tabpanel">
            <h4 class="card-title mb-3">
                <div class="filter-container h6" data-table="#restaurantOrdersTable">
                    <button class="btn btn-primary filter-button"> <i class="fas fa-filter"></i> @lang('global.filters')</button>

                    <div class="filters-inputs">
                        <x-dashboard.form.form action='#'>
                            <x-dashboard.form.select name="day" id="ajaxSelectDayForRestaurants" :title="__('global.during_day')" :data-array="range(1, 31)" container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select name="month" id="ajaxSelectMonthForRestaurants" :title="__('global.during_month')" :data-array="range(1, 12)" container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select name="year" id="ajaxSelectYearForRestaurants" :title="__('global.during_year')" :data-array="range(2021, date('Y'))" container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.input name="dateRange" id="ajaxSelectDateRangeForRestaurants" :title="__('global.between_two_dates')" class="flatpickrTwoDatesMaxToday" container-classes='col-lg-3 col-12' :required="false" />
                            <x-dashboard.form.select name="status" id="ajaxSelectStatusForRestaurants" :title="__('global.order_status')" :data-array="$statuses" :name-fn='fn($order_status) => __("global.$order_status")' container-classes='col-lg-4 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select name="type" id="ajaxSelectTypeForRestaurants" :title="__('global.order_type')" :data-array="$types" :name-fn='fn($type) => __("global.orders_type.$type")' container-classes='col-lg-4 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select name="captain" id="ajaxSelectCaptainForRestaurants" :title="__('global.captain_name')" :data-array="$captains" container-classes='col-lg-4 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.button :title="__('global.clear_filters')" icon="i-Reset" type='button' color='dark' class="clear" />
                        </x-dashboard.form.form>
                    </div>
                </div>
            </h4>

            <div class="table-responsive">
                <table id="restaurantOrdersTable" class="table table-striped table-bordered dt">
                    <thead>
                        <tr>
                            <th>@lang('global.restaurant_title')</th>
                            <th>@lang('global.order_number')</th>
                            <th>@lang('validation.attributes.created_at')</th>
                            <th>@lang('global.captain_name')</th>
                            <th>@lang('global.delivery_fees')</th>
                            <th>@lang('global.total_amount')</th>
                            <th>@lang('global.order_type') </th>
                            <th>@lang('global.order_status')</th>
                            <th>@lang('global.actions')</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

        <div class="tab-pane fade {{ current_tab('#stores') }}" id="stores" role="tabpanel">
            <h4 class="card-title mb-3">
                <div class="filter-container h6" data-table="#storeOrdersTable">
                    <button class="btn btn-primary filter-button"> <i class="fas fa-filter"></i> @lang('global.filters')</button>

                    <div class="filters-inputs">
                        <x-dashboard.form.form action='#'>
                            <x-dashboard.form.select name="day" id="ajaxSelectDayForServices" :title="__('global.during_day')" :data-array="range(1, 31)" container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select name="month" id="ajaxSelectMonthForServices" :title="__('global.during_month')" :data-array="range(1, 12)" container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select name="year" id="ajaxSelectYearForServices" :title="__('global.during_year')" :data-array="range(2021, date('Y'))" container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.input name="dateRange" id="ajaxSelectDateRangeForServices" :title="__('global.between_two_dates')" class="flatpickrTwoDatesMaxToday" container-classes='col-lg-3 col-12' :required="false" />
                            <x-dashboard.form.select name="status" id="ajaxSelectStatusForServices" :title="__('global.order_status')" :data-array="$statuses" :name-fn='fn($order_status) => __("global.$order_status")' container-classes='col-lg-4 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select name="type" id="ajaxSelectTypeForServices" :title="__('global.order_type')" :data-array="['normal', 'delivery']" :name-fn='fn($type) => __("global.orders_type.$type")' container-classes='col-lg-4 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select name="captain" id="ajaxSelectCaptainForServices" :title="__('global.captain_name')" :data-array="$captains" container-classes='col-lg-4 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.button :title="__('global.clear_filters')" icon="i-Reset" type='button' color='dark' class="clear" />
                        </x-dashboard.form.form>
                    </div>
                </div>
            </h4>

            <div class="table-responsive">
                <table id="storeOrdersTable" class="table table-striped table-bordered dt">
                    <thead>
                        <tr>
                            <th>@lang('global.store_title')</th>
                            <th>@lang('global.order_number')</th>
                            <th>@lang('validation.attributes.created_at')</th>
                            <th>@lang('global.captain_name')</th>
                            <th>@lang('global.delivery_fees')</th>
                            <th>@lang('global.total_amount')</th>
                            <th>@lang('global.order_type') </th>
                            <th>@lang('global.order_status')</th>
                            <th>@lang('global.actions')</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

        <div class="tab-pane fade {{ current_tab('#charities') }}" id="charities" role="tabpanel">
            <h4 class="card-title mb-3">
                <div class="filter-container h6" data-table="#charityOrdersTable">
                    <button class="btn btn-primary filter-button"> <i class="fas fa-filter"></i> @lang('global.filters')</button>

                    <div class="filters-inputs">
                        <x-dashboard.form.form action='#'>
                            <x-dashboard.form.select name="day" id="ajaxSelectDayForCharities" :title="__('global.during_day')" :data-array="range(1, 31)" container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select name="month" id="ajaxSelectMonthForCharities" :title="__('global.during_month')" :data-array="range(1, 12)" container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select name="year" id="ajaxSelectYearForCharities" :title="__('global.during_year')" :data-array="range(2021, date('Y'))" container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.input name="dateRange" id="ajaxSelectDateRangeForCharities" :title="__('global.between_two_dates')" class="flatpickrTwoDatesMaxToday" container-classes='col-lg-3 col-12' :required="false" />
                            <x-dashboard.form.select name="status" id="ajaxSelectStatusForCharities" :title="__('global.order_status')" :data-array="['done', 'rejected', 'undone']" :name-fn='fn($order_status) => __("global.$order_status")' container-classes='col-lg-4 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.button :title="__('global.clear_filters')" icon="i-Reset" type='button' color='dark' class="clear" />
                        </x-dashboard.form.form>
                    </div>
                </div>
            </h4>

            <div class="table-responsive">
                <table id="charityOrdersTable" class="table table-striped table-bordered dt">
                    <thead>
                        <tr>
                            <th>@lang('global.charity_title')</th>
                            <th>@lang('global.order_number')</th>
                            <th>@lang('validation.attributes.created_at')</th>
                            <th>@lang('global.total_amount')</th>
                            <th>@lang('global.order_status')</th>
                            <th>@lang('global.actions')</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

        <div class="tab-pane fade {{ current_tab('#spas') }}" id="spas" role="tabpanel">
            <h4 class="card-title mb-3">
                <div class="filter-container h6" data-table="#spaOrdersTable">
                    <button class="btn btn-primary filter-button"> <i class="fas fa-filter"></i> @lang('global.filters')</button>

                    <div class="filters-inputs">
                        <x-dashboard.form.form action='#'>
                            <x-dashboard.form.select name="day" id="ajaxSelectDayForSpas" :title="__('global.during_day')" :data-array="range(1, 31)" container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select name="month" id="ajaxSelectMonthForSpas" :title="__('global.during_month')" :data-array="range(1, 12)" container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select name="year" id="ajaxSelectYearForSpas" :title="__('global.during_year')" :data-array="range(2021, date('Y'))" container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.input name="dateRange" id="ajaxSelectDateRangeForSpas" :title="__('global.between_two_dates')" class="flatpickrTwoDatesMaxToday" container-classes='col-lg-3 col-12' :required="false" />
                            <x-dashboard.form.select name="status" id="ajaxSelectStatusForSpas" :title="__('global.order_status')" :data-array="$spa_statuses" :name-fn='fn($order_status) => __("global.$order_status")' container-classes='col-lg-4 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.button :title="__('global.clear_filters')" icon="i-Reset" type='button' color='dark' class="clear" />
                        </x-dashboard.form.form>
                    </div>
                </div>
            </h4>

            <div class="table-responsive">
                <table id="spaOrdersTable" class="table table-striped table-bordered dt">
                    <thead>
                        <tr>
                            <th>@lang('global.spa_title')</th>
                            <th>@lang('global.reservation_number')</th>
                            <th>@lang('validation.attributes.created_at')</th>
                            <th>@lang('global.total_amount')</th>
                            <th>@lang('global.reservation_status')</th>
                            <th>@lang('global.actions')</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <x-bootstrap.modal id="showOrderModal" content-type='empty' content='' width='xl' />
@endsection