@extends('adminlte::page')

@section('title', 'Configuração do Perfil')

@section('content_header')
    <div class="row">
    </div>
@stop

@section('content')
    @if(Session::has('success'))
        @php
            $data = Session::get('success');
        @endphp

        @if (is_array($data))
            @foreach ($data as $msg)
                <div class="alert alert-success auto-dismiss" role="alert">
                    <i class="fa fa-check"></i>
                    {{ $msg }}
                </div>
            @endforeach
        @else
            <div class="alert alert-success auto-dismiss" role="alert">
                <i class="fa fa-check"></i>
                {{ $data }}
            </div>
        @endif
    @endif

    @if(Session::has('error'))
        @php
            $data = Session::get('error');
        @endphp

        @if (is_array($data))
            @foreach ($data as $msg)
                <div class="alert alert-danger auto-dismiss" role="alert">
                    <i class="fa fa-times"></i>
                    {{ $msg }}
                </div>
            @endforeach
        @else
            <div class="alert alert-danger auto-dismiss" role="alert">
                <i class="fa fa-times"></i>
                {{ $data }}
            </div>
        @endif
    @endif
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-md-8 col-8">
                        <h3>Perfil Usuário</h3>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="nav-tabs-custom">
                            <ul class="nav nav-tabs">
                                <li class="no-margin no-padding col-lg-3 col-md-3 col-sm-3 col-xs-3"><a href="#empresa" data-toggle="tab" onclick="openTab('Perfil')">Perfil</a></li>
                                <li class="no-margin no-padding col-lg-3 col-md-3 col-sm-3 col-xs-3 active"><a href="#config" data-toggle="tab" onclick="openTab('config')">Permisões</a></li>
                            </ul>
                        </div>
                        <div id="tabs" class="tab-content">
                            
                            <div class="tab-pane fade in active" id="Perfil">
                                <form id="formperfil" action="{{ route('perfil.editar', ['user' => $empresa->id]) }}" method="post">
                                    @csrf
                                    @method('PUT')
                                    <span>Dados do usuário</span>
                                    <div class="divisorBox">
                                    <hr>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="name" class="col-form-label text-md-end">{{ __('Nome') }}</label>
                                            <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name', $empresa->name) }}" required autocomplete="name" autofocus>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="user_name" class="col-form-label text-md-end">{{ __('Usuario') }}</label>
                                            <input id="user_name" type="text" class="form-control @error('user_name') is-invalid @enderror"  name="user_name" value="{{ old('user_name' , $empresa->user_name) }}"  required autocomplete="user_name" autofocus oninput="this.value = this.value.replace(/\s/g, '')">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="email" class="col-form-label text-md-end">{{ __('Email') }}</label>
                                            <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email' , $empresa->email) }}" required autocomplete="email" autofocus>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="vendedor" class="col-form-label text-md-end">{{ __('Vendedor') }}</label>
                                                <select id="vendedor" type="text" class="custom-select @error('vendedor') is-invalid @enderror" name="vendedor" autocomplete="vendedor" autofocus disabled>
                                                @if(isset($VendedorAtual))
                                                    <option value="{{ $VendedorAtual->id }}" selected>{{ $VendedorAtual->codigo }} - {{ $VendedorAtual->nome }}</option>
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="divisorBox">
                                        <span>Ações</span>
                                        <hr>
                                        <div class="row row-btns">
                                            <div class="col-md-6 col-6">
                                                <button type="button" class="btn btn-primary btn-alterar-senha" id="btnsenha" data-toggle="modal" data-target="#PerfilModal">
                                                    {{ __('Alterar Senha') }}
                                                </button>
                                            </div>
                                            <div class="col-md-6 col-6 text-lg-end btn-perfil-container" style="text-align: right;">
                                                <button type="button" class="btn btn-primary btn-alterar-perfil" id="btnperfil">
                                                    {{ __('Alterar Perfil') }}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane fade" id="config">
                                <h4 class="text-center mt-3">
                                    <strong>Permisões do Usuário</strong>
                                </h4>
                                <hr>
                                <div class="row mt-3">  
                                    <div class="col-md-4" style="max-height: 400px; overflow-y: auto; border-right: 1px solid #ddd;">
                                        <div id="accordionPermissoes">
                                            <div class="card mb-2">
                                                <div class="card-header p-2 toggle-collapse" data-target="#cadastros" style="cursor:pointer;">
                                                    <strong>Cadastros</strong>
                                                </div>
                                                <ul class="list-group collapse show" id="cadastros">
                                                    <li class="list-group-item" data-permissao="fornecedores">Fornecedores</li>
                                                    <li class="list-group-item" data-permissao="classes">Classes de Produtos</li>
                                                    <li class="list-group-item" data-permissao="produtos">Produtos</li>
                                                    <li class="list-group-item" data-permissao="clientes">Clientes</li>
                                                    <li class="list-group-item" data-permissao="planos">Plano de Contas</li>
                                                    <li class="list-group-item" data-permissao="vendedores">Vendedores</li>
                                                    <li class="list-group-item" data-permissao="autores">Autores</li>
                                                    <li class="list-group-item" data-permissao="assuntos">Assuntos</li>
                                                </ul>
                                            </div>
                                            <div class="card mb-2">
                                                <div class="card-header p-2 toggle-collapse" data-target="#controles" style="cursor:pointer;">
                                                    <strong>Controles</strong>
                                                </div>
                                                <ul class="list-group collapse" id="controles">
                                                    <li class="list-group-item" data-permissao="consignacoes">Consignações</li>
                                                    <li class="list-group-item" data-permissao="lancamentos">Lançamento de Estoque</li>
                                                    <li class="list-group-item" data-permissao="vendas">Vendas</li>
                                                    <li class="list-group-item" data-permissao="fechamento">Fechameto de Caixa</li>
                                                    <li class="list-group-item" data-permissao="receber">Contas a Receber</li>
                                                    <li class="list-group-item" data-permissao="pagar">Contas a Pagar</li> 
                                                </ul>
                                            </div>
                                            <div class="card mb-2">
                                                <div class="card-header p-2 toggle-collapse" data-target="#gerencial" style="cursor:pointer;">
                                                    <strong>Gerencial / Relatórios</strong>
                                                </div>
                                                <ul class="list-group collapse" id="gerencial">
                                                    <li class="list-group-item" data-permissao="relatorio_entradas">Relatório de Entradas</li>
                                                    <li class="list-group-item" data-permissao="relatorio_saidas">Relatório de Sáidas</li>
                                                    <li class="list-group-item" data-permissao="relatorio_movimentacoes">Movimentação Estoque</li>
                                                </ul>
                                            </div>
                                            <div class="card mb-2">
                                                <div class="card-header p-2 toggle-collapse" data-target="#configuracoes" style="cursor:pointer;">
                                                    <strong>Configurações</strong>
                                                </div>
                                                <ul class="list-group collapse" id="configuracoes">
                                                    <li class="list-group-item" data-permissao="usuarios">Usuários</li>
                                                    <li class="list-group-item" data-permissao="perfil">Perfil</li>
                                                    <li class="list-group-item" data-permissao="configuracoes">Configurações Gerais</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-8">
                                        <div id="subpermissoes" class="p-3 border rounded bg-light">
                                            <p class="text-muted">Clique em um módulo ao lado para configurar suas permissões.</p>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" id="acessosDoBanco" value="{{ implode(',', $acessosArray ?? []) }}">
                                <div class="text-primary">
                                    <hr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form id="formsenha" action="{{ route('perfil.AlterarSenha', ['user' => $empresa->id]) }}" method="post">
        @csrf
        @method('PUT')
        <div class="modal fade" id="PerfilModal" tabindex="-1" aria-labelledby="PerfilModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="DeleteModalLabel">Alterar senha</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-4 col-12 col-sm-3">
                                        <label for="senha_atual" class="col-form-label text-md-end">{{ __('Senha Atual') }}</label>
                                        <input id="senha_atual" type="password" class="form-control" name="senha_atual" value="{{ old('senha_atual') }}" autocomplete="senha_atual" autofocus>
                                    </div>
                                    <div class="col-md-4 col-12 col-sm-3">
                                        <label for="password" class="col-form-label text-md-end">{{ __('Nova senha') }}</label>
                                        <input id="password" type="password" class="form-control" name="password" value="{{ old('password') }}" autocomplete="password" autofocus>
                                    </div>
                                    <div class="col-md-4 col-12 col-sm-3">
                                        <label for="password_confirmation" class="col-form-label text-md-end">{{ __('Confirmação Senha') }}</label>
                                        <input id="password_confirmation" type="password" class="form-control" name="password_confirmation" value="{{ old('password_confirmation') }}" autocomplete="password_confirmation" autofocus>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="button" class="btn btn-success" id="btnalterarsenha">Alterar</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <style>
     .nav-tabs-custom {
      width: 100%;
      margin-left: 0;
      border-bottom: none;
    }

    .nav-tabs-custom .nav-tabs {
      margin-bottom: 0;
    }

    .nav-tabs-custom .nav-tabs li {
      float: none;
      display: inline-block;
    }

    .nav-tabs-custom .nav-tabs li a {
      border: 1px solid #ddd;
      border-radius: 4px 4px 0 0;
      color: #333;
      padding: 12px 0;
      margin-top: -1px;
      background-color: #f8f8f8;
      display: inline-block;
      width: 100%;
      text-align: center; 
    }

    .nav-tabs-custom .nav-tabs li a:hover,
    .nav-tabs-custom .nav-tabs li.active a {
      border-bottom-color: transparent;
      background-color: #fff;
    }

    .tab-content {
      width: 100%;
      margin-top: 20px;
    }
    
    .btn-alterar-senha {
        background-color: orange;
        color: white;
    }

    .btn-alterar-perfil {
        background-color: green;
        color: white;
    }

    .row-btns {
        display: flex;
        justify-content: space-between;
    }

    .btn-perfil-container {
        align-self: flex-end;
    }

    .campo-obrigatorio-faltando {
        border: 2px solid red;
    }

    .swal2-container {
        z-index: 10000 !important;
    }
  </style>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    
@stop
@section('js')
    <script>
        function openTab(tabName) {
            $('.nav-tabs li').removeClass('active');
            $('.nav-tabs li a[href="#' + tabName + '"]').parent().addClass('active');
            $('.tab-content .tab-pane').removeClass('show active');
            $('#' + tabName).addClass('show active');
        }

        function openFirstTab() {
                openTab('Perfil');
            }

        document.addEventListener('DOMContentLoaded', openFirstTab);

        function redirecionarParaEditarPerfil() {

            document.getElementById('formperfil').submit();
        
        }

        $('#btnperfil').on('click', function() {
            if (camposObrigatoriosPreenchidos()) {         
                    Swal.fire({
                        title: 'Confirmação',
                        text: 'Deseja realmente Alterar esse Pefil?',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Confirmar',
                        cancelButtonText: 'Cancelar',
                        customClass: {
                            popup: 'mt-5' 
                        }
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.getElementById('formperfil').submit();
                    }
                });
            } else {
                Swal.fire({
                    title: 'Erro',
                    text: 'Por favor, preencha todos os campos obrigatórios.',
                    icon: 'error',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK',
                    customClass: {
                        popup: 'mt-5' 
                    }
                });
            }
        });
        $('#btnalterarsenha').on('click', function() {
            if (camposObrigatoriosPreenchidos()) {         
                    Swal.fire({
                        title: 'Confirmação',
                        text: 'Deseja realmente a senha esse Pefil?',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Confirmar',
                        cancelButtonText: 'Cancelar',
                        customClass: {
                            popup: 'mt-5' 
                        }
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.getElementById('formsenha').submit();
                    }
                });
            } else {
                Swal.fire({
                    title: 'Erro',
                    text: 'Por favor, preencha todos os campos obrigatórios.',
                    icon: 'error',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK',
                    customClass: {
                        popup: 'mt-5' 
                    }
                });
            }
        });
        function camposObrigatoriosPreenchidos() {
            var campos = $('input[required], select[required], textarea[required]');
            var Preenchidos = true;

            campos.each(function() {
                if ($(this).is('select') && $(this).hasClass('select2-hidden-accessible')) {
                    var select2Val = $(this).val();
                    if (!select2Val) {
                        Preenchidos = false;
                        $(this).next('.select2-container').addClass('campo-obrigatorio-faltando');
                    } else {
                        $(this).next('.select2-container').removeClass('campo-obrigatorio-faltando');
                    }
                } else {
                    if (!$(this).val().trim()) {
                        Preenchidos = false;
                        $(this).addClass('campo-obrigatorio-faltando');
                    } else {
                        $(this).removeClass('campo-obrigatorio-faltando');
                    }
                }
            });

            return Preenchidos;
        }
        $(document).ready(function() {
            $('input[required], select[required], textarea[required]').on('input change', function() {
                if ($(this).is('select') && $(this).hasClass('select2-hidden-accessible')) {
                    var select2Val = $(this).val();
                    if (!select2Val) {
                        $(this).next('.select2-container').addClass('campo-obrigatorio-faltando');
                    } else {
                        $(this).next('.select2-container').removeClass('campo-obrigatorio-faltando');
                    }
                } else {
                    if (!$(this).val().trim()) {
                        $(this).addClass('campo-obrigatorio-faltando');
                    } else {
                        $(this).removeClass('campo-obrigatorio-faltando');
                    }
                }
            });
        });

        setTimeout(() => {
            document.querySelectorAll('.auto-dismiss').forEach(el => {
                el.style.transition = 'opacity 0.5s ease';
                el.style.opacity = '0';
                setTimeout(() => el.remove(), 500); 
            });
        }, 3000);
        
        const permissoes = {
            fornecedores: {
                Visualizar: 1,
                Incluir: 2,
                Alterar: 3,
                Deletar: 4
            },
            classes: {
                Visualizar: 5,
                Incluir: 6,
                Alterar: 7,
                Deletar: 8
            },
            produtos: {
                Visualizar: 9,
                Incluir: 10,
                Alterar: 11,
                Deletar: 12
            },
            clientes: {
                Visualizar: 13,
                Incluir: 14,
                Alterar: 15,
                Deletar: 16
            },
            planos: {
                Visualizar: 17,
                Incluir: 18,
                Alterar: 19,
                Deletar: 20
            },
            vendedores: {
                Visualizar: 21,
                Incluir: 22,
                Alterar: 23,
                Deletar: 24
            },
            autores: {
                Visualizar: 25,
                Incluir: 26,
                Alterar: 27,
                Deletar: 28
            },
            assuntos: {
                Visualizar: 29,
                Incluir: 30,
                Alterar: 31,
                Deletar: 32
            },
            consignacoes: {
                Visualizar: 33,
                Incluir: 34,
                Alterar: 35,
                Deletar: 36
            },
            lancamentos: {
                Visualizar: 37,
                Incluir: 38,
                Alterar: 39,
                Deletar: 40
            },
            vendas: {
                Visualizar: 41,
                Incluir: 42,
                Alterar: 43,
                Deletar: 44
            },
            fechamento: {
                Visualizar: 45,
                Incluir: 46,
                Alterar: 47,
                Deletar: 48
            },
            receber: {
                Visualizar: 49,
                Incluir: 50,
                Alterar: 51,
                Deletar: 52
            },
            pagar: {
                Visualizar: 53,
                Incluir: 54,
                Alterar: 55,
                Deletar: 56
            },
            
            relatorio_entradas: {
                Visualizar: 57
            },
            relatorio_saidas: {
                Visualizar: 58
            },
            relatorio_movimentacoes: {
                Visualizar: 59
            },
            usuarios: {
                Visualizar: 60,
                Incluir: 61,
                Alterar: 62,
                Deletar: 63
            },
            perfil: {
                Visualizar: 64,
                Alterar: 65
            },
            configuracoes: {
                Visualizar: 66,
                Alterar: 67
            }
        };

        const permissoesSelecionadas = {};

        const acessosBancoRaw = document.getElementById('acessosDoBanco')?.value || '';
        if (acessosBancoRaw) {
            const acessosArray = acessosBancoRaw.split(',').map(v => parseInt(v));

            acessosArray.forEach(valor => {
                for (const modulo in permissoes) {
                    for (const nomePermissao in permissoes[modulo]) {
                        if (permissoes[modulo][nomePermissao] === valor) {
                            if (!permissoesSelecionadas[modulo]) {
                                permissoesSelecionadas[modulo] = [];
                            }
                            permissoesSelecionadas[modulo].push(valor);
                        }
                    }
                }
            });
        }
        
        $(document).on('click', '.list-group-item', function () {
            const modulo = $(this).data('permissao');
            const acoes = permissoes[modulo];
            if (!acoes) return;

            if (!permissoesSelecionadas[modulo]) {
                permissoesSelecionadas[modulo] = [];
            }

            let html = `
                <h5 class="mb-3 text-primary text-capitalize">${modulo.replace('_', ' ')}</h5>
                <div class="row">
            `;

            Object.entries(acoes).forEach(([acao, valor], index) => {
                const checkboxId = `${modulo}_${index}`;
                const checked = permissoesSelecionadas[modulo].includes(valor) ? 'checked' : '';

                html += `
                    <div class="col-md-6">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="${checkboxId}" data-modulo="${modulo}" data-valor="${valor}" ${checked} disabled>
                            <label class="form-check-label" for="${checkboxId}">
                                ${acao}
                            </label>
                        </div>
                    </div>
                `;
            });

            html += `
                </div>
                <input type="hidden" name="acessos[]" value="${permissoesSelecionadas[modulo].join(',')}">
            `;

            $('#subpermissoes').html(html);
        });

        

        $(document).ready(function () {
            $('.toggle-collapse').on('click', function () {
                const targetId = $(this).data('target');
                const $target = $(targetId);

                if ($target.hasClass('show')) {
                    $target.collapse('hide');
                } else {
                    $target.collapse('show');
                }
            });
        });
    </script>
  
    <script src="{{ URL::asset('js/ConsultaCEP/ConsultaCEP.js') }}"></script>
@stop