@extends('layouts.nfse.nfse-painel')
@section('content')
    <style>
        .ui-autocomplete-loading {
            background: white url({{url('img/gif/ajax-loader.gif')}}) right center no-repeat;
        }
    </style>
    <div class="shadow-sm p-3 mb-5 bg-white rounded"><h3>&nbsp;Gerenciador</h3>(Incluir Novo Registro)</div>

    <form name="formCreateGerenciador" action="{{route('gerenciador-nfse.store')}}" method="post" role="form">
        @csrf
        <div class="row">
            <div class="col-md-12">
                <label for=""><i style="color: grey">* Campo de Preenchimento Obrigatório</i></label>
            </div>
        </div>
        <hr>

        <div class="row">
            <div class="col-md-2">
                <label for="">* CPF</label>
                <input type="text" name="nfs_cpf" id="cpf" class="form-control" onkeypress="return digitos(event)"
                       maxlength="11">
            </div>
            <div class="col-md-4">
                <label for="">* Nome Completo</label>
                <input type="text" name="nfs_nome" class="form-control" maxlength="80">
            </div>
            <div class="col-md-2">
                <label for="">* Celular</label>
                <input type="text" name="nfs_celular" id="celular" class="form-control" maxlength="14">
            </div>
            <div class="col-md-4">
                <label for="">* E-Mail</label>
                <input type="text" name="nfs_email" class="form-control" maxlength="100">
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-2">
                <label for="">* Login</label>
                <input type="text" name="nfs_login" class="form-control" maxlength="30">
            </div>
            <div class="col-md-2">
                <label for="">* Senha</label>
                <input type="text" name="password" class="form-control" maxlength="10">
            </div>
            <div class="col-md-2">
                <label for="">* Confirmar senha</label>
                <input type="text" class="form-control" maxlength="150">
            </div>
            <div class="col-md-2 offset-4">
                <label for=""><b>* Nível Permissão</b></label>
                <select name="nfs_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>
            </div>
        </div>
        <hr class="mt-5">

        <div class="row">
            <div class="col-md-12">
                <button type="submit" class="btn btn-primary btn-lg"><i class="fa fa-floppy-o" aria-hidden="true"></i>&nbsp; Salvar</button>
                <a href="javascript:history.back()" class="btn btn-light btn-lg"><i class="fa fa-chevron-left" aria-hidden="true"></i>&nbsp; Voltar</a>
            </div>
        </div>
    </form>
    <hr class="mt-5">

    <h2 class="mt-5">Lista Gerenciador(es)</h2>
    <table class="table table-hover 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>
        <tr>
            <td></td>
        </tr>
        </tbody>
    </table>
@endsection
@push('script')
    <script src="{{url(mix('modulos/nfse/gerenciador/js/create-update-gerenciador.js'))}}"></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-nfse.index') }}",
                //order: [[1, "desc"]],
                columns: [
                    {data: 'nfs_cpf', name: 'nfs_cpf'},
                    {data: 'nfs_nome', name: 'nfs_nome'},
                    {data: 'nfs_login', name: 'nfs_login'},
                    {data: 'nfs_email', name: 'nfs_email'},
                    {data: 'nfs_celular', name: 'nfs_celular'},
                    {data: 'btn-status', name: 'btn-status'},
                    {data: 'btn-nivel', name: 'btn-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>
@endpush