@extends('layouts.app')

@section('content')
<style>
    th, td {
        white-space: nowrap !important;
    }
</style>

<div class="card mt-2">
    <img src="https://sistema.valesfusion.com/images/logo.png" alt="logo" class="rounded mx-auto d-block" height="10%" width="10%">
    <div class="card-body">
        <h3 class="card-title">Bitacora de lectura de QR App</h3>
        <div class="row">            
            <form class="card mt-3 p-3 mb-5">
                <div class="form-group col-md-4">
                  <label for="date" class="col-sm-4 col-form-label">Fecha</label>
                  <input type="date" class="form-control col-md-6" id="date" name="date" value="{{date('Y-m-d')}}">
                </div>

                <div class="form-row mt-2">
                    <button id="filter" class="btn btn-primary">
                        <i class="fa fa-search mr-2" style="font-size:18px;"></i>
                        <span>Buscar</span>
                    </button>
                </div>
            </form>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="table-responsive">
                    <table id="datatable" class="table table-striped table-bordered" style="width: 100%;">
                        <thead>
                            <tr>
                                <th>Fecha</th>
                                <th>Hora</th>
                                {{-- <th>Operación</th>
                                <th>Tipo</th> --}}
                                <th>Mensaje</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr> --}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    <script>
        let dataTable = null;
    $(document).ready(function () {
        dataTable = $('#datatable').DataTable({
            paging: false,
            searching: false,
            "bSort": false,
            "processing": true,
            "serverSide": true,
            "language": {
                "sLengthMenu":     "Mostrar _MENU_ registros",
                "sZeroRecords":    "No se encontraron resultados",
                "sEmptyTable":     "Ningún dato disponible en esta tabla",
                "sInfo":           "<div style='white-space: nowrap; width: 100%;overflow: hidden; text-overflow: ellipsis;'>Mostrando del _START_ al _END_ de un total de _TOTAL_ registros</div>",
                "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
                "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
                "sInfoPostFix":    "",
                "sSearch":         "Buscar:",
                "sUrl":            "",
                "sInfoThousands":  ",",
                "sLoadingRecords": "Cargando...",
                "oAria": {
                    "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            },
            "ajax":{
                url: "/log",
                data:function(d){
                    d.date = $('#date').val();
                }
            },
            columns: [
                // { data: 'type', title: 'Tipo'},
                { data: 'date', title: 'Fecha'},
                { data: 'time', title: 'Hora'},
                // { data: 'env', title: 'Operación'},                
                { data: 'message', title: 'Mensaje'},
            ]
        });

        $("#filter").click(function(e){
            e.preventDefault();
            dataTable.draw();
        });
    });
  </script>
@endsection