<%@ page contentType="text/html; charset=UTF-8" %>
<% request.setCharacterEncoding("UTF-8"); %>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Panel de Administración - Guía Gastronómica</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        /* Header */
        .header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            text-align: center;
        }

        .header h1 {
            font-size: 2.8rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.2rem;
            color: #5a6c7d;
            margin-bottom: 20px;
        }

        .header-actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        .quick-action {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 12px 20px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            transition: all 0.3s ease;
        }

        .quick-action:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
        }

        /* Dashboard Grid */
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }

        .dashboard-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .dashboard-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 30px 60px rgba(0,0,0,0.15);
        }

        .dashboard-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .card-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .card-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: white;
            flex-shrink: 0;
        }

        .card-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 5px;
        }

        .card-subtitle {
            color: #5a6c7d;
            font-size: 0.95rem;
        }

        .card-content {
            margin-bottom: 25px;
        }

        .card-description {
            color: #5a6c7d;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .feature-list {
            list-style: none;
            padding: 0;
        }

        .feature-list li {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            color: #2c3e50;
            font-size: 0.95rem;
        }

        .feature-list li i {
            color: #667eea;
            width: 16px;
        }

        .card-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 12px 20px;
            border: none;
            border-radius: 10px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            justify-content: center;
            min-width: 120px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }

        .btn-secondary {
            background: transparent;
            color: #667eea;
            border: 2px solid #667eea;
        }

        .btn-secondary:hover {
            background: #667eea;
            color: white;
        }

        .btn-success {
            background: #2ecc71;
            color: white;
        }

        .btn-success:hover {
            background: #27ae60;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(46, 204, 113, 0.4);
        }

        .btn-info {
            background: #3498db;
            color: white;
        }

        .btn-info:hover {
            background: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(52, 152, 219, 0.4);
        }

        .btn-warning {
            background: #f39c12;
            color: white;
        }

        .btn-warning:hover {
            background: #e67e22;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(243, 156, 18, 0.4);
        }

        /* Stats Section */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #667eea;
            margin-bottom: 5px;
        }

        .stat-label {
            color: #5a6c7d;
            font-size: 0.9rem;
            font-weight: 500;
        }

        /* Footer */
        .footer {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin-top: 30px;
        }

        .footer p {
            color: #5a6c7d;
            margin-bottom: 15px;
        }

        .developer-credits {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .developer {
            display: flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }

            .header h1 {
                font-size: 2rem;
            }

            .dashboard-grid {
                grid-template-columns: 1fr;
            }

            .card-actions {
                flex-direction: column;
            }

            .btn {
                flex: none;
                width: 100%;
            }

            .header-actions {
                flex-direction: column;
                align-items: center;
            }

            .quick-action {
                width: 100%;
                justify-content: center;
                max-width: 300px;
            }
        }

        /* Animations */
        .fade-in {
            animation: fadeIn 0.6s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .stagger-1 { animation-delay: 0.1s; }
        .stagger-2 { animation-delay: 0.2s; }
        .stagger-3 { animation-delay: 0.3s; }
        .stagger-4 { animation-delay: 0.4s; }
        .stagger-5 { animation-delay: 0.5s; }
        .stagger-6 { animation-delay: 0.6s; }
    </style>
</head>
<body>
    <div class="container">
        <!-- Header -->
        <div class="header fade-in">
            <h1><i class="fas fa-tachometer-alt"></i> Panel de Administración</h1>
            <p>Gestiona restaurantes, servicios, platos y más desde un solo lugar</p>
            <div class="header-actions">
                <a href="vista_restaurantes.jsp" class="quick-action">
                    <i class="fas fa-eye"></i>
                    Vista Pública
                </a>
                <a href="index.jsp" class="quick-action">
                    <i class="fas fa-home"></i>
                    Página Principal
                </a>
                <a href="#estadisticas" class="quick-action">
                    <i class="fas fa-chart-bar"></i>
                    Estadísticas
                </a>
            </div>
        </div>

        <!-- Stats Grid -->
        <div class="stats-grid fade-in stagger-1">
            <div class="stat-card">
                <div class="stat-number">
                    <i class="fas fa-store"></i>
                </div>
                <div class="stat-label">Restaurantes</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">
                    <i class="fas fa-utensils"></i>
                </div>
                <div class="stat-label">Platos</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">
                    <i class="fas fa-concierge-bell"></i>
                </div>
                <div class="stat-label">Servicios</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">
                    <i class="fas fa-users"></i>
                </div>
                <div class="stat-label">Usuarios</div>
            </div>
        </div>

        <!-- Dashboard Grid -->
        <div class="dashboard-grid">
            <!-- Gestión de Restaurantes -->
            <div class="dashboard-card fade-in stagger-2">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-store"></i>
                    </div>
                    <div>
                        <div class="card-title">Restaurantes</div>
                        <div class="card-subtitle">Gestión completa de restaurantes</div>
                    </div>
                </div>
                <div class="card-content">
                    <p class="card-description">
                        Administra toda la información de los restaurantes: datos de contacto, ubicación y configuración general.
                    </p>
                    <ul class="feature-list">
                        <li><i class="fas fa-plus"></i> Agregar nuevos restaurantes</li>
                        <li><i class="fas fa-edit"></i> Editar información existente</li>
                        <li><i class="fas fa-eye"></i> Ver listado completo</li>
                        <li><i class="fas fa-trash"></i> Eliminar registros</li>
                    </ul>
                </div>
                <div class="card-actions">
                    <a href="restaurantes.jsp" class="btn btn-primary">
                        <i class="fas fa-cog"></i>
                        Gestionar
                    </a>
                    <a href="form_restaurante.jsp" class="btn btn-success">
                        <i class="fas fa-plus"></i>
                        Nuevo
                    </a>
                </div>
            </div>

            <!-- Gestión de Servicios -->
            <div class="dashboard-card fade-in stagger-3">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-concierge-bell"></i>
                    </div>
                    <div>
                        <div class="card-title">Servicios</div>
                        <div class="card-subtitle">Catálogo de servicios disponibles</div>
                    </div>
                </div>
                <div class="card-content">
                    <p class="card-description">
                        Define y administra todos los servicios que pueden ofrecer los restaurantes.
                    </p>
                    <ul class="feature-list">
                        <li><i class="fas fa-plus"></i> Crear nuevos servicios</li>
                        <li><i class="fas fa-link"></i> Asignar a restaurantes</li>
                        <li><i class="fas fa-list"></i> Ver catálogo completo</li>
                        <li><i class="fas fa-edit"></i> Modificar existentes</li>
                    </ul>
                </div>
                <div class="card-actions">
                    <a href="servicios.jsp" class="btn btn-primary">
                        <i class="fas fa-cog"></i>
                        Gestionar
                    </a>
                    <a href="registrar_servicios.jsp" class="btn btn-success">
                        <i class="fas fa-plus"></i>
                        Nuevo
                    </a>
                </div>
            </div>

            <!-- Gestión de Platos -->
            <div class="dashboard-card fade-in stagger-4">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-utensils"></i>
                    </div>
                    <div>
                        <div class="card-title">Platos</div>
                        <div class="card-subtitle">Menús y especialidades</div>
                    </div>
                </div>
                <div class="card-content">
                    <p class="card-description">
                        Administra el menú completo de cada restaurante con precios, descripciones y categorías.
                    </p>
                    <ul class="feature-list">
                        <li><i class="fas fa-plus"></i> Agregar platos nuevos</li>
                        <li><i class="fas fa-dollar-sign"></i> Gestionar precios</li>
                        <li><i class="fas fa-tags"></i> Categorizar por tipo</li>
                        <li><i class="fas fa-image"></i> Añadir descripciones</li>
                    </ul>
                </div>
                <div class="card-actions">
                    <a href="platos.jsp" class="btn btn-primary">
                        <i class="fas fa-cog"></i>
                        Gestionar
                    </a>
                    <a href="platos_list.jsp" class="btn btn-success">
                        <i class="fas fa-plus"></i>
                        Nuevo
                    </a>
                </div>
            </div>

        </div>

        <!-- Footer -->
        <div class="footer fade-in">
            <p>Sistema de Gestión de Restaurantes - </p>
            <div class="developer-credits">
                <div class="developer">
                    <i class="fas fa-user-graduate"></i>
                    Eliana Piñeros
                </div>
                <div class="developer">
                    <i class="fas fa-user-graduate"></i>
                    Valentina Daza
                </div>
            </div>
        </div>
    </div>

    <script>
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Add hover effects to cards
        document.querySelectorAll('.dashboard-card').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-8px) scale(1.02)';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0) scale(1)';
            });
        });

        // Add click animation to buttons
        document.querySelectorAll('.btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                const ripple = document.createElement('div');
                ripple.style.position = 'absolute';
                ripple.style.borderRadius = '50%';
                ripple.style.background = 'rgba(255,255,255,0.3)';
                ripple.style.transform = 'scale(0)';
                ripple.style.animation = 'ripple 0.6s linear';
                ripple.style.left = (e.clientX - btn.getBoundingClientRect().left) + 'px';
                ripple.style.top = (e.clientY - btn.getBoundingClientRect().top) + 'px';
                ripple.style.width = ripple.style.height = '20px';
                
                btn.style.position = 'relative';
                btn.appendChild(ripple);
                
                setTimeout(() => {
                    ripple.remove();
                }, 600);
            });
        });

        // Dynamic greeting based on time
        function updateGreeting() {
            const hour = new Date().getHours();
            const headerTitle = document.querySelector('.header h1');
            let greeting = 'Panel de Administración';
            
            if (hour < 12) {
                greeting = '🌅 Buenos días - Panel de Administración';
            } else if (hour < 18) {
                greeting = '☀️ Buenas tardes - Panel de Administración';
            } else {
                greeting = '🌙 Buenas noches - Panel de Administración';
            }
            
            if (headerTitle) {
                headerTitle.innerHTML = greeting;
            }
        }

        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            updateGreeting();
            
            // Add staggered animation to cards
            const cards = document.querySelectorAll('.dashboard-card');
            cards.forEach((card, index) => {
                card.style.animationDelay = (index * 0.1) + 's';
            });
        });

        // Add CSS animation for ripple effect
        const style = document.createElement('style');
        style.textContent = `
            @keyframes ripple {
                to {
                    transform: scale(4);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>