@extends('dashboard.layout.layout')

@section('content')
<div id="user-profile">
    <div class="row">
        <div class="col-12">
            <div class="profile-header mb-2 border-info rounded">
                <div class="relative">
                    <div class="cover-container">
                        <img class="img-fluid bg-cover rounded-top w-100" src="{{ asset('dashboardAssets') }}/images/banner/banner-9.jpg" alt="{{ $client->fullname }}" style="height:300px; width:100%;">
                    </div>
                    <div class="profile-img-container d-flex align-items-center justify-content-between">
                        <div class="avatar">
                            <img src="{{ $client->avatar }}" class="rounded-circle img-border box-shadow-1" alt="{{ $client->fullname }}">
                            <span class="avatar-status-busy avatar-status-lg" id="online_{{ $client->id }}"></span>
                        </div>
                        <div class="float-right">
                            <a href="{{ route('dashboard.client.edit',$client->id) }}" class="btn btn-icon btn-icon rounded-circle btn-primary mr-1">
                                <i class="feather icon-edit-2"></i>
                            </a>
                            <a href="javascript::void(0)" class="btn btn-icon btn-icon rounded-circle btn-danger" onclick="notify('{{ $client->id }}','{{ route('dashboard.notification.store') }}','client')">
                                <i class="feather icon-bell"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-end align-items-center profile-header-nav rounded-bottom">
                    <nav class="navbar navbar-expand-sm w-100 pr-5 mr-5">
                        <button class="navbar-toggler pr-0" type="button" data-toggle="collapse" data-target="navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"><i class="feather icon-align-justify"></i></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="nav navbar-nav d-flex justify-content-start w-100" style="margin-right:15%;" role="tablist">
                                <li class="nav-item px-sm-0">
                                    <a href="#profile" data-toggle="tab" id="profile-tab" aria-controls="profile" class="nav-link font-small-3 active" aria-selected="true">
                                        <i class="feather icon-user font-small-3"></i>
                                        {!! trans('dashboard.user.profile') !!}
                                    </a>

                                </li>

                                <li class="nav-item px-sm-0">
                                    <a href="#orders" data-toggle="tab" id="orders-tab" aria-controls="orders" class="nav-link font-small-3" aria-selected="false">
                                        <i class="feather icon-briefcase font-small-3"></i>
                                        {!! trans('dashboard.order.orders') !!}
                                        <span class="badge badge-pill badge-danger font-small-2 badge-sm">{{ $orders->count() }}</span>
                                    </a>
                                </li>
                                <li class="nav-item px-sm-0">
                                    <a href="#reservation" data-toggle="tab" id="reservation-tab" aria-controls="reservation" class="nav-link font-small-3" aria-selected="false">
                                        <i class="feather icon-calendar font-small-3"></i>
                                        {!! trans('dashboard.reservation.reservations') !!}
                                        <span class="badge badge-pill badge-danger font-small-2 badge-sm">{{ $reservations->count() }}</span>

                                    </a>
                                </li>

                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <section id="profile-info" class="row">
        <!-- Basic datatable -->
        <div class="col-md-12">
            <div class="card border-info">

                <div class="card-body">
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane fade show active" id="profile" aria-labelledby="profile-tab">
                            <div class="card">
                                <div class="card-body">
                                    <div class="form-group row">
                                        <label class="col-form-label col-lg-2">{{ trans('dashboard.user.fullname') }}</label>
                                        <div class="col-md-10 position-relative has-icon-left">
                                            <input type="text" value="{{ $client->fullname }}" class="form-control" readonly>
                                            <div class="form-control-position">
                                                <i class="feather icon-user"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-form-label col-lg-2">{{ trans('dashboard.general.phone') }}</label>
                                        <div class="col-md-10 position-relative has-icon-left">
                                            <input type="text" value="{{ $client->phone }}" class="form-control" readonly>
                                            <div class="form-control-position">
                                                <i class="feather icon-phone"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-form-label col-lg-2">{{ trans('dashboard.general.email') }}</label>
                                        <div class="col-md-10 position-relative has-icon-left">
                                            <input type="text" value="{{ $client->email }}" class="form-control" readonly>
                                            <div class="form-control-position">
                                                <i class="feather icon-mail"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-form-label col-lg-2">{{ trans('dashboard.general.added_date') }}</label>
                                        <div class="col-md-4 position-relative has-icon-left">
                                            <input type="text" value="{{ $client->created_at->format("Y-m-d") }}" class="form-control" readonly>
                                            <div class="form-control-position">
                                                <i class="feather icon-calendar"></i>
                                            </div>
                                        </div>
                                        <label class="col-form-label col-lg-2">{{ trans('dashboard.general.added_time') }}</label>
                                        <div class="col-md-4 position-relative has-icon-left">
                                            <input type="text" value="{{ $client->created_at->format("h:i A") }}" class="form-control" readonly>
                                            <div class="form-control-position">
                                                <i class="feather icon-clock"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-form-label col-lg-2">{{ trans('dashboard.country.country') }}</label>
                                        <div class="col-md-4 position-relative has-icon-left">
                                            <input type="text" value="{{ $client->country_name }}" class="form-control" readonly>
                                            <div class="form-control-position">
                                                <i class="feather icon-flag"></i>
                                            </div>
                                        </div>
                                        <label class="col-form-label col-lg-2">{{ trans('dashboard.city.city') }}</label>
                                        <div class="col-md-4 position-relative has-icon-left">
                                            <input type="text" value="{{ $client->city_name }}" class="form-control" readonly>
                                            <div class="form-control-position">
                                                <i class="feather icon-flag"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-form-label col-lg-2">{!! trans('dashboard.user.active_state') !!}</label>
                                        <div class="col-md-4 position-relative has-icon-left">
                                            <input type="text" value="{!! $client->is_admin_active_user ? trans('dashboard.user.active') : trans('dashboard.user.not_active') !!}" class="form-control" readonly>
                                            <div class="form-control-position">
                                                <i class="feather icon-log-in"></i>
                                            </div>
                                        </div>
                                        <label class="col-form-label col-lg-2">{!! trans('dashboard.user.ban_state') !!}</label>
                                        <div class="col-md-4 position-relative has-icon-left">
                                            <input type="text" value="{!! $client->is_ban ? trans('dashboard.user.ban') : trans('dashboard.user.not_ban') !!}" class="form-control" readonly>
                                            <div class="form-control-position">
                                                <i class="feather icon-slash"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-form-label col-lg-2">{!! trans('dashboard.user.ban_reason') !!}</label>
                                        <div class="col-md-10">
                                            {!! Form::textarea("", $client->is_ban ? $client->ban_reason : null, ['class' => 'form-control','readonly']) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="tab-pane fade " id="orders" aria-labelledby="orders-tab">
                            <div class="card border-info">
                                <div class="card-body">
                                    <div class="d-flex justify-content-center">
                                        {!! $orders->links() !!}
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-bordered dataex-html5-selectors">
                                            <thead>
                                                <tr class="text-center">
                                                    <th>#</th>
                                                    <th>{!! trans('dashboard.order.order_number') !!}</th>
                                                    <th>{!! trans('dashboard.driver.driver') !!}</th>
                                                    <th>{!! trans('dashboard.branch.branch') !!}</th>
                                                    <th>{!! trans('dashboard.order.order_status') !!}</th>
                                                    <th>{!! trans('dashboard.general.added_date') !!}</th>
                                                    <th><i class="feather icon-zap"></i></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($orders as $order)
                                                <tr class="{{ $order->id }} text-center">
                                                    <td>{{ $loop->iteration }}</td>
                                                    <td>{{ $order->id }}</td>
                                                    <td>{{ optional($order->driver)->fullname }}</td>
                                                    <td>{{ $order->branch->name }}</td>
                                                    <td>{{ trans('dashboard.order.statuses.'.$order->order_status) }}</td>
                                                    <td>
                                                        <div class="badge badge-violet badge-md mr-1 mb-1">{{ $order->created_at->format("Y-m-d") }}</div>
                                                    </td>
                                                    <td class="text-center font-medium-1">
                                                        <a href="{!! route('dashboard.order.show',$order->id) !!}" class="text-primary mr-2 font-medium-3">
                                                            <i class="feather icon-monitor" title="{!! trans('dashboard.general.show') !!}"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="d-flex justify-content-center">
                                        {!! $orders->links() !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade " id="reservation" aria-labelledby="reservation-tab">
                            <div class="card border-info">
                                <div class="card-body">
                                    <div class="d-flex justify-content-center">
                                        {!! $reservations->links() !!}
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-bordered dataex-html5-selectors">
                                            <thead>
                                                <tr class="text-center">
                                                    <th>#</th>
                                                    <th>{!! trans('dashboard.reservation.reservation_number') !!}</th>
                                                    <th>{!! trans('dashboard.branch.branch') !!}</th>
                                                    <th>{!! trans('dashboard.coffe_table.table_number') !!}</th>
                                                    <th>{!! trans('dashboard.reservation.reservation_status') !!}</th>
                                                    <th>{!! trans('dashboard.general.added_date') !!}</th>
                                                    <th><i class="feather icon-zap"></i></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($reservations as $reservation)
                                                <tr class="{{ $reservation->id }} text-center">
                                                    <td>{{ $loop->iteration }}</td>
                                                    <td>{{ $reservation->id }}</td>
                                                    <td>{{ $reservation->branch->name }}</td>
                                                    <td>{{ @$reservation->coffeTable->table_number }}</td>
                                                    <td>{{ trans('dashboard.reservation.statuses.'.$reservation->reservation_status) }}</td>

                                                    <td>
                                                        <div class="badge badge-violet badge-md mr-1 mb-1">{{ $reservation->created_at->format("Y-m-d") }}</div>
                                                    </td>
                                                    <td class="text-center font-medium-1">
                                                        <a href="{!! route('dashboard.reservation.show',$reservation->id) !!}" class="text-primary mr-2 font-medium-3">
                                                            <i class="feather icon-monitor" title="{!! trans('dashboard.general.show') !!}"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="d-flex justify-content-center">
                                        {!! $reservations->links() !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>
@include('dashboard.layout.notify_modal')
@endsection
@section('vendor_styles')

<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/vendors/css/tables/datatable/datatables.min.css">

@endsection
@section('page_styles')
<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/{{ LaravelLocalization::getCurrentLocaleDirection() }}/css/pages/users.css">
<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/{{ LaravelLocalization::getCurrentLocaleDirection() }}/css/pages/data-list-view.css">
<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/{{ LaravelLocalization::getCurrentLocaleDirection() }}/css/pages/knowledge-base.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
@endsection
@section('vendor_scripts')
<script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/pdfmake.min.js"></script>
<script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/vfs_fonts.js"></script>
<script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/datatables.min.js"></script>
<script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
<script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/buttons.html5.min.js"></script>
<script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/buttons.print.min.js"></script>
<script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/buttons.bootstrap.min.js"></script>
<script src="{{ asset('dashboardAssets') }}/vendors/js/tables/datatable/datatables.bootstrap4.min.js"></script>

@endsection
@section('page_scripts')
<script src="{{ asset('dashboardAssets') }}/js/scripts/pages/user-profile.js"></script>
<script src="{{ asset('dashboardAssets') }}/js/scripts/datatables/datatable.js"></script>
<script src="{{ asset('dashboardAssets') }}/js/scripts/navs/navs.js"></script>
<script src="{{ asset('dashboardAssets') }}/js/scripts/pages/faq-kb.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
@endsection