@extends('layouts.app')

@section('content')
<div class="container">
    <fieldset>
        <legend>Revisar Historia de Vehiculos</legend>
        <div class="row">
            <div class="form-inline">
                <div class="col-sm-5 form-group">
                    <label for="vehiclesearch">Vehiculo</label>
                    <input type="vehiclesearch" class="form-control" id="vehiclesearch">
                    <button class="btn btn-success" id="searchHistory" name="searchHistory">Ver Bitacora</button>
                    <input type="hidden" value="0" id="vehicleId" name="vehicleId">
                </div>
                <div class="col-sm-3 form-group">
                    <a href="{{ action('VehicleController@create') }}" class="btn btn-success" id="btnNewVehicle" name="btnNewVehicle">Agregar Vehiculo</a>
                </div>
               
            </div>
        </div>
    </fieldset>
    <br />
    <br />
    <div class="row">
        <div class="col-sm-6">
            <center>
                {!! $chart->html() !!}
            </center>
        </div>
        <div class="col-sm-6">
            <center>
                {!! $pie->html() !!}
            </center>
        </div>
    </div>
</div>
@stop
{!! Charts::scripts() !!}
{!! $chart->script() !!}
{!! $pie->script() !!}
@push('scripts')
<script>
$( document ).ready(function() {
    $("#vehiclesearch").autocomplete({
		    delay: 1000,
        source: function( request, response ) {
            $.ajax({
                url : "{{ route('searchvehicle') }}",
                dataType: "json",
                type: "GET",
                data: {
                    searchdata: request.term,
                    ComboBox: 'getSearch',
                },
                success: function( data ) {
                    response( $.map( data, function( item ) {
                    console.log(item.resultado);
                            return {
                                label: item.vehicle+"-"+item.brand+" "+item.model+"-"+item.plate,
                                value: item.vehicle,
                                data : item
                            }
                    }));
                }
            });
        },
        messages: {
            noResults: '',
            results: function() {}
        },
        autoFocus: true,	      	
        minLength: 2,
        select: function( event, ui ) {
            var vehicleData = ui.item.data;
             
            $("#vehicleId").val(vehicleData.id);
 
           // $(this).val(''); return false;
            
        }		      	
    });

    $("#searchHistory").on('click', function() {
        var vehicleId = $("#vehicleId").val();
        var url = '{{ action("VehicleController@showeventvehicle",":id") }}'
        url = url.replace(':id', 'vehicle='+vehicleId );
        window.location.replace(url);
    })

    
});

</script>
@endpush