@extends('mall.layouts.index')

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

    <div class="tab-content">

        <div class="tab-pane fade {{ current_tab('#visits') }}" id="visits" role="tabpanel">
            <div class="table-responsive">
                <table id="visitsTable" class="table table-striped table-bordered dt">
                    <thead>
                        <tr>
                            <th>@lang('global.entity') </th>
                            <th>@lang('global.device') </th>
                            <th>@lang('global.platform') </th>
                            <th>@lang('global.browser') </th>
                            <th>@lang('global.locale') </th>
                            <th>@lang('global.qr') </th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

        <div class="tab-pane fade {{ current_tab('#orders', '#restaurants', '#stores', '#charities', '#spas') }}" id="orders" role="tabpanel">
            <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">
                    <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>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade {{ current_tab('#stores') }}" id="stores" role="tabpanel">
                    <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>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade {{ current_tab('#charities') }}" id="charities" role="tabpanel">
                    <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>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade {{ current_tab('#spas') }}" id="spas" role="tabpanel">
                    <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>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection