@extends('branch.layouts.index')

@section('content')
    <ul class="nav nav-tabs">
        <li class="nav-item"><a class="nav-link {{ current_tab('#customer_details') }}" data-toggle="tab" href="#customer_details">@lang('global.customer_details')</a></li>
        <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('#customer_details') }}" id="customer_details" role="tabpanel">
            <div class="container-fluid">
                <div class="row justify-content-center">
                    @if ($user->name)
                        <div class="col-lg-4 col-sm-6">
                            <div class="card card-icon mb-4 shadow">
                                <div class="card-body text-center"><i class="i-Men"></i>
                                    <p class="text-muted mt-2 mb-2">@lang('validation.attributes.name')</p>
                                    <p class="line-height-1 text-title text-18 mt-2 mb-0">{{ $user->name }}</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($user->first_name)
                        <div class="col-lg-4 col-sm-6">
                            <div class="card card-icon mb-4 shadow">
                                <div class="card-body text-center"><i class="i-Men"></i>
                                    <p class="text-muted mt-2 mb-2">@lang('validation.attributes.first_name')</p>
                                    <p class="line-height-1 text-title text-18 mt-2 mb-0">{{ $user->first_name }}</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($user->last_name)
                        <div class="col-lg-4 col-sm-6">
                            <div class="card card-icon mb-4 shadow">
                                <div class="card-body text-center"><i class="i-Men"></i>
                                    <p class="text-muted mt-2 mb-2">@lang('validation.attributes.last_name')</p>
                                    <p class="line-height-1 text-title text-18 mt-2 mb-0">{{ $user->last_name }}</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($user->phone)
                        <div class="col-lg-4 col-sm-6">
                            <div class="card card-icon mb-4 shadow">
                                <div class="card-body text-center"><i class="i-Phone-2"></i>
                                    <p class="text-muted mt-2 mb-2">@lang('validation.attributes.phone')</p>
                                    <p class="line-height-1 text-title text-18 mt-2 mb-0 ltr">{{ $user->phone }}</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($user->email)
                        <div class="col-lg-4 col-sm-6">
                            <div class="card card-icon mb-4 shadow">
                                <div class="card-body text-center"><i class="i-Envelope-2"></i>
                                    <p class="text-muted mt-2 mb-2">@lang('validation.attributes.email')</p>
                                    <p class="line-height-1 text-title text-18 mt-2 mb-0 ltr">{{ $user->email }}</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($user->birthdate)
                        <div class="col-lg-4 col-sm-6">
                            <div class="card card-icon mb-4 shadow">
                                <div class="card-body text-center"><i class="i-Calendar-4"></i>
                                    <p class="text-muted mt-2 mb-2">@lang('validation.attributes.birthdate')</p>
                                    <p class="line-height-1 text-title text-18 mt-2 mb-0">{{ $user->birthdate }}</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($user->passport_number)
                        <div class="col-lg-4 col-sm-6">
                            <div class="card card-icon mb-4 shadow">
                                <div class="card-body text-center"><i class="i-Identification-Badge"></i>
                                    <p class="text-muted mt-2 mb-2">@lang('validation.attributes.passport_number')</p>
                                    <p class="line-height-1 text-title text-18 mt-2 mb-0">{{ $user->passport_number }}</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($user->passport_country)
                        <div class="col-lg-4 col-sm-6">
                            <div class="card card-icon mb-4 shadow">
                                <div class="card-body text-center"><i class="i-Globe"></i>
                                    <p class="text-muted mt-2 mb-2">@lang('validation.attributes.passport_country')</p>
                                    <p class="line-height-1 text-title text-18 mt-2 mb-0">@lang("countries.{$user->passport_country}")</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($user->residence_country)
                        <div class="col-lg-4 col-sm-6">
                            <div class="card card-icon mb-4 shadow">
                                <div class="card-body text-center"><i class="i-Globe"></i>
                                    <p class="text-muted mt-2 mb-2">@lang('validation.attributes.residence_country')</p>
                                    <p class="line-height-1 text-title text-18 mt-2 mb-0">@lang("countries.{$user->residence_country}")</p>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="tab-pane fade {{ current_tab('#visits') }}" id="visits" role="tabpanel">
            <h4 class="card-title mb-3">
                <div class="filter-container h6" data-table="#userVisitsTable">
                    <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" :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" :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" :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" :title="__('global.between_two_dates')" class="flatpickrTwoDatesMaxToday" container-classes='col-lg-3 col-12' :required="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="userVisitsTable" 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>
                            <th>@lang('validation.attributes.created_at') </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.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.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.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.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