@extends('dispatch.layout')

@push('dispatch-css')

<style>
    #map{
        height: 250px;
        width: 100%;
        padding: 5px;
    }
    .time-line li {
        list-style-type: none;
    }

    .time-line li svg {
        position: absolute;
        left: 25px;
        background: #fff;
    }

    .time-line li:before {
        content: "";
        position: absolute;
        width: 2px;
        height: 65px;
        background-color: #748194;
        left: 32px;
    }

    .time-line li:nth-child(1) svg {
        color: orange;
    }

    .time-line li:nth-child(1)::before {
        background-color: orange;
    }

    .time-line li:nth-child(2) svg {
        color: Indigo;
    }

    .time-line li:nth-child(2)::before {
        background-color: Indigo;
    }

    .time-line li:nth-child(3) svg {
        color: blue;
    }

    .time-line li:nth-child(3)::before {
        background-color: blue;
    }

    .time-line li:nth-child(4) svg {
        color: green;
    }

    .time-line li:nth-child(4)::before {
        background-color: green;
    }

    .time-line li:nth-child(5) svg {
        color: red;
    }

    .time-line li:nth-child(5)::before {
        background-color: red;
    }

    .left .toggle {
        right: -50px;
        top: 20px;
        transition: 0.6s;
    }

    #fare-details-grid {
        display: grid;
        grid-template-columns: 48% 4% 48%;
    }

    .max-h{
        max-height: 200px;
    }
    .pad{
    padding: 30px;
    }
</style>
@endpush

@section('dispatch-content')
<main class="main">
    <div class="container-fluid">
       
     
        <div id="{{ $userdata->id }}" class="p-3">
         <div class="col-md-12">
             <div class="row">
            <div class="col-md-11">
                
            </div>
             <div class="col-md-1">
                <a href="{{ url('request/detail_view',$req_id) }}">
                <button style="margin-bottom: 5px;" class="btn btn-danger btn-sm pull-right ml-3" type="submit">
                    <i class="mdi mdi-keyboard-backspace mr-2"></i>
                    @lang('view_pages.back')
                </button>
                </a>
        </div>
        </div>
        </div>
            
           <div class="row">
             
                <div class="col card detail-overflow">
                    <div class="row">
                        <div class="col-12 mt-3">
                            <h5 class="bg-secondary p-2 text-white">
                                Customer Details :
                            </h5>
                        </div>
                        <div class="col-6 pad">
                            <p class="mb-1 f-12">
                                Name : <b>{{$userdata->name}}</b>
                            </p><br>
                            <p class="mb-1 f-12">
                                Mobile : <b>{{$userdata->mobile}}</b>
                            </p><br>
                            <p class="mb-1 f-12">
                                Country :
                                    @foreach($countries as $key=>$country)
                                    <b> {{ $userdata->country == $country->id ? $country->name : ''}}</b>
                                @endforeach
                            </p>
                        </div>
                         <div class="col-6 pad">
                            <p class="mb-1 f-12">
                                Email : <b>{{$userdata->email}}</b>
                            </p><br>
                            <p class="mb-1 f-12">
                                Interne opmerking klant: : <b>{{$userdata->interne_opmerking_klant}}</b>
                            </p><br>
                            <p class="mb-1 f-12">
                                Profile :  <img id="blah" src="{{ $userdata->profile_picture }}" alt=" " style="height: 100px;width: 100px;">    
                            </p>
                        </div>
                       
                   
                    </div>
                </div>
            </div>
        </div>
    </div>

</main>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key={{ get_google_map_api_key() }}&libraries=places"></script>

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-database.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-analytics.js"></script>


@endsection

@push('dispatch-js')
<script src="{{ asset('assets/build/js/intlTelInput.js') }}"></script>

<style type="text/css">
.pac-container {
z-index: 10000 !important;
}
</style>
@endpush