<?php
// dashboard.php - Panel principal de registro de estudiantes
// C.E.I. Federico Froebel
require_once 'db.php';

// Verificar sesion
if (!isset($_SESSION['usuario'])) {
    header("Location: login.php");
    exit();
}

$mensaje = '';
$tipo_mensaje = '';
$grupo_seleccionado = null;

// ===== PROCESAR GUARDADO DE INSCRIPCION =====
if (isset($_POST['guardar'])) {
    $grupo_id = intval($_POST['grupo_id'] ?? 0);
    
    // Verificar cupo disponible
    $check = $conn->prepare("SELECT cupo_total, cupo_usado FROM grupos WHERE id = ? AND activo = 1");
    $check->bind_param("i", $grupo_id);
    $check->execute();
    $res_check = $check->get_result();
    
    if ($res_check->num_rows === 1) {
        $grupo_data = $res_check->fetch_assoc();
        $disponible = $grupo_data['cupo_total'] - $grupo_data['cupo_usado'];
        
        if ($disponible > 0) {
            $stmt = $conn->prepare("INSERT INTO inscripciones 
                (grupo_id, periodo, nino_apellidos, nino_nombres, sexo, fecha_nac, edad, lugar_nac, 
                 procede_de, procede_lugar, turno, madre_nombre, madre_parentesco, madre_ocupacion, 
                 madre_trabajo, madre_direccion, madre_telefono, madre_telefono_alt, padre_nombre, 
                 padre_parentesco, padre_ocupacion, padre_trabajo, padre_direccion, padre_telefono, 
                 padre_telefono_alt, rep_ci, fecha_inscripcion, cancelo, correo, observaciones, usuario_registro) 
                VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)");
            
            $stmt->bind_param("isssssissssssssssssssssssssssss",
                $grupo_id,
                $_POST['periodo'],
                $_POST['ape'],
                $_POST['nom'],
                $_POST['sexo'],
                $_POST['fnac'],
                $_POST['edad'],
                $_POST['lnac'],
                $_POST['procede'],
                $_POST['de_lugar'],
                $_POST['turno'],
                $_POST['m_nom'],
                $_POST['m_par'],
                $_POST['m_ocu'],
                $_POST['m_tra'],
                $_POST['m_dir'],
                $_POST['m_tel'],
                $_POST['m_tel2'],
                $_POST['p_nom'],
                $_POST['p_par'],
                $_POST['p_ocu'],
                $_POST['p_tra'],
                $_POST['p_dir'],
                $_POST['p_tel'],
                $_POST['p_tel2'],
                $_POST['r_ci'],
                $_POST['f_ins'],
                $_POST['cancelo'],
                $_POST['mail'],
                $_POST['obs'],
                $_SESSION['usuario']
            );
            
            if ($stmt->execute()) {
                $conn->query("UPDATE grupos SET cupo_usado = cupo_usado + 1 WHERE id = $grupo_id");
                $mensaje = 'Registro guardado exitosamente';
                $tipo_mensaje = 'success';
            } else {
                $mensaje = 'Error al guardar: ' . $conn->error;
                $tipo_mensaje = 'error';
            }
        } else {
            $mensaje = 'No hay cupos disponibles para este grupo';
            $tipo_mensaje = 'error';
        }
    }
}

// ===== PROCESAR ELIMINACION =====
if (isset($_GET['del'])) {
    $id = intval($_GET['del']);
    $res = $conn->query("SELECT grupo_id FROM inscripciones WHERE id = $id");
    if ($res && $res->num_rows > 0) {
        $row = $res->fetch_assoc();
        $gid = $row['grupo_id'];
        $conn->query("DELETE FROM inscripciones WHERE id = $id");
        $conn->query("UPDATE grupos SET cupo_usado = GREATEST(cupo_usado - 1, 0) WHERE id = $gid");
        $mensaje = 'Registro eliminado';
        $tipo_mensaje = 'success';
    }
}

// ===== VER FICHA (modo solo lectura para impresión) =====
$ficha_ver = null;
if (isset($_GET['ver'])) {
    $id_ver = intval($_GET['ver']);
    $res_ver = $conn->query("SELECT i.*, g.nombre as grupo_nombre FROM inscripciones i JOIN grupos g ON i.grupo_id = g.id WHERE i.id = $id_ver");
    if ($res_ver && $res_ver->num_rows > 0) {
        $ficha_ver = $res_ver->fetch_assoc();
    }
}

// ===== OBTENER GRUPOS CON CUPOS =====
$grupos = [];
$res_grupos = $conn->query("SELECT * FROM grupos ORDER BY orden");
while ($g = $res_grupos->fetch_assoc()) {
    $g['disponible'] = $g['cupo_total'] - $g['cupo_usado'];
    $g['porcentaje'] = ($g['cupo_usado'] / $g['cupo_total']) * 100;
    $grupos[] = $g;
}

// ===== GRUPO SELECCIONADO =====
if (isset($_GET['grupo'])) {
    $gid = intval($_GET['grupo']);
    foreach ($grupos as $g) {
        if ($g['id'] == $gid) {
            $grupo_seleccionado = $g;
            break;
        }
    }
}

// ===== REGISTROS RECIENTES =====
$registros = [];
$res_reg = $conn->query("SELECT i.id, i.nino_nombres, i.nino_apellidos, i.nino_cedula_escolar, g.nombre as grupo_nombre 
                          FROM inscripciones i 
                          JOIN grupos g ON i.grupo_id = g.id 
                          ORDER BY i.id DESC LIMIT 15");
while ($r = $res_reg->fetch_assoc()) {
    $registros[] = $r;
}

$inicial = strtoupper(substr($_SESSION['nombre_completo'] ?? $_SESSION['usuario'], 0, 1));
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Panel de Registro - C.E.I. Federico Froebel</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: 'Poppins', sans-serif;
            background: #f0f2f5;
            color: #333;
            line-height: 1.6;
        }
        
        /* ===== NAVBAR ===== */
        .navbar {
            background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #3949ab 100%);
            padding: 12px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 25px rgba(26,35,126,0.4);
            position: sticky;
            top: 0;
            z-index: 100;
            animation: gradientShiftNav 5s ease infinite;
            background-size: 200% 200%;
        }

        @keyframes gradientShiftNav {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        .navbar-brand {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .navbar-brand img {
            width: 45px;
            height: 45px;
            object-fit: contain;
            border-radius: 10px;
            background: white;
            padding: 3px;
        }
        
        .navbar-brand h1 {
            font-size: 1.1rem;
            color: white;
            font-weight: 600;
        }
        
        .navbar-brand span {
            font-size: 0.75rem;
            color: rgba(255,255,255,0.7);
            font-weight: 400;
        }
        
        .navbar-right {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .user-info {
            text-align: right;
            font-size: 0.8rem;
            color: white;
        }
        
        .user-info .name {
            font-weight: 600;
            color: white;
        }
        
        .user-info .role {
            color: rgba(255,255,255,0.7);
            font-size: 0.7rem;
            text-transform: uppercase;
        }
        
        .avatar {
            width: 42px;
            height: 42px;
            background: white;
            color: #1a237e;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.1rem;
            cursor: pointer;
            position: relative;
            box-shadow: 0 4px 15px rgba(0,0,0,0.25);
            transition: all 0.3s;
            animation: floatAvatar 3s ease-in-out infinite;
        }

        @keyframes floatAvatar {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }

        .avatar:hover {
            transform: scale(1.1);
            animation: none;
        }
        
        .avatar .dropdown {
            display: none;
            position: absolute;
            right: 0;
            top: 55px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            width: 180px;
            overflow: hidden;
        }
        
        .avatar:hover .dropdown {
            display: block;
            animation: fadeIn 0.2s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-5px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .dropdown a {
            display: block;
            padding: 12px 16px;
            color: #333;
            text-decoration: none;
            font-size: 0.85rem;
            transition: all 0.2s;
        }
        
        .dropdown a:hover {
            background: #f5f5f5;
            color: #c62828;
            padding-left: 20px;
        }
        
        /* ===== CONTAINER ===== */
        .container {
            max-width: 1200px;
            margin: 30px auto;
            padding: 0 20px;
        }
        
        /* ===== MENSAJE ===== */
        .alert {
            padding: 14px 20px;
            border-radius: 12px;
            margin-bottom: 25px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 10px;
            animation: slideIn 0.3s ease;
        }
        
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .alert-success {
            background: linear-gradient(135deg, #e8f5e9, #dcedc8);
            color: #2e7d32;
            border-left: 4px solid #4caf50;
        }
        
        .alert-error {
            background: linear-gradient(135deg, #ffebee, #fce4ec);
            color: #c62828;
            border-left: 4px solid #f44336;
        }
        
        /* ===== ESTADISTICAS ===== */
        .stats-bar {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .stat-item {
            background: white;
            border-radius: 16px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .stat-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #1a237e, #3949ab);
        }
        
        .stat-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.1);
        }
        
        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: #1a237e;
        }
        
        .stat-label {
            font-size: 0.75rem;
            color: #888;
            margin-top: 4px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* ===== SECCION CUPOS ===== */
        .cupos-section {
            margin-bottom: 35px;
        }
        
        .section-title {
            font-size: 1.3rem;
            color: #1a237e;
            margin-bottom: 20px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-title::before {
            content: '';
            width: 5px;
            height: 28px;
            background: linear-gradient(180deg, #1a237e, #3949ab);
            border-radius: 3px;
        }
        
        .cupos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 20px;
        }
        
        .cupo-card {
            background: white;
            border-radius: 18px;
            padding: 25px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
            transition: all 0.35s ease;
            position: relative;
            overflow: hidden;
            border: 2px solid transparent;
        }
        
        .cupo-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 35px rgba(0,0,0,0.12);
        }
        
        .cupo-card.activo {
            border-color: #1a237e;
            cursor: pointer;
        }
        
        .cupo-card.lleno {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .cupo-card.seleccionado {
            border-color: #1a237e;
            background: linear-gradient(135deg, #e8eaf6 0%, white 100%);
        }
        
        .cupo-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .cupo-badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        .badge-disponible { background: #e8f5e9; color: #2e7d32; }
        .badge-lleno { background: #ffebee; color: #c62828; }
        
        .cupo-card h3 {
            font-size: 1.15rem;
            color: #333;
            margin-bottom: 5px;
        }
        
        .cupo-card p {
            font-size: 0.8rem;
            color: #888;
            margin-bottom: 15px;
        }
        
        .cupo-stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .cupo-stats span {
            font-size: 0.8rem;
            color: #666;
        }
        
        .cupo-stats strong {
            color: #333;
            font-size: 0.9rem;
        }
        
        .progress-bar {
            height: 8px;
            background: #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.5s ease;
        }
        
        .progress-fill.bajo { background: linear-gradient(90deg, #4caf50, #66bb6a); }
        .progress-fill.medio { background: linear-gradient(90deg, #ff9800, #ffb74d); }
        .progress-fill.alto { background: linear-gradient(90deg, #f44336, #ef5350); }
        
        .cupo-action {
            margin-top: 15px;
            padding: 10px;
            border-radius: 10px;
            text-align: center;
            font-size: 0.85rem;
            font-weight: 600;
        }
        
        .action-btn {
            background: linear-gradient(135deg, #1a237e, #3949ab);
            color: white;
            width: 100%;
            border: none;
            padding: 12px;
            border-radius: 10px;
            cursor: pointer;
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
        }
        
        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(26,35,126,0.3);
        }
        
        .action-lleno {
            background: #e0e0e0;
            color: #999;
        }
        
        /* ===== FORMULARIO ===== */
        .form-wrapper {
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 25px;
        }
        
        .form-card {
            background: white;
            border-radius: 18px;
            padding: 35px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        }
        
        .form-card h2 {
            font-size: 1.2rem;
            color: #1a237e;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .form-card .grupo-tag {
            display: inline-block;
            padding: 4px 14px;
            background: linear-gradient(135deg, #1a237e, #3949ab);
            color: white;
            border-radius: 20px;
            font-size: 0.8rem;
            margin-bottom: 25px;
            margin-top: 8px;
        }
        
        .form-section {
            margin-bottom: 28px;
        }
        
        .form-section h3 {
            font-size: 1rem;
            color: #1a237e;
            border-bottom: 2px solid #e8eaf6;
            padding-bottom: 10px;
            margin-bottom: 18px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .form-grid {
            display: grid;
            gap: 12px;
        }
        
        .form-grid-2 { grid-template-columns: 1fr 1fr; }
        .form-grid-3 { grid-template-columns: 1fr 2fr 1fr; }
        .form-grid-1 { grid-template-columns: 1fr; }
        
        .form-field {
            display: flex;
            flex-direction: column;
        }
        
        .form-field label {
            font-size: 0.8rem;
            color: #555;
            margin-bottom: 6px;
            font-weight: 500;
        }
        
        .form-field label .required {
            color: #e53935;
        }
        
        .form-field input,
        .form-field select,
        .form-field textarea {
            padding: 12px 14px;
            border: 2px solid #e8e8e8;
            border-radius: 10px;
            font-family: 'Poppins', sans-serif;
            font-size: 0.9rem;
            transition: all 0.3s;
            background: #fafafa;
        }
        
        .form-field input:focus,
        .form-field select:focus,
        .form-field textarea:focus {
            outline: none;
            border-color: #1a237e;
            background: white;
            box-shadow: 0 0 0 3px rgba(26,35,126,0.1);
        }
        
        .form-field textarea {
            resize: vertical;
            min-height: 80px;
        }
        
        /* ===== BOTONES ===== */
        .btn-group {
            display: flex;
            gap: 12px;
            margin-top: 25px;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 14px 30px;
            border: none;
            border-radius: 12px;
            font-family: 'Poppins', sans-serif;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #1a237e, #3949ab);
            color: white;
            box-shadow: 0 4px 15px rgba(26,35,126,0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(26,35,126,0.4);
        }
        
        .btn-print {
            background: linear-gradient(135deg, #2e7d32, #43a047);
            color: white;
            box-shadow: 0 4px 15px rgba(46,125,50,0.3);
        }
        
        .btn-print:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(46,125,50,0.4);
        }
        
        .btn-cancel {
            background: #f5f5f5;
            color: #666;
        }
        
        .btn-cancel:hover {
            background: #e0e0e0;
        }
        
        /* ===== SIDEBAR ===== */
        .sidebar {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .sidebar-card {
            background: white;
            border-radius: 18px;
            padding: 22px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        }
        
        .sidebar-card h4 {
            font-size: 0.95rem;
            color: #1a237e;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .registro-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f0f0f0;
            font-size: 0.85rem;
            transition: all 0.2s;
        }
        
        .registro-item:last-child {
            border-bottom: none;
        }
        
        .registro-item:hover {
            padding-left: 8px;
            color: #1a237e;
        }
        
        .registro-item .info {
            flex: 1;
        }
        
        .registro-item .name {
            font-weight: 500;
            color: #333;
        }
        
        .registro-item .grupo {
            font-size: 0.75rem;
            color: #888;
        }
        
        .registro-item .actions {
            display: flex;
            gap: 8px;
        }
        
        .registro-item a {
            color: #c62828;
            text-decoration: none;
            font-size: 1rem;
            padding: 4px 8px;
            border-radius: 6px;
            transition: all 0.2s;
        }
        
        .registro-item a:hover {
            background: #ffebee;
            transform: scale(1.1);
        }
        
        .empty-state {
            text-align: center;
            padding: 20px;
            color: #999;
            font-size: 0.85rem;
        }
        
        /* ===== IMPRESION ===== */
        @media print {
            .no-print { display: none !important; }
            body { background: white; }
            .container { max-width: 100%; margin: 0; padding: 0; }
            .form-wrapper { grid-template-columns: 1fr; }
            .form-card { box-shadow: none; border-radius: 0; padding: 0; }
            .print-header { display: block !important; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 3px double #1a237e; }
            .btn-group { display: none; }
            .form-field input,
            .form-field select,
            .form-field textarea { border: 1px solid #ccc; background: white; }
        }
        
        .print-header {
            display: none;
            text-align: center;
        }
        
        .print-header img {
            width: 80px;
            height: 80px;
            object-fit: contain;
            margin-bottom: 10px;
        }
        
        .print-header h2 {
            color: #1a237e;
            font-size: 1.4rem;
            margin-bottom: 5px;
        }
        
        .print-header p {
            color: #666;
            font-size: 0.9rem;
        }
        
        /* ===== RESPONSIVE ===== */
        @media (max-width: 968px) {
            .form-wrapper { grid-template-columns: 1fr; }
            .sidebar { order: -1; }
            .stats-bar { grid-template-columns: repeat(2, 1fr); }
        }
        
        @media (max-width: 600px) {
            .form-grid-2,
            .form-grid-3 { grid-template-columns: 1fr; }
            .navbar { padding: 10px 15px; }
            .navbar-brand h1 { font-size: 0.85rem; }
            .form-card { padding: 20px; }
            .stats-bar { grid-template-columns: 1fr 1fr; }
            .cupos-grid { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>

<!-- ===== NAVBAR ===== -->
<nav class="navbar no-print">
    <div class="navbar-brand">
        <img src="logoi.jpg" alt="Logo" onerror="this.style.display='none'">
        <div>
            <h1>C.E.I. Federico Froebel</h1>
            <span>Sistema de Registro de Estudiantes</span>
        </div>
    </div>
    <div class="navbar-right">
        <div class="user-info">
            <div class="name"><?= htmlspecialchars($_SESSION['nombre_completo'] ?? $_SESSION['usuario']) ?></div>
            <div class="role"><?= $_SESSION['rol'] ?? 'Usuario' ?></div>
        </div>
        <div class="avatar" onclick="toggleDropdown(event)" id="userAvatar">
            <?= $inicial ?>
            <div class="dropdown-wrapper" id="userDropdown" onclick="event.stopPropagation()">
                <div class="dropdown">
                    <a href="dashboard.php"><span class="dropdown-icon">&#127968;</span> Inicio</a>
                    <a href="registro.php"><span class="dropdown-icon">&#128100;</span> Nuevo Usuario</a>
                    <a href="logout.php" class="logout"><span class="dropdown-icon">&#128682;</span> Cerrar Sesión</a>
                </div>
            </div>
        </div>
    </div>
</nav>

<!-- ===== CONTENIDO ===== -->
<div class="container">
    
    <?php if ($mensaje): ?>
    <div class="alert alert-<?= $tipo_mensaje ?> no-print">
        <span><?= $tipo_mensaje === 'success' ? '&#9989;' : '&#10060;' ?></span>
        <?= htmlspecialchars($mensaje) ?>
    </div>
    <?php endif; ?>
    
    <!-- ===== ESTADISTICAS ===== -->
    <div class="stats-bar no-print">
        <?php
        $total_ins = 0;
        foreach ($grupos as $g) $total_ins += $g['cupo_usado'];
        $total_cupos = 0;
        foreach ($grupos as $g) $total_cupos += $g['cupo_total'];
        ?>
        <div class="stat-item">
            <div class="stat-number"><?= $total_ins ?></div>
            <div class="stat-label">Total Inscritos</div>
        </div>
        <div class="stat-item">
            <div class="stat-number"><?= $total_cupos - $total_ins ?></div>
            <div class="stat-label">Cupos Disponibles</div>
        </div>
        <div class="stat-item">
            <div class="stat-number"><?= $total_cupos ?></div>
            <div class="stat-label">Cupos Totales</div>
        </div>
        <div class="stat-item">
            <div class="stat-number"><?= count($grupos) ?></div>
            <div class="stat-label">Grupos</div>
        </div>
    </div>
    
    <!-- ===== SECCION CUPOS ===== -->
    <div class="cupos-section no-print">
        <h2 class="section-title">Seleccione un Grupo para Registrar</h2>
        
        <div class="cupos-grid">
            <?php foreach ($grupos as $g): 
                $disponible = $g['disponible'];
                $es_lleno = $disponible <= 0;
                $es_seleccionado = $grupo_seleccionado && $grupo_seleccionado['id'] == $g['id'];
                $progress_class = $g['porcentaje'] < 50 ? 'bajo' : ($g['porcentaje'] < 80 ? 'medio' : 'alto');
            ?>
            <div class="cupo-card <?= $es_lleno ? 'lleno' : 'activo' ?> <?= $es_seleccionado ? 'seleccionado' : '' ?>"
                 <?= !$es_lleno ? 'onclick="location.href=\'?grupo=' . $g['id'] . '\'"' : '' ?>>
                
                <div class="cupo-header">
                    <span style="font-size: 1.5rem;">&#127890;</span>
                    <span class="cupo-badge <?= $es_lleno ? 'badge-lleno' : 'badge-disponible' ?>">
                        <?= $es_lleno ? 'SIN CUPOS' : $disponible . ' disponibles' ?>
                    </span>
                </div>
                
                <h3><?= htmlspecialchars($g['nombre']) ?></h3>
                <p><?= htmlspecialchars($g['descripcion']) ?></p>
                
                <div class="cupo-stats">
                    <span>Ocupados: <strong><?= $g['cupo_usado'] ?>/<?= $g['cupo_total'] ?></strong></span>
                </div>
                
                <div class="progress-bar">
                    <div class="progress-fill <?= $progress_class ?>" style="width: <?= $g['porcentaje'] ?>%"></div>
                </div>
                
                <div class="cupo-action">
                    <?php if ($es_lleno): ?>
                        <span class="action-lleno">&#9940; Grupo completo</span>
                    <?php elseif ($es_seleccionado): ?>
                        <span style="color: #1a237e;">&#10003; Grupo seleccionado</span>
                    <?php else: ?>
                        <span class="action-btn">Registrar aqui &rarr;</span>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
    
    <?php if ($grupo_seleccionado): ?>
    <!-- ===== FORMULARIO DE REGISTRO ===== -->
    <div class="form-wrapper">
        <div class="form-card">
            
            <div class="print-header">
                <img src="logoi.jpg" alt="Logo" onerror="this.style.display='none'">
                <h2>C.E.I. Federico Froebel</h2>
                <p>Ficha de Inscripcion - Periodo Escolar</p>
            </div>
            
            <h2>&#128221; Formulario de Inscripcion</h2>
            <span class="grupo-tag">&#128218; <?= htmlspecialchars($grupo_seleccionado['nombre']) ?></span>
            
            <form method="POST" action="" id="formInscripcion">
                <input type="hidden" name="grupo_id" value="<?= $grupo_seleccionado['id'] ?>">
                
                <div class="form-section">
                    <div class="form-grid form-grid-1">
                        <div class="form-field">
                            <label>Periodo Escolar <span class="required">*</span></label>
                            <input type="text" name="periodo" placeholder="Ej: 2026-2027" required>
                        </div>
                    </div>
                </div>
                
                <div class="form-section">
                    <h3>&#128118; DATOS DEL NINO (A)</h3>
                    <div class="form-grid form-grid-2">
                        <div class="form-field">
                            <label>Apellidos <span class="required">*</span></label>
                            <input type="text" name="ape" placeholder="Apellidos completos" required>
                        </div>
                        <div class="form-field">
                            <label>Nombres <span class="required">*</span></label>
                            <input type="text" name="nom" placeholder="Nombres completos" required>
                        </div>
                    </div>
                    <div class="form-grid form-grid-3">
                        <div class="form-field">
                            <label>Sexo <span class="required">*</span></label>
                            <select name="sexo" required>
                                <option value="">Seleccione...</option>
                                <option value="Masculino">Masculino</option>
                                <option value="Femenino">Femenino</option>
                            </select>
                        </div>
                        <div class="form-field">
                            <label>Fecha de Nacimiento</label>
                            <input type="date" name="fnac">
                        </div>
                        <div class="form-field">
                            <label>Edad</label>
                            <input type="number" name="edad" placeholder="Anos" min="0" max="10">
                        </div>
                    </div>
                    <div class="form-grid form-grid-2">
                        <div class="form-field">
                            <label>Lugar de Nacimiento</label>
                            <input type="text" name="lnac" placeholder="Ciudad, Estado">
                        </div>
                        <div class="form-field">
                            <label>Cédula Escolar <span style="font-size:0.7rem;color:#888">(Cédula de la Madre)</span></label>
                            <input type="text" name="n_cedula_escolar" placeholder="V-12345678">
                        </div>
                    </div>
                    <div class="form-grid form-grid-2">
                        <div class="form-field">
                            <label>DE: (Procedencia)</label>
                            <input type="text" name="de_lugar" placeholder="Lugar de procedencia">
                        </div>
                        <div class="form-field">
                            <label>Turno</label>
                            <input type="text" name="turno" placeholder="Manana / Tarde">
                        </div>
                    </div>
                    <div class="form-grid form-grid-1">
                        <div class="form-field">
                            <label>El Alumno Procede de:</label>
                            <input type="text" name="procede" placeholder="Institucion de procedencia">
                        </div>
                    </div>
                </div>
                
                <div class="form-section">
                    <h3>&#128105; DATOS DE LA MADRE</h3>
                    <div class="form-grid form-grid-2">
                        <div class="form-field">
                            <label>Nombres y Apellidos</label>
                            <input type="text" name="m_nom" placeholder="Nombre completo de la madre">
                        </div>
                        <div class="form-field">
                            <label>Cédula de Identidad</label>
                            <input type="text" name="m_cedula" placeholder="V-12345678">
                        </div>
                    </div>
                    <div class="form-grid form-grid-2">
                        <div class="form-field">
                            <label>Parentesco</label>
                            <input type="text" name="m_par" placeholder="Ej: Madre, Tutora">
                        </div>
                        <div class="form-field">
                            <label>Ocupación</label>
                            <input type="text" name="m_ocu" placeholder="Ocupación">
                        </div>
                    </div>
                    <div class="form-grid form-grid-2">
                        <div class="form-field">
                            <label>Ocupacion</label>
                            <input type="text" name="m_ocu" placeholder="Ocupacion">
                        </div>
                        <div class="form-field">
                            <label>Lugar de Trabajo</label>
                            <input type="text" name="m_tra" placeholder="Empresa o institucion">
                        </div>
                    </div>
                    <div class="form-grid form-grid-1">
                        <div class="form-field">
                            <label>Direccion de Habitacion</label>
                            <input type="text" name="m_dir" placeholder="Direccion completa">
                        </div>
                    </div>
                    <div class="form-grid form-grid-2">
                        <div class="form-field">
                            <label>Telefono</label>
                            <input type="text" name="m_tel" placeholder="Numero principal">
                        </div>
                        <div class="form-field">
                            <label>Otro lugar localizable (Telf)</label>
                            <input type="text" name="m_tel2" placeholder="Telefono alternativo">
                        </div>
                    </div>
                </div>
                
                <div class="form-section">
                    <h3>&#128104; DATOS DEL PADRE</h3>
                    <div class="form-grid form-grid-2">
                        <div class="form-field">
                            <label>Nombres y Apellidos</label>
                            <input type="text" name="p_nom" placeholder="Nombre completo del padre">
                        </div>
                        <div class="form-field">
                            <label>Cédula de Identidad</label>
                            <input type="text" name="p_cedula" placeholder="V-12345678">
                        </div>
                    </div>
                    <div class="form-grid form-grid-2">
                        <div class="form-field">
                            <label>Parentesco</label>
                            <input type="text" name="p_par" placeholder="Ej: Padre, Tutor">
                        </div>
                        <div class="form-field">
                            <label>Ocupación</label>
                            <input type="text" name="p_ocu" placeholder="Ocupación">
                        </div>
                    </div>
                    <div class="form-grid form-grid-2">
                        <div class="form-field">
                            <label>Ocupacion</label>
                            <input type="text" name="p_ocu" placeholder="Ocupacion">
                        </div>
                        <div class="form-field">
                            <label>Lugar de Trabajo</label>
                            <input type="text" name="p_tra" placeholder="Empresa o institucion">
                        </div>
                    </div>
                    <div class="form-grid form-grid-1">
                        <div class="form-field">
                            <label>Direccion de Habitacion</label>
                            <input type="text" name="p_dir" placeholder="Direccion completa">
                        </div>
                    </div>
                    <div class="form-grid form-grid-2">
                        <div class="form-field">
                            <label>Telefono</label>
                            <input type="text" name="p_tel" placeholder="Numero principal">
                        </div>
                        <div class="form-field">
                            <label>Otro lugar localizable (Telf)</label>
                            <input type="text" name="p_tel2" placeholder="Telefono alternativo">
                        </div>
                    </div>
                </div>
                
                <div class="form-section">
                    <h3>&#9997; FIRMA Y REPRESENTANTE</h3>
                    <div class="form-grid form-grid-2">
                        <div class="form-field">
                            <label>C.I. Representante <span class="required">*</span></label>
                            <input type="text" name="r_ci" placeholder="Cedula de identidad" required>
                        </div>
                        <div class="form-field">
                            <label>Fecha de Inscripcion</label>
                            <input type="date" name="f_ins">
                        </div>
                    </div>
                    <div class="form-grid form-grid-2">
                        <div class="form-field">
                            <label>Cancelo (Monto/Referencia)</label>
                            <input type="text" name="cancelo" placeholder="Monto o numero de referencia">
                        </div>
                        <div class="form-field">
                            <label>Correo Electronico</label>
                            <input type="email" name="mail" placeholder="correo@ejemplo.com">
                        </div>
                    </div>
                    <div class="form-grid form-grid-1">
                        <div class="form-field">
                            <label>Observaciones</label>
                            <textarea name="obs" rows="3" placeholder="Observaciones adicionales..."></textarea>
                        </div>
                    </div>
                </div>
                
                <div class="btn-group no-print">
                    <button type="submit" name="guardar" class="btn btn-primary">
                        &#128190; Guardar Registro
                    </button>
                    <button type="button" class="btn btn-print" onclick="window.print()">
                        &#128424; Imprimir Ficha
                    </button>
                    <a href="dashboard.php" class="btn btn-cancel">&#10060; Cancelar</a>
                </div>
                
                <div class="print-only" style="display: none; margin-top: 40px;">
                    <div style="display: flex; justify-content: space-between; margin-top: 60px;">
                        <div style="text-align: center; flex: 1;">
                            <div style="border-top: 1px solid #333; width: 200px; margin: 0 auto; padding-top: 10px;">
                                Firma del Representante
                            </div>
                        </div>
                        <div style="text-align: center; flex: 1;">
                            <div style="border-top: 1px solid #333; width: 200px; margin: 0 auto; padding-top: 10px;">
                                Vo. Bo. Direccion
                            </div>
                        </div>
                    </div>
                </div>
                
            </form>
        </div>
        
        <div class="sidebar no-print">
            <div class="sidebar-card">
                <h4>&#128203; Registros Recientes</h4>
                <?php if (count($registros) > 0): ?>
                    <?php foreach ($registros as $r): ?>
                    <div class="registro-item">
                        <div class="info">
                            <div class="name"><?= htmlspecialchars($r['nino_nombres'] . ' ' . $r['nino_apellidos']) ?></div>
                            <div class="grupo"><?= htmlspecialchars($r['grupo_nombre']) ?></div>
                        </div>
                        <div class="actions">
                            <a href="?ver=<?= $r['id'] ?>" title="Ver Ficha" class="btn-ver">&#128269;</a>
                            <a href="?del=<?= $r['id'] ?>" onclick="return confirm('¿Eliminar este registro?')" title="Eliminar" class="btn-del">&#10005;</a>
                        </div>
                    </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="empty-state">No hay registros aun</div>
                <?php endif; ?>
            </div>
            
            <div class="sidebar-card">
                <h4>&#128202; Resumen de Cupos</h4>
                <?php foreach ($grupos as $g): 
                    $disp = $g['disponible'];
                ?>
                <div class="registro-item">
                    <span><?= htmlspecialchars($g['nombre']) ?></span>
                    <strong style="color: <?= $disp > 0 ? '#2e7d32' : '#c62828' ?>">
                        <?= $g['cupo_usado'] ?>/<?= $g['cupo_total'] ?>
                    </strong>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
    
    <?php elseif ($ficha_ver): ?>
    <!-- ===== VISTA DE FICHA GUARDADA (solo lectura + impresión) ===== -->
    <div class="form-wrapper">
        <div class="form-card">

            <div class="print-header">
                <img src="logoi.jpg" alt="Logo" onerror="this.style.display='none'">
                <h2>C.E.I. Federico Froebel</h2>
                <p>Ficha de Inscripción - Período Escolar</p>
            </div>

            <h2>&#128203; Ficha de Inscripción</h2>
            <span class="grupo-tag">&#128218; <?= htmlspecialchars($ficha_ver['grupo_nombre']) ?></span>

            <div class="form-section">
                <div class="form-grid form-grid-1">
                    <div class="form-field">
                        <label>Período Escolar</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['periodo'] ?? '') ?>" readonly>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h3>&#128118; DATOS DEL NIÑO(A)</h3>
                <div class="form-grid form-grid-2">
                    <div class="form-field">
                        <label>Apellidos</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['nino_apellidos'] ?? '') ?>" readonly>
                    </div>
                    <div class="form-field">
                        <label>Nombres</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['nino_nombres'] ?? '') ?>" readonly>
                    </div>
                </div>
                <div class="form-grid form-grid-3">
                    <div class="form-field">
                        <label>Sexo</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['sexo'] ?? '') ?>" readonly>
                    </div>
                    <div class="form-field">
                        <label>Fecha de Nacimiento</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['fecha_nac'] ?? '') ?>" readonly>
                    </div>
                    <div class="form-field">
                        <label>Edad</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['edad'] ?? '') ?>" readonly>
                    </div>
                </div>
                <div class="form-grid form-grid-2">
                    <div class="form-field">
                        <label>Lugar de Nacimiento</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['lugar_nac'] ?? '') ?>" readonly>
                    </div>
                    <div class="form-field">
                        <label>Cédula Escolar</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['nino_cedula_escolar'] ?? '') ?>" readonly>
                    </div>
                </div>
                <div class="form-grid form-grid-2">
                    <div class="form-field">
                        <label>DE: (Procedencia)</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['procede_lugar'] ?? '') ?>" readonly>
                    </div>
                    <div class="form-field">
                        <label>Turno</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['turno'] ?? '') ?>" readonly>
                    </div>
                </div>
                <div class="form-grid form-grid-1">
                    <div class="form-field">
                        <label>El Alumno Procede de:</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['procede_de'] ?? '') ?>" readonly>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h3>&#128105; DATOS DE LA MADRE</h3>
                <div class="form-grid form-grid-2">
                    <div class="form-field">
                        <label>Nombres y Apellidos</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['madre_nombre'] ?? '') ?>" readonly>
                    </div>
                    <div class="form-field">
                        <label>Cédula de Identidad</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['madre_cedula'] ?? '') ?>" readonly>
                    </div>
                </div>
                <div class="form-grid form-grid-2">
                    <div class="form-field">
                        <label>Parentesco</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['madre_parentesco'] ?? '') ?>" readonly>
                    </div>
                    <div class="form-field">
                        <label>Ocupación</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['madre_ocupacion'] ?? '') ?>" readonly>
                    </div>
                </div>
                <div class="form-grid form-grid-2">
                    <div class="form-field">
                        <label>Lugar de Trabajo</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['madre_trabajo'] ?? '') ?>" readonly>
                    </div>
                    <div class="form-field">
                        <label>Dirección de Habitación</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['madre_direccion'] ?? '') ?>" readonly>
                    </div>
                </div>
                <div class="form-grid form-grid-2">
                    <div class="form-field">
                        <label>Teléfono</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['madre_telefono'] ?? '') ?>" readonly>
                    </div>
                    <div class="form-field">
                        <label>Otro lugar localizable (Teléfono)</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['madre_telefono_alt'] ?? '') ?>" readonly>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h3>&#128104; DATOS DEL PADRE</h3>
                <div class="form-grid form-grid-2">
                    <div class="form-field">
                        <label>Nombres y Apellidos</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['padre_nombre'] ?? '') ?>" readonly>
                    </div>
                    <div class="form-field">
                        <label>Cédula de Identidad</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['padre_cedula'] ?? '') ?>" readonly>
                    </div>
                </div>
                <div class="form-grid form-grid-2">
                    <div class="form-field">
                        <label>Parentesco</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['padre_parentesco'] ?? '') ?>" readonly>
                    </div>
                    <div class="form-field">
                        <label>Ocupación</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['padre_ocupacion'] ?? '') ?>" readonly>
                    </div>
                </div>
                <div class="form-grid form-grid-2">
                    <div class="form-field">
                        <label>Lugar de Trabajo</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['padre_trabajo'] ?? '') ?>" readonly>
                    </div>
                    <div class="form-field">
                        <label>Dirección de Habitación</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['padre_direccion'] ?? '') ?>" readonly>
                    </div>
                </div>
                <div class="form-grid form-grid-2">
                    <div class="form-field">
                        <label>Teléfono</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['padre_telefono'] ?? '') ?>" readonly>
                    </div>
                    <div class="form-field">
                        <label>Otro lugar localizable (Teléfono)</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['padre_telefono_alt'] ?? '') ?>" readonly>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h3>&#9997; FIRMA Y REPRESENTANTE</h3>
                <div class="form-grid form-grid-2">
                    <div class="form-field">
                        <label>Cédula del Representante</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['rep_ci'] ?? '') ?>" readonly>
                    </div>
                    <div class="form-field">
                        <label>Fecha de Inscripción</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['fecha_inscripcion'] ?? '') ?>" readonly>
                    </div>
                </div>
                <div class="form-grid form-grid-2">
                    <div class="form-field">
                        <label>Canceló (Monto/Referencia)</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['cancelo'] ?? '') ?>" readonly>
                    </div>
                    <div class="form-field">
                        <label>Correo Electrónico</label>
                        <input type="text" value="<?= htmlspecialchars($ficha_ver['correo'] ?? '') ?>" readonly>
                    </div>
                </div>
                <div class="form-grid form-grid-1">
                    <div class="form-field">
                        <label>Observaciones</label>
                        <textarea readonly rows="3"><?= htmlspecialchars($ficha_ver['observaciones'] ?? '') ?></textarea>
                    </div>
                </div>
            </div>

            <div class="btn-group no-print">
                <button type="button" class="btn btn-print" onclick="window.print()">
                    &#128424; Imprimir Ficha
                </button>
                <a href="dashboard.php" class="btn btn-cancel">&#10060; Volver</a>
            </div>

            <div class="print-only" style="display: none; margin-top: 40px;">
                <div style="display: flex; justify-content: space-between; margin-top: 60px;">
                    <div style="text-align: center; flex: 1;">
                        <div style="border-top: 1px solid #333; width: 200px; margin: 0 auto; padding-top: 10px;">
                            Firma del Representante
                        </div>
                    </div>
                    <div style="text-align: center; flex: 1;">
                        <div style="border-top: 1px solid #333; width: 200px; margin: 0 auto; padding-top: 10px;">
                            Vo. Bo. Dirección
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="sidebar no-print">
            <div class="sidebar-card">
                <h4>&#128203; Información del Registro</h4>
                <div class="registro-item">
                    <span>Registrado por</span>
                    <strong><?= htmlspecialchars($ficha_ver['usuario_registro'] ?? 'N/A') ?></strong>
                </div>
                <div class="registro-item">
                    <span>Fecha de registro</span>
                    <strong><?= htmlspecialchars($ficha_ver['fecha_registro'] ?? 'N/A') ?></strong>
                </div>
                <div class="registro-item">
                    <span>Grupo</span>
                    <strong><?= htmlspecialchars($ficha_ver['grupo_nombre'] ?? 'N/A') ?></strong>
                </div>
            </div>

            <div class="sidebar-card">
                <h4>&#128202; Resumen de Cupos</h4>
                <?php foreach ($grupos as $g): 
                    $disp = $g['disponible'];
                ?>
                <div class="registro-item">
                    <span><?= htmlspecialchars($g['nombre']) ?></span>
                    <strong style="color: <?= $disp > 0 ? '#2e7d32' : '#c62828' ?>">
                        <?= $g['cupo_usado'] ?>/<?= $g['cupo_total'] ?>
                    </strong>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>

    <?php else: ?>
    <div class="no-print" style="text-align: center; padding: 60px 20px; color: #888;">
        <div style="font-size: 4rem; margin-bottom: 20px;">&#128070;</div>
        <h2 style="color: #666; margin-bottom: 10px;">Seleccione un grupo</h2>
        <p>Haga clic en uno de los grupos de arriba para comenzar un nuevo registro de estudiante.</p>
    </div>
    <?php endif; ?>
    
</div>

<script>
// Auto-calcular edad a partir de fecha de nacimiento
document.querySelector('input[name="fnac"]')?.addEventListener('change', function() {
    const fnac = new Date(this.value);
    const hoy = new Date();
    let edad = hoy.getFullYear() - fnac.getFullYear();
    const mes = hoy.getMonth() - fnac.getMonth();
    if (mes < 0 || (mes === 0 && hoy.getDate() < fnac.getDate())) {
        edad--;
    }
    if (edad >= 0 && edad <= 10) {
        document.querySelector('input[name="edad"]').value = edad;
    }
});

// Establecer fecha actual por defecto
document.addEventListener('DOMContentLoaded', function() {
    const hoy = new Date().toISOString().split('T')[0];
    const fIns = document.querySelector('input[name="f_ins"]');
    if (fIns && !fIns.value) {
        fIns.value = hoy;
    }
});
</script>

</body>
</html>
