@extends('layouts.layoutMaster')

@section('title', 'Cadastrar Novo Usuário')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />
@endsection

@section('content')
<div class="container-xxl flex-grow-1">
    <!-- Hidden fields para upload (serão preenchidos após criar o usuário) -->
    <input type="hidden" id="userId" value="">
    <input type="hidden" id="empresaId" value="{{ $filters['id_empresa'] ?? Auth::user()->id_empresa ?? '' }}">
    <input type="hidden" id="fotoFilename" value="">
    
    <div class="row">
        <div class="col-12">
            <!-- Cabeçalho -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="fw-bold mb-1">
                        <i class="ti ti-user-plus me-2"></i>
                        Novo Usuário
                    </h4>
                    <p class="text-muted mb-0">Preencha os dados para cadastrar um novo usuário</p>
                </div>
                <a href="{{ route('usuarios.index') }}" class="btn btn-outline-secondary">
                    <i class="ti ti-arrow-left me-1"></i>
                    Voltar
                </a>
            </div>

            <!-- Formulário -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <form id="userCreateForm" action="{{ route('usuarios.store') }}" method="POST" novalidate>
                                @csrf
                                
                                <!-- Informações Básicas -->
                                <div class="mb-4">
                                    <h5 class="card-title mb-3">
                                        <i class="ti ti-user me-1"></i>
                                        Informações Básicas
                                    </h5>
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label for="login" class="form-label">Login/Email <span class="text-danger">*</span></label>
                                            <input id="login" name="login" type="text" class="form-control @error('login') is-invalid @enderror" value="{{ old('login') }}" required>
                                            @error('login')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label for="nome" class="form-label">Nome Completo <span class="text-danger">*</span></label>
                                            <input id="nome" name="nome" type="text" class="form-control @error('nome') is-invalid @enderror" value="{{ old('nome') }}" required>
                                            @error('nome')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>

                                        <div class="col-md-6">
                                            <label for="telefone" class="form-label">Telefone</label>
                                            <input id="telefone" name="telefone" type="text" class="form-control mask-phone" value="{{ old('telefone') }}">
                                        </div>

                                        <div class="col-md-6">
                                            <label for="cpf" class="form-label">CPF</label>
                                            <input id="cpf" name="cpf" type="text" class="form-control mask-cpf" value="{{ old('cpf') }}" aria-describedby="cpfHelp">
                                            <small id="cpfHelp" class="form-text text-danger d-none">CPF inválido</small>
                                        </div>

                                        <div class="col-12">
                                            <label for="finalidade" class="form-label">Perfil/Função</label>
                                            <select id="finalidade" name="finalidade" class="form-select @error('finalidade') is-invalid @enderror">
                                                <option value="">Selecione um perfil</option>
                                                <option value="administrador" {{ (old('finalidade')=='administrador')?'selected':'' }}>Administrador</option>
                                                <option value="atendimento" {{ (old('finalidade')=='atendimento')?'selected':'' }}>Atendimento</option>
                                                <option value="comercial" {{ (old('finalidade')=='comercial')?'selected':'' }}>Comercial</option>
                                                <option value="expedicao" {{ (old('finalidade')=='expedicao')?'selected':'' }}>Expedição</option>
                                                <option value="financeiro" {{ (old('finalidade')=='financeiro')?'selected':'' }}>Financeiro</option>
                                            </select>
                                            @error('finalidade')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>

                                        {{-- Campo Perfil de Suporte - só aparece se id_empresa = 1 --}}
                                        @if((session('id_empresa') ?? Auth::user()->id_empresa ?? 0) == 1)
                                        <div class="col-12">
                                            <div class="alert alert-info d-flex align-items-start" role="alert">
                                                <div class="form-check form-switch mb-0 me-3">
                                                    <input class="form-check-input" type="checkbox" name="is_suporte" id="is_suporte" value="1" {{ old('is_suporte') ? 'checked' : '' }}>
                                                </div>
                                                <div>
                                                    <i class="ti ti-shield-check me-1"></i>
                                                    <strong>Perfil de Suporte</strong>
                                                    <div class="text-muted small mt-1">
                                                        Usuários com perfil de suporte têm acesso a todas as empresas do sistema
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                </div>



                                <!-- Endereço -->
                                <div class="mb-4">
                                    <h5 class="card-title mb-3">
                                        <i class="ti ti-map-pin me-1"></i>
                                        Endereço
                                    </h5>
                                    <div class="row g-3">
                                        <div class="col-md-8">
                                            <label for="endereco" class="form-label">Logradouro</label>
                                            <input id="endereco" name="endereco" type="text" class="form-control @error('endereco') is-invalid @enderror" value="{{ old('endereco') }}">
                                            @error('endereco')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>

                                        <div class="col-md-4">
                                            <label for="cep" class="form-label">CEP</label>
                                            <input id="cep" name="cep" type="text" class="form-control mask-cep @error('cep') is-invalid @enderror" value="{{ old('cep') }}" aria-describedby="cepHelp">
                                            @error('cep')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                            <small id="cepHelp" class="form-text text-danger d-none">CEP inválido</small>
                                        </div>

                                        <div class="col-md-12">
                                            <label for="bairro" class="form-label">Bairro</label>
                                            <input id="bairro" name="bairro" type="text" class="form-control @error('bairro') is-invalid @enderror" value="{{ old('bairro') }}">
                                            @error('bairro')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                    </div>
                                </div>

                                <hr class="my-4">

                                <!-- Informações Adicionais -->
                                <div class="mb-4">
                                    <h5 class="card-title mb-3">
                                        <i class="ti ti-info-circle me-1"></i>
                                        Informações Adicionais
                                    </h5>
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label for="comissao" class="form-label">Comissão (%)</label>
                                            <input id="comissao" name="comissao" type="text" class="form-control mask-percent @error('comissao') is-invalid @enderror" value="{{ old('comissao') }}" aria-describedby="comissaoHelp">
                                            @error('comissao')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                            <small id="comissaoHelp" class="form-text text-danger d-none">Valor deve ser menor ou igual a 100</small>
                                        </div>

                                        <div class="col-md-6">
                                            <label for="observacoes" class="form-label">Observações</label>
                                            <input id="observacoes" name="observacoes" type="text" class="form-control @error('observacoes') is-invalid @enderror" value="{{ old('observacoes') }}">
                                            @error('observacoes')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                    </div>
                                </div>

                                <hr class="my-4">

                                <!-- Foto do Perfil -->
                                <div class="mb-4">
                                    <div class="card" style="background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%); border: 1px solid #667eea30;">
                                        <div class="card-body">
                                            <h6 class="card-title mb-3">
                                                <i class="ti ti-camera me-2"></i>
                                                Foto do Perfil
                                            </h6>
                                            
                                            <div class="row align-items-center">
                                                <div class="col-md-3 text-center">
                                                    <div id="fotoPreview" class="mb-3">
                                                        <div class="avatar avatar-xl">
                                                            <span class="avatar-initial rounded-circle bg-label-primary fs-1">US</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-9">
                                                    <div class="mb-3">
                                                        <label for="fotoUpload" class="form-label small">Selecionar Nova Foto</label>
                                                        <input type="file" class="form-control" id="fotoUpload" accept="image/jpeg,image/jpg,image/png,image/webp">
                                                        <small class="form-text text-muted">
                                                            Formatos: JPG, PNG, WEBP. Tamanho máximo: 10MB
                                                        </small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <hr class="my-4">

                                <!-- Anexos -->
                                <div class="mb-4">
                                    <div class="card" style="background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%); border: 1px solid #667eea30;">
                                        <div class="card-body">
                                            <h6 class="card-title mb-3">
                                                <i class="ti ti-paperclip me-2"></i>
                                                Anexos (Documentos)
                                            </h6>
                                            
                                            <div class="mb-3">
                                                <label for="anexoUpload" class="form-label small">Adicionar Anexo</label>
                                                <input type="file" class="form-control" id="anexoUpload" accept=".pdf,.doc,.docx">
                                                <small class="form-text text-muted">
                                                    Formatos: PDF, DOC, DOCX. Tamanho máximo: 20MB
                                                </small>
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label for="nomeAnexo" class="form-label small">Nome do Documento</label>
                                                <input type="text" class="form-control" id="nomeAnexo" placeholder="Ex: RG, CNH, Comprovante de Residência">
                                            </div>
                                            
                                            <button type="button" class="btn btn-sm btn-primary mb-3" id="btnAdicionarAnexo" disabled>
                                                <i class="ti ti-plus me-1"></i> Adicionar à Lista
                                            </button>
                                            
                                            <div id="listaAnexosTemp" class="mt-3">
                                                <p class="text-muted small mb-0">Nenhum anexo selecionado</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <hr class="my-4">

                                <!-- Definição de Senha -->
                                <div class="mb-4">
                                    <h5 class="card-title mb-3">
                                        <i class="ti ti-lock me-1"></i>
                                        Definição de Senha
                                    </h5>
                                    
                                    <div class="alert alert-warning d-flex align-items-center mb-3" role="alert">
                                        <i class="ti ti-alert-triangle me-2"></i>
                                        <div>
                                            <strong>Importante:</strong> Escolha como o usuário irá definir sua senha de acesso ao sistema.
                                        </div>
                                    </div>

                                    <div class="row g-3">
                                        <div class="col-12">
                                            <label class="form-label">Método de Criação de Senha <span class="text-danger">*</span></label>
                                            <div class="card mb-2">
                                                <div class="card-body">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="metodo_senha" 
                                                               id="metodo_email_user" value="email" 
                                                               {{ old('metodo_senha', 'email') === 'email' ? 'checked' : '' }} required>
                                                        <label class="form-check-label w-100" for="metodo_email_user">
                                                            <div class="d-flex align-items-start">
                                                                <i class="ti ti-mail ti-sm me-2 mt-1"></i>
                                                                <div>
                                                                    <div class="fw-semibold">Enviar email para criar senha</div>
                                                                    <small class="text-muted">O usuário receberá um link por email para definir sua própria senha (recomendado)</small>
                                                                </div>
                                                            </div>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="metodo_senha" 
                                                               id="metodo_direto_user" value="direto" 
                                                               {{ old('metodo_senha') === 'direto' ? 'checked' : '' }} required>
                                                        <label class="form-check-label w-100" for="metodo_direto_user">
                                                            <div class="d-flex align-items-start">
                                                                <i class="ti ti-key ti-sm me-2 mt-1"></i>
                                                                <div>
                                                                    <div class="fw-semibold">Definir senha agora</div>
                                                                    <small class="text-muted">Você define a senha do usuário manualmente</small>
                                                                </div>
                                                            </div>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Campos de senha (aparecem apenas quando "Definir senha agora" é selecionado) -->
                                        <div id="senha-fields-user" class="col-12" style="display: none;">
                                            <div class="card bg-light">
                                                <div class="card-body">
                                                    <div class="row g-3">
                                                        <div class="col-md-6">
                                                            <div class="form-password-toggle">
                                                                <label class="form-label" for="senhaUser">Senha <span class="text-danger">*</span></label>
                                                                <div class="input-group input-group-merge">
                                                                    <input type="password" id="senhaUser" 
                                                                           class="form-control @error('senha') is-invalid @enderror" 
                                                                           name="senha" 
                                                                           placeholder="••••••••" />
                                                                    <span class="input-group-text password-toggle-user cursor-pointer"><i class="ti ti-eye-off"></i></span>
                                                                    @error('senha')
                                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                                    @enderror
                                                                </div>
                                                                <small class="form-text text-muted d-block mt-2">
                                                                    <i class="ti ti-info-circle ti-xs me-1"></i>
                                                                    Mínimo 8 caracteres, deve conter letras e números
                                                                </small>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6">
                                                            <div class="form-password-toggle">
                                                                <label class="form-label" for="senhaConfirmUser">Confirmar Senha <span class="text-danger">*</span></label>
                                                                <div class="input-group input-group-merge">
                                                                    <input type="password" id="senhaConfirmUser" 
                                                                           class="form-control @error('senha_confirmation') is-invalid @enderror" 
                                                                           name="senha_confirmation" 
                                                                           placeholder="••••••••" />
                                                                    <span class="input-group-text password-toggle-user cursor-pointer"><i class="ti ti-eye-off"></i></span>
                                                                    @error('senha_confirmation')
                                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                                    @enderror
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- hidden company id --}}
                                <input type="hidden" name="id_empresa" value="{{ $filters['id_empresa'] ?? Auth::user()->id_empresa ?? '' }}">
                                <input type="hidden" name="permissoes_json" id="permissoesJson" value="">

                                <hr class="my-4">

                                <!-- Permissões do Usuário -->
                                <div class="mb-4" id="permissoesSection">
                                    <h5 class="card-title mb-3">
                                        <i class="ti ti-lock me-1"></i>
                                        Permissões de Acesso
                                    </h5>
                                    
                                    <div class="alert alert-info d-flex align-items-center mb-3" role="alert">
                                        <i class="ti ti-info-circle me-2"></i>
                                        <div>
                                            <strong>Opcional:</strong> Defina as permissões de acesso aos módulos do sistema. Se não configurar, o usuário terá acesso limitado.
                                        </div>
                                    </div>

                                    <button type="button" class="btn btn-outline-primary mb-3" onclick="abrirPermissoesCreate()">
                                        <i class="ti ti-settings me-1"></i>
                                        Configurar Permissões
                                    </button>

                                    <div id="permissoesResumo" class="d-none">
                                        <div class="card bg-light">
                                            <div class="card-body">
                                                <h6 class="card-title mb-2">
                                                    <i class="ti ti-check-circle text-success me-1"></i>
                                                    Permissões Configuradas
                                                </h6>
                                                <div id="permissoesResumoContent" class="small text-muted">
                                                    <!-- Será preenchido via JavaScript -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Botões -->
                                <div class="d-flex justify-content-between pt-3">
                                    <a href="{{ route('usuarios.index') }}" class="btn btn-outline-secondary">
                                        <i class="ti ti-x me-1"></i>
                                        Cancelar
                                    </a>
                                    <button type="submit" class="btn btn-primary" id="userCreateSubmit">
                                        <i class="ti ti-check me-1"></i>
                                        Cadastrar Usuário
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('vendor-script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection

@section('page-script')
<script src="{{asset('assets/js/utils.js')}}"></script>
<script src="{{asset('assets/js/password-validation.js')}}"></script>
<script src="{{asset('assets/js/usuarios-create.js')}}?v=20251127008"></script>
<script>
// Toggle de senha - funcionalidade específica desta página
document.addEventListener('DOMContentLoaded', function() {
    const metodoEmailRadio = document.getElementById('metodo_email_user');
    const metodoDirectoRadio = document.getElementById('metodo_direto_user');
    const senhaFields = document.getElementById('senha-fields-user');
    const senhaInput = document.getElementById('senhaUser');
    const confirmInput = document.getElementById('senhaConfirmUser');

    function updateFormUI() {
        if (metodoDirectoRadio && metodoDirectoRadio.checked) {
            senhaFields.style.display = 'block';
            senhaInput.required = true;
            confirmInput.required = true;
        } else {
            senhaFields.style.display = 'none';
            senhaInput.required = false;
            confirmInput.required = false;
        }
    }

    if (metodoEmailRadio) metodoEmailRadio.addEventListener('change', updateFormUI);
    if (metodoDirectoRadio) metodoDirectoRadio.addEventListener('change', updateFormUI);
    
    updateFormUI();

    // Toggle de visualização de senha
    $(document).on('click', '.password-toggle-user', function(e) {
        e.preventDefault();
        const $toggle = $(this);
        const $input = $toggle.closest('.input-group').find('input');
        const $icon = $toggle.find('i');
        
        if ($input.attr('type') === 'password') {
            $input.attr('type', 'text');
            $icon.removeClass('ti-eye-off').addClass('ti-eye');
        } else {
            $input.attr('type', 'password');
            $icon.removeClass('ti-eye').addClass('ti-eye-off');
        }
    });
});
</script>

@if(session('success'))
<script>
$(document).ready(function() {
    Swal.fire({
        icon: 'success',
        title: 'Sucesso!',
        text: '{{ session('success') }}',
        confirmButtonText: 'OK',
        timer: 3000,
        timerProgressBar: true
    });
});
</script>
@endif

@if(session('error'))
<script>
$(document).ready(function() {
    Swal.fire({
        icon: 'error',
        title: 'Erro!',
        text: '{{ session('error') }}',
        confirmButtonText: 'OK'
    });
});
</script>
@endif

<script>
// Sistema de Permissões para Create
let permissoesTemporarias = {};

// Abrir modal de permissões
window.abrirPermissoesCreate = function() {
    carregarModulosCreate();
    new bootstrap.Modal(document.getElementById('permissoesModalCreate')).show();
};

// Carregar módulos disponíveis
function carregarModulosCreate() {
    // Mostrar loading
    const tbody = document.getElementById('modulosTableBodyCreate');
    tbody.innerHTML = '<tr><td colspan="5" class="text-center"><div class="spinner-border spinner-border-sm me-2"></div> Carregando módulos...</td></tr>';
    
    fetch('/usuarios/modulos-disponiveis')
        .then(res => {
            if (!res.ok) {
                throw new Error(`HTTP ${res.status}: ${res.statusText}`);
            }
            return res.json();
        })
        .then(data => {
            if (!data.success) {
                // Fechar modal antes de mostrar erro
                const modalEl = document.getElementById('permissoesModalCreate');
                const modal = bootstrap.Modal.getInstance(modalEl);
                if (modal) modal.hide();
                
                Swal.fire({
                    icon: 'error',
                    title: 'Erro ao carregar módulos',
                    text: data.message || 'Não foi possível carregar os módulos disponíveis.',
                    footer: 'Verifique se a empresa possui um plano contratado com módulos ativos.'
                });
                return;
            }

            tbody.innerHTML = '';

            if (!data.modulos || data.modulos.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">Nenhum módulo disponível</td></tr>';
                return;
            }

            data.modulos.forEach(modulo => {
                // Não mostrar módulo "Admin" no modal de permissões
                if (modulo.nome && modulo.nome.toLowerCase() === 'admin') {
                    return;
                }

                const permissao = permissoesTemporarias[modulo.id_modulo] || {};
                const row = document.createElement('tr');
                
                row.innerHTML = `
                    <td><strong>${modulo.nome || 'Sem nome'}</strong></td>
                    <td style="text-align: center;">
                        <input type="checkbox" name="permissoes[${modulo.id_modulo}][ler]" 
                               class="form-check-input check-ler-create"
                               ${permissao.ler ? 'checked' : ''}>
                    </td>
                    <td style="text-align: center;">
                        <input type="checkbox" name="permissoes[${modulo.id_modulo}][criar]" 
                               class="form-check-input check-criar-create"
                               ${permissao.criar ? 'checked' : ''}>
                    </td>
                    <td style="text-align: center;">
                        <input type="checkbox" name="permissoes[${modulo.id_modulo}][editar]" 
                               class="form-check-input check-editar-create"
                               ${permissao.editar ? 'checked' : ''}>
                    </td>
                    <td style="text-align: center;">
                        <input type="checkbox" name="permissoes[${modulo.id_modulo}][deletar]" 
                               class="form-check-input check-deletar-create"
                               ${permissao.deletar ? 'checked' : ''}>
                    </td>
                `;
                
                row.querySelectorAll('input[type="checkbox"]').forEach(input => {
                    input.addEventListener('change', atualizarCheckAllCreate);
                });

                tbody.appendChild(row);
            });

            atualizarCheckAllCreate();
        })
        .catch(err => {
            // Fechar modal antes de mostrar erro
            const modalEl = document.getElementById('permissoesModalCreate');
            const modal = bootstrap.Modal.getInstance(modalEl);
            if (modal) modal.hide();
            
            Swal.fire({
                icon: 'error',
                title: 'Erro de Conexão',
                html: `Não foi possível conectar ao servidor.<br><small class="text-muted">${err.message}</small>`,
                footer: 'Verifique sua conexão com a internet e tente novamente.'
            });
        });
}

// Atualizar estado dos check all
function atualizarCheckAllCreate() {
    const checkAllLer = document.getElementById('checkAllLerCreate');
    const checkAllCriar = document.getElementById('checkAllCriarCreate');
    const checkAllEditar = document.getElementById('checkAllEditarCreate');
    const checkAllDeletar = document.getElementById('checkAllDeletarCreate');

    const checkersLer = document.querySelectorAll('.check-ler-create');
    const checkersCriar = document.querySelectorAll('.check-criar-create');
    const checkersEditar = document.querySelectorAll('.check-editar-create');
    const checkersDeletar = document.querySelectorAll('.check-deletar-create');

    if (checkAllLer) checkAllLer.checked = Array.from(checkersLer).every(el => el.checked) && checkersLer.length > 0;
    if (checkAllCriar) checkAllCriar.checked = Array.from(checkersCriar).every(el => el.checked) && checkersCriar.length > 0;
    if (checkAllEditar) checkAllEditar.checked = Array.from(checkersEditar).every(el => el.checked) && checkersEditar.length > 0;
    if (checkAllDeletar) checkAllDeletar.checked = Array.from(checkersDeletar).every(el => el.checked) && checkersDeletar.length > 0;
}

// Salvar permissões temporariamente
document.addEventListener('DOMContentLoaded', function() {
    const formPermissoesCreate = document.getElementById('permissoesFormCreate');
    if (formPermissoesCreate) {
        formPermissoesCreate.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Coletar permissões
            permissoesTemporarias = {};
            let countModulos = 0;
            
            document.querySelectorAll('#modulosTableBodyCreate tr').forEach((row) => {
                const checkboxes = row.querySelectorAll('input[type="checkbox"]');
                if (checkboxes.length > 0) {
                    const idModulo = checkboxes[0].name.match(/\[(\d+)\]/)[1];
                    permissoesTemporarias[idModulo] = {
                        ler: checkboxes[0].checked ? 1 : 0,
                        criar: checkboxes[1].checked ? 1 : 0,
                        editar: checkboxes[2].checked ? 1 : 0,
                        deletar: checkboxes[3].checked ? 1 : 0
                    };
                    
                    // Contar módulos com pelo menos uma permissão
                    if (checkboxes[0].checked || checkboxes[1].checked || checkboxes[2].checked || checkboxes[3].checked) {
                        countModulos++;
                    }
                }
            });
            
            // Salvar no campo hidden
            document.getElementById('permissoesJson').value = JSON.stringify(permissoesTemporarias);
            
            // Mostrar resumo
            const resumo = document.getElementById('permissoesResumo');
            const resumoContent = document.getElementById('permissoesResumoContent');
            
            if (countModulos > 0) {
                resumo.classList.remove('d-none');
                resumoContent.innerHTML = `<strong>${countModulos}</strong> módulo(s) configurado(s)`;
            } else {
                resumo.classList.add('d-none');
            }
            
            // Fechar modal
            const modalEl = document.getElementById('permissoesModalCreate');
            const modal = bootstrap.Modal.getInstance(modalEl);
            if (modal) {
                modal.hide();
            }
            
            Swal.fire({
                icon: 'success',
                title: 'Permissões Salvas!',
                text: 'As permissões serão aplicadas quando o usuário for criado.',
                timer: 2000,
                showConfirmButton: false
            });
        });
    }
    
    // Check All functionality
    const checkAllLerCreate = document.getElementById('checkAllLerCreate');
    const checkAllCriarCreate = document.getElementById('checkAllCriarCreate');
    const checkAllEditarCreate = document.getElementById('checkAllEditarCreate');
    const checkAllDeletarCreate = document.getElementById('checkAllDeletarCreate');
    
    if (checkAllLerCreate) {
        checkAllLerCreate.addEventListener('change', function() {
            document.querySelectorAll('.check-ler-create').forEach(el => el.checked = this.checked);
        });
    }
    
    if (checkAllCriarCreate) {
        checkAllCriarCreate.addEventListener('change', function() {
            document.querySelectorAll('.check-criar-create').forEach(el => el.checked = this.checked);
        });
    }
    
    if (checkAllEditarCreate) {
        checkAllEditarCreate.addEventListener('change', function() {
            document.querySelectorAll('.check-editar-create').forEach(el => el.checked = this.checked);
        });
    }
    
    if (checkAllDeletarCreate) {
        checkAllDeletarCreate.addEventListener('change', function() {
            document.querySelectorAll('.check-deletar-create').forEach(el => el.checked = this.checked);
        });
    }
});
</script>
@endsection

@include('_partials._modals.modal-definir-permissoes-create')