@extends('layouts.app')

@section('content')
<h2 class="text-center">Nuevo Evento</h2>
<div class="container">
    <div class="form-inline">
        <div class="row">
            <div class="form-group">
                <label for="vehiclesearch">Vehiculo</label>
                <input type="vehiclesearch" class="form-control" id="vehiclesearch">
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-sm-4">
                <label for="brand">Marca</label>
                <input type="text" class="form-control" id="brand">
                <input type="hidden" class="form-control" id="vehicleid">
            </div>
            <div class="col-sm-4">
                <label for="year">Año</label>
                <input type="text" class="form-control" id="year">
            </div>
            <div class="col-sm-4">
                <label for="plate">Placa</label>
                <input type="text" class="form-control" id="plate">
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="col-sm-4">
                <label for="model">Modelo</label>
                <input type="text" class="form-control" id="model" name="model">
            </div>
            <div class="col-sm-4">
                <label for="km">Kilometraje</label>
                <input type="text" class="form-control" id="km" name="km">
            </div>
            <div class="col-sm-4">
                <input type="hidden" class="form-control" id="gas">
                <div id="fuel-gauge"></div>
                <br/>
                <div class="col-sm-6" id="fuel-gauge-control"></div>
                
            </div>

        </div>
        <br/>
        <div class="row">
            <div class="col-sm-4">
                <label for="model">Area</label>
                <span class="textinfo" id="area" id="area"><span>
            </div>
            <div class="col-sm-4">
                <label for="km">Departamento</label>
                <span class="textinfo" name="department" id="department"><span>
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="col-sm-12">
                <label for="model">Tipo Servicio</label>
                <select type="servicio" class="form-control" id="servicio">
                    <option value="0">Seleccionar</option>
                    <option value="1">Mantenimiento</option>
                    <option value="2">Servicio</option>
                    <option value="3">Garantia</option>
                </select>
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="col-sm-12">
                <label for="comments">Descripcion</label>
                <textarea class="form-control" cols="100" rows="5" id="description" name="description">
                </textarea>
            </div>
            <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
        </div>
        <br/>
            <fieldset>
            <legend>Agregar Conceptos</legend>
                <div class="row form-inline">
                    <div class="form-group col-sm-2">
                        <label for="concepto">Concepto</label>
                        <input type="concepto" class="form-control" id="concepto">
                    </div>
                    <div class="form-group col-sm-2">
                        <label for="cantidad">Cantidad</label>
                        <input type="cantidad" class="form-control" id="cantidad">
                    </div>
                    <div class="form-group col-sm-2">
                        <label for="precio">Precio</label>
                        <input type="precio" class="form-control" id="precio">
                    </div>
                    <div class="form-group col-sm-2">
                        <label for="precio">Proveedor</label>
                        <input type="supplier" class="form-control" id="supplier">
                    </div>
                    <div class="form-group col-sm-2">
                        <label for="invoice">Num Factura</label>
                        <input type="invoice" class="form-control" id="invoice">
                    </div>
                    <div class="form-group col-sm-2">
                        <label for="paymenttype">tipo Pago</label>
                        <select class="form-control" name="paymenttype" id="paymenttype">
                        <option value="0" >Seleccionar</option>
                        <option value="1">Contado</option>
                        <option value="2">Credito</option>
                        </select>
                    </div>
                    <button class="btn btn-default" id="btnaddConcept">Agregar</button>
                </div>
                <br/>
                <div class="row">
                    <div class="col-sm-8">
                        <table class="table" id="tbl_conceptos">
                            <thead>
                                <tr>
                                    <td style="display: none">Id</td>
                                    <td>Concepto</td>
                                    <td>Cantidad</td>
                                    <td>Costo</td>
                                    <td>Proveedor</td>
                                    <td>Num factura</td>
                                    <td>Condiciones Pago</td>
                                    <td>Borrar</td>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <br/>
                <button class="btn btn-success" id="btnNewEvent">Grabar</button>

            </fieldset>    
          
    </div>
</div>
@stop
@push('scripts')
<script>
var tblConcept;
$( 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;
             
            $("#brand").val(vehicleData.brand);
            $("#model").val(vehicleData.model);
            $("#year").val(vehicleData.year);
            $("#plate").val(vehicleData.plate);
            $("#vehicleid").val(vehicleData.id);
            $("#department").html(vehicleData.Department);
            $("#area").html(vehicleData.Area);
            //$('#customer option[value=' + names.id + ']').attr('selected', true)
            //getClientAddress(names[0]);
           // getIitta(names.id)
           // $(this).val(''); return false;
            
        }		      	
    });

    $myFuelGauge = $("div#fuel-gauge").dynameter({
        width: 200,
        label: 'Gasolina',
        value: 0,
        min: 0.0,
        max: 100.0,
        unit: 'litros',
        regions: { // Value-keys and color-refs
        0: 'error',
        5: 'warn',
        10: 'normal'
        }
    });

    $('div#fuel-gauge-control').slider({
        min: 0.0,
        max: 100.0,
        value: 10,
        step: .1,
        slide: function (evt, ui) {
        $myFuelGauge.changeValue((ui.value).toFixed(1));
            $("#gas").val(ui.value);
        }
    });
    $("#concepto").autocomplete({
		    delay: 1000,
        source: function( request, response ) {
            $.ajax({
                url : "{{ route('searchconcept') }}",
                dataType: "json",
                type: "GET",
                data: {
                    searchdata: request.term,
                    ComboBox: 'getSearch',
                },
                success: function( data ) {
                    if(!data.length){
                            var result = [
                                {
                                    label: response.term, 
                                    value: response.term
                                }
                            ];
                            response(result);
                    }
                    else
                    {  
                        response( $.map( data, function( item ) {
                    
                            
                                return {
                                    label: item.name,
                                    value: item.name,
                                    data : item
                                }
                            
                        }));
                    }
                }
            });
        },
        messages: {
            noResults: '',
            results: function() {}
        },
        autoFocus: true,	      	
        minLength: 2,
        select: function( event, ui ) {
            var vehicleData = ui.item.data;
             
           
            //$('#customer option[value=' + names.id + ']').attr('selected', true)
            //getClientAddress(names[0]);
           // getIitta(names.id)
           // $(this).val(''); return false;
            
        }		      	
    });

    $("#supplier").autocomplete({
		    delay: 1000,
        source: function( request, response ) {
            $.ajax({
                url : "{{ route('searchsupplier') }}",
                dataType: "json",
                type: "GET",
                data: {
                    searchdata: request.term,
                    ComboBox: 'getSearch',
                },
                success: function( data ) {
                    if(!data.length){
                            var result = [
                                {
                                    label: response.term, 
                                    value: response.term
                                }
                            ];
                            response(result);
                    }
                    else
                    {  
                        response( $.map( data, function( item ) {
                    
                            
                                return {
                                    label: item.name,
                                    value: item.name,
                                    data : item
                                }
                            
                        }));
                    }
                }
            });
        },
        messages: {
            noResults: '',
            results: function() {}
        },
        autoFocus: true,	      	
        minLength: 2,
        select: function( event, ui ) {
            var vehicleData = ui.item.data;
             
           
            //$('#customer option[value=' + names.id + ']').attr('selected', true)
            //getClientAddress(names[0]);
           // getIitta(names.id)
           // $(this).val(''); return false;
            
        }		      	
    });

    tblConcept =  $('#tbl_conceptos').DataTable({
        language: {
              "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
              },
        dom: 't',
        aoColumnDefs: [
            {
                "targets": [0],
                "visible": false,
                "searchable": false
            }
        ]
    });

    $("#btnaddConcept").on("click", function() {

        var insertar = [
            0,
            $("#concepto").val().toUpperCase(),
            $("#cantidad").val(),
            $("#precio").val(),
            $("#supplier").val(),
            $("#invoice").val(),
            $("#paymenttype").val(),
            "<a href='#' id='btndelete'>Borrar</a>"
        ];

        tblConcept.row.add(insertar).draw( false );

        $("#concepto").val("")
        $("#cantidad").val("")
        $("#precio").val("")
    });


    $('#tbl_conceptos tbody').on( 'click', 'a', function () {
        tblConcept
        .row( $(this).parents('tr') )
        .remove()
        .draw();
    } );

    $("#btnNewEvent").on('click', function() {
        var conceptos = tblConcept.rows().data();
        var allconcepts = [];
        var counter = 0;
        $.each(conceptos, function(index,value) {
            allconcepts[counter] = new Array();
            allconcepts[counter][0] = value[1];
            allconcepts[counter][1] = value[2];
            allconcepts[counter][2] = value[3];
            allconcepts[counter][3] = value[4];
            allconcepts[counter][4] = value[5];
            allconcepts[counter][5] = value[6];
            counter++;	
        })
        var dtn = { _token: $("#_token").val(), vehicleId: $("#vehicleid").val(), km: $("#km").val(), 
            gas: $("#gas").val(), service: $("#servicio").val(),description: $("#description").val(),concepts: JSON.stringify(allconcepts) };
        
        $.ajax({
            type: 'POST',
            url: "{{ route('event.store') }}", // call your php file
            data: dtn,
            cache: false,
            success: function(data){
               // var info = JSON.parse(data);
                window.location.href = "{{ route('events') }}";
            },
            error: function(xhr, ajaxOptions, thrownError) {
              alert(xhr.responseText)
            }
        });
    })
});

</script>
@endpush