@extends('layouts.app')

@section('content')
<h2 class="text-center">Edicion Evento</h2>

<div class="container">
    <div class="form-inline">
        <div class="row">
            <div class="col-sm-4 form-group">
                <label for="vehiclesearch">Vehiculo</label>
                <span class="textinfo">{{ $event[0]->vehicle }}<span>
            </div>
            <div class="col-sm-8 form-group">
                <label for="status">Vehiculo</label>
                <select type="status" class="form-control" id="status">
                    <option value="0">Seleccionar</option>
                    <option value="1">Nuevo</option>
                    <option value="2">En Validacion</option>
                    <option value="3">Aceptada</option>
                    <option value="4">Pago Pendiente</option>
                    <option value="5">Pagado</option>
                    <option value="6">Cerrado</option>
                </select>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-sm-9">
                <div class="row">
                    <div class="col-sm-4">
                        <label for="brand">Marca</label>
                        <span class="textinfo">{{ $event[0]->brand }}<span>
                        <input type="hidden" class="form-control" id="eventid" value="{{ $event[0]->id }}">
                    </div>
                    <div class="col-sm-4">
                        <label for="year">Año</label>
                        <span class="textinfo">{{ $event[0]->year }}<span>
                    </div>
                    <div class="col-sm-4">
                        <label for="plate">Placa</label>
                        <span class="textinfo">{{ $event[0]->plate }}<span>
                    </div>
                </div>
                <br/>
                <div class="row">
                    <div class="col-sm-4">
                        <label for="model">Modelo</label>
                        <span class="textinfo">{{ $event[0]->model }}<span>
                    </div>
                    <div class="col-sm-4">
                        <label for="km">Kilometraje</label>
                        <span class="textinfo">{{ $event[0]->km }}<span>
                    </div>
                    <div class="col-sm-4">
                        <label for="model">Tipo Servicio</label>
                        <span class="textinfo">{{ $event[0]->servicio }}<span>
                    </div>

                </div>
            </div>
            <div class="col-sm-3">
                <div class="row">
                    <div class="col-sm-4">
                        <input type="hidden" class="form-control" id="gas">
                        <div id="fuel-gauge"></div>
                
                    </div>
                </div>
            </div>
        </div>
         <br/>
        <div class="row">
            <div class="col-sm-4">
                <label for="model">Area</label>
                <span class="textinfo">{{ $event[0]->area }}<span>
            </div>
            <div class="col-sm-4">
                <label for="km">Departamento</label>
                <span class="textinfo">{{ $event[0]->department }}<span>
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="col-sm-6">
                <label for="description">Descripcion</label>
                {{ $event[0]->description }}
                </textarea>
            </div>
            <div class="col-sm-6 ">
                <label for="comments" class="vtop">Comentarios</label>
                <textarea cols="50" rows="5" id="comments" name="comments"></textarea>
                </textarea>
            </div>
            <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
        </div>
        <div class="row">
            <div class="col-sm-6">
                <fieldset>
                    <legend>Archivos</legend>
                    <div class="row form-group">
                        <div class="col-sm-12">
                        @foreach ($docs as $doc)
                            <span><a class="btn btn-warning" href="{{ asset('storage/'.$doc->file) }}" download>{{ $doc->file }}</a> <span>
                        @endforeach
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-sm-6">
                        <span class="btn btn-default btn-file">
                            Anexar Archivo <input type="file" id="fileToUpload" name="fileToUpload">
                        </span>         
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="col-sm-6">
                <fieldset>
                <legend>Historia</legend>
                    
                    <div style="width:600px; height:200px; overflow:auto;">
                        <table class="table table-bordered">
                        <thead><tr><td>Usuario</td><td>Comentarios</td><td>Fecha</td></tr> </thead>
                        <tbody>
                        @foreach($comments as $comment)
                        <tr><td>{{ $comment->name }}</td><td>{{ $comment->comments }}</td><td>{{ $comment->created_at }}</td></tr>
                        @endforeach 
                        </tbody> 
                        </table>
                    </div>
                            
                </fieldset>
            </div>
            
        </div>

        <br/>
            
                <div class="row">
                    <div class="col-sm-10">
                        <fieldset>
                        <legend>Conceptos</legend>
                        <table class="table table-bordered" id="tbl_conceptos">
                            <thead>
                                <tr>
                                    <td>Id</td>
                                    <td>Concepto</td>
                                    <td>Cantidad</td>
                                    <td>Costo</td>
                                    <td>Proveedor</td>
                                    <td>Num factura</td>
                                    <td>Condiciones Pago</td>
                                </tr>
                            </thead>
                        </table>
                        </fieldset>
                    </div>
                    
                </div>
                <br/>
                <button class="btn btn-success" id="btnNewEvent">Grabar</button>

                
          
    </div>
</div>
@stop
@push('scripts')
<script>
var tblConcept;
$( document ).ready(function() {
    var fuel = parseFloat('{{ $event[0]->gas }}');
    $myFuelGauge = $("div#fuel-gauge").dynameter({
        width: 200,
        label: 'Gasolina',
        value: fuel,
        min: 0.0,
        max: 100.0,
        unit: 'litros',
        regions: { // Value-keys and color-refs
        0: 'error',
        5: 'warn',
        10: 'normal'
        }
    });

   
    $("#status").val('{!! $event[0]->status !!}')

    tblConcept =  $('#tbl_conceptos').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
          url: '{!! route('eventconcepts') !!}',
          data: function ( d ) {
            d.eventid = '{!! $event[0]->id !!}';
          }
        },
        language: {
              "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
              },
        dom: 't',
        columns: [
            { data: 'id', name: 'id', width: '10%' },
            { data: 'concept', name: 'concept', width: '60%' },
            { data: 'qty', name: 'qty', width: '10%' },
            { data: 'price', name: 'price', width: '10%' },
            { data: 'supplier', name: 'supplier', width: '10%' },
            { data: 'invoice', name: 'invoice', width: '10%' },
            { data: 'paymenttype', name: 'paymenttype', width: '10%' }
        ],

        aoColumnDefs: [
            {
                "targets": [3],
                "mRender": function ( data,type, row ) {
                   
                    
                    return '<input type="text" value="'+data+'">';
                }
            },
            
            {
                "targets": [4],
                "mRender": function ( data,type, row ) {
                   
                    return '<input type="text" class="supplier_search" data-id="'+row.supplier_id+'" value="'+data+'">';
                    
                }
            },
            {
                "targets": [5],
                "mRender": function ( data,type, row ) {
                    
                    return '<input type="text" value="'+data+'">';
                }
            },
            
            {
                "targets": [6],
                "mRender": function ( data,type, row ) {
                   
                    var sel = '';
                    var cont = '';
                    var cred = '';
                    if(data == '0') {
                        sel = 'selected';
                    } else if ( data == '1') {
                        cont = 'selected';
                    } else if (cred == '1') {
                        cred = 'selected';
                    }
                    
                    return '<select ><option value="0" '+sel+'>Seleccionar</option><option value="1" '+cont+'>Contado</option><option value="2" '+cred+'>Credito</option></select>';

                    
                }
            }
        ]
    });




 

    $("#btnNewEvent").on('click', function() {
        var conceptos = tblConcept.rows().data();
        var allconcepts = [];
        var counter = 0;
        if( $("#comments").val().length > 0 ) {
            $.each(conceptos, function(index,value) {
                allconcepts[counter] = new Array();
                allconcepts[counter][0] = value.id;
                allconcepts[counter][1] = tblConcept.cell(index,3).nodes().to$().find('input').val();
                allconcepts[counter][2] = tblConcept.cell(index,4).nodes().to$().find('input').data('id');
                allconcepts[counter][3] = tblConcept.cell(index,5).nodes().to$().find('input').val();
                allconcepts[counter][4] = tblConcept.cell(index,6).nodes().to$().find('select').val();
                counter++;	
            })

            var file_data = $("#fileToUpload")[0].files[0];
            var form_data = new FormData();
            form_data.append('file', file_data);
            form_data.append('_token',$("#_token").val() );
            form_data.append('eventId',$("#eventid").val());
            form_data.append('comments',$("#comments").val());
            form_data.append('supplier',$("#supplier").val() );
            form_data.append('status',$("#status").val() );
            form_data.append('concepts', JSON.stringify(allconcepts));
        
            $.ajax({
                type: 'POST',
                url: "{{ route('editevent') }}", // call your php file
                data: form_data,
                processData: false,
                contentType: false,
                success: function(data){
                    var info = JSON.parse(data);
                    window.location.replace( "{{ route('events') }}");
                }
            });
        } else {
            alert('Favor de Capturar un Comentario');
        }
    })

   
});

</script>
@endpush