@extends('layouts.app')
<style>
    .password-container {
        position: relative;
    }
    .password-container input {
        width: 100%;
        padding-right: 30px; /* Make space for the icon */
        box-sizing: border-box; /* Ensure padding is considered in the width */
        height: 40px; /* Set a specific height for the input field */
        line-height: 40px; /* Ensure the text inside the input is vertically centered */
    }
    .password-container .fa-eye {
        margin: 0px 5% 0px 95%;
        transform: translateY(-200%);
        cursor: pointer; /* Change cursor to pointer when hovering over the icon */
    }
    .password-container .fa-copy {
        margin: 0px 5% 0px 95%;
        transform: translateY(-200%);
        cursor: pointer; /* Change cursor to pointer when hovering over the icon */
    }
    .validation-message {
        color: red;
        display: none;
        font-size: 0.875em;
    }
    .complexidade-red{
        color:red;
    }
    .complexidade-green{
        color:green;
    }
    input[type=number]::-webkit-inner-spin-button { 
        -webkit-appearance: none;
        
    }
    input[type=number] { 
    -moz-appearance: textfield;
    appearance: textfield;

    }

</style>

@section('content')
  
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <a href="{{ url('/home') }}">Home</a>
                        <i class="fa fa-circle"></i>
                    </li>
                    <li>
                        <span>Usuários</span>
                    </li>
                </ul>
            </div>
            <h1 class="page-title nova-faixa"> Usuários 
                <div class="pull-right">
                    <i class="nova-faixa-icon icon-user"></i>
                </div>
            </h1>
            <h4>
                <small class="pull-right">
                    <span class="ajuda" data-toggle="confirmation" data-popout="true" data-trigger="hover" data-placement="left" data-original-title="" title="" id="ajuda">
                        Ajuda <i class="fa fa-question-circle" aria-hidden="true"></i>
                    </span>
                </small>
            </h4>
            <div class="row">
                <div class="col-md-12">
                    <div class="">                                 
                        
                        <!-- BLOCO DE PESQUISA -->
                        <div class="portlet" style="margin-bottom: 0;">
                            <div class="portlet-body form">
                                <!-- FORMULARIO DE PESQUISA -->
                                    <!-- SUBSTITUIR OS COMPOS PELO DA CLASSE   -->
                                <form class="horizontal-form" method="post" id="formPesquisa">
                                    {{ csrf_field() }}  
                                    <div class="" style="padding-bottom: 0;">
                                        <div class="row">
                                            <div class="col-md-6">
                                                @can('config-usuarios-cadastrar')
                                                    @if($permite_cadastro)
                                                        <a data-toggle="modal" class="" id="cadastrar">
                                                            <button type="button" class="btn blue">
                                                                <i class="fa fa-plus"></i> Cadastrar
                                                            </button>
                                                        </a>
                                                        <span id="msg_cadastrar"></span>

                                                    @else
                                                        <a data-toggle="modal" class="" id="cadastrar" style="display:none">
                                                            <button type="button" class="btn blue">
                                                                <i class="fa fa-plus"></i> Cadastrar
                                                            </button>
                                                        </a>
                                                        <span id="msg_cadastrar">Você atingiu a quantidade de licenças contratadas.</span>
                                                    @endif

                                                @endcan
                                            </div>
                                            <div class="col-md-6">
                                                        <span id="quantidade_contratada">Licenças contratadas: {{ $quantidade_contratada }} |</span>
                                                        
                                                        <span id="quantidade_utilizada">Licenças utilizadas: {{ $quantidade_utilizada }} |</span> 
                                                        
                                                        <span id="quantidade_disponivel">Licenças disponíveis: {{ $quantidade_disponivel }}</span> 
                                            </div>
                                        </div>
                                        <div class="form-body nopadding">
                                            <div class="col-md-12 nopadding" style="padding-bottom: 0px;">
                                                <a data-toggle="modal" class="" id="cnf_mfa">
                                                    <button type="button" class="btn blue">
                                                        <i class="icon-settings"></i> Configuração MFA
                                                    </button>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="form-body row">
                                            <div class="col-md-11 nopadding" style="padding-bottom: 0px;">  
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="control-label"><i class="fa fa-search"></i> Pesquisa - Usuários</label>
                                                        <div class="input-group">
                                                            <span class="input-group-addon">
                                                                <i class="fa fa-search"></i>
                                                            </span>
                                                            <input type="text" class="form-control" name="filter" onkeypress="return enviar(event,'#pesquisar')" placeholder="Ex: Nome /  E-mail">
                                                        </div>
                                                    </div>
                                                </div>
                                                <input type="text" style="display:none;" class="form-control"  placeholder="Ex: Nome /  E-mail">
                                                <div class="col-md-3 col-lg-3">
                                                    <div class="form-group">
                                                        <div class="row col-md-12">
                                                        <label class="control-label">Status</label>
                                                        </div>
                                                        <div class="row col-md-12">
                                                        <!-- <label class="control-label">
                                                        <input type="radio" name="status" value="1" checked=""> Ativo
                                                        </label>
                                                        <label class="control-label" style="padding-left: 12px;">
                                                        <input type="radio" name="status" value="0"> Inativo
                                                        </label> -->

                                                            <div class="md-radio-inline">
                                                                <div class="md-radio">
                                                                    <input type="radio" id="radio6" name="status" class="md-radiobtn" value="1" checked>
                                                                    <label for="radio6">
                                                                        <span></span>
                                                                        <span class="check"></span>
                                                                        <span class="box"></span> Ativo </label>
                                                                </div>
                                                                <div class="md-radio">
                                                                    <input type="radio" id="radio7" name="status" class="md-radiobtn" value="0">
                                                                    <label for="radio7">
                                                                        <span></span>
                                                                        <span class="check"></span>
                                                                        <span class="box"></span> Inativo </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div> 
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label class="control-label" style="width: 100%; height: 15px;"></label>
                                                        <button type="button" class="btn blue" id="pesquisar">
                                                            <i class="fa fa-search"></i> Pesquisar
                                                        </button>                                   
                                                    </div>
                                                </div>   
                                            </div>                                    
                                        </div>
                                    </div>
                                </form>


                            </div>
                        </div> <!-- End Pesquisa -->
                            
                        <!-- Tabela com a pesquisa --> 
                        <div class="portlet-body">
                            <table class="table table-striped table-bordered table-advance table-hover table-checkable order-column" id="sample_1">
                                <thead>
                                    <tr>
                                        <th>
                                            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                                <input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" />
                                                <span></span>
                                            </label>
                                        </th>
                                        <!-- <th><i class="fa fa-user"></i> Usuário </th> -->
                                        <th><i class="fa fa-address-card"></i> Nome </th>
                                        <th><i class="fa fa-envelope"></i> E-mail </th>
                                        <th> Ramal </th>
                                        <th> Perfil de acesso </th>
                                        <th> Status </th>
                                        <th> Senha </th>
                                        <th><i class="fa fa-cogs"></i> Ações</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <!-- END EXAMPLE TABLE PORTLET-->
                </div>
            </div>
        </div>
        <!-- END CONTENT BODY -->
    </div>
    <!-- END CONTENT -->

<div class="modal fade" id="ModalVisualizar" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background:#2598d8;font-weight: 600;color: white; ">
                <h4 class="modal-title" style="font-weight: 600 !important">Visualizar Usuário</h4>
            </div>
            <div class="modal-body">
               
                <form action="" class="horizontal-form" method="post" id="formVisualizar">
                    {{ csrf_field() }}
                    <input type="hidden" name="id" value="">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">Nome</label>
                                <span class="required"> * </span>
                                <span class="row col-md-12 form-group name"></span>
                            </div>

                            <!-- <div class="form-group">
                                <label class="control-label">Login</label>
                                <span class="required"> * </span>
                                <span class="row col-md-12 form-group user"></span>
                            </div> -->
            
                            <div class="form-group">
                                <label class="control-label">E-mail</label>
                                <span class="required"> * </span>
                                <span class="row col-md-12 form-group email"></span>
                            </div>

                            <div class="form-group">
                                <label class="control-label">Perfil de Acesso</label>
                                <span class="required"> * </span>
                                <span class="row col-md-12 form-group acesso"></span>
                            </div>

                            <div class="form-group">
                                <label class="control-label">Ramal</label>
                                <!-- <span class="required"> * </span> -->
                                <span class="row col-md-12 form-group ramal"></span>
                            </div>

                            <div class="form-group">
                                <label class="control-label">Posição</label>
                                <!-- <span class="required"> * </span> -->
                                <span class="row col-md-12 form-group posicao"></span>
                            </div>

                        </div>
                    </div>
                </form>    
            </div>
            <div class="modal-footer">
                <button type="button" class="btn dark btn-outline" data-dismiss="modal">Fechar</button>
            </div>
            <div class="erros" style="display: none;">
                <div class="alert alert-danger">
                    <ul>
                    </ul>
                </div>
            </div>
            <div class="success" style="display: none;">
                <div class="alert alert-success">
                    <ul>
                    </ul>
                </div>
            </div>  
        </div>
    </div>
</div>

<div class="modal fade" id="ModalConfigMFA"  tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background:#2598d8;font-weight: 600;color: white; ">
                <h4 class="modal-title" style="font-weight: 600 !important">Configuração MFA</h4>
            </div>
            <div class="modal-body">
               
                <form class="horizontal-form" id="formConfigMFA">
                    {{ csrf_field() }}
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">Lembrar a MFA por quantos dias: <span style="color:red;font-size:10px;font-style:italic">(Máximo permitido 30 dias)</span></label>
                                <input type="number" class="form-control" name="rememberMFA">
                            </div>
                        </div>
                    </div>
                </form>    
            </div>
            <div class="modal-footer">
                <button type="button" class="btn dark btn-outline" data-dismiss="modal">Fechar</button>
                <button type="button" class="btn blue" id="setConfMFA">
                    <i class="fa fa-check"></i> Salvar
                </button>
            </div>
            <div class="erros" style="display: none;">
                <div class="alert alert-danger">
                    <ul>
                    </ul>
                </div>
            </div>
            <div class="success" style="display: none;">
                <div class="alert alert-success">
                    <ul>
                    </ul>
                </div>
            </div>  
        </div>
    </div>
</div>

@can('config-usuarios-cadastrar')
<div class="modal fade" id="ModalCadastro"  tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background:#2598d8;font-weight: 600;color: white; ">
                <h4 class="modal-title" style="font-weight: 600 !important">Cadastrar Usuário</h4>
            </div>
            <div class="modal-body">
               
                <form class="horizontal-form" id="formCadastro">
                    {{ csrf_field() }}
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">Nome</label>
                                <span class="required"> * </span>
                                <input type="text" class="form-control" name="name">
                            </div>

                            <!-- <div class="form-group">
                                <label class="control-label">Login</label>
                                <span class="required"> * </span>
                                <input type="text" class="form-control" name="user">
                            </div> -->
            
                            <div class="form-group">
                                <label class="control-label">E-mail</label>
                                <span class="required"> * </span>
                                <input type="email" class="form-control" name="email">
                            </div>

                            <div class="form-group">
                                <label class="control-label">Perfil de Acesso</label>
                                <span class="required"> * </span>
                                <select class="form-control" name="role">
                                    <option value=""></option>
                                    @foreach( $roles as $role )
                                        <option value="{{$role->id}}">{{$role->name}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="control-label">Ramal</label>
                                <input type="text" class="form-control" name="ramal">
                            </div>

                            <div class="form-group">
                                <label class="control-label">Multi-factor Authentication (MFA)</label>
                                <div>
                                    <label class="radio-inline">
                                        <input type="radio" name="mfa" value="1" id="mfa_sim1"> Sim
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="mfa" value="0" id="mfa_nao2" checked> Não
                                    </label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label">Gerar Senha Automática</label>
                                <span class="required"> * </span>
                                <div>
                                    <label class="radio-inline">
                                        <input type="radio" name="new_radio" value="sim" id="radio_sim1"> Sim
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="new_radio" value="nao" id="radio_nao2" checked> Não
                                    </label>
                                </div>
                            </div>

                            <div class="form-group password-container">
                                <label class="control-label">Senha</label>
                                <span class="required"> * </span>
                                <input type="password" class="form-control" name="password" id="password">
                                <i class="fa fa-eye" id="togglePassword1"></i>
                                <div class="validation-message" id="passwordMatchMessage">As senhas não coincidem.</div>
                            </div>

                            <div class="form-group password-container">
                                <label class="control-label">Confirmar Senha</label>
                                <span class="required"> * </span>
                                <input type="password" class="form-control" name="confirm_password" id="confirm_password">
                                <i class="fa fa-eye" id="togglePassword2"></i>
                            </div>
                            @if(!empty($complexidade))
                            <div id="complexidade">
                                <span id="tm_min" class="complexidade-red">Tamanho mínimo: {{$complexidade->tamanho_minimo}}</span><br/>
                                <span id="qtd_letras" class="complexidade-red">Quantidade de letras: {{$complexidade->qtd_minima_letras}}</span><br/>
                                <span id="maiusculas" class="complexidade-red">Deve conter letra maiúscula: {{$complexidade->letra_maiuscula == '1' ? 'Sim' : 'Não'}}</span><br/>
                                <span id="qtd_numero" class="complexidade-red">Quantidade de números: {{$complexidade->qtd_minima_numeros}}</span><br/>
                                <span id="qtd_caracter" class="complexidade-red">Quantidade de caracteres especiais: {{$complexidade->qtd_minima_character_esp}}</span><br/>
                                <span id="caracter" class="complexidade-red">Caracteres considerados especiais: {{$complexidade->caracteres_considerados_especiais}}</span><br/>
                            </div>
                            @endif
                        </div>
                    </div>
                </form>    
            </div>
            <div class="modal-footer">
                <button type="button" class="btn dark btn-outline" data-dismiss="modal">Fechar</button>
                <button type="button" class="btn blue" id="setCadastro">
                    <i class="fa fa-check"></i> Salvar
                </button>
            </div>
            <div class="erros" style="display: none;">
                <div class="alert alert-danger">
                    <ul>
                    </ul>
                </div>
            </div>
            <div class="success" style="display: none;">
                <div class="alert alert-success">
                    <ul>
                    </ul>
                </div>
            </div>  
        </div>
    </div>
</div>
@endcan

@can('config-usuarios-editar')
<div class="modal fade" id="ModalEditar" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background:#2598d8;font-weight: 600;color: white; ">
                <h4 class="modal-title" style="font-weight: 600 !important">Editar Usuário</h4>
            </div>
            <div class="modal-body">
               
                <form action="" class="horizontal-form" method="post" id="formEditar">
                    {{ csrf_field() }}
                    <input type="hidden" name="id" value="">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">Nome</label>
                                <span class="required"> * </span>
                                <input type="text" class="form-control" name="name">
                            </div>

                            <!-- <div class="form-group">
                                <label class="control-label">Usuário</label>
                                <span class="required"> * </span>
                                <input type="text" class="form-control" name="user">
                            </div> -->
            
                            <div class="form-group">
                                <label class="control-label">E-mail</label>
                                <span class="required"> * </span>
                                <input type="email" class="form-control" name="email">
                            </div>

                            <div class="form-group" id="edit_acesso">
                                <label class="control-label">Perfil de Acesso</label>
                                <span class="required"> * </span>
                                <select class="form-control" name="role">
                                    @foreach( $roles as $role )
                                        <option value="{{$role->id}}">{{$role->name}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="control-label">Ramal</label>
                                <input type="text" class="form-control" name="ramal">
                            </div>

                            <div class="form-group">
                                <label class="control-label">Multi-factor Authentication (MFA)</label>
                                <div>
                                    <label class="radio-inline">
                                        <input type="radio" name="mfa_edit" value="1" id="mfaedit_sim1"> Sim
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="mfa_edit" value="0" id="mfaedit_nao2" checked> Não
                                    </label>
                                </div>
                            </div>

                            <div class="form-group" id="edit_acesso_adm">
                                
                            </div>

                        </div>
                    </div>
                </form>    
            </div>
            <div class="modal-footer">
                <button type="button" class="btn dark btn-outline" data-dismiss="modal">Fechar</button>
                <button type="button" class="btn blue" id="setEditar">
                    <i class="fa fa-check"></i> Salvar</button>
            </div>
            <div class="erros" style="display: none;">
                <div class="alert alert-danger">
                    <ul>
                    </ul>
                </div>
            </div>
            <div class="success" style="display: none;">
                <div class="alert alert-success">
                    <ul>
                    </ul>
                </div>
            </div>  
        </div>
    </div>
</div>
@endcan

@can('config-usuarios-excluir')
<div class="modal fade" id="ModalExcluir" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            
            <div class="modal-header" style="background:#2598d8;font-weight: 600;color: white; ">
                <h4 class="modal-title" id="mensagem" style="font-weight: 600 !important"></h4>
            </div>
            <meta name="csrf-token" content="{{ csrf_token() }}">

            <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal">Não</button>
                    <button type="button" class="btn blue" id="setExcluir">
                        <i class="fa fa-check"></i> Sim</button>
            </div>
            <div class="erros" style="display: none;">
                <div class="alert alert-danger">
                    <ul>
                    </ul>
                </div>
            </div>
            <div class="success" style="display: none;">
                <div class="alert alert-success">
                    <ul>
                    </ul>
                </div>
            </div>  
        </div>
    </div>
</div>
@endcan

    <div class="modal fade" id="ModalRedefinirSenha" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                
                <div class="modal-header" style="background:#2598d8;font-weight: 600;color: white; ">
                    <h4 class="modal-title" id="mensagemSenha" style="font-weight: 600 !important"></h4>
                </div>
                <meta name="csrf-token" content="{{ csrf_token() }}">
                <form action="" class="horizontal-form" method="post" id="resetPassword">
                    <div class="form-group password-container" style="margin: 0 3% 0 3%;">
                        <label class="control-label">Nova senha</label>
                        <input type="text" class="form-control" id="new_password" name="newPassword" readonly>
                        <i class="fa fa-copy" id="copyPassword" data-toggle="tooltip" title="Copiar senha"></i>
                    </div>
                </form>
                
                <div class="modal-footer">
                        <button type="button" class="btn dark btn-outline" data-dismiss="modal">Não</button>
                        <button type="button" class="btn blue" id="setRedefinirSenha">
                            <i class="fa fa-check"></i> Sim
                        </button>
                </div>
                <div class="erros" style="display: none;">
                    <div class="alert alert-danger">
                        <ul>
                        </ul>
                    </div>
                </div>
                <div class="success" style="display: none;">
                    <div class="alert alert-success">
                        <ul>
                        </ul>
                    </div>
                </div>  
            </div>
        </div>
    </div>


@endsection

@push('scripts')
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="{{ asset('global/scripts/datatable.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/datatables/datatables.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/jquery-repeater/jquery.repeater.1.2.1.min.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="{{ asset('pages/scripts/usuario/table-datatables-managed.js') }}" type="text/javascript"></script>
<script src="{{ asset('pages/scripts/usuario/form-repeater.js') }}" type="text/javascript"></script>
<script src="{{ asset('pages/scripts/usuario/bootstrap-confirmation-index.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script>
@if(!empty($complexidade))
$(document).ready(function(){
    const tamanhoMinimo = {{ $complexidade->tamanho_minimo }};
    const qtdletras = {{ $complexidade->qtd_minima_letras }};
    const letrasMaiusculas = {{ $complexidade->letra_maiuscula }};
    const qtdnumeros = {{ $complexidade->qtd_minima_numeros }};
    const qtdcaracter = {{ $complexidade->qtd_minima_character_esp }};
    const caracterespeciais = @json($complexidade->caracteres_considerados_especiais);
    
    const passwordInput = $('#password');
    const tmMin = $('#tm_min');
    const qtdLetras = $('#qtd_letras');
    const maiusculas = $('#maiusculas');
    const qtdNumero = $('#qtd_numero');
    const qtdCaracter = $('#qtd_caracter');
    const caracter = $('#caracter');

    const toggleClass = (element, condition) => {
        element.toggleClass('complexidade-green', condition);
        element.toggleClass('complexidade-red', !condition);
    };

    const validatePassword = () => {
        const inputValue = passwordInput.val();
        const stringSize = inputValue.length;
        const letterCount = (inputValue.match(/[a-zA-Z]/g) || []).length;
        const hasUpperCase = /[A-Z]/.test(inputValue);
        const hasLowerCase = /[a-z]/.test(inputValue);
        const numberCount = (inputValue.match(/\d/g) || []).length;
        const specialChars = new RegExp(`[${caracterespeciais.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')}]`, 'g');
        const specialCharCount = (inputValue.match(specialChars) || []).length;

        // Tamanho mínimo
        toggleClass(tmMin, stringSize >= tamanhoMinimo);

        // Quantidade mínima de letras
        toggleClass(qtdLetras, letterCount >= qtdletras);

        // Letras maiúsculas
        if (letrasMaiusculas == 1) {
            toggleClass(maiusculas, hasUpperCase);
        }else{
            toggleClass(maiusculas, hasLowerCase);

        }

        // Quantidade mínima de números
        toggleClass(qtdNumero, numberCount >= qtdnumeros);

        // Presença de caracteres especiais
        toggleClass(qtdCaracter, specialCharCount > 0);
        toggleClass(caracter, specialCharCount >= qtdcaracter);
    };

    passwordInput.on('input', validatePassword);
});
@endif
</script>
@endpush