@extends('adminlte::page')

@section('title', 'Informe de Vehículos')

@section('content_header')
    <div class="container-fluid">
        <h1><i class="fa fa-th" aria-hidden="true"></i> Informe de Vehículos</h1>
    </div>
@stop

@section('content')
    <form id="usuario_form" method="post" enctype="multipart/form-data">
        @csrf
        <div class="card card-warning" id="my-card">
            <div class="card-header">
                <h3 class="card-title"><strong> Filtro de Búsqueda</strong></h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <input name="_token" type="hidden" class="form-control" id="_token" value="{{ csrf_token() }}">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>Fecha Desde</label>
                            <input name="fechadesde" type="date" class="form-control" id="fechadesde">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>Fecha Hasta</label>
                            <input name="fechahasta" type="date" class="form-control" id="fechahasta">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label>Estado</label>
                            <select class="form-control" name='estado' id="estado">
                                <option value="A">Activos</option>
                                <option value="I">Inactivos</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label>Seleccion de Socio: </label>
                            <select class="form-control select2bs4" style="width: 100%;" id="usuario" name="usuario">
                                <option selected="selected" value="T">Todos los Socios</option>
                                @foreach ($socios as $datos)
                                    <option value="{{ $datos->IdSocios }}">{{ $datos->nombre_completo }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <button type="submit" class="btn btn-dark toastrDefaultSuccess m-2"> <i class="fas fa-search">
                            Buscar Información</i></button>
                </div>
            </div>
        </div>

    </form>
    <div style="display:none;" id="loader"></div>
    <div id="DivPrincipal">
        <div class="row justify-content-center">
            <div class="col-12">
                <!-- /.card -->
                <div class="card">
                    <div class="card-header">
                        <div class="float-right">
                            <button type="submit" class="btn btn-danger toastrDefaultSuccess"
                                onclick="imprimirDocumento()">
                                Descargar Pdf</button>

                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <table id="tblSocios" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Placa</th>
                                    <th>Año</th>
                                    <th>Chasis</th>
                                    <th>Marca</th>
                                    <th>Modelo</th>
                                    <th>Propietario</th>
                                    <th>Estado</th>
                                </tr>
                            </thead>
                            <tbody id="tblSocios_seleccionar">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@stop

@section('js')
    <script>
        const date = new Date();
        let existe = false;
        const currentDate = date.toISOString().substring(0, 10);
        document.getElementById('fechadesde').value = currentDate;
        document.getElementById('fechahasta').value = currentDate;
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })

        var dataInformacion = $('#tblSocios').DataTable({
            "processing": true,
            "ordering": false,
            "dom": 'Bfrtip',
            "buttons": [{
                extend: 'excelHtml5',
                text: 'EXCEL',
                'title': 'Informe de Vehículos',
                filename: 'inf_Vehiculos',
                titleAttr: 'Informe de Vehículos',
                className: 'btn btn-success'
            }, ],
            "language": {
                "lengthMenu": "Mostrando _MENU_ por pagina",
                "zeroRecords": "Sin Registro..",
                "info": "Mostrando pagina _PAGE_ de _PAGES_",
                "infoEmpty": "Sin registros disponibles",
                "infoFiltered": "(filtered from _MAX_ total records)",
                "search": "Busq.",
                "paginate": {
                    "first": "Primero",
                    "last": "Ultimo",
                    "next": "Siguiente",
                    "previous": "Anterior"
                },
            },
            // "columnDefs": [{
            //         "defaultContent": '<a href="javascript:void(0);" class=" btn btn-icon btn-xs btn-primary btn_licencia"><i class="fa fa-eye"></i></a>',
            //         "targets": 0,
            //         "data": null
            //     },

            // ],
            "columns": [
                null,
                null,
                null,

                null,

                null,
                null,
                // null,
                null,
                null
            ],

        });

        dataInformacion.buttons().disable();
        $("form#usuario_form").submit(function(e) {
            MostrarLoader();
            e.preventDefault();
            const formData = new FormData(this);
            $.ajax({
                url: '/consultaInfoVehi',
                type: 'POST',
                data: formData,
                success: function(data) {
                    OcultarLoader();
                    let sumatotal = 0
                    const rows = dataInformacion.rows().remove().draw();
                    if (data.status == 'ok') {
                        dataInformacion.buttons().enable();
                        $.each(data.dataVehiculo, function(key, value) {
                            dataInformacion.row.add([
                                value.IdVehiculos,
                                value.PlacaVehiculo,
                                value.AnioVehiculo,
                                value.Chasis,
                                value.CodigoMarca,
                                value.CodigoModelo,
                                value.nombre_completo,
                                value.Estado,
                            ]).draw(false);
                        });
                        existe = true;
                        $('#monto').val(sumatotal);
                    } else {
                        toastr.error(data.message);
                    }
                },
                cache: false,
                contentType: false,
                processData: false,
            });

        });
        const imprimirDocumento = () => {
            if (existe) {
                window.open("/create-pdf-Vehiculos");
            } else {
                toastr.error('No existe información para exportar a pdf');
            }

        }
    </script>
@stop