<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Morfo Engine - Gestão de Usuários</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root { --bg: #0f0f0f; --win: #1a1a1a; --border: #333; --accent: #0078d4; --text: #d4d4d4; }
        body { background-color: var(--bg); color: var(--text); font-family: 'Segoe UI', sans-serif; }
        .card { background: var(--win); border: 1px solid var(--border); border-radius: 8px; }
        .table { color: var(--text); border-color: var(--border); }
        .table-hover tbody tr:hover { background-color: #252526; color: #fff; }
        .form-control, .form-select { background: #252526; border: 1px solid #3c3c3c; color: #fff; font-size: 13px; }
        .form-control:focus { background: #2a2d2e; color: #fff; border-color: var(--accent); box-shadow: none; }
        label { font-size: 11px; font-weight: bold; color: #888; text-transform: uppercase; }
        .btn-primary { background: var(--accent); border: none; }
    </style>
</head>
<body>

<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold"><i class="fa-solid fa-users-gears me-2 text-primary"></i> Usuários do Sistema</h4>
        <button class="btn btn-primary btn-sm" onclick="abrirModal()">
            <i class="fa-solid fa-user-plus me-1"></i> NOVO USUÁRIO
        </button>
    </div>

    <div class="card shadow-sm">
        <div class="card-body p-0">
            <table class="table table-hover align-middle mb-0">
                <thead style="background: #252525;">
                    <tr>
                        <th class="ps-3">NOME</th>
                        <th>CNPJ EMPRESA</th>
                        <th>ADM</th>
                        <th>CLIENTE</th>
                        <th>EMAIL</th>
                        <th class="text-center">AÇÕES</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    include "../configuracao/conexao.php";
                    $res = $mysqli->query("SELECT * FROM usuario WHERE ativo = 'S' ORDER BY usuario_nome ASC");
                    while($u = $res->fetch_assoc()){
                        echo "<tr>
                                <td class='ps-3'><b>{$u['usuario_nome']}</b></td>
                                <td>{$u['usuario_cnpj_empresa']}</td>
                                <td>" . ($u['usuario_administrador'] == 'S' ? '✅' : '❌') . "</td>
                                <td>" . ($u['usuario_cliente'] == 'S' ? '✅' : '❌') . "</td>
                                <td>{$u['usuario_email_envio_not']}</td>
                                <td class='text-center'>
                                    <button class='btn btn-outline-info btn-sm border-0' onclick='editarUsuario(".json_encode($u).")'><i class='fa-solid fa-pen-to-square'></i></button>
                                    <button class='btn btn-outline-danger btn-sm border-0' onclick='excluirUsuario({$u['codigo']})'><i class='fa-solid fa-trash'></i></button>
                                </td>
                              </tr>";
                    }
                    ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="modalUser" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form id="formUser" class="modal-content card">
            <div class="modal-header border-bottom border-dark">
                <h6 class="modal-title fw-bold">DADOS DO USUÁRIO</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body bg-dark text-light">
                <input type="hidden" name="codigo" id="u_codigo">
                <div class="row g-3">
                    <div class="col-md-8">
                        <label>Nome Completo</label>
                        <input type="text" name="usuario_nome" id="u_nome" class="form-control" required>
                    </div>
                    <div class="col-md-4">
                        <label>CNPJ Empresa</label>
                        <input type="text" name="usuario_cnpj_empresa" id="u_cnpj" class="form-control" maxlength="14">
                    </div>
                    <div class="col-md-6">
                        <label>Email para Notificações</label>
                        <input type="email" name="usuario_email_envio_not" id="u_email" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label>Administrador?</label>
                        <select name="usuario_administrador" id="u_adm" class="form-select">
                            <option value="N">Não</option>
                            <option value="S">Sim</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label>Cliente?</label>
                        <select name="usuario_cliente" id="u_cliente" class="form-select">
                            <option value="N">Não</option>
                            <option value="S">Sim</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label>Nova Senha</label>
                        <input type="password" name="usuario_senha" class="form-control" placeholder="Deixe em branco para manter">
                    </div>
                </div>
            </div>
            <div class="modal-footer border-top border-dark">
                <button type="submit" class="btn btn-primary w-100 fw-bold">SALVAR ALTERAÇÕES</button>
            </div>
        </form>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
const modal = new bootstrap.Modal(document.getElementById('modalUser'));

function abrirModal() {
    document.getElementById('formUser').reset();
    document.getElementById('u_codigo').value = '';
    modal.show();
}

function editarUsuario(u) {
    document.getElementById('u_codigo').value = u.codigo;
    document.getElementById('u_nome').value = u.usuario_nome;
    document.getElementById('u_cnpj').value = u.usuario_cnpj_empresa;
    document.getElementById('u_email').value = u.usuario_email_envio_not;
    document.getElementById('u_adm').value = u.usuario_administrador;
    document.getElementById('u_cliente').value = u.usuario_cliente;
    modal.show();
}

document.getElementById('formUser').onsubmit = function(e) {
    e.preventDefault();
    fetch('usuario_proc.php?acao=salvar', { method: 'POST', body: new FormData(this) })
    .then(r => r.json()).then(res => {
        if(res.success) location.reload();
    });
};

function excluirUsuario(id) {
    Swal.fire({ title: 'Excluir usuário?', icon: 'warning', showCancelButton: true }).then(r => {
        if(r.isConfirmed) {
            fetch('usuario_proc.php?acao=excluir&id='+id).then(() => location.reload());
        }
    });
}
</script>
</body>
</html>