@extends('layouts.protocolo')
@section('content')
    <div class="shadow-sm bg-white rounded mt-4 mb-5"><h3><i class="fa fa-list" aria-hidden="true"></i> Caixa de Entrada
        </h3></div>

    <div class="panel panel-default mb-3">
        <div class="panel-heading">Pesquisar: (nº Protocolo)</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-2">
                    <form name="FrmPorCodigo" action="" method="post">
                        <input type="text" name="n_protocolo" id="n_protocolo" class="form-control" maxlength="14"
                               required>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover table-sm data-table">
            <thead>
            <tr>
                <th width="10%">Nº Protocolo</th>
                <th width="10">Envio</th>
                <th width="2%">Dias</th>
                <th width="40%">Origem</th>
                <th width="34%">Tipo Assunto</th>
                <th width="4%" class="text-center">Ação</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div class="row mt-2">
        <div class="col-md-12">
            <a class="btn btn-outline-primary" href="{{route('protocolo')}}"><i class="fa fa-arrow-circle-left"
                                                                                aria-hidden="true"></i> Voltar</a>
        </div>
    </div>
@endsection
@push('script')
    <script type="text/javascript">
        $(document).ready(function () {
            let table = $('.data-table').DataTable({
                lengthChange: false,
                searching: false,
                iDisplayLength: 25,
                processing: true,
                serverSide: true,
                ordering: false,
                ajax: {
                    url: '{{ route('registrar.protocolsReceived') }}',
                    data: function (d) {
                        d.n_protocolo = $('input[name=n_protocolo]').val();
                    }
                },
                columns: [
                    {data: 'bt-link', name: 'bt-link'},
                    {data: 'PTC_DATA', name: 'PTC_DATA'},
                    {data: 'QTD_DIAS', name: 'QTD_DIAS'},
                    {data: 'SET_DESCRICAO', name: 'SET_DESCRICAO'},
                    {data: 'TDA_DESCRICAO', name: 'TDA_DESCRICAO'},
                    {data: 'bt-action', name: 'bt-action', 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...",
                    //"sProcessing": "<img src='img/ajax-loader.gif'/>",
                    "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').keyup(function () {
                table.draw();
            });

            $("#n_protocolo").mask("999.999.999999");
        });
    </script>
@endpush