@extends('layouts.protocolo')
@section('content')
    <div class="shadow-sm p-1 mb-5 bg-white rounded"><h3>Remetente</h3>(Incluir Novo Registro)</div>
    <form name="formCreateRemetente" action="{{route( 'remetente.store')}}" method="post" role="form" autocomplete="off">
        @csrf
        <div class="row">
            <div class="col-md-2">
                <label for="">* CNPJ/CPF/Mat <i style="color: red">&nbsp;(numérico)</i></label>
                <input type="text" name="REM_CPFCNPJ" onkeypress="return digitos(event)" title="Digite o número do CPF, se o remetente for pessoa física ou o número do CNPJ se o remetente for pessoa jurídica. Tratando-se de servidor/funcionário vinculado ao Órgão/Empresa a “Matrícula” poderá ser informada." class="form-control" maxlength="20">
            </div>
            <div class="col-md-5">
                <label for="">* Remetente</label>
                <input type="text" name="REM_NOME" class="form-control" maxlength="191">
            </div>
            <div class="col-md-5">
                <label for="">E-mail</label>
                <input type="email" name="REM_EMAIL" maxlength="60" title="Se um e-mail válido for informado, uma mensagem com o protocolo eletrônico (recibo de origem) é enviada ao interessado informando que o documento foi protocolizado com sucesso." class="form-control">
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <label for="">* Celular</label>
                <input type="text" name="REM_CELULAR" id="plCelular" class="form-control" maxlength="12">
            </div>
            <div class="col-md-10">
                <label for="">* Endereço (completo)</label>
                <input type="text" name="REM_ENDERECO" maxlength="150" title="Informe o endereço completo - logradouro (rua, avenida, praça, beco, viela, alameda, etc.), número, complemento (casa, bloco, andar, apto, etc.), bairro, CEP, cidade, Estado (UF), caso a Origem seje Externa." class="form-control">
            </div>
        </div>
        <hr class="p-1 mb-2">

        <div class="row">
            <div class="col-md-12">
                <button type="submit" class="btn btn-primary btn-lg"><i class="fa fa-save" aria-hidden="true"></i> Salvar</button>
                <button type="button" class="btn btn-light" onclick="javascript:history.back();"><i class="fa fa-home" aria-hidden="true"></i>  Voltar</button>
            </div>
        </div>
    </form>

    <p class="mb-5"></p>
    <h3> Lista de Remetente</h3>
    <p class="mb-3"></p>
    <div class="table-responsive">
        <table class="table table-hover table-sm data-table">
            <thead>
            <tr>
                <th width="5%">#</th>
                <th width="45%">Nome</th>
                <th width="30%">E-mail</th>
                <th width="15%">Celular</th>
                <th width="5%">Ação</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
@endsection
@push('script')
    <script>
        $(function () {
            $('#plCelular').mask('(99)99999-9999');
        })
        //https://datatables.net/examples/server_side/row_details.html
        //https://datatables.net/examples/api/row_details.html
        $(document).ready(function () {
            let table = $('.data-table').DataTable({
                iDisplayLength: 25,
                processing: true,
                serverSide: true,
                ajax: "{{ route('remetente.index') }}",
                order: [[ 0, "desc" ]],
                columns: [
                    {data: 'REM_ID', name: 'REM_ID'},
                    //{data: 'REM_CPFCNPJ', name: 'REM_CPFCNPJ'},
                    {data: 'REM_NOME', name: 'REM_NOME'},
                    {data: 'REM_EMAIL', name: 'REM_EMAIL'},
                    {data: 'REM_CELULAR', name: 'REM_CELULAR'},
                    {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"
                    }
                },
            });
        });
    </script>

    <script src="{{url(mix('modulos/protocolo/assets/js/remetente/list-create-update-remetente.js'))}}"></script>
@endpush