@extends('layouts.esic.gerenciador')
@section('content')
    <h4>Olá, <b>{{userConnectedSicPainel()->nome}}</b></h4>
    <h4 class="page-header"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> Histórico de Solicitações</h4>

    <div class="panel panel-default">
        <div class="panel-heading"><b>Pesquisar</b></div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-2">
                    <input type="text" name="n_protocolo" id="n_protocolo" class="form-control" placeholder="Por protocolo" maxlength="16">
                </div>
                <div class="col-md-2">
                    <div class="input-group">
                        <input type="text" name="dt_solicitacao" id="dt_solicitacao" class="form-control" placeholder="Por data">
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                    </span>
                    </div>
                </div>
                <div class="col-md-8">
                    <input type="text" name="destino" id="destino" class="form-control" placeholder="Por destino">
                </div>
            </div>
        </div>
    </div>
    <br>

    <div class="table-responsive">
        <div class="table-responsive">
            <table class="table table-hover data-table">
                <thead>
                <tr>
                    <th width="10%">Nº Solicitação</th>
                    <th width="10%">Data</th>
                    <th width="60%">Destino</th>
                    <th width="10%">Situação</th>
                    <th width="10%">Ação</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <hr class="mb-4">

@endsection
@push('script')
    <script type="text/javascript">
        $(document).ready(function () {
            let oTable = $('.data-table').DataTable({
                searching: false,
                lengthChange: false,
                iDisplayLength: 15,
                processing: true,
                serverSide: true,
                ordering: false,
                //order: [[2, "asc"]],
                ajax: {
                    //url: 'não precisar do url, por esta chamando o script DataTable na mesma pagina dos dados',
                    data: function (d) {
                        d.n_protocolo = $('input[name=n_protocolo]').val();
                        d.dt_solicitacao = $('input[name=dt_solicitacao').val();
                        d.destino = $('input[name=destino]').val();
                    }
                },
                columns: [
                    {data: 'numprotocolo', name: 'numprotocolo'},
                    {data: 'datasolicitacao', name: 'datasolicitacao'},
                    {data: 'secretaria', name: 'secretaria'},
                    {data: 'situacao', name: 'situacao'},
                    {data: 'acao', name: 'acao', orderable: false, searchable: false},
                ],
                language: {
                    "sEmptyTable": "Nenhum registro encontrado",
                    "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                    "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
                    "sInfoFiltered": "(Filtrados de _MAX_ registros)",
                    "sInfoPostFix": "",
                    "sInfoThousands": ".",
                    "sLengthMenu": "_MENU_ resultados por página",
                    "sLoadingRecords": "Carregando...",
                    "sProcessing": "Processando...",
                    "sZeroRecords": "Nenhum registro encontrado",
                    "sSearch": "Pesquisar",
                    "oPaginate": {
                        "sNext": "Próximo",
                        "sPrevious": "Anterior",
                        "sFirst": "Primeiro",
                        "sLast": "Último"
                    },
                    "oAria": {
                        "sSortAscending": ": Ordenar colunas de forma ascendente",
                        "sSortDescending": ": Ordenar colunas de forma descendente"
                    }
                }
            });

            $('#n_protocolo, #destino').keyup(function () {
                oTable.draw();
            });

            $('#dt_solicitacao').change(function () {
                oTable.draw();
            });


            $('#n_protocolo').mask('99999.999.999999');
            $('#dt_solicitacao').mask('99/99/9999').datepicker();
        });
    </script>
@endpush