@extends('admin.layouts.index')

@section('content')
    {{-- Reuse the orders tabs and shared filter/table components. --}}
    @php
        $sections = ['restaurant' => ['restaurants', 'restaurant_title'], 'store' => ['stores', 'store_title'], 'charity' => ['charities', 'charity_title'], 'spa' => ['spas', 'spa_title']];
    @endphp
    <ul class="nav nav-tabs">
        @foreach ($sections as $section => [$tab, $title])
            <li class="nav-item"><a class="nav-link {{ current_tab('#'.$tab) }}" data-toggle="tab" href="#{{ $tab }}">@lang('global.'.$tab)</a></li>
        @endforeach
    </ul>

    <div class="tab-content">
        @foreach ($sections as $section => [$tab, $title])
            <div class="tab-pane fade {{ current_tab('#'.$tab) }}" id="{{ $tab }}" role="tabpanel">
                <h4 class="card-title mb-3">
                    <div class="filter-container h6" data-table="#{{ $section }}DirectoryTable">
                        <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 class="ajaxSelectMalls" :id="$section.'DirectoryMall'" name="mall" :required="false" container-classes="col-lg-3 col-12" :with-all="true" />
                                <x-dashboard.form.select class="ajaxSelectBranches" :id="$section.'DirectoryBranch'" name="branch" :title="__('global.mall_branch')" :required="false" container-classes="col-lg-3 col-12" :with-all="true" />
                                @if (in_array($section, ['restaurant', 'store']))
                                    <x-dashboard.form.select name="is_subscribed" class="directorySubscription" :id="$section.'DirectorySubscription'" :title="__('directory.subscription')" :boolean="true" :name-fn="fn ($item) => __('global.'.($item === 'yes' ? 'subscribed' : 'unsubscribed'))" :required="false" :with-all="true" container-classes="col-lg-3 col-12" />
                                    <x-dashboard.form.select name="subscription_type" class="directorySubscriptionType" :id="$section.'DirectorySubscriptionType'" :title="__('validation.attributes.subscription_type')" :data-array="['main', 'price_difference', 'direct_payment']" :name-fn="fn ($type) => __('global.subscription_types.'.$type)" :ajax="false" :required="false" :with-all="true" container-classes="col-lg-3 col-12 d-none" />
                                @endif
                                <x-dashboard.form.select name="is_active" :id="$section.'DirectoryActive'" :title="__('directory.status')" :boolean="true" :name-fn="fn ($item) => __('directory.'.($item === 'yes' ? 'active' : 'inactive'))" :required="false" :with-all="true" container-classes="col-lg-3 col-12" />
                                <x-dashboard.form.input name="dateRange" :id="$section.'DirectoryDates'" :title="__('directory.created_dates')" class="directoryCreatedDates" :required="false" container-classes="col-lg-3 col-12" />
                                <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="{{ $section }}DirectoryTable" class="table table-striped table-bordered dt">
                        <thead><tr>
                            <th>@lang('global.'.$title)</th>
                            <th>@lang('global.mall')</th>
                            <th>@lang('global.mall_branch')</th>
                            <th>@lang('directory.branches_count')</th>
                            <th>@lang('directory.subscription')</th>
                            <th>@lang('validation.attributes.created_at')</th>
                            <th>@lang('directory.status')</th>
                        </tr></thead>
                    </table>
                </div>
            </div>
        @endforeach
    </div>
@endsection