@extends('layouts.app')

@section('content')
<h2 class="text-center">Eventos</h2>
<div class="container">
    <fieldset>
        <legend>Filtros</legend>
        <div class="row">
            <div class="col-sm-3">
                <label for="cmbDepartment">Departamento</label>
                <select class="form-control refreshDT" id="cmbDepartment" name="cmbDepartment">
                    <option value="0">Todos</option>
                    @foreach($departments as $department)
                        <option value="{{ $department->id }}">{{ $department->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-sm-3">
                <label for="cmbType">Tipo</label>
                <select class="form-control refreshDT" id="cmbType" name="cmbType">
                    <option value="0">Todos</option>
                    <option value="1">Mantenimiento</option>
                    <option value="2">Servicio</option>
                    <option value="3">Garantia</option>
                </select>
            </div>
            <div class="col-sm-3">
                <label for="txtStart">Fecha Inicio</label>
                <input type="text" id="txtStart" name="txtStart" class="form-control refreshDT">
            </div>
            <div class="col-sm-3">
                <label for="txtEnd">Fecha Fin</label>
                <input type="text" id="txtEnd" name="txtEnd" class="form-control refreshDT">
            </div>
           
        </div>
    </fieldset>
    <br />
        <div class="row">
            <div class="col-sm-12">
                <table class="table" id="tbl_eventos">
                    <thead>
                        <tr>
                            <td style="display: none">Id</td>
                            <td>Vehiculo</td>
                            <td>Departamento</td>
                            <td>Servicio</td>
                            <td>Estatus</td>
                            <td>Total $</td>
                            <td>Fecha</td>
                            <td>Detalle</td>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="show-popover"></div>
</div>

@stop
@push('scripts')
<script>
var tblConcept,tblEvents;
$( document ).ready(function() {


    var date = new Date();
    var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

    $("#txtStart").datepicker({
        format: 'yyyy-mm-dd',
        language: 'es',
        autoclose: true,
        todayBtn: 'linked'
    });

    $("#txtEnd").datepicker({
        format: 'yyyy-mm-dd',
        language: 'es',
        autoclose: true,
        todayBtn: 'linked'
    });

    $("#txtStart,#txtEnd").datepicker('setDate', today )


    tblEvents =  $('#tbl_eventos').DataTable({
        processing: true,
        serverSide: true,
        dom: 'lBfrtip',
        ajax: {
          url: '{!! route('eventstable') !!}',
          data: function( d ) {
            d.Department = $("#cmbDepartment").val(),
            d.Type = $("#cmbType").val(),
            d.from = $('#txtStart').val(),
            d.to = $('#txtEnd').val()
          }
        },
        language: {
              "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json",
              },
        buttons: [
          'csv', 'excel', 'pdf'
        ],
        columns: [
            { data: 'vehicle', name: 'vehicle' },
            { data: 'Department', name: 'Department' },
            { data: 'servicio', name: 'servicio' },
            { data: 'status', name: 'status' },
            { data: 'Total', name: 'Total' },
            { data: 'created_at', name: 'created_at' },
            { data: 'description', name: 'description' }
        ],
        aoColumnDefs: [
            {
                "targets": [3],
                "mRender": function ( data,type, row ) {
                    var estatus = '';
                    switch (data) {
                        case "1":
                        estatus = 'Nuevo';
                        break;
                        case "2":
                        estatus = 'En Validacion';
                        break;
                        case "3":
                        estatus = 'Aceptada'
                        break;
                        case "4":
                        estatus = 'Pago Pendiente'
                        break;
                        case "5":
                        estatus = 'Pagado'
                        break;
                        case "5":
                        estatus = 'Cerrado'
                        default:
                        estatus = 'Nuevo'
                    }
                    
                    return estatus;
                }
            },
            {
                "targets": [6],
                "mRender": function ( data,type, row ) {
                    var info = '{{ route("event.show","id") }}'
                    info = info.replace('id',row.id);
                    
                    
                    return '<a href="'+info+'" class="viewEvent" data="'+row.id+'"><i class="fas fa-edit fa-2x " style="color:blue"></i></a>';
                   
                }
            }
        ]
    });

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

    $('.refreshDT').on('change', function() {
        $('#tbl_eventos').DataTable().ajax.reload();
    })

    
  $("#btnReportsExcel").on('click', function() {
        var dateIn = $("#dateIn").val();
        var dateEn = $("#dateEn").val()
        var params = '?dateIn='+dateIn+'&dateEn='+dateEn;
        var url = '{{ route('generatevehiclecsv') }}';
        if($("#dateIn").val().length > 0 && $("#dateEn").val().length > 0 ) {
            window.open(url+params, '_blank')
        } else {
            alert("Favor de Seleccionar un rango de Fechas")
        }
    })


     

    
});

function details_in_popup(link, div_id){
    $.ajax({
        url: link,
        success: function(response){
            $('#'+div_id).html(response);
        }
    });
    return '<div id="'+ div_id +'">Loading...</div>';
}

</script>
@endpush