<?php
if (!isUserLoggedIn()) { header('Location: ' . BASE_URL . 'login.php'); exit; }
requireRole('admin');
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ciudades — <?= htmlspecialchars($_cfg['empresa_nombre'] ?? 'ERP') ?></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="<?= BASE_URL ?>assets/css/styles.css?v=15" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
.ciu-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.ciu-table th { background:#f8fafc; font-weight:700; font-size:.75rem; text-transform:uppercase;
                letter-spacing:.06em; color:#64748b; padding:.6rem 1rem; border-bottom:2px solid #e2e8f0; }
.ciu-table td { padding:.65rem 1rem; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.ciu-table tr:hover td { background:#f8fafc; }
.badge-activa   { background:#dcfce7; color:#166534; font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:99px; }
.badge-inactiva { background:#f1f5f9; color:#94a3b8; font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:99px; }
</style>
</head>
<body>
<?php include APP_ROOT . '/partials/navbar.php'; ?>

<div class="container-fluid py-4" style="max-width:720px">
    <div class="d-flex align-items-center justify-content-between mb-3">
        <h5 class="mb-0"><i class="fas fa-map-marker-alt me-2 text-primary"></i>Ciudades</h5>
        <button class="btn btn-primary btn-sm" onclick="abrirModal()">
            <i class="fas fa-plus me-1"></i>Nueva ciudad
        </button>
    </div>

    <div class="card shadow-sm">
        <div class="card-body p-0">
            <table class="ciu-table">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th style="width:90px">Estado</th>
                        <th style="width:110px">Acciones</th>
                    </tr>
                </thead>
                <tbody id="tbody-ciu">
                    <tr><td colspan="3" class="text-muted text-center py-3">Cargando…</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="modal-ciu" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="modal-ciu-titulo">Nueva ciudad</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="ciu-id">
                <div class="mb-3">
                    <label class="form-label small fw-semibold">Nombre <span class="text-danger">*</span></label>
                    <input type="text" id="ciu-nombre" class="form-control" maxlength="100" placeholder="Ej: Cúcuta, Bogotá…">
                </div>
                <div id="ciu-error" class="text-danger small d-none"></div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancelar</button>
                <button class="btn btn-primary btn-sm" onclick="guardar()">
                    <i class="fas fa-save me-1"></i>Guardar
                </button>
            </div>
        </div>
    </div>
</div>

<script>
const API = '<?= BASE_URL ?>api/lab/ciudades.php';
let _modal;

async function cargar() {
    const r = await fetch(API + '?action=list');
    const j = await r.json();
    const tbody = document.getElementById('tbody-ciu');
    if (!j.ok || !j.ciudades.length) {
        tbody.innerHTML = '<tr><td colspan="3" class="text-muted text-center py-3">Sin registros</td></tr>';
        return;
    }
    tbody.innerHTML = j.ciudades.map(c => `
        <tr>
            <td>${escHtml(c.nombre)}</td>
            <td><span class="badge-${c.activa == 1 ? 'activa' : 'inactiva'}">${c.activa == 1 ? 'Activa' : 'Inactiva'}</span></td>
            <td class="d-flex gap-1">
                <button class="btn btn-outline-secondary btn-sm" onclick="abrirModal(${c.id},'${escHtml(c.nombre).replace(/'/g,"\\'")}')"><i class="fas fa-pen"></i></button>
                <button class="btn btn-outline-${c.activa == 1 ? 'warning' : 'success'} btn-sm" onclick="toggle(${c.id})"><i class="fas fa-${c.activa == 1 ? 'ban' : 'check'}"></i></button>
                <button class="btn btn-outline-danger btn-sm" onclick="eliminar(${c.id},'${escHtml(c.nombre).replace(/'/g,"\\'")}')"><i class="fas fa-trash"></i></button>
            </td>
        </tr>
    `).join('');
}

function abrirModal(id = 0, nombre = '') {
    document.getElementById('ciu-id').value     = id;
    document.getElementById('ciu-nombre').value = nombre;
    document.getElementById('ciu-error').classList.add('d-none');
    document.getElementById('modal-ciu-titulo').textContent = id ? 'Editar ciudad' : 'Nueva ciudad';
    _modal = _modal || new bootstrap.Modal(document.getElementById('modal-ciu'));
    _modal.show();
    setTimeout(() => document.getElementById('ciu-nombre').focus(), 300);
}

async function guardar() {
    const nombre = document.getElementById('ciu-nombre').value.trim();
    const id     = parseInt(document.getElementById('ciu-id').value) || 0;
    const errEl  = document.getElementById('ciu-error');
    errEl.classList.add('d-none');
    if (!nombre) { errEl.textContent = 'El nombre es requerido.'; errEl.classList.remove('d-none'); return; }
    const r = await fetch(API, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({action:'save', id, nombre}) });
    const j = await r.json();
    if (!j.ok) { errEl.textContent = j.error || 'Error'; errEl.classList.remove('d-none'); return; }
    _modal.hide();
    cargar();
}

async function toggle(id) {
    await fetch(API, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({action:'toggle', id}) });
    cargar();
}

async function eliminar(id, nombre) {
    if (!confirm(`¿Eliminar "${nombre}"?`)) return;
    const r = await fetch(API, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({action:'delete', id}) });
    const j = await r.json();
    if (!j.ok) { alert(j.error); return; }
    cargar();
}

function escHtml(str) {
    const d = document.createElement('div');
    d.appendChild(document.createTextNode(String(str)));
    return d.innerHTML;
}

document.getElementById('ciu-nombre').addEventListener('keydown', e => { if (e.key === 'Enter') guardar(); });
cargar();
</script>
</body>
</html>
