@extends('template.main')

@section('titulo','Entradas y Salidas')

@section('cabecera')

    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script>
        $(document).ready(function () {
		
            $('#contenedor2').DataTable( {
                language: {
                    "decimal": "",
                    "emptyTable": "No hay información",
                    "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
                    "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
                    "infoFiltered": "(Filtrado de _MAX_ total entradas)",
                    "infoPostFix": "",
                    "thousands": ",",
                    "lengthMenu": "Mostrar _MENU_ Entradas",
                    "loadingRecords": "Cargando...",
                    "processing": "Procesando...",
                    "search": "Buscar:",
                    "zeroRecords": "Sin resultados encontrados",
                    "paginate": {
                        "first": "Primero",
                        "last": "Ultimo",
                        "next": "Siguiente",
                        "previous": "Anterior"
                    }
                },
                "paging":false,

                initComplete: function () {
                    this.api().columns().every( function () {
                        var column = this;
                        var select = $('<select ><option value=""></option></select>')
                            .appendTo( $(column.footer()).empty() )
                            .on( 'change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );

                                column
                                    .search( val ? '^'+val+'$' : '', true, false )
                                    .draw();
                            } );

                        column.data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );
                    } );
                }
            } );
  



		$('#campo').daterangepicker({
		    range: true,
                       locale: {
        			format: 'YYYY/MM/DD'
   			 },
                    firstDay: 1,
                    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                    monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
                    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                    dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
                    dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá']
                });
		
               $("#validacion").submit(function(e){
                e.preventDefault();
                $.ajax({
                    data: $(this).serialize(),
                    type: "POST",
                    url: "{{ route('credencial.busqueda') }}",

                    beforeSend: function () {
                        $('#contenedor').html("<center><p>Por favor espere. La información se encuentra descargando.</p><img src=\"{{ asset('img/loading.gif') }}\" style=\"max-width: 100px\"></center>");
                    },

                    success: function (response) {
			var contenido = response.script + response.html;
			$('#contenedor').html(contenido);
                    },
                    error: function () {
                        $('#contenedor').html("Error la descargar la información.");
                    }
                });

            });
        });
    </script>
    <style>
        select option{
            width:180px;
            word-wrap: break-word;
            white-space: normal;
        }
        select{
            width:190px;
        }
    </style>
@endsection

@section('contenido')
    <div class="row" style="margin: 10px;">
        <div class="col-lg-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fas fa-home"></i> Inicio </a></li>
                    <li class="breadcrumb-item active" aria-current="page"><i class="fas fa-id-card"></i> Entradas y Salidas</li>
                </ol>
            </nav>
            <hr>
        </div>
        <div class="col-lg-12">
            <h3 class="contexto"> <i class="fas fa-id-card"></i> Entradas y Salidas</h3>
        </div>
        <div class="col-lg-4">
            <form method="post" id="validacion">
                @csrf
                <label>Seleccione la fecha.</label>
                <input type="text" name="fechas" id="campo" class="form-control">
        </div>
        <div class="col-lg-12">
            <br>
            <button type="submit" style="float: right" class="btn btn-success">Buscar</button>
        </div>
        </form>
        <div id="contenedor" class="col-lg-12"></div>

    </div>
@endsection