<?php
include_once '../../controllers/CarreraController.php';
$carreraController = new CarreraController();

if (isset($_GET['id'])) {
    $carrera = $carreraController->obtenerCarreraPorId($_GET['id']);
}

if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['actualizar'])) {
    $resultado = $carreraController->actualizarCarrera(
        $_POST['id'],
        $_POST['carrera'],
        $_POST['estado'],
        $_POST['detalle'],
        $_POST['sucursal_varchar'],
        $_POST['tipo']
    );

    if ($resultado) {
        $alertType = "success";
        $alertMessage = "Carrera actualizada correctamente.";
        $redirectScript = "<script>
            setTimeout(function() {
                window.location.href = 'gestionar_carreras.php';
            }, 2000);
        </script>";
    } else {
        $alertType = "error";
        $alertMessage = "Error al actualizar carrera.";
        $redirectScript = "";
    }
}
?>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editar Carrera</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',
                            950: '#082f49',
                        },
                        secondary: {
                            50: '#f5f3ff',
                            100: '#ede9fe',
                            200: '#ddd6fe',
                            300: '#c4b5fd',
                            400: '#a78bfa',
                            500: '#8b5cf6',
                            600: '#7c3aed',
                            700: '#6d28d9',
                            800: '#5b21b6',
                            900: '#4c1d95',
                            950: '#2e1065',
                        },
                        success: {
                            50: '#ecfdf5',
                            100: '#d1fae5',
                            500: '#10b981',
                            600: '#059669',
                            700: '#047857',
                        },
                        danger: {
                            50: '#fef2f2',
                            100: '#fee2e2',
                            500: '#ef4444',
                            600: '#dc2626',
                            700: '#b91c1c',
                        },
                        warning: {
                            50: '#fffbeb',
                            100: '#fef3c7',
                            500: '#f59e0b',
                            600: '#d97706',
                            700: '#b45309',
                        }
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-out forwards',
                        'slide-up': 'slideUp 0.5s ease-out forwards',
                        'slide-down': 'slideDown 0.5s ease-out forwards',
                        'slide-in-right': 'slideInRight 0.5s ease-out forwards',
                        'slide-in-left': 'slideInLeft 0.5s ease-out forwards',
                        'bounce-in': 'bounceIn 0.5s ease-out forwards',
                        'scale-in': 'scaleIn 0.3s ease-out forwards',
                        'scale-out': 'scaleOut 0.3s ease-out forwards',
                        'float': 'float 6s ease-in-out infinite',
                    },
                    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' },
                        },
                        slideInRight: {
                            '0%': { transform: 'translateX(20px)', opacity: '0' },
                            '100%': { transform: 'translateX(0)', opacity: '1' },
                        },
                        slideInLeft: {
                            '0%': { transform: 'translateX(-20px)', opacity: '0' },
                            '100%': { transform: 'translateX(0)', opacity: '1' },
                        },
                        bounceIn: {
                            '0%': { transform: 'scale(0.8)', opacity: '0' },
                            '70%': { transform: 'scale(1.05)', opacity: '1' },
                            '100%': { transform: 'scale(1)', opacity: '1' },
                        },
                        scaleIn: {
                            '0%': { transform: 'scale(0.9)', opacity: '0' },
                            '100%': { transform: 'scale(1)', opacity: '1' },
                        },
                        scaleOut: {
                            '0%': { transform: 'scale(1)', opacity: '1' },
                            '100%': { transform: 'scale(0.9)', opacity: '0' },
                        },
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        },
                    },
                    boxShadow: {
                        'card': '0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
                        'card-hover': '0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
                        'dropdown': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                        'button': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
                        'button-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                        'neon': '0 0 5px rgba(14, 165, 233, 0.5), 0 0 20px rgba(14, 165, 233, 0.3)',
                        'neon-purple': '0 0 5px rgba(139, 92, 246, 0.5), 0 0 20px rgba(139, 92, 246, 0.3)',
                    }
                }
            }
        }
    </script>
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    
    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <!-- 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>
        body {
            font-family: 'Inter', sans-serif;
            background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            background-attachment: fixed;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Poppins', sans-serif;
        }
        
        .card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
            transition: all 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px 0 rgba(31, 38, 135, 0.2);
        }
        
        .input-field {
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .input-field:focus {
            transform: translateY(-2px);
            border-color: #0ea5e9;
            box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
        }
        
        .input-icon {
            transition: all 0.3s ease;
        }
        
        .input-field:focus + .input-icon {
            color: #0ea5e9;
            transform: scale(1.1);
        }
        
        .btn {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }
        
        .btn:hover::after {
            animation: ripple 1s ease-out;
        }
        
        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }
            100% {
                transform: scale(20, 20);
                opacity: 0;
            }
        }
        
        .btn:hover {
            transform: translateY(-2px);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .btn-primary {
            background-image: linear-gradient(to right, #0ea5e9, #0284c7);
            background-size: 200% auto;
            transition: 0.5s;
            box-shadow: 0 4px 15px 0 rgba(14, 165, 233, 0.4);
        }
        
        .btn-primary:hover {
            background-position: right center;
        }
        
        .btn-secondary {
            background-image: linear-gradient(to right, #8b5cf6, #6d28d9);
            background-size: 200% auto;
            transition: 0.5s;
            box-shadow: 0 4px 15px 0 rgba(139, 92, 246, 0.4);
        }
        
        .btn-secondary:hover {
            background-position: right center;
        }
        
        .btn-success {
            background-image: linear-gradient(to right, #10b981, #059669);
            background-size: 200% auto;
            transition: 0.5s;
            box-shadow: 0 4px 15px 0 rgba(16, 185, 129, 0.4);
        }
        
        .btn-success:hover {
            background-position: right center;
        }
        
        .btn-warning {
            background-image: linear-gradient(to right, #f59e0b, #d97706);
            background-size: 200% auto;
            transition: 0.5s;
            box-shadow: 0 4px 15px 0 rgba(245, 158, 11, 0.4);
        }
        
        .btn-warning:hover {
            background-position: right center;
        }
        
        .btn-danger {
            background-image: linear-gradient(to right, #ef4444, #dc2626);
            background-size: 200% auto;
            transition: 0.5s;
            box-shadow: 0 4px 15px 0 rgba(239, 68, 68, 0.4);
        }
        
        .btn-danger:hover {
            background-position: right center;
        }
        
        .section-title {
            position: relative;
            overflow: hidden;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(to right, #0ea5e9, #8b5cf6);
        }
        
        .logo-container {
            animation: float 6s ease-in-out infinite;
        }
        
        .logo-glow {
            position: relative;
        }
        
        .logo-glow::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(14, 165, 233, 0.4) 0%, rgba(14, 165, 233, 0) 70%);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .logo-container:hover .logo-glow::after {
            opacity: 1;
        }
        
        /* Estilos para scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #0ea5e9;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #0284c7;
        }
    </style>
</head>

<body class="min-h-screen py-12">
    <!-- Alerta de SweetAlert2 -->
    <?php if (isset($alertType) && isset($alertMessage)): ?>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Swal.fire({
                icon: '<?php echo $alertType; ?>',
                title: '<?php echo $alertType == "success" ? "¡Éxito!" : "¡Error!"; ?>',
                text: '<?php echo $alertMessage; ?>',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                toast: true,
                position: 'top-end',
                showClass: {
                    popup: 'animate_animated animate_fadeInDown'
                },
                hideClass: {
                    popup: 'animate_animated animate_fadeOutUp'
                }
            });
        });
    </script>
    <?php echo isset($redirectScript) ? $redirectScript : ''; ?>
    <?php endif; ?>

    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header con logo y título -->
        <div class="text-center mb-10 animate_animated animate_fadeIn">
            <div class="logo-container inline-block mb-4">
                <div class="logo-glow">
                    <img src="../../public/images/logo.png" alt="Logo de la Institución" class="w-32 h-32 object-contain mx-auto">
                </div>
            </div>
            <h1 class="text-4xl font-bold text-gray-900 mb-2">Editar Carrera</h1>
            <p class="text-lg text-gray-600">Modifique la información de la carrera seleccionada</p>
        </div>
        
        <!-- Botón de volver -->
        <div class="mb-8 animate_animated animatefadeIn animate_delay-1s">
            <a href="gestionar_carreras.php" class="btn btn-secondary text-white py-2.5 px-5 rounded-lg flex items-center justify-center w-auto inline-flex">
                <i class="fas fa-arrow-left mr-2"></i>
                <span>Volver a Gestión de Carreras</span>
            </a>
        </div>
        
        <!-- Tarjeta del formulario -->
        <div class="card rounded-2xl overflow-hidden animate_animated animatezoomIn animate_delay-1s">
            <!-- Encabezado del formulario -->
            <div class="bg-gradient-to-r from-primary-600 to-primary-800 p-6">
                <div class="flex items-center">
                    <div class="bg-white/20 p-3 rounded-full mr-4">
                        <i class="fas fa-edit text-white text-xl"></i>
                    </div>
                    <div>
                        <h2 class="text-xl font-semibold text-white">Formulario de Edición</h2>
                        <p class="text-primary-100 text-sm">Complete los campos para actualizar la información</p>
                    </div>
                </div>
            </div>
            
            <!-- Formulario -->
            <form action="editar_carrera.php" method="post" class="p-8 bg-white">
                <input type="hidden" name="id" value="<?php echo $carrera['id']; ?>">
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="relative">
                        <label for="carrera" class="block text-sm font-medium text-gray-700 mb-1">Nombre de la Carrera:</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-book text-gray-400 input-icon"></i>
                            </div>
                            <input type="text" id="carrera" name="carrera" value="<?php echo $carrera['carrera']; ?>" required
                                class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-gray-800">
                        </div>
                    </div>
                    
                    <div class="relative">
                        <label for="estado" class="block text-sm font-medium text-gray-700 mb-1">Estado:</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-toggle-on text-gray-400 input-icon"></i>
                            </div>
                            <select id="estado" name="estado" required
                                class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-gray-800">
                                <option value="1" <?php echo $carrera['estado'] == 1 ? 'selected' : ''; ?>>Activo</option>
                                <option value="0" <?php echo $carrera['estado'] == 0 ? 'selected' : ''; ?>>Inactivo</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="relative md:col-span-2">
                        <label for="detalle" class="block text-sm font-medium text-gray-700 mb-1">Detalle:</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-info-circle text-gray-400 input-icon"></i>
                            </div>
                            <textarea id="detalle" name="detalle" required rows="3"
                                class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-gray-800"><?php echo $carrera['detalle']; ?></textarea>
                        </div>
                    </div>
                    
                    <div class="relative">
                        <label for="sucursal_varchar" class="block text-sm font-medium text-gray-700 mb-1">Sucursal:</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-building text-gray-400 input-icon"></i>
                            </div>
                            <input type="text" id="sucursal_varchar" name="sucursal_varchar" value="<?php echo $carrera['sucursal_varchar']; ?>" required
                                class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-gray-800">
                        </div>
                    </div>
                    
                    <div class="relative">
                        <label for="tipo" class="block text-sm font-medium text-gray-700 mb-1">Tipo:</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-tag text-gray-400 input-icon"></i>
                            </div>
                            <select id="tipo" name="tipo" required
                                class="input-field block w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-gray-800">
                                <option value="carrera" <?php echo $carrera['tipo'] == 'carrera' ? 'selected' : ''; ?>>Carrera</option>
                                <option value="curso" <?php echo $carrera['tipo'] == 'curso' ? 'selected' : ''; ?>>Curso</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <div class="flex justify-between mt-8">
                    <a href="gestionar_carreras.php" class="btn bg-gray-500 text-white py-2.5 px-6 rounded-lg flex items-center">
                        <i class="fas fa-times mr-2"></i>
                        <span>Cancelar</span>
                    </a>
                    
                    <button type="submit" name="actualizar" class="btn btn-success text-white py-2.5 px-6 rounded-lg flex items-center">
                        <i class="fas fa-save mr-2"></i>
                        <span>Guardar Cambios</span>
                    </button>
                </div>
            </form>
        </div>
        
        <!-- Información de la carrera -->
        <div class="card rounded-2xl p-6 mt-8 animate_animated animatefadeIn animate_delay-2s">
            <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                <i class="fas fa-info-circle text-primary-600 mr-2"></i>
                Información de la Carrera
            </h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-gray-50 p-4 rounded-lg">
                    <p class="text-sm text-gray-500 mb-1">ID de la Carrera</p>
                    <p class="text-lg font-medium text-gray-800">#<?php echo $carrera['id']; ?></p>
                </div>
                
                <div class="bg-gray-50 p-4 rounded-lg">
                    <p class="text-sm text-gray-500 mb-1">Estado Actual</p>
                    <?php if ($carrera['estado'] == 1): ?>
                        <div class="flex items-center">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 mr-2">
                                <i class="fas fa-check-circle mr-1"></i> Activo
                            </span>
                            <span class="text-sm text-gray-600">La carrera está disponible para inscripciones</span>
                        </div>
                    <?php else: ?>
                        <div class="flex items-center">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 mr-2">
                                <i class="fas fa-times-circle mr-1"></i> Inactivo
                            </span>
                            <span class="text-sm text-gray-600">La carrera no está disponible actualmente</span>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
            
            <div class="mt-4 bg-blue-50 p-4 rounded-lg border border-blue-100">
                <div class="flex items-center mb-2">
                    <div class="bg-blue-100 p-2 rounded-full mr-3">
                        <i class="fas fa-lightbulb text-blue-600"></i>
                    </div>
                    <h4 class="font-medium text-blue-800">Consejo</h4>
                </div>
                <p class="text-blue-700 text-sm">
                    Asegúrese de proporcionar un detalle claro y completo de la carrera. Esta información será visible para los estudiantes interesados en inscribirse.
                </p>
            </div>
        </div>
        
       
    </div>
</body>

</html>