<?php
include_once '../../controllers/CursoController.php';
$cursoController = new CursoController();

$curso = null;
if (isset($_GET['id'])) {
    $curso = $cursoController->obtenerCursoPorId($_GET['id']);
}

if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['actualizar'])) {
    $resultado = $cursoController->actualizarCurso(
        $_POST['id'],
        $_POST['nombre_curso'],
        $_POST['estado'],
        $_POST['detalle'],
        $_POST['sucursal'],
        $_POST['carrera_id']
    );
    if ($resultado) {
        $successMessage = "Curso actualizado correctamente.";
        echo "<script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    icon: 'success',
                    title: 'Éxito',
                    text: '$successMessage',
                    showConfirmButton: false,
                    timer: 2000
                }).then(function() {
                    window.location.href = 'gestionar_cursos.php';
                });
            });
        </script>";
    } else {
        $errorMessage = "Error al actualizar curso.";
        echo "<script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: '$errorMessage'
                });
            });
        </script>";
    }
}
?>

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editar Curso</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            200: '#bae6fd',
                            300: '#7dd3fc',
                            400: '#38bdf8',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            800: '#075985',
                            900: '#0c4a6e',
                        },
                        secondary: {
                            50: '#f8fafc',
                            100: '#f1f5f9',
                            200: '#e2e8f0',
                            300: '#cbd5e1',
                            400: '#94a3b8',
                            500: '#64748b',
                            600: '#475569',
                            700: '#334155',
                            800: '#1e293b',
                            900: '#0f172a',
                        },
                        accent: {
                            50: '#ecfdf5',
                            100: '#d1fae5',
                            200: '#a7f3d0',
                            300: '#6ee7b7',
                            400: '#34d399',
                            500: '#10b981',
                            600: '#059669',
                            700: '#047857',
                            800: '#065f46',
                            900: '#064e3b',
                        },
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-out',
                        'slide-up': 'slideUp 0.5s ease-out',
                        'slide-down': 'slideDown 0.5s ease-out',
                        'bounce-in': 'bounceIn 0.8s ease-out',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        },
                        slideDown: {
                            '0%': { transform: 'translateY(-20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        },
                        bounceIn: {
                            '0%': { transform: 'scale(0.8)', opacity: '0' },
                            '70%': { transform: 'scale(1.05)', opacity: '1' },
                            '100%': { transform: 'scale(1)', opacity: '1' },
                        },
                    },
                }
            }
        }
    </script>
    
    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <!-- Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f2 100%);
            background-attachment: fixed;
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .input-focus {
            transition: all 0.3s ease;
        }
        
        .input-focus:focus {
            border-color: #0ea5e9;
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #0284c7 0%, #075985 100%);
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background: linear-gradient(135deg, #64748b 0%, #475569 100%);
            transition: all 0.3s ease;
        }
        
        .btn-secondary:hover {
            background: linear-gradient(135deg, #475569 0%, #334155 100%);
            transform: translateY(-2px);
        }
        
        .btn-success {
            background: linear-gradient(135deg, #10b981 0%, #047857 100%);
            transition: all 0.3s ease;
        }
        
        .btn-success:hover {
            background: linear-gradient(135deg, #059669 0%, #065f46 100%);
            transform: translateY(-2px);
        }
    </style>
</head>

<body class="min-h-screen py-8" x-data="{ loading: false }">
    <div class="container mx-auto px-4 max-w-4xl">
        <div class="text-center mb-8 animate_animated animate_fadeIn">
            <img src="../../public/images/logo.png" alt="Logo de la Institución" class="mx-auto h-24 object-contain mb-4">
            <h1 class="text-3xl font-bold text-gray-800 mb-2">Editar Curso</h1>
            <p class="text-gray-600 mb-4">Actualice la información del curso</p>
        </div>

        <div class="bg-white rounded-xl shadow-xl overflow-hidden card-hover animate_animated animate_fadeInUp">
            <?php if ($curso): ?>
                <div class="bg-gradient-to-r from-primary-600 to-primary-700 px-6 py-4">
                    <div class="flex items-center justify-between">
                        <h2 class="text-xl font-semibold text-white">
                            <i class="fas fa-edit mr-2"></i> Formulario de Edición
                        </h2>
                        <span class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-white text-sm">
                            ID: <?= $curso['id']; ?>
                        </span>
                    </div>
                </div>
                
                <div class="p-6">
                    <form action="editar_curso.php" method="post" x-on:submit="loading = true" class="space-y-6">
                        <input type="hidden" name="id" value="<?= $curso['id']; ?>">
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Nombre del Curso -->
                            <div class="animate_animated animate_fadeInLeft" style="animation-delay: 0.1s">
                                <label for="nombre_curso" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-book mr-2"></i>Nombre del Curso
                                </label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-500">
                                        <i class="fas fa-book"></i>
                                    </div>
                                    <input type="text" id="nombre_curso" name="nombre_curso" value="<?= htmlspecialchars($curso['nombre_curso']); ?>" required
                                        class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none input-focus">
                                </div>
                            </div>
                            
                            <!-- Estado -->
                            <div class="animate_animated animate_fadeInRight" style="animation-delay: 0.2s">
                                <label for="estado" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-toggle-on mr-2"></i>Estado
                                </label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-500">
                                        <i class="fas fa-toggle-on"></i>
                                    </div>
                                    <select id="estado" name="estado" required
                                        class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none input-focus appearance-none">
                                        <option value="0" <?= $curso['estado'] == 0 ? 'selected' : ''; ?>>Activo</option>
                                        <option value="1" <?= $curso['estado'] == 1 ? 'selected' : ''; ?>>Inactivo</option>
                                    </select>
                                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-500">
                                        <i class="fas fa-chevron-down"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Detalle -->
                            <div class="animate_animated animate_fadeInLeft" style="animation-delay: 0.3s">
                                <label for="detalle" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-info-circle mr-2"></i>Detalle
                                </label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-500">
                                        <i class="fas fa-info-circle"></i>
                                    </div>
                                    <input type="text" id="detalle" name="detalle" value="<?= htmlspecialchars($curso['detalle']); ?>" required
                                        class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none input-focus">
                                </div>
                            </div>
                            
                            <!-- Sucursal -->
                            <div class="animate_animated animate_fadeInRight" style="animation-delay: 0.4s">
                                <label for="sucursal" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-building mr-2"></i>Sucursal
                                </label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-500">
                                        <i class="fas fa-building"></i>
                                    </div>
                                    <input type="text" id="sucursal" name="sucursal" value="<?= htmlspecialchars($curso['sucursal']); ?>" required
                                        class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none input-focus">
                                </div>
                            </div>
                            
                            <!-- ID de Carrera -->
                            <div class="md:col-span-2 animate_animated animate_fadeInUp" style="animation-delay: 0.5s">
                                <label for="carrera_id" class="block text-sm font-medium text-gray-700 mb-2">
                                    <i class="fas fa-graduation-cap mr-2"></i>ID de Carrera
                                </label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-500">
                                        <i class="fas fa-graduation-cap"></i>
                                    </div>
                                    <input type="text" id="carrera_id" name="carrera_id" value="<?= htmlspecialchars($curso['carrera_id']); ?>" required
                                        class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none input-focus">
                                </div>
                            </div>
                        </div>
                        
                        <div class="flex flex-col sm:flex-row justify-end gap-4 pt-4 border-t border-gray-100 animate_animated animate_fadeInUp" style="animation-delay: 0.6s">
                            <a href="gestionar_cursos.php" class="px-6 py-3 rounded-lg btn-secondary text-white text-center">
                                <i class="fas fa-arrow-left mr-2"></i> Cancelar
                            </a>
                            <button type="submit" name="actualizar" class="px-6 py-3 rounded-lg btn-primary text-white flex items-center justify-center">
                                <template x-if="!loading">
                                    <span><i class="fas fa-save mr-2"></i> Guardar Cambios</span>
                                </template>
                                <template x-if="loading">
                                    <span class="flex items-center">
                                        <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                        </svg>
                                        Guardando...
                                    </span>
                                </template>
                            </button>
                        </div>
                    </form>
                </div>
            <?php else: ?>
                <div class="p-8 text-center animate_animated animate_fadeIn">
                    <div class="bg-red-50 rounded-lg p-6 inline-block mb-4">
                        <i class="fas fa-exclamation-triangle text-red-500 text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-red-600 mb-2">Curso no encontrado</h3>
                    <p class="text-gray-600 mb-6">No se pudo encontrar el curso solicitado en la base de datos.</p>
                    <a href="gestionar_cursos.php" class="px-6 py-3 rounded-lg btn-primary text-white inline-flex items-center">
                        <i class="fas fa-arrow-left mr-2"></i> Volver a Gestionar Cursos
                    </a>
                </div>
            <?php endif; ?>
        </div>
        
        <!-- Información adicional -->
        <div class="mt-8 text-center text-gray-500 text-sm animate_animated animate_fadeIn" style="animation-delay: 0.7s">
            <p>Actualice la información del curso y haga clic en "Guardar Cambios" para confirmar.</p>
            <p class="mt-2">
                <a href="../superadmin/dashboard.php" class="text-primary-600 hover:text-primary-700 transition-colors">
                    <i class="fas fa-home mr-1"></i> Volver al Dashboard
                </a>
            </p>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Animación para los campos del formulario
            const formElements = document.querySelectorAll('form .animate__animated');
            formElements.forEach((element, index) => {
                element.style.animationDelay = ${index * 0.1}s;
            });
            
            // Efecto de enfoque para los campos de entrada
            const inputFields = document.querySelectorAll('input, select');
            inputFields.forEach(field => {
                field.addEventListener('focus', function() {
                    this.parentElement.classList.add('ring-2', 'ring-primary-200', 'ring-opacity-50');
                });
                
                field.addEventListener('blur', function() {
                    this.parentElement.classList.remove('ring-2', 'ring-primary-200', 'ring-opacity-50');
                });
            });
        });
    </script>
</body>

</html>