<?php
/**
* Template Name: WES Groups Frontend
* Frontend template for managing groups/courses
*/
if (!defined('ABSPATH')) {
exit;
}
// Security check
if (!current_user_can('manage_options')) {
wp_die('No tienes permisos para acceder a esta página.');
}
// Desactivar caché para datos dinámicos
if (!defined('DONOTCACHEPAGE')) {
define('DONOTCACHEPAGE', true);
}
nocache_headers();
// NO cargar header de WordPress para tener control total del diseño
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grupos - Working English International</title>
<!-- Cargar Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Cargar estilos del dashboard (para mantener consistencia) -->
<style>
/* Variables CSS del sistema */
:root {
--wes-primary: #B19CD9;
--wes-secondary: #9B59B6;
--wes-success: #9DFF70;
--wes-warning: #FFE066;
--wes-danger: #FF6B6B;
--wes-info: #74B9FF;
--wes-light: #f6f7f7;
--wes-dark: #1d2327;
--wes-border: #c3c4c7;
--wes-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Reset básico */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background-color: #f1f1f1;
line-height: 1.6;
}
/* Encabezado corporativo igual al dashboard */
.wes-corporate-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
position: relative;
overflow: hidden;
padding: 0;
margin: 0;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.wes-corporate-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(120, 198, 121, 0.3) 0%, transparent 50%);
animation: gradientShift 15s ease-in-out infinite;
}
@keyframes gradientShift {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
}
.corporate-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
padding: 25px 40px;
gap: 30px;
backdrop-filter: blur(10px);
background: rgba(255,255,255,0.05);
}
.company-logo {
display: flex;
align-items: center;
gap: 20px;
}
.logo-image {
width: 120px;
height: auto;
filter: drop-shadow(0 4px 20px rgba(0,0,0,0.3));
transition: all 0.3s ease;
}
.company-info {
text-align: center;
color: white;
}
.company-name {
font-size: 36px;
font-weight: 800;
margin: 0;
background: linear-gradient(45deg, #fff, #f0f0f0, #fff);
background-size: 200% 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 3s ease-in-out infinite;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
@keyframes shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.company-tagline {
font-size: 16px;
margin: 8px 0 0;
opacity: 0.95;
font-weight: 500;
letter-spacing: 1px;
}
.contact-info {
text-align: right;
color: white;
}
.contact-item {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin: 8px 0;
font-size: 14px;
opacity: 0.9;
transition: all 0.3s ease;
}
.contact-item i {
width: 20px;
text-align: center;
background: rgba(255,255,255,0.2);
padding: 8px;
border-radius: 50%;
font-size: 12px;
}
.contact-item a {
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
/* Navegación breadcrumb */
.wes-breadcrumb {
background: white;
padding: 15px 40px;
border-bottom: 1px solid #e1e5e9;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.wes-breadcrumb a {
color: var(--wes-primary);
text-decoration: none;
transition: color 0.3s ease;
}
.wes-breadcrumb a:hover {
color: var(--wes-secondary);
}
.wes-breadcrumb-separator {
color: #6c757d;
}
/* Responsive del encabezado */
@media (max-width: 1024px) {
.corporate-content {
grid-template-columns: 1fr;
text-align: center;
gap: 20px;
padding: 30px 20px;
}
.company-name { font-size: 32px; }
.contact-info { text-align: center; }
.contact-item { justify-content: center; }
}
@media (max-width: 768px) {
.logo-image { width: 100px; }
.company-name { font-size: 28px; }
.company-tagline { font-size: 14px; }
.corporate-content { padding: 25px 15px; }
.wes-breadcrumb { padding: 15px 20px; }
}
@media (max-width: 768px) {
.logo-image { width: 100px; }
.company-name { font-size: 28px; }
.company-tagline { font-size: 14px; }
.corporate-content { padding: 25px 15px; }
.wes-breadcrumb { padding: 15px 20px; }
}
/* Barra de navegación igual a otros módulos */
.wes-nav-bar {
background: white;
border-bottom: 1px solid #e1e5e9;
padding: 0;
margin: 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* ... resto del código CSS ... */
</style>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- Encabezado Corporativo igual al dashboard -->
<div class="wes-corporate-header">
<div class="corporate-content">
<div class="company-logo">
<img src="http://workingenglishadmin.com/wp-content/uploads/2025/07/letras-1_Mesa-de-trabajo-1.png" alt="Working English International" class="logo-image">
</div>
<div class="company-info">
<h1 class="company-name">Working English International</h1>
<p class="company-tagline">Learn With Us</p>
</div>
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<span>Casper, Wyoming, USA</span>
</div>
<div class="contact-item">
<i class="fas fa-globe"></i>
<a href="https://www.workingenglishonline.com" target="_blank">www.workingenglishonline.com</a>
</div>
<div class="contact-item">
<i class="fas fa-graduation-cap"></i>
<span>Academic Management System</span>
</div>
</div>
</div>
</div>
<!-- Navigation Bar igual a otros módulos -->
<div class="wes-nav-bar">
<div class="nav-container">
<div class="nav-left">
<a href="/dashboard" class="nav-back-btn">
<i class="fas fa-arrow-left"></i>
<span>Volver al Dashboard</span>
</a>
</div>
<div class="nav-center">
<h1 class="nav-title">
<i class="fas fa-layer-group"></i>
Gestión de Grupos
</h1>
</div>
<div class="nav-right">
<span class="nav-user">
<i class="fas fa-user-circle"></i>
<?php echo wp_get_current_user()->display_name; ?>
</span>
</div>
</div>
</div>
<!-- AQUÍ VA EL CONTENIDO DEL MÓDULO DE GRUPOS -->
<div class="wes-groups-container">
<!-- Header Section -->
<div class="wes-groups-header">
<h1 class="wes-groups-title">Groups Management</h1>
<button class="wes-add-group-btn">
<span>➕</span> Add New Group
</button>
</div>
<!-- Filters Section -->
<div class="wes-filters">
<div class="wes-filters-row">
<div class="wes-filter-group">
<label class="wes-filter-label" for="filter-branch">Branch</label>
<select id="filter-branch" class="wes-filter-select">
<option value="">All Branches</option>
</select>
</div>
<div class="wes-filter-group">
<label class="wes-filter-label" for="filter-language">Language</label>
<select id="filter-language" class="wes-filter-select">
<option value="">All Languages</option>
</select>
</div>
<div class="wes-filter-group">
<label class="wes-filter-label" for="filter-program">Program</label>
<select id="filter-program" class="wes-filter-select">
<option value="">All Programs</option>
</select>
</div>
<div class="wes-filter-group">
<label class="wes-filter-label" for="filter-level">Level</label>
<select id="filter-level" class="wes-filter-select">
<option value="">All Levels</option>
</select>
</div>
<div class="wes-filter-group">
<label class="wes-filter-label" for="filter-status">Status</label>
<select id="filter-status" class="wes-filter-select">
<option value="">All Status</option>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
<option value="completed">Completed</option>
</select>
</div>
<div class="wes-filter-group">
<button class="wes-filter-btn">Apply Filters</button>
</div>
</div>
</div>
<!-- Groups Table -->
<div class="wes-groups-table-container">
<table class="wes-groups-table">
<thead>
<tr>
<th>Course Code</th>
<th>Branch</th>
<th>Language</th>
<th>Program</th>
<th>Level</th>
<th>Teacher</th>
<th>Schedule</th>
<th>Days</th>
<th>Monthly Fee</th>
<th>Capacity</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="groups-table-body">
<tr>
<td colspan="12" class="wes-loading">Loading groups...</td>
</tr>
</tbody>
</table>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>