@extends('layouts.tributos')
@section('content')
    <style>
        .ui-autocomplete-loading {
            background: white url({{url('imagens/gif/ajax-loader.gif')}}) right center no-repeat;
        }
    </style>

    <h3 class="page-header"><span class="glyphicon glyphicon-file" aria-hidden="true"></span>&nbsp;Gerenciador <small>(Incluir Novo Registro)</small></h3>
    <form name="FrmCreateGerenciador" action="{{route('gerenciador.store')}}" method="post">
        @csrf
        <div class="row">
            <div class="col-md-12">
                <label for=""><i style="color: grey">* Campo de Preenchimento Obrigatório</i></label>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <label for="">* CPF</label>
                <input type="text" class="form-control" name="CPFMATRICULA" id="cpf" onkeypress="return digitos(event);" maxlength="11">
            </div>
            <div class="col-md-4">
                <label for="">* Nome Completo</label>
                <input type="text" class="form-control" name="NOME">
            </div>
            <div class="col-md-2">
                <label for="">* Celular</label>
                <input type="text" class="form-control" name="CELULAR" id="celular">
            </div>
            <div class="col-md-4">
                <label for="">* E-Mail</label>
                <input type="email" class="form-control" name="EMAIL">
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <label for="">* Login</label>
                <input type="text" class="form-control" maxlength="20" name="LOGIN">
            </div>
            <div class="col-md-2">
                <label for="">* Senha</label>
                <input type="password" class="form-control" maxlength="15" name="password">
            </div>
            <div class="col-md-2">
                <label for="">* Confirmar Senha</label>
                <input type="password" class="form-control" maxlength="15" name="password_confirm">
            </div>
            <div class="col-md-2 col-md-offset-4">
                <label for=""><b>* Nível de Permissão</b></label>
                <div class="input-group">
                    <select name="NIVEL" class="form-control">
                        <option selected></option>
                        <option value="1">Administrador</option>
                        <option value="2">Avançado</option>
                        <option value="3">Básico</option>
                    </select>
                    <span class="input-group-btn">
                    <button class="btn btn-default" type="button" name="btnContribuinte"
                            title="Detalhes dos niveis de acesso." data-toggle="modal"
                            data-target=".bs-legenda_nivel_acesso-modal-lg"><span
                            class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></button>
                </span>
                </div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-12">
                <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> Salvar
                </button>
                <button type="button" class="btn btn-default" onclick="javascript:history.back();"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span> Voltar
                </button>
            </div>
        </div>
        <hr>
    </form>

    <div class="table-responsive">
        <table class="table table-hover table-sm data-table">
            <thead>
            <tr>
                <th width="10%">Cpf</th>
                <th width="20%">Nome Completo</th>
                <th width="10%">Login</th>
                <th width="20%">E-mail</th>
                <th width="10%">Celular</th>
                <th width="10%">Status</th>
                <th width="15%">Nivel</th>
                <th width="5%">Ação</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <!--Grupo de modal-->
    <div class="modal fade bs-legenda_nivel_acesso-modal-lg" tabindex="-1" role="dialog" aria-labelledby="ModalNivelAcesso">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">Nível de Acesso</h4>
                </div>
                <div class="modal-body">
                    (1) Administrador = Baixa/inclusão/edição/exclusão/consultas e relatórios<br>
                    (2) Avançado = Inclusão/edição/exclusão/consultas e relatórios<br>
                    (3) Básico = Consultas e relatórios
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        $(function () {
            $('#celular').mask("99999-9999");
            $('#cpf').mask("999.999.999-99");
        })

        $(document).ready(function () {
            let table = $('.data-table').DataTable({
                iDisplayLength: 10,
                processing: true,
                serverSide: true,
                ajax: "{{ route('gerenciador.index') }}",
                order: [[0, "asc"]],
                columns: [
                    {data: 'CPFMATRICULA', name: 'CPFMATRICULA'},
                    {data: 'NOME', name: 'NOME'},
                    {data: 'LOGIN', name: 'LOGIN'},
                    {data: 'EMAIL', name: 'EMAIL'},
                    {data: 'CELULAR', name: 'CELULAR'},
                    {data: 'STATUS', name: 'STATUS'},
                    {data: 'NIVEL', name: 'NIVEL'},
                    {data: 'btn-action', name: 'btn-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/tributos/assets/js/tributos/gerenciador/list-create-gerenciador.js'))}}"></script>
@endpush