@extends('adminlte::page')
@section('title', 'Usuario')
@section('content_header')
    <div class="row">
    </div>
@stop

@section('content')
    @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">
            <form method="POST" id="formEnvioDados" action="{{ route('users.store') }}">
                @method('POST')
                @csrf
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-8 col-8">
                            <h4>Usuário</h4>
                        </div>
                        <div class="col-md-4 col-4 text-lg-end" style="text-align: right;">
                            <button type="button" id="btnSalvar" title="Salvar" class="btn btn-success">
                                <i class="fa fa-save"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <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')}}"  required autocomplete="user_name" autofocus oninput="this.value = this.value.replace(/\s/g, '')">
                            
                            @error('user_name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <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')}}" required autocomplete="name" autofocus>

                            @error('name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <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')}}" required autocomplete="email" autofocus>

                            @error('email')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="password" class="col-form-label text-md-end">{{ __('Senha') }}</label>
                            <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" value="{{ old('password' )}}" required autocomplete="password" autofocus>

                            @error('password')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="password_confirmation" class="col-form-label text-md-end">{{ __('Confirmação da senha') }}</label>
                            <input id="password_confirmation" type="password" class="form-control @error('password_confirmed') is-invalid @enderror" name="password_confirmation" required autocomplete="new-password" autofocus>

                            @error('password_confirmation')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <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 select2 select2-vendedor" name="vendedor" value="{{ old('vendedor') }}" autocomplete="vendedor" autofocus>   
                            </select>

                            @error('vendedor')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <h4 class="text-center mt-3">
                        <strong>Selecione qual conteúdo o novo usuário poderá acessar dentro do sistema</strong>
                    </h4>
                    <hr>
                    <div class="row">
                        <div class="col-md-12">
                            <button type="button" class="btn btn-primary btn-sm me-2" id="selecionarTodos">Selecionar Todos</button>
                            <button type="button" class="btn btn-danger btn-sm" id="limparTodos">Limpar Todos</button>
                        </div>
                    </div>
                    <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>
                    <div class="text-primary">
                        <hr>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

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

        .swal2-container {
            z-index: 10000 !important;
        }

        #accordionPermissoes .list-group-item {
            cursor: pointer;
        }
        #accordionPermissoes .list-group-item:hover {
            background-color: #f0f0f0;
        }
    </style>

 
@stop
@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/i18n/pt-BR.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    
        $(document).ready(function() {
            $('#vendedor').select2({
                theme: 'bootstrap',
                language: "pt-BR",
                width: '100%',
                ajax: {
                    url: '/buscar-seller',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data.results
                        };
                    },
                    cache: true
                },
                minimumInputLength: 1,
                placeholder: 'Digite o código ou descrição para buscar'
            });

        });
        
        document.getElementById('btnSalvar').addEventListener('click', function(event) {
            event.preventDefault();

            if (camposObrigatoriosPreenchidos()) {
                Swal.fire({
                    title: 'Confirmação',
                    text: 'Deseja realmente gravar esse Usuario?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Confirmar',
                    cancelButtonText: 'Cancelar',
                    customClass: {
                        popup: 'mt-5' 
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.querySelectorAll('input[name="acessos[]"]').forEach(el => el.remove());

                        for (const modulo in permissoesSelecionadas) {
                            permissoesSelecionadas[modulo].forEach(valor => {
                                const input = document.createElement('input');
                                input.type = 'hidden';
                                input.name = 'acessos[]';
                                input.value = valor;
                                document.getElementById('formEnvioDados').appendChild(input);
                            });
                        }

                        document.getElementById('formEnvioDados').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');
                    }
                }
            });
        });

        $(document).on('select2:open', (e) => {
            const selectId = e.target.id;
            $(".select2-search__field[aria-controls='select2-" + selectId + "-results']").each(function (key, value) {
                value.focus();
            });
        });

       $('#selecionarTodos').on('click', function () {
            for (const modulo in permissoes) {
                permissoesSelecionadas[modulo] = Object.values(permissoes[modulo]);
            }
            $('#subpermissoes').html(`
                <p class="text-muted">Clique em um módulo ao lado para configurar suas permissões.</p>
            `);
        });

        $('#limparTodos').on('click', function () {
            for (const modulo in permissoesSelecionadas) {
                permissoesSelecionadas[modulo] = [];
            }
            $('#subpermissoes').html(`
                <p class="text-muted">Clique em um módulo ao lado para configurar suas permissões.</p>
            `);
        });

        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 = {};

        $(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}>
                            <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).on('change', '.form-check-input', function () {
            const modulo = $(this).data('modulo');
            const valor = parseInt($(this).data('valor'));

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

            if (this.checked) {
                if (!permissoesSelecionadas[modulo].includes(valor)) {
                    permissoesSelecionadas[modulo].push(valor);
                }
            } else {
                permissoesSelecionadas[modulo] = permissoesSelecionadas[modulo].filter(v => v !== valor);
            }
            $('input[type="hidden"][name="acessos[]"]').val(permissoesSelecionadas[modulo].join(','));
        });

        $(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>
 
@stop