<?php
// ver_admin_areas.php - Vista para mostrar cards de áreas administrativas
require_once __DIR__ . '/../../includes/version.php';
require_once __DIR__ . '/../../includes/admin_guard.php';
include_once __DIR__ . '/../../includes/topbar.php';
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Áreas Administrativas</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="<?= asset('/frontend/assets/css/dashboard/dashboard.css') ?>">
    <link rel="stylesheet" href="<?= asset('/frontend/assets/css/dashboard/dashboard_admin.css') ?>">
    <link rel="stylesheet" href="<?= asset('/frontend/assets/css/includes/topbar.css') ?>">
    <link rel="stylesheet" href="<?= asset('/frontend/assets/css/styles.css') ?>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>
<body class="d-flex flex-column min-vh-100" style="overflow:auto !important;">
    <style>
    .topbar-navbar {
        width: 100vw !important;
        left: 0;
        position: relative;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        border-radius: 0 !important;
    }
    </style>
    <div class="container-fluid mt-4 flex-grow-1">
        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
            <div class="titulo-areas-admin d-flex align-items-center gap-2 mb-0 px-3 py-2 rounded-3 shadow-sm">
                <i class="fas fa-building fa-lg text-primary"></i>
                <span class="fw-bold fs-4" style="letter-spacing:1px;">Áreas Administrativas</span>
            </div>
        </div>
        <div class="row g-3" id="areas-cards">
            <?php
            require_once __DIR__ . '/../../../backend/config/database.php';
            try {
                $db = (new Database())->connect();
                $query = "SELECT a.id, a.area, p.`NOMBRE COMPLETO` AS jefe_nombre\n                          FROM areas_admin a\n                          LEFT JOIN jefes_area_admin j ON j.area_id = a.id\n                          LEFT JOIN Plantilla p ON p.CURP = j.curp\n                          ORDER BY a.area";
                $stmt = $db->prepare($query);
                $stmt->execute();

                $areas = $stmt->fetchAll(PDO::FETCH_ASSOC);

                if (!$areas) {
                    echo '<div class="col-12"><div class="alert alert-warning">No hay áreas administrativas registradas.</div></div>';
                } else {
                    foreach ($areas as $area) {
                        $jefe = $area['jefe_nombre'];
                        if (!$jefe) {
                            $jefe = 'Sin asignar';
                        }
                        $areaUrl = urlencode($area['area']);
                        echo '<div class="col-12 col-sm-6 col-md-4 col-lg-3">';
                        echo '<a href="ver_horario_area.php?area=' . $areaUrl . '" style="text-decoration:none; color:inherit;">';
                        echo '<div class="card area-admin-card h-100 shadow-sm border-primary">';
                        echo '<div class="card-body">';
                        echo '<h5 class="card-title mb-2">' . htmlspecialchars($area['area']) . '</h5>';
                        echo '<p class="mb-0"><small>Jefe: <b>' . htmlspecialchars($jefe) . '</b></small></p>';
                        echo '</div>';
                        echo '</div>';
                        echo '</a>';
                        echo '</div>';
                    }
                }
            } catch (Exception $e) {
                echo '<div class="col-12"><div class="alert alert-danger">Error al conectar o consultar la base de datos: ' . htmlspecialchars($e->getMessage()) . '</div></div>';
            }
            ?>
        </div>
    </div>
    <style>
    .titulo-areas-admin {
        background: linear-gradient(90deg, #f8fafc 60%, #e9e3f7 100%);
        border-left: 6px solid #764ba2;
        font-family: 'Poppins', sans-serif;
        box-shadow: 0 2px 8px rgba(118,75,162,0.07);
    }
    .titulo-areas-admin .fa-building {
        filter: drop-shadow(0 2px 4px rgba(76,0,130,0.10));
    }
    .area-admin-card {
        transition: box-shadow 0.2s, transform 0.15s;
        border-width: 2px;
        border-radius: 1.2rem;
        cursor: default;
        border-color: #ccc;
    }
    .area-admin-card:hover {
        box-shadow: 0 8px 32px rgba(76,0,130,0.18);
        transform: translateY(-3px) scale(1.03);
        border-color: #764ba2;
    }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
