<?php
include_once '../../controllers/CajaController.php';
$cajaController = new CajaController();

if (isset($_POST['guardar'])) {
    $id = $_POST['id'];
    $monto_pagado = $_POST['monto_pagado'];
    $detalle = $_POST['detalle'];

    // Obtiene el estudiante
    $estudiante = $cajaController->obtenerEstudiantePorId($id);

    // Actualiza el balance
    $nuevo_balance = $estudiante['balance'] - $monto_pagado;
    $cajaController->actualizarBalance($id, $nuevo_balance);

    // Guardar el pago 
    $cajaController->registrarPago($id, $monto_pagado, $detalle);

    header('Location: pagos.php');
    exit;
}

if (isset($_GET['id'])) {
    $id = $_GET['id'];
    $estudiante = $cajaController->obtenerEstudiantePorId($id);

    if (!$estudiante) {
        header('Location: pagos.php');
        exit;
    }
}
?>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tomar Pago</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.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%, #c3cfe2 100%);
            background-attachment: fixed;
            min-height: 100vh;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 1rem;
            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;
        }

        .glass-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px 0 rgba(31, 38, 135, 0.2);
        }

        .gradient-border {
            position: relative;
            border-radius: 0.75rem;
            z-index: 0;
            overflow: hidden;
        }

        .gradient-border::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #0ea5e9, #8b5cf6, #10b981, #f59e0b);
            z-index: -1;
            border-radius: 0.85rem;
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .input-animated {
            transition: all 0.3s ease;
            border: 2px solid transparent;
            background-color: rgba(255, 255, 255, 0.9);
        }

        .input-animated:focus {
            transform: translateY(-2px);
            border-color: #0ea5e9;
            box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
        }

        .btn-primary {
            background-image: linear-gradient(to right, #0ea5e9, #0284c7);
            background-size: 200% auto;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px 0 rgba(14, 165, 233, 0.4);
        }

        .btn-primary:hover {
            background-position: right center;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px 0 rgba(14, 165, 233, 0.6);
        }

        .btn-success {
            background-image: linear-gradient(to right, #10b981, #059669);
            background-size: 200% auto;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px 0 rgba(16, 185, 129, 0.4);
        }

        .btn-success:hover {
            background-position: right center;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px 0 rgba(16, 185, 129, 0.6);
        }
    </style>
</head>

<body class="min-h-screen py-8">
    <div class="container mx-auto px-4 max-w-4xl">
        <!-- Encabezado -->
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800 mb-2 bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-secondary-600">Tomar Pago</h1>
            <p class="text-gray-600">Registre el pago del estudiante</p>
        </div>

        <!-- Botón de volver -->
        <div class="mb-6">
            <a href="../caja/pagos.php" class="btn-primary text-white px-4 py-2 rounded-lg inline-flex items-center">
                <i class="fas fa-arrow-left mr-2"></i> Volver a Pagos
            </a>
        </div>

        <!-- Formulario -->
        <div class="glass-card gradient-border p-8">
            <form action="tomar_pago.php" method="post">
                <input type="hidden" name="id" value="<?php echo $estudiante['idRegistro']; ?>">

                <!-- Información del estudiante -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label for="nombre" class="block text-sm font-medium text-gray-700 mb-2">Nombre:</label>
                        <input type="text" id="nombre" name="nombre" value="<?php echo $estudiante['sname']; ?>"
                            class="input-animated w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none" readonly>
                    </div>
                    <div>
                        <label for="contacto" class="block text-sm font-medium text-gray-700 mb-2">Contacto:</label>
                        <input type="text" id="contacto" name="contacto" value="<?php echo $estudiante['contact']; ?>"
                            class="input-animated w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none" readonly>
                    </div>
                    <div>
                        <label for="fees" class="block text-sm font-medium text-gray-700 mb-2">Monto Total de la Carrera:</label>
                        <input type="text" id="fees" name="fees" value="<?php echo $estudiante['fees']; ?>"
                            class="input-animated w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none" readonly>
                    </div>
                    <div>
                        <label for="balance" class="block text-sm font-medium text-gray-700 mb-2">Balance:</label>
                        <input type="text" id="balance" name="balance" value="<?php echo $estudiante['balance']; ?>"
                            class="input-animated w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none" readonly>
                    </div>
                </div>

                <!-- Campos del formulario -->
                <div class="grid grid-cols-1 gap-6 mb-6">
                    <div>
                        <label for="monto_pagado" class="block text-sm font-medium text-gray-700 mb-2">Monto a Pagar:</label>
                        <input type="number" id="monto_pagado" name="monto_pagado" required
                            class="input-animated w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none">
                    </div>
                    <div>
                        <label for="detalle" class="block text-sm font-medium text-gray-700 mb-2">Detalle:</label>
                        <textarea id="detalle" name="detalle" required
                            class="input-animated w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none"></textarea>
                    </div>
                </div>

                <!-- Botón de guardar -->
                <div class="text-center">
                    <button type="submit" name="guardar"
                        class="btn-success text-white px-6 py-3 rounded-lg flex items-center justify-center mx-auto shadow-md">
                        <i class="fas fa-save mr-2"></i> Guardar
                    </button>
                </div>
            </form>
        </div>
    </div>
</body>

</html>