@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="#financialRestaurantReportTable">
                    <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-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select name="payment_method" id="ajaxSelectPaymentMethodForRestaurants" :title="__('global.payment_method')" :data-array="$payment_methods" :name-fn='fn($payment_method) => __("global.payment_methods.$payment_method")' container-classes='col-lg-3 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-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select name="is_subscribed" id="ajaxSelectIsSubscribedForRestaurants" :boolean="true" container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select class="ajaxSelectMalls" id="ajaxSelectMallsForRestaurants" name="mall" :required="false" container-classes='col-lg-3 col-12' :with-all="true" />
                            <x-dashboard.form.select class="ajaxSelectBranches" id="ajaxSelectBranchesForRestaurants" name="branch" :required="false" container-classes='col-lg-3 col-12' :with-all="true" />
                            <x-dashboard.form.select class="ajaxSelectStores" id="ajaxSelectStoresForRestaurants" name="restaurant" data-type="restaurants" :required="false" container-classes='col-lg-3 col-12' :with-all="true" />
                            <x-dashboard.form.select class="ajaxSelectCaptains" id="ajaxSelectCaptainsForRestaurants" name="captain" :required="false" container-classes='col-lg-3 col-12' :with-all="true" />
                            <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="financialRestaurantReportTable" class="table table-striped table-bordered dt">
                    <thead>
                        <tr>
                            <th>@lang('global.order_number') </th>
                            <th>@lang('validation.attributes.created_at') </th>
                            <th>@lang('global.order_status') </th>
                            <th>@lang('global.payment_method') </th>
                            <th>@lang('global.mall') </th>
                            <th>@lang('global.mall_branch') </th>
                            <th>@lang('global.restaurant') </th>
                            <th>@lang('validation.attributes.branch') </th>
                            <th>@lang('validation.attributes.is_subscribed') </th>
                            <th>@lang('validation.attributes.captain') </th>
                            <th>@lang('global.order_type') </th>
                            <th>@lang('global.products_price_excluding_tax')</th>
                            <th>@lang('global.products_price_tax')</th>
                            <th>@lang('global.products_price')</th>
                            <th>@lang('global.store_coupon_discount')</th>
                            <th>@lang('global.platform_coupon_discount')</th>
                            <th>@lang('global.total_price_2')</th>
                            <th>@lang('global.delivery_markup_excluding_tax')</th>
                            <th>@lang('global.delivery_markup_tax')</th>
                            <th>@lang('global.delivery_markup')</th>
                            <th>@lang('global.delivery_fees_excluding_tax')</th>
                            <th>@lang('global.delivery_fees_tax')</th>
                            <th>@lang('global.delivery_fees_2')</th>
                            <th>@lang('global.delivery_commission_excluding_tax')</th>
                            <th>@lang('global.delivery_commission_tax')</th>
                            <th>@lang('global.delivery_commission')</th>
                            <th>@lang('global.amount_paid_by_customer')</th>
                            <th>@lang('global.e_payment_fees_excluding_tax')</th>
                            <th>@lang('global.e_payment_fees_tax_2')</th>
                            <th>@lang('global.e_payment_fees_2')</th>
                            <th>@lang('global.platform_net_revenue')</th>
                            <th>@lang('global.actions') </th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th colspan="11" class="table-active p-0"></th>

                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.products_price_excluding_tax')</p>
                                <p class="products_price_excluding_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.products_price_tax')</p>
                                <p class="products_price_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.products_price')</p>
                                <p class="products_price" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.store_coupon_discount')</p>
                                <p class="store_coupon_discount" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.platform_coupon_discount')</p>
                                <p class="platform_coupon_discount" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.total_price_2')</p>
                                <p class="total_price" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_markup_excluding_tax')</p>
                                <p class="delivery_markup_excluding_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_markup_tax')</p>
                                <p class="delivery_markup_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_markup')</p>
                                <p class="delivery_markup" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>

                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_fees_excluding_tax')</p>
                                <p class="delivery_fees_excluding_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_fees_tax')</p>
                                <p class="delivery_fees_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_fees_2')</p>
                                <p class="delivery_fees" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_commission_excluding_tax')</p>
                                <p class="delivery_commission_excluding_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_commission_tax')</p>
                                <p class="delivery_commission_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_commission')</p>
                                <p class="delivery_commission" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>

                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.amount_paid_by_customer')</p>
                                <p class="amount_paid_by_customer" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.e_payment_fees_excluding_tax')</p>
                                <p class="e_payment_fees_excluding_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.e_payment_fees_tax_2')</p>
                                <p class="e_payment_fees_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.e_payment_fees_2')</p>
                                <p class="e_payment_fees" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>

                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.platform_net_revenue')</p>
                                <p class="platform_net_revenue" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>

                            <th colspan="1" class="table-active p-0"></th>
                        </tr>
                    </tfoot>
                </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="#financialStoreReportTable">
                    <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-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select name="payment_method" id="ajaxSelectPaymentMethodForServices" :title="__('global.payment_method')" :data-array="$payment_methods" :name-fn='fn($payment_method) => __("global.payment_methods.$payment_method")' container-classes='col-lg-3 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-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select name="is_subscribed" id="ajaxSelectIsSubscribedForServices" :boolean="true" container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select class="ajaxSelectMalls" id="ajaxSelectMallsForServices" name="mall" :required="false" container-classes='col-lg-3 col-12' :with-all="true" />
                            <x-dashboard.form.select class="ajaxSelectBranches" id="ajaxSelectBranchesForServices" name="branch" :required="false" container-classes='col-lg-3 col-12' :with-all="true" />
                            <x-dashboard.form.select class="ajaxSelectStores" id="ajaxSelectStoresForServices" name="store" data-type="services" :required="false" container-classes='col-lg-3 col-12' :with-all="true" />
                            <x-dashboard.form.select class="ajaxSelectCaptains" id="ajaxSelectCaptainsForServices" name="captain" :required="false" container-classes='col-lg-3 col-12' :with-all="true" />
                            <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="financialStoreReportTable" class="table table-striped table-bordered dt">
                    <thead>
                        <tr>
                            <th>@lang('global.order_number') </th>
                            <th>@lang('validation.attributes.created_at') </th>
                            <th>@lang('global.order_status') </th>
                            <th>@lang('global.payment_method') </th>
                            <th>@lang('global.mall') </th>
                            <th>@lang('global.mall_branch') </th>
                            <th>@lang('global.store') </th>
                            <th>@lang('validation.attributes.branch') </th>
                            <th>@lang('validation.attributes.is_subscribed') </th>
                            <th>@lang('validation.attributes.captain') </th>
                            <th>@lang('global.order_type') </th>
                            <th>@lang('global.products_price_excluding_tax')</th>
                            <th>@lang('global.products_price_tax')</th>
                            <th>@lang('global.products_price')</th>
                            <th>@lang('global.store_coupon_discount')</th>
                            <th>@lang('global.platform_coupon_discount')</th>
                            <th>@lang('global.total_price_2')</th>
                            <th>@lang('global.delivery_markup_excluding_tax')</th>
                            <th>@lang('global.delivery_markup_tax')</th>
                            <th>@lang('global.delivery_markup')</th>
                            <th>@lang('global.delivery_fees_excluding_tax')</th>
                            <th>@lang('global.delivery_fees_tax')</th>
                            <th>@lang('global.delivery_fees_2')</th>
                            <th>@lang('global.delivery_commission_excluding_tax')</th>
                            <th>@lang('global.delivery_commission_tax')</th>
                            <th>@lang('global.delivery_commission')</th>
                            <th>@lang('global.amount_paid_by_customer')</th>
                            <th>@lang('global.e_payment_fees_excluding_tax')</th>
                            <th>@lang('global.e_payment_fees_tax_2')</th>
                            <th>@lang('global.e_payment_fees_2')</th>
                            <th>@lang('global.platform_net_revenue')</th>
                            <th>@lang('global.actions') </th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th colspan="11" class="table-active p-0"></th>

                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.products_price_excluding_tax')</p>
                                <p class="products_price_excluding_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.products_price_tax')</p>
                                <p class="products_price_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.products_price')</p>
                                <p class="products_price" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.store_coupon_discount')</p>
                                <p class="store_coupon_discount" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.platform_coupon_discount')</p>
                                <p class="platform_coupon_discount" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.total_price_2')</p>
                                <p class="total_price" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_markup_excluding_tax')</p>
                                <p class="delivery_markup_excluding_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_markup_tax')</p>
                                <p class="delivery_markup_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_markup')</p>
                                <p class="delivery_markup" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>

                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_fees_excluding_tax')</p>
                                <p class="delivery_fees_excluding_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_fees_tax')</p>
                                <p class="delivery_fees_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_fees_2')</p>
                                <p class="delivery_fees" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_commission_excluding_tax')</p>
                                <p class="delivery_commission_excluding_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_commission_tax')</p>
                                <p class="delivery_commission_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.delivery_commission')</p>
                                <p class="delivery_commission" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>

                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.amount_paid_by_customer')</p>
                                <p class="amount_paid_by_customer" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.e_payment_fees_excluding_tax')</p>
                                <p class="e_payment_fees_excluding_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.e_payment_fees_tax_2')</p>
                                <p class="e_payment_fees_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.e_payment_fees_2')</p>
                                <p class="e_payment_fees" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>

                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.platform_net_revenue')</p>
                                <p class="platform_net_revenue" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>

                            <th colspan="1" class="table-active p-0"></th>
                        </tr>
                    </tfoot>
                </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="#financialCharityReportTable">
                    <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="payment_method" id="ajaxSelectPaymentMethodForCharities" :title="__('global.payment_method')" :data-array="$payment_methods" :name-fn='fn($payment_method) => __("global.payment_methods.$payment_method")' container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select class="ajaxSelectMalls" id="ajaxSelectMallsForCharities" name="mall" :required="false" container-classes='col-lg-3 col-12' :with-all="true" />
                            <x-dashboard.form.select class="ajaxSelectBranches" id="ajaxSelectBranchesForCharities" name="branch" :required="false" container-classes='col-lg-3 col-12' :with-all="true" />
                            <x-dashboard.form.select class="ajaxSelectStores" id="ajaxSelectStoresForCharities" name="charity" data-type="charities" :required="false" container-classes='col-lg-3 col-12' :with-all="true" />
                            <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="financialCharityReportTable" class="table table-striped table-bordered dt">
                    <thead>
                        <tr>
                            <th>@lang('global.order_number') </th>
                            <th>@lang('validation.attributes.created_at') </th>
                            <th>@lang('global.order_status') </th>
                            <th>@lang('global.payment_method') </th>
                            <th>@lang('global.mall') </th>
                            <th>@lang('global.mall_branch') </th>
                            <th>@lang('global.charity') </th>
                            <th>@lang('validation.attributes.branch') </th>
                            <th>@lang('global.products_price_excluding_tax')</th>
                            <th>@lang('global.products_price_tax')</th>
                            <th>@lang('global.products_price')</th>
                            <th>@lang('global.store_coupon_discount')</th>
                            <th>@lang('global.platform_coupon_discount')</th>
                            <th>@lang('global.total_price_2')</th>
                            <th>@lang('global.amount_paid_by_customer')</th>
                            <th>@lang('global.e_payment_fees_excluding_tax')</th>
                            <th>@lang('global.e_payment_fees_tax_2')</th>
                            <th>@lang('global.e_payment_fees_2')</th>
                            <th>@lang('global.platform_net_revenue')</th>
                            <th>@lang('global.actions') </th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th colspan="8" class="table-active p-0"></th>

                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.products_price_excluding_tax')</p>
                                <p class="products_price_excluding_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.products_price_tax')</p>
                                <p class="products_price_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.products_price')</p>
                                <p class="products_price" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.store_coupon_discount')</p>
                                <p class="store_coupon_discount" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.platform_coupon_discount')</p>
                                <p class="platform_coupon_discount" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.total_price_2')</p>
                                <p class="total_price" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>

                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.amount_paid_by_customer')</p>
                                <p class="amount_paid_by_customer" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.e_payment_fees_excluding_tax')</p>
                                <p class="e_payment_fees_excluding_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.e_payment_fees_tax_2')</p>
                                <p class="e_payment_fees_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.e_payment_fees_2')</p>
                                <p class="e_payment_fees" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>

                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.platform_net_revenue')</p>
                                <p class="platform_net_revenue" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>

                            <th colspan="1" class="table-active p-0"></th>
                        </tr>
                    </tfoot>
                </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="#financialSpaReportTable">
                    <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-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select name="payment_method" id="ajaxSelectPaymentMethodForSpas" :title="__('global.payment_method')" :data-array="$payment_methods" :name-fn='fn($payment_method) => __("global.payment_methods.$payment_method")' container-classes='col-lg-3 col-12' :with-all="true" :required="false" :ajax="false" />
                            <x-dashboard.form.select class="ajaxSelectMalls" id="ajaxSelectMallsForSpas" name="mall" :required="false" container-classes='col-lg-3 col-12' :with-all="true" />
                            <x-dashboard.form.select class="ajaxSelectBranches" id="ajaxSelectBranchesForSpas" name="branch" :required="false" container-classes='col-lg-3 col-12' :with-all="true" />
                            <x-dashboard.form.select class="ajaxSelectStores" id="ajaxSelectStoresForSpas" name="spa" data-type="spas" :required="false" container-classes='col-lg-3 col-12' :with-all="true" />
                            <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="financialSpaReportTable" class="table table-striped table-bordered dt">
                    <thead>
                        <tr>
                            <th>@lang('global.reservation_number') </th>
                            <th>@lang('validation.attributes.created_at') </th>
                            <th>@lang('global.reservation_status') </th>
                            <th>@lang('global.payment_method') </th>
                            <th>@lang('global.mall') </th>
                            <th>@lang('global.mall_branch') </th>
                            <th>@lang('global.spa') </th>
                            <th>@lang('validation.attributes.branch') </th>
                            <th>@lang('global.products_price_excluding_tax')</th>
                            <th>@lang('global.products_price_tax')</th>
                            <th>@lang('global.products_price')</th>
                            <th>@lang('global.store_coupon_discount')</th>
                            <th>@lang('global.platform_coupon_discount')</th>
                            <th>@lang('global.total_price_2')</th>
                            <th>@lang('global.amount_paid_by_customer')</th>
                            <th>@lang('global.e_payment_fees_excluding_tax')</th>
                            <th>@lang('global.e_payment_fees_tax_2')</th>
                            <th>@lang('global.e_payment_fees_2')</th>
                            <th>@lang('global.platform_net_revenue')</th>
                            <th>@lang('global.actions') </th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th colspan="8" class="table-active p-0"></th>

                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.products_price_excluding_tax')</p>
                                <p class="products_price_excluding_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.products_price_tax')</p>
                                <p class="products_price_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.products_price')</p>
                                <p class="products_price" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.store_coupon_discount')</p>
                                <p class="store_coupon_discount" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.platform_coupon_discount')</p>
                                <p class="platform_coupon_discount" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.total_price_2')</p>
                                <p class="total_price" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
            
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.amount_paid_by_customer')</p>
                                <p class="amount_paid_by_customer" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.e_payment_fees_excluding_tax')</p>
                                <p class="e_payment_fees_excluding_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.e_payment_fees_tax_2')</p>
                                <p class="e_payment_fees_tax" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>
                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.e_payment_fees_2')</p>
                                <p class="e_payment_fees" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>

                            <th class="p-0">
                                <p class="title" style="border-bottom:1px solid #dee2e6;padding:0.5rem;margin-bottom:0;">@lang('global.platform_net_revenue')</p>
                                <p class="platform_net_revenue" style="padding:0.5rem;margin-bottom:0"></p>
                            </th>

                            <th colspan="1" class="table-active p-0"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

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