@extends('layout')

@section('css_includes')
    <style>
        #map {
            width: 100%;
            height: 400px;
            background-color: grey;
        }
    </style>
@endsection

@section('content')
    <div class="page-title">
        <div class="title_left">
            <h3>
                Vehicle
                <small>
                    Display
                </small>
            </h3>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="x_panel">
                <div class="x_content">
                    <form id="create" data-parsley-validate class="form-horizontal form-label-left">
                        @csrf
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Name <span class="required">*</span>
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" id="name" name="name" value="{{ $vehicle->name }}" disabled required="required" class="form-control col-md-7 col-xs-12">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="make">Make <span class="required">*</span>
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" id="make" name="make" value="{{ $vehicle->make }}" disabled required="required" class="form-control col-md-7 col-xs-12">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="model">Model <span class="required">*</span>
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" id="model" name="model" value="{{ $vehicle->model }}" disabled class="form-control col-md-7 col-xs-12">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="capacity">Capacity <span class="required">*</span>
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" id="capacity" name="capacity" value="{{ $vehicle->capacity }}" disabled class="form-control col-md-7 col-xs-12">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="number_plate">Number Plate <span class="required">*</span>
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" id="number_plate" name="number_plate" value="{{ $vehicle->number_plate }}" disabled class="form-control col-md-7 col-xs-12">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="owner">Owner <span class="required">*</span>
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" id="owner" name="owner" value="{{ $vehicle->owner_id }}" disabled class="form-control col-md-7 col-xs-12">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="driver">Driver <span class="required">*</span>
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" id="driver" name="driver" value="{{ $vehicle->driver_id }}" disabled class="form-control col-md-7 col-xs-12">
                            </div>
                        </div>
                        <div class="ln_solid"></div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="x_panel">
                <div class="x_content">
                    <div id="map"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js_includes')
    <script>
        // Initialize and add the map
        function initMap() {
            // Current location
            var current = {lat: {{ $vehicle->current_lat }}, lng: {{ $vehicle->current_long }} };
            //var current = {lat: 46.204311, lng: -72.137604 };
            // The map
            var map = new google.maps.Map(
                document.getElementById('map'), {zoom: 4, center: current});
            // The marker, positioned at the current location
            var marker = new google.maps.Marker({position: current, map: map});
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCakDhk3YWotD-Qc4ZxPtO2E5yYGFAYxGI&callback=initMap">
    </script>
@endsection