@extends('layouts.app')

@section('content')
<h2>Usuários
<button style="float: right;" type="button" class="btn btn-primary" onclick="openUsuarioModal()">Adicionar Novo Usuário</button>
</h2>
<p style="margin-top: 0px !important;">Gerencie usuários do sistema e seus privilégios. 
    Esta versão apresenta uma visão simplificada para consulta rápida.</p>


<form method="get" class="filters">
    <div class="form-field">
        <label for="q">Pesquisar</label>
        <input type="text" name="q" id="q" placeholder="Nome, login ou e-mail" value="{{ $filter }}" />
    </div>
    <div class="form-field">
        <label for="per_page">Linhas por página</label>
        <select name="per_page" id="per_page" onchange="this.form.submit()">
            <option value="10" {{ $perPage == 10 ? 'selected' : '' }}>10</option>
            <option value="25" {{ $perPage == 25 ? 'selected' : '' }}>25</option>
            <option value="50" {{ $perPage == 50 ? 'selected' : '' }}>50</option>
            <option value="100" {{ $perPage == 100 ? 'selected' : '' }}>100</option>
        </select>
    </div>
    <div class="form-actions">
        <button type="submit" class="btn">Filtrar</button>
        <a href="{{ route('ucusuario.index') }}" class="btn btn-secondary">Limpar</a>
    </div>
</form>

<section class="card">
    <h3>Usuários</h3>
    <table class="data-table">
        <thead>
            <tr>
                <th>Nome</th>
                <th>Login</th>
                <th>E-mail</th>
                <th>Status</th>
                <th>Exclusivo</th>
                <th>Ações</th>
            </tr>
        </thead>
        <tbody>
            @if($usuarios->count() > 0)
                @foreach($usuarios as $usuario)
                    <tr>
                        <td>{{ $usuario['nome'] }}</td>
                        <td>{{ $usuario['login'] }}</td>
                        <td>{{ $usuario['email'] ?? '-' }}</td>
                        <td>
                            @php
                                $ativo = $usuario['ativo'] == 1;
                                $classe = $ativo ? 'status-tag active' : 'status-tag inactive';
                                $texto = $ativo ? 'Ativo' : 'Inativo';
                            @endphp
                            <span class="{{ $classe }}">{{ $texto }}</span>
                        </td>
                        <td>{{ $usuario['exclusivo'] == 1 ? 'Sim' : 'Não' }}</td>
                        <td>
                            <button type="button" class="btn btn-sm" onclick="editUsuario({{ $usuario['id'] }})">Editar</button>
                            <button type="button" class="btn btn-sm btn-danger" onclick="confirmDeleteUsuario({{ $usuario['id'] }}, '{{ $usuario['nome'] }}')">Excluir</button>
                        </td>
                    </tr>
                @endforeach
            @else
                <tr>
                    <td colspan="6">Nenhum usuário encontrado.</td>
                </tr>
            @endif
        </tbody>
    </table>
    
    {{ $usuarios->links('vendor.pagination.custom') }}
</section>


<!-- Modal de Confirmação de Exclusão -->
<div id="deleteUsuarioModal" class="modal">
    <div class="modal-content">
        <div class="modal-header" style="background-color: #dc3545;">
            <h3>Confirmar Exclusão</h3>
            <span class="modal-close" onclick="closeDeleteUsuarioModal()">&times;</span>
        </div>
        <div class="modal-body">
            <p>Tem certeza que deseja excluir o usuário <strong id="deleteUsuarioNome"></strong>?</p>
            <p style="color: #dc3545; font-weight: bold;">Esta ação não pode ser desfeita!</p>
            <input type="hidden" id="deleteUsuarioId" value="">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeDeleteUsuarioModal()">Cancelar</button>
            <button type="button" class="btn btn-danger" onclick="deleteUsuario()">Excluir</button>
        </div>
    </div>
</div>

<!-- Modal de Usuário -->
<div id="usuarioModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="usuarioModalTitle">Novo Usuário</h3>
            <span class="modal-close" onclick="closeUsuarioModal()">&times;</span>
        </div>
        <div class="modal-body">
            <form id="usuarioForm">
                @csrf
                <input type="hidden" id="usuario_id" name="id" value="0">
                <input type="hidden" id="usuario_tipo" name="tipo" value="1">
                <div class="form-field">
                    <label for="usuario_nome">Nome *</label>
                    <input type="text" id="usuario_nome" name="nome" required>
                </div>
                <div class="form-field">
                    <label for="usuario_login">Login *</label>
                    <input type="text" id="usuario_login" name="login" required>
                </div>
                <div class="form-field">
                    <label for="usuario_email">E-mail</label>
                    <input type="email" id="usuario_email" name="email">
                </div>
                <div class="form-field" id="senhaField">
                    <label for="usuario_senha1" id="senhaLabel">Senha *</label>
                    <input type="password" id="usuario_senha1" name="senha1" placeholder="Deixe em branco para não alterar na edição">
                </div>
                <div class="form-field">
                    <label>Status</label>
                    <div class="radio-group">
                        <label>
                            <input type="radio" name="ativo" value="1" checked> Ativo
                        </label>
                        <label>
                            <input type="radio" name="ativo" value="0"> Inativo
                        </label>
                    </div>
                </div>
                <div class="form-field">
                    <label>
                        <input type="checkbox" id="usuario_exclusivo" name="exclusivo" value="1"> Exclusivo
                    </label>
                </div>
                <div id="usuarioError" class="alert alert-error" style="display: none; margin-top: 10px;"></div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeUsuarioModal()">Cancelar</button>
            <button type="button" class="btn btn-primary" onclick="saveUsuario()">Salvar</button>
        </div>
    </div>
</div>

<style>
.page-header {
    margin-bottom: 20px;
}

.page-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.radio-group {
    display: flex;
    gap: 20px;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.btn-sm {
    padding: 5px 10px;
    font-size: 0.875rem;
}

.btn-danger {
    background-color: #dc3545;
    color: #fff;
    border-color: #dc3545;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 0;
    border: 1px solid #888;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-header {
    padding: 20px;
    background-color: #007bff;
    color: white;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.modal-close {
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.modal-close:hover,
.modal-close:focus {
    opacity: 0.8;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #f5c6cb;
}
</style>

<script>
function openUsuarioModal(id = null) {
    const modal = document.getElementById('usuarioModal');
    const form = document.getElementById('usuarioForm');
    const title = document.getElementById('usuarioModalTitle');
    const errorDiv = document.getElementById('usuarioError');
    const senhaField = document.getElementById('senhaField');
    const senhaLabel = document.getElementById('senhaLabel');
    const senhaInput = document.getElementById('usuario_senha1');
    
    // Limpar formulário
    form.reset();
    document.getElementById('usuario_id').value = '0';
    document.getElementById('usuario_tipo').value = '1';
    errorDiv.style.display = 'none';
    
    // Campo de senha sempre visível
    senhaField.style.display = 'block';
    senhaInput.value = '';
    
    if (id) {
        title.textContent = 'Editar Usuário';
        senhaLabel.textContent = 'Senha (deixe em branco para não alterar)';
        senhaInput.removeAttribute('required');
        senhaInput.placeholder = 'Deixe em branco para não alterar';
        loadUsuario(id);
    } else {
        title.textContent = 'Novo Usuário';
        senhaLabel.textContent = 'Senha *';
        senhaInput.setAttribute('required', 'required');
        senhaInput.placeholder = '';
    }
    
    modal.style.display = 'block';
}

function closeUsuarioModal() {
    document.getElementById('usuarioModal').style.display = 'none';
}

function editUsuario(id) {
    openUsuarioModal(id);
}

function loadUsuario(id) {
    
    const formData = new FormData();
    formData.append('id', id);
    formData.append('tipo', '1');
    formData.append('_token', '{{ csrf_token() }}');
    
    fetch('{{ url("/ucusuario/ucusuario") }}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success === 'true' && data.rows && data.rows.length > 0) {
            const usuario = data.rows[0];
            document.getElementById('usuario_id').value = usuario.id;
            document.getElementById('usuario_nome').value = usuario.nome || '';
            document.getElementById('usuario_login').value = usuario.login || '';
            document.getElementById('usuario_email').value = usuario.email || '';
            
            // Definir status
            const ativoRadios = document.querySelectorAll('#usuarioForm input[name="ativo"]');
            ativoRadios.forEach(radio => {
                let ativoValue = usuario.ativo;
                if (typeof ativoValue === 'boolean') {
                    ativoValue = ativoValue ? '1' : '0';
                } else {
                    ativoValue = String(ativoValue);
                }
                radio.checked = (radio.value === ativoValue);
            });
            
            // Definir exclusivo
            document.getElementById('usuario_exclusivo').checked = (usuario.exclusivo == 1);
        } else {
            alert('Erro ao carregar usuário');
        }
    })
    .catch(error => {
        console.error('Erro:', error);
        alert('Erro ao carregar usuário');
    });
}

function saveUsuario() {
    const form = document.getElementById('usuarioForm');
    const formData = new FormData(form);
    const errorDiv = document.getElementById('usuarioError');
    
    // Validação básica
    const nome = document.getElementById('usuario_nome').value.trim();
    const login = document.getElementById('usuario_login').value.trim();
    const senha1 = document.getElementById('usuario_senha1').value;
    const usuarioId = document.getElementById('usuario_id').value;
    
    if (!nome) {
        errorDiv.textContent = 'O nome é obrigatório';
        errorDiv.style.display = 'block';
        return;
    }
    
    if (!login) {
        errorDiv.textContent = 'O login é obrigatório';
        errorDiv.style.display = 'block';
        return;
    }
    
    if (usuarioId == '0' && !senha1) {
        errorDiv.textContent = 'A senha é obrigatória para novos usuários';
        errorDiv.style.display = 'block';
        return;
    }
    
    // Se estiver editando e não houver senha, não enviar o campo senha1
    if (usuarioId != '0' && !senha1) {
        formData.delete('senha1');
    }
    
    // Garantir que exclusivo seja enviado (0 ou 1)
    const exclusivoCheckbox = document.getElementById('usuario_exclusivo');
    if (exclusivoCheckbox.checked) {
        formData.set('exclusivo', '1');
    } else {
        formData.set('exclusivo', '0');
    }
    
    errorDiv.style.display = 'none';
    
    fetch('{{ url("/ucusuario/save") }}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success === 'true') {
            alert(data.msg || 'Usuário salvo com sucesso!');
            closeUsuarioModal();
            window.location.reload();
        } else {
            errorDiv.textContent = data.msg || 'Erro ao salvar usuário';
            errorDiv.style.display = 'block';
        }
    })
    .catch(error => {
        console.error('Erro:', error);
        errorDiv.textContent = 'Erro ao salvar usuário';
        errorDiv.style.display = 'block';
    });
}

// Fechar modal ao clicar fora dele
window.onclick = function(event) {
    const modal = document.getElementById('usuarioModal');
    const deleteModal = document.getElementById('deleteUsuarioModal');
    if (event.target == modal) {
        closeUsuarioModal();
    }
    if (event.target == deleteModal) {
        closeDeleteUsuarioModal();
    }
}

// Funções para exclusão
function confirmDeleteUsuario(id, nome) {
    document.getElementById('deleteUsuarioId').value = id;
    document.getElementById('deleteUsuarioNome').textContent = nome;
    document.getElementById('deleteUsuarioModal').style.display = 'block';
}

function closeDeleteUsuarioModal() {
    document.getElementById('deleteUsuarioModal').style.display = 'none';
}

function deleteUsuario() {
    const id = document.getElementById('deleteUsuarioId').value;
    const formData = new FormData();
    formData.append('id', id);
    formData.append('_token', '{{ csrf_token() }}');
    
    fetch('{{ url("/ucusuario/deleta") }}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success === 'true') {
            alert(data.msg || 'Usuário excluído com sucesso!');
            closeDeleteUsuarioModal();
            window.location.reload();
        } else {
            alert(data.msg || 'Erro ao excluir usuário');
        }
    })
    .catch(error => {
        console.error('Erro:', error);
        alert('Erro ao excluir usuário');
    });
}
</script>

<!--<div class="table-actions">
    <a class="btn btn-secondary" href="{{ url('/ucusuario/ucusuarios') }}">Endpoint JSON (usuários)</a>
</div>-->
@endsection