@php $titlePage = $data->username @endphp
@extends('dashboard.layouts.master')
@section('title')
    {{ $titlePage }}
@stop
@section('content')
    <div class="page-content-wrapper drivers">
        <div class="page-content">
            <div class="page-head">
                <div class="page-title">
                    <h1>{{ $titlePage }}</h1>
                </div>
                @permission('delete-drivers')
                <a href="javascript:;" title="{{ __('lang.delete') }}" data-id="{{ route('dashboard.drivers.delete', $data->id) }}" class="red_icon confirmDeleteItem"><i class="icon-trash"></i></a>
                @endpermission

                @permission('update-drivers')
                <a class="blue_icon" title="{{ __('lang.edit') }}" href="{{ route('dashboard.drivers.edit', $data->id) }}"><i class="icon-note"></i></a>
                @endpermission
            </div>
            <ul class="page-breadcrumb breadcrumb">
                <li>
                    <a href="{{ route('dashboard') }}">{{ __('lang.dashboard') }}</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <a href="{{ route('dashboard.drivers') }}">{{ __('lang.drivers') }}</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span class="active">{{ $titlePage }}</span>
                </li>
            </ul>
            <div class="row">
                <div class="col-md-12">
                    {{-- Include Messages Flash --}}
                    @include('includes.flash_msg')
                    <div class="portlet light bordered">
                        <div class="portlet-title tabbable-line">
                            <div class="caption caption-md">
                                <i class="icon-globe theme-font hide"></i>
                                <span class="caption-subject font-blue-madison bold uppercase">تفاصيل السائق</span>
                            </div>
                        </div>
                        <div class="portlet-body form">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="display_elem">
                                        <p>
                                            <strong>{{ __('lang.username') }}:</strong>
                                            {{ $data->username }}
                                        </p>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="display_elem">
                                        <p>
                                            <strong>{{ __('lang.email') }}:</strong>
                                            {{ $data->email }}
                                        </p>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="display_elem">
                                        <p>
                                            <strong>{{ __('lang.phone') }}:</strong>
                                            {{ $data->phone }}
                                        </p>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="display_elem">
                                        <p>
                                            <strong>{{ __('lang.gender') }}:</strong>
                                            {{ __('lang.' . $data->gender) }}
                                        </p>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="display_elem">
                                        <p>
                                            <strong>المنطقة: </strong>
                                            {{ $data->region->title }}
                                        </p>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="display_elem">
                                        <p>
                                            <strong>{{ __('lang.national_id') }}:</strong>
                                            {{ __($data->national_id) }}
                                        </p>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="display_elem">
                                        <p>
                                            <strong>{{ __('lang.national_id_front') }}:</strong>
                                            <a href="{{ asset(__($data->national_id_front)) }}" class="main_color" target="_blank">{{ __('lang.display_file') }}</a>
                                        </p>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="display_elem">
                                        <p>
                                            <strong>{{ __('lang.national_id_back') }}:</strong>
                                            <a href="{{ asset(__($data->national_id_back)) }}" class="main_color" target="_blank">{{ __('lang.display_file') }}</a>
                                        </p>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="display_elem">
                                        <p>
                                            <strong>{{ __('lang.health_certificate') }}:</strong>
                                            <a href="{{ asset(__($data->health_certificate)) }}" class="main_color" target="_blank">{{ __('lang.display_file') }}</a>
                                        </p>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="display_elem preview_images">
                                        <p><strong>{{ __('lang.image') }}:</strong></p>
                                        <a href="{{ asset($data->image) }}" title="{{ __('lang.image') }}">
                                            <img class="storeImg" src="{{ asset($data->image) }}">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @permission('delete-drivers')
    <form id="delete-form" style="display:none;" method="post">@csrf</form>
    @endpermission

    @permission('status-drivers')
    <form id="statusForm" style="display:none;" method="post">@csrf</form>
    @endpermission
@stop
@section('css')
    <link href="{{ asset('admin/assets') }}/css/magnific-popup.css" rel="stylesheet" type="text/css" />
@stop
@section('js')
    <script src="{{ asset('admin/assets') }}/js/jquery.magnific-popup.min.js"></script>
    @include('dashboard.setting.map-key')
    <script>
        "use strict";
        let map;
        let lat = parseFloat('{{ $data->lat }}');
        let lng = parseFloat('{{ $data->lng }}');
        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
                center: {
                    lat: lat,
                    lng: lng
                },
                zoom: 10
            });
            setTimeout(function(){
                if($('#map').find('.dismissButton').length == 1){
                    $('#map').children('div:nth-of-type(2)').remove();
                }
            },1000);
            var marker = new google.maps.Marker({
                position: {
                    lat: lat,
                    lng: lng
                },
                map: map,
            });
        }
        initMap();
    </script>
@stop