@extends('template.default')
@section('text-field')
@stop
@section('content')

    <div hidden id="msgVazio" style="padding-top: 20%;">
        <h5 class="font-weight-600 grey-text center-align">@lang('Não existe ')usuários @lang('cadastradas')</h5>
        <p class="font-weight-500 grey-text center-align">@lang('Clique em ')<a class="btn-floating"
                                                                                style="cursor: default;">
                <i class="material-icons">add</i>
            </a>@lang(' para cadastrar') usuários
        </p>
    </div>

    <div hidden id="conteudoPricincipal">

        <br>

        <div class="row">
            <div class="col s12 offset-m1 m10 offset-l1 l10">
                <div class="row">
                    <div class="col s4 m1 l2">
                        <input type="checkbox" class="filled-in" id="marca-todos"/>
                        <label for="marca-todos">@lang('Todos')</label>

                        <input onchange="filtro()" type="checkbox" class="filled-in" id="users-desativados"/>
                        <label id="labelFiltro" for="users-desativados">Desativados</label>

                    </div>
                    @if($permissionService->verifyPermissionView(\App\Models\Permission::CRIAR_EDITAR))
                        <div hidden id="divEditar" class="col s8 m10 l10" style="height: 25px;">
                            <a id="btnEditar" class="tooltipped" data-position="bottom" data-delay="50"
                               data-tooltip="@lang('Editar')">
                                <i class="material-icons grey-text" style="cursor: pointer;">edit</i>
                            </a>
                            <a id="btnExcluir" onclick="abrirModalDeletar()" class="tooltipped" data-position="bottom"
                               data-delay="50" data-tooltip="Desativar">
                                <i class="material-icons grey-text" style="cursor: pointer;">delete</i>
                            </a>
                            <a id="btnAssociarCategoria" onclick="abrirModalAssociarCategoria()" class="tooltipped"
                               data-position="bottom"
                               data-delay="50" data-tooltip="Associar Secretarias">
                                <i class="material-icons grey-text" style="cursor: pointer;">playlist_add_check</i>
                            </a>

                            <a id="btnPermissoes" onclick="abrirModalPermissoes()" class="tooltipped"
                               data-position="bottom"
                               data-delay="50" data-tooltip="Permissões">
                                <i class="material-icons grey-text" style="cursor: pointer;">security</i>
                            </a>

                        </div>
                    @endif

                    @if($permissionService->verifyPermissionView(\App\Models\Permission::DELETAR))
                        <div hidden id="divExcluir" class="col s8 m10 l10" style="height: 25px;">
                            <a onclick="abrirModalDeletar()" class="tooltipped" data-position="bottom" data-delay="50"
                               data-tooltip="@lang('Excluir')">
                                <i class="material-icons grey-text" style="cursor: pointer;">delete</i>
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="row">

            <div class="row">
                <div class="col s12 offset-m1 m6 offset-l1 l6">
                    <div class="input-field col s12">
                        <input id="busca_name" name="busca_name" type="text" class="validate">
                        <label for="busca_name">Busca nome</label>
                    </div>
                </div>

                <div class="col s2">
                    <a onclick="doFilter()"
                       class="btn-floating z-depth-3 btn-small">
                        <i class="material-icons">search</i>
                    </a>
                </div>
            </div>

            <div class="card-panel col s12 offset-m1 m10 offset-l1 l10 z-depth-2">

                <table class="highlight">
                    <thead>
                    <tr>
                        <th></th>
                        <th>@lang('Nome')</th>
                        <th>email</th>
                        <th>Secretaria</th>
                    </tr>
                    </thead>
                    <tbody>

                    <form id="formDeletar" method="POST">
                        {{ csrf_field() }}

                        @php($filtro = [1] )

                        @if(isset($_GET['filtro']))
                            @if($_GET['filtro'] == 'desativados')
                                @php($filtro = ['', 0])
                            @endif
                        @endif

                        @php($key = 0)
                        @foreach($usuario->data as $key => $user)

                            @if(in_array($user->desativado, $filtro))
                                @continue
                            @endif

                                
                            <tr>
                                <td>
                                    <input onclick="linhaEscolhida({{json_encode($user)}})"
                                           name="deletar[]" value="{{$user->id}}"
                                           type="checkbox" class="filled-in item"
                                           id="check-tabela-{{ $key }}"/>
                                    <label for="check-tabela-{{ $key }}"></label>
                                </td>
                                <td>{{ $user->name }}</td>
                                <td>{{ $user->email }}</td>
                                <td>{{ $secretarias }}</td>
                            </tr>

                        @endforeach

                    </form>

                    </tbody>
                </table>

            </div>
        </div>


        @if($usuario->last_page > 1)
            @if(isset($_GET['filtro']))
                <div class="row">
                    <div class="col s12 offset-m8 m4 offset-sl8 sl4">

                        <ul class="pagination">
                            <li @if($usuario->current_page == 1)class="disabled" @endif>
                                <a @if($usuario->current_page != 1)href="/usuario?page=1&filtro=desativados"@endif>
                                    <i class="mdi-navigation-chevron-left material-icons">chevron_left</i>
                                </a>
                            </li>

                            @for($i = 1; $i <= $usuario->last_page; $i++)

                                <li class="waves-effect
                            @if($usuario->current_page == $i)
                                        active
                            @endif
                                        "><a href="/usuario?page={{ $i }}&filtro=desativados">{{ $i }}</a></li>
                            @endfor

                            <li class="waves-effect"><a
                                        href="/usuario?page={{ $usuario->last_page }}&filtro=desativados"><i
                                            class="mdi-navigation-chevron-right material-icons">chevron_right</i></a>

                            </li>
                        </ul>

                    </div>
                </div>

            @else
                <div class="row">
                    <div class="col s12 offset-m8 m4 offset-sl8 sl4">

                        <ul class="pagination">
                            <li @if($usuario->current_page == 1)class="disabled" @endif>
                                <a @if($usuario->current_page != 1)href="/usuario?page=1"@endif>
                                    <i class="mdi-navigation-chevron-left material-icons">chevron_left</i>
                                </a>
                            </li>

                            @for($i = 1; $i <= $usuario->last_page; $i++)

                                <li class="waves-effect
                            @if($usuario->current_page == $i)
                                        active
@endif
                                        "><a href="/usuario?page={{ $i }}">{{ $i }}</a></li>
                            @endfor

                            <li class="waves-effect"><a href="/usuario?page={{ $usuario->last_page }}"><i
                                            class="mdi-navigation-chevron-right material-icons">chevron_right</i></a>

                            </li>
                        </ul>

                    </div>
                </div>
            @endif
        @endif

    </div>

    <div id="modalCrud" class="modal bottom-sheet" style="max-height: 100%; height: 100%;">
        <div class="modal-content">
            <div class="row">
                <div class="col s12">
                    <h5 class="font-weight-800 grey-text">@lang('Cadastrar / Editar')</h5>
                </div>
            </div>

            <form id="formCrud" method="post">
                {{ csrf_field() }}

                <input hidden id="id" name="id">

                <div class="row">
                    <div class="col s8">
                        <div class="input-field col s12">
                            <input id="name" name="name" type="text" class="validate">
                            <label for="name">@lang('Nome')*</label>
                        </div>
                    </div>

                    @if(session('configuration')['exigir_cpf'] === 1)

                        <div class="col s4">
                            <div class="input-field col s12">
                                <input id="cpf" name="cpf" type="text" class="validate">
                                <label for="cpf">CPF</label>
                            </div>
                        </div>

                    @endif

                </div>

                <div class="row">
                    <div class="col s6">
                        <div class="input-field col s12">
                            <input id="email" name="email" type="text" class="validate">
                            <label for="email">@lang('Email')*</label>
                        </div>
                    </div>

                    <div class="col s3">
                        <div class="input-field col s12">
                            <input id="telefone" name="telefone" type="text" class="validate">
                            <label for="telefone">@lang('Telefone')</label>
                        </div>
                    </div>

                    <div class="col s3">
                        <div class="input-field col s12">
                            <input id="celular" name="celular" type="text" class="validate">
                            <label for="celular">Celular</label>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col s6">
                        <div class="input-field col s4">
                            <input id="password" name="password" type="password" class="validate">
                            <label for="password">Senha*</label>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col s4">
                        <div class="input-field col s12">
                            <select name="sexo" id="sexo">
                                <option value="" disabled selected>Escolha o sexo do funcionário</option>

                                <option value="0">Feminino</option>
                                <option value="1">Masculino</option>
                                <option value="2">Outros</option>

                            </select>
                            <label>Sexo</label>
                        </div>
                    </div>
                </div>


                <div class="row">

                    <div class="col s2">
                        <div class="input-field col s12">
                            <input id="cep" name="cep" type="number" class="validate" onblur="pesquisacep(this.value);">
                            <label for="cep">@lang('Cep')</label>
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col s5">
                        <div class="input-field col s12">
                            <select name="bairro_id" id="bairro_id">
                                <option value="" disabled selected>Escolha um bairro</option>

                                @foreach($bairros->data as $bairro)

                                    <option value="{{ $bairro->id }}">{{ $bairro->nome }}</option>

                                @endforeach

                            </select>
                            <label>Bairros</label>
                        </div>
                    </div>

                    <div class="col s5">
                        <div class="input-field col s12">
                            <input id="rua" name="rua" type="text" class="validate">
                            <label for="rua">@lang('Rua')</label>
                        </div>
                    </div>
                    <div class="col s2">
                        <div class="input-field col s12">
                            <input id="numero" name="numero" type="number" class="validate">
                            <label for="numero">@lang('Número')</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col s12">
                        <div class="input-field col s12">
                            <input id="complemento" name="complemento" type="text" class="validate">
                            <label for="complemento">@lang('Complemento')</label>
                        </div>
                    </div>
                </div>

            </form>


        </div>
        <div id="modalBtn" class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-yellow btn-flat">@lang('Cancelar')</a>
            <a href="#!" onclick="enviarFormComValidacao()"
               class="modal-action waves-effect waves-yellow btn-flat">@lang('Salvar')</a>
        </div>

        <div hidden id="modalLoad" class="row">
            <div class="col offset-s10 s1" style="margin-bottom: 15px;">
                <div class="preloader-wrapper small active">
                    <div class="spinner-layer spinner-yellow-only">
                        <div class="circle-clipper left">
                            <div class="circle"></div>
                        </div>
                        <div class="gap-patch">
                            <div class="circle"></div>
                        </div>
                        <div class="circle-clipper right">
                            <div class="circle"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>


    </div>

    <div id="modalDeletar" class="modal">
        <div class="modal-content">
            <div class="row">
                <div class="col s12">
                    <h5 class="font-weight-800 grey-text">@lang('Deletar')</h5>
                </div>
            </div>

            <div class="row">
                <div class="col s12">
                    <p class="font-weight-800 grey-text">@lang('Tem certeza que deseja desativar ')
                        <span id="quantidadeRegistroDeletado" class="red-text"></span>
                        @lang(' registros ?')
                    </p>
                </div>
            </div>

        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">@lang('Cancelar')</a>
            <a href="#!" onclick="deletar()"
               class="modal-action waves-effect waves-yellow btn-flat">@lang('Desativar')</a>
        </div>

        <div hidden id="modalLoadDeletar" class="row">
            <div class="col offset-s10 s1" style="margin-bottom: 15px;">
                <div class="preloader-wrapper small active">
                    <div class="spinner-layer spinner-yellow-only">
                        <div class="circle-clipper left">
                            <div class="circle"></div>
                        </div>
                        <div class="gap-patch">
                            <div class="circle"></div>
                        </div>
                        <div class="circle-clipper right">
                            <div class="circle"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <div id="modalAssociarCategoria" class="modal">
        <div class="modal-content">

            <div class="row">
                <div class="col s12">
                    <h5 class="font-weight-800 grey-text">Associar a Secretarias</h5>
                </div>
            </div>

            <div id="conteudoModalAssociar"></div>
            <div hidden id="loadModalCategoria">
                <div class="progress">
                    <div class="indeterminate"></div>
                </div>
            </div>


        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-yellow btn-flat">@lang('Cancelar')</a>
            <a href="#!" onclick="enviarFormAssociarCategoria()"
               class="modal-action waves-effect waves-yellow btn-flat">@lang('Salvar')</a>
        </div>

    </div>

    <div id="modalPermissoes" class="modal bottom-sheet" style="max-height: 100%;">
        <div class="modal-content">
            <h5 class="font-weight-800 grey-text">Permissões</h5>
            <i class="material-icons grey-text modal-close modal-full-move-bottom-custom1">close</i>

            <div id="conteudoPermissoes"></div>

            <div hidden id="loadModalAssociar">
                <h5 class="font-weight-600 grey-text center-align">Estamos reunindo as informaçõe...</h5>
                <div class="progress">
                    <div class="indeterminate"></div>
                </div>
            </div>

        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close waves-effect waves-yellow btn-flat">@lang('Cancelar')</a>
            <a href="#!" onclick="enviarFormPermissoes()"
               class="modal-action waves-effect waves-yellow btn-flat">@lang('Salvar')</a>
        </div>

    </div>
    @if($permissionService->verifyPermissionView(\App\Models\Permission::CRIAR_EDITAR))
        <div class="fixed-action-btn" style="bottom: 20px; right: 20px;">
            <a onclick="abrirModalCrud(0,null)" id="abrir-reclamacao"
               class="btn-floating z-depth-3 btn-large waves-effect waves-light scale-transition">
                <i class="material-icons">add</i>
            </a>
        </div>
    @endif

@endsection
@section('specific-scripts')

    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/js/jquery.mask.min.js') }}"></script>
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/js/script-custom/crud-basic.js') }}"></script>
    <script>

        $('#telefone').mask('(99) 9999-9999');
        $('#celular').mask('(99) 9 9999-9999');
        $('#cpf').mask('000.000.000-00');

        var linkCrud = [
            '/usuario/cadastrar',
            '/usuario/editar',
            '/usuario/deletar'
        ];

        inicio({{ count($usuario->data) }})
        $('#formDeletar').attr('action', linkCrud[2]);
        $('.titulo_pagina').text('@lang('Usuário')');


        function linhaEscolhida(data) {

            countCheckMarcados = $('input:checkbox:checked').length;

            if (countCheckMarcados === 0) {
                $('#divEditar').attr('hidden', 'hidden');
                $('#divExcluir').attr('hidden', 'hidden');
            }
            if (countCheckMarcados === 1) {
                $('#divEditar').removeAttr('hidden', 'hidden');
                $('#divExcluir').attr('hidden', 'hidden');

                $('#btnEditar').attr('onclick', 'abrirModalCrud(1,' + JSON.stringify(data) + ')');
                $('#btnAssociarCategoria').attr('onclick', 'abrirModalAssociarCategoria(' + JSON.stringify(data) + ')');
                $('#btnPermissoes').attr('onclick', 'abrirModalPermissoes(' + JSON.stringify(data) + ')');

            }
            if (countCheckMarcados > 1) {
                $('#divExcluir').removeAttr('hidden', 'hidden');
                $('#divEditar').attr('hidden', 'hidden');
            }

        }

        function abrirModalAssociarCategoria(data) {

            $.ajax({
                type: 'GET',
                dataType: 'html',
                url: '/usuario/associar/categoria',
                data: {userId: data.id},
                beforeSend: function () {
                    $('#loadModalCategoria').removeAttr('hidden', 'hidden');
                    $('#conteudoModalAssociar').empty();
                    $('#modalAssociarCategoria').modal('open');
                },
                success: function (data) {
                    $('#loadModalCategoria').attr('hidden', 'hidden');
                    $('#conteudoModalAssociar').append(data);


                },
                error: function (xhr) {
                }
            });

        }

        function abrirModalPermissoes(data) {

            $.ajax({
                type: 'GET',
                dataType: 'html',
                url: '/usuario/associar/permissoes',
                data: {userId: data.id},
                beforeSend: function () {
                    $('#loadModalAssociar').removeAttr('hidden', 'hidden');
                    $('#conteudoPermissoes').empty();
                    $('#modalPermissoes').modal('open');
                },
                success: function (data) {
                    $('#loadModalAssociar').attr('hidden', 'hidden');
                    $('#conteudoPermissoes').append(data);


                },
                error: function (xhr) {
                }
            });

        }

        function enviarFormPermissoes() {

            $('#formPermissoes').submit();

        }

        @php($url = '')

        @if(isset($_GET['filtro']))
        @php($url = '/usuario')

        @else

        @php($url = '?filtro=desativados')

        @endif

        $('#labelFiltro').text('{{ ($url == '/usuario' ? 'Aitvos' : 'Desativados') }}');

        function filtro() {

            if ($('#users-desativados').is(':checked')) {

                window.location.href = '{{ $url }}';
            }

        }

        $("#formCrud").validate({
            rules: {
                @if(session('configuration')['cre_user_validation'] === 1)
                password: {
                    required: true,
                    minlength: 4
                },
                @endif
                name: {
                    required: true,
                },
                email: {
                    required: true,
                },
                sexo: {
                    required: true
                },
                @if(session('configuration')['exigir_cpf'] === 1)
                cpf: {
                    required: true
                }
                @endif
            },
            //For custom messages
            messages: {
                password: {
                    required: "Campo nome é obrigatorio",
                },
                name: {
                    required: "Campo nome é obrigatorio",
                },
                email: {
                    required: "Campo email é obrigatorio",
                },
                sexo: {
                    required: 'Escolha um sexo'
                },
                @if(session('configuration')['exigir_cpf'] === 1)
                cpf: {
                    required: 'Campo CPF é obrigatorio'
                }
                @endif

            },
            errorElement: 'div',
            errorPlacement: function (error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            }
        });

        function doFilter() {
            const filtro = $('#busca_name').val();
            window.location.href = `?name=${filtro}`;
        }


        $(document).ready(function () {

            function limpa_formulário_cep() {
                // Limpa valores do formulário de cep.
                $("#rua").val("");
                $("#bairro").val("");
                $("#cidade").val("");
                $("#uf").val("");
                $("#ibge").val("");
            }

            //Quando o campo cep perde o foco.
            $("#cep").blur(function () {

                //Nova variável "cep" somente com dígitos.
                var cep = $(this).val().replace(/\D/g, '');
                //Verifica se campo cep possui valor informado.
                if (cep != "") {

                    //Expressão regular para validar o CEP.
                    var validacep = /^[0-9]{8}$/;
                    //Valida o formato do CEP.
                    if (validacep.test(cep)) {

                        //Preenche os campos com "..." enquanto consulta webservice.
                        $("#rua").val("...");
                        $("#bairro").val("...");
                        $("#cidade").val("...");
                        $("#uf").val("...");
                        $("#ibge").val("...");
                        //Consulta o webservice viacep.com.br/
                        $.getJSON("https://viacep.com.br/ws/" + cep + "/json/?callback=?", function (dados) {

                            if (!("erro" in dados)) {
                                //Atualiza os campos com os valores da consulta.
                                $("#rua").val(dados.logradouro);
                                $("#bairro").val(dados.bairro);
                                $("#cidade").val(dados.localidade);
                                $("#uf").val(dados.uf);
                                $("#ibge").val(dados.ibge);
                            } //end if.
                            else {
                                //CEP pesquisado não foi encontrado.
                                limpa_formulário_cep();
                                alert("CEP não encontrado.");
                            }
                        });
                    } //end if.
                    else {
                        //cep é inválido.
                        limpa_formulário_cep();
                        alert("Formato de CEP inválido.");
                    }
                } //end if.
                else {
                    //cep sem valor, limpa formulário.
                    limpa_formulário_cep();
                }
            });
        });

        @if (session('status'))

        msgToast('{{ session('status') }}');

        @endif


    </script>

@stop