@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/parallax-4.jpg" alt="{{ $driver->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="{{ $driver->avatar }}" class="rounded-circle img-border box-shadow-1" alt="{{ $driver->fullname }}">
                            <span class="avatar-status-busy avatar-status-lg" id="online_{{ $driver->id }}"></span>
                        </div>
                        <div class="float-right">
                            <a href="{{ route('dashboard.driver.edit',$driver->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('{{ $driver->id }}','{{ route('dashboard.notification.store') }}','driver')">
                                <i class="feather icon-bell"></i>
                            </a>
                        </div>
                    </div>
                </div>



                <div class="d-flex justify-content-center align-items-center profile-header-nav rounded-bottom">
                    <nav class="navbar navbar-expand-sm w-100 pr-5 mr-5 ml-1">
                        <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="navbar-nav justify-content-right w-75 ml-sm-auto" 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-shopping-cart font-small-3"></i>
                                        {!! trans('dashboard.order.orders') !!}

                                    </a>
                                </li>

                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <section id="profile-info" class="row">
        <!-- Basic datatable -->
        <div class="col-md-9">
            <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-4 position-relative has-icon-left">
                                            <input type="text" value="{{ $driver->fullname }}" class="form-control" readonly>
                                            <div class="form-control-position">
                                                <i class="feather icon-user"></i>
                                            </div>
                                        </div>
                                        <label class="col-form-label col-lg-2">{{ trans('dashboard.general.email') }}</label>
                                        <div class="col-md-4 position-relative has-icon-left">
                                            <input type="text" value="{{ $driver->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.phone') }}</label>
                                        <div class="col-md-4 position-relative has-icon-left">
                                            <input type="text" value="{{ $driver->phone }}" class="form-control" readonly>
                                            <div class="form-control-position">
                                                <i class="feather icon-phone"></i>
                                            </div>
                                        </div>
                                        <label class="col-form-label col-lg-2">{{ trans('dashboard.user.identity_number') }}</label>
                                        <div class="col-md-4 position-relative has-icon-left">
                                            <input type="text" value="{{ $driver->id_number }}" class="form-control" readonly>
                                            <div class="form-control-position">
                                                <i class="feather icon-credit-card"></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="{{ $driver->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="{{ $driver->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="{{ $driver->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="{{ $driver->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="{!! $driver->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="{!! $driver->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.driver.admin_accept_status') !!}</label>
                                        <div class="col-md-10 position-relative has-icon-left">
                                            <input type="text" value="{!! @$driver->driver->is_admin_accept ? trans('dashboard.driver.admin_accept') : trans('dashboard.driver.admin_refuse') !!}" class="form-control" readonly>
                                            <div class="form-control-position">
                                                <i class="feather icon-log-in"></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("", $driver->is_ban ? $driver->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 table-hover-animation">
                                            <thead>
                                                <tr class="text-center">
                                                    <th>#</th>
                                                    <th>{!! trans('dashboard.order.order_number') !!}</th>
                                                    <th>{!! trans('dashboard.client.client') !!}</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->client)->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="product-action text-center font-medium-3">
                                                        <a href="{!! route('dashboard.order.show',$order->id) !!}" class="text-primary mr-2">
                                                            <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>
                </div>
            </div>
        </div>
        <div class="col-md-3">


            <div class="card border-info">
                <div class="card-header">
                    <h4 class="card-title">{!! trans('dashboard.user.rating') !!}</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="list-group analytics-list">
                            <div class="list-group-item d-lg-flex justify-content-between align-items-start py-1">
                                <div class="float-left">
                                    <p class="text-bold-600 font-medium-2 mb-0 mt-25">{{ $driver->user_rate_percentage ? $driver->user_rate_percentage.'%' : '0%' }}</p>
                                    <small>{{ $driver->ratedByOthers->count() }} {{ $driver->ratedByOthers->count() > 1 ? trans('dashboard.user.users_make_rate') : trans('dashboard.user.user_make_rate') }}</small>
                                </div>
                                <div class="float-right">
                                    <div class="ratings">
                                        <div class="empty-stars"></div>
                                        <div class="full-stars" style="width:{{ $driver->user_rate_percentage ? $driver->user_rate_percentage.'%' : '0%' }}"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent comments -->
            <div class="card border-info">
                <div class="card-header bg-transparent header-elements-inline">
                    <span class="card-title font-weight-semibold">{!! trans('dashboard.driver.other_drivers') !!}</span>
                    <div class="header-elements">
                        <div class="list-icons">
                            <a class="list-icons-item" data-action="collapse"></a>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="media-list media-bordered">
                        @forelse ($other_drivers as $other_driver)
                        <div class="media">
                            <a class="media-left" href="{!! route('dashboard.driver.show',$other_driver->id) !!}">
                                <div class="avatar">
                                    <img class="rounded-circle" src="{{ $other_driver->avatar }}" alt="{{ $other_driver->fullname }}" height="40" width="40">
                                    <span class="avatar-status-busy avatar-status-md" id="online_{{ $other_driver->id }}"></span>
                                </div>
                            </a>
                            <div class="media-body text-left font-small-1">
                                <h5 class="media-heading">{{ $other_driver->fullname }}</h5>
                                {{ $other_driver->phone }}
                            </div>

                        </div>

                        @empty
                        <div class="media font-weight-semibold border-0 py-2 justify-content-center">{!! trans('dashboard.driver.no_drivers') !!}</div>
                        @endforelse
                    </div>
                </div>
            </div>
            <!-- /recent comments -->
        </div>
        <!-- /basic datatable -->
    </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">
<link rel="stylesheet" type="text/css" href="{{ asset('dashboardAssets') }}/vendors/css/pickers/pickadate/pickadate.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" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

<link rel="stylesheet" href="{{ asset('dashboardAssets') }}/global/css/custom/custom_rate.css">


<style media="screen">
    .toggle-switch .custom-control-label:before {
        background-color: #666b81 !important;
    }

    .toggle-edit .custom-control-label:before {
        background-color: #666b81 !important;
        height: 24px !important;
        width: 45px !important;
    }

    .toggle-edit .custom-control-label:after {
        height: 20px !important;
        width: 20px !important;
    }

    .toggle-edit .custom-control-label {
        width: 25px !important;
    }
</style>
@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>

<script src="{{ asset('dashboardAssets') }}/vendors/js/pickers/pickadate/picker.js"></script>
<script src="{{ asset('dashboardAssets') }}/vendors/js/pickers/pickadate/picker.date.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="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script>
    $(function() {
        $('.expire_date').pickadate({
            format: 'mm/dd/yyyy'
        });
    });



//Driver Data
function toggleAdminAccept(driver_id) {
    var span_text = $('.span_driver_' + driver_id);
    var accept_btn = $('.accept_btn_' + driver_id);
    var refuse_btn = $('.refuse_btn_' + driver_id);
    $.ajax({
        url: "{{ LaravelLocalization::localizeUrl('dashboard/ajax/enable_driver_data') }}/" + driver_id,
        method: "POST",
        dataType: "json",
        data: {
            _token: '{{ csrf_token() }}',
            is_admin_accept : "1"
        },
        success: function(data) {
            if (data['value'] == 1) {
                toastr.success('{{ trans('dashboard.messages.success_update') }}', '', {
                        "progressBar": true
                    });
            } else {
                toastr.danger('{{ trans('dashboard.messages.success_update') }}', '', {
                        "progressBar": true
                    });
            }
            span_text.text(data.text);
            span_text.removeClass(data.removed_class);
            span_text.addClass(data.text_class);
            // accept_btn.attr('disabled', data.accept_btn);
            // refuse_btn.attr('disabled', data.refuse_btn);
        }
    });
}

    function updateUserWallet(userId) {
        var wallet = $('.user_wallet').val();
        var btn = $('.btn_change_wallet');
        $.ajax({
            url: "{{ LaravelLocalization::localizeUrl('dashboard/ajax/update_user_wallet') }}/" + userId,
            method: "POST",
            dataType: "json",
            global: false,
            data: {
                wallet: wallet,
                _token: "{{ csrf_token() }}"
            },
            beforeSend: function(xhr) {
                btn.html('<div class="spinner-border text-success spinner-border-sm" role="status"><span class="sr-only">Loading...</span></div>');
            },
            success: function(data) {
                if (data['value'] == 1) {
                    btn.html('<i class="feather icon-refresh-cw"></i>');
                    toastr.success(data['message'], '', {
                        "progressBar": true
                    });
                } else {
                    btn.html('<i class="feather icon-refresh-cw"></i>');
                    toastr.danger(data['message'], '', {
                        "progressBar": true
                    });
                }
            }
        }).fail(function(data) {
            btn.html('<i class="feather icon-refresh-cw"></i>');
            $.each(data.responseJSON.errors, function(index, val) {
                toastr.error(val[0], '', {
                    "progressBar": true
                });
            });
        });
    }
</script>
@endsection