<?php
// File: staff/staff/award_scholarship.php
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();
include "../include/config.php";

// Auth check
if (!isset($_SESSION['email']) && !isset($_SESSION['admin_id'])) {
    header("location:../index.php");
    exit();
}

$message = '';
$message_type = '';
$form_data = [];

if (isset($_POST['award_scholarship'])) {

    $studentid   = mysqli_real_escape_string($conn, $_POST['studentid']);
    $percentage  = mysqli_real_escape_string($conn, $_POST['percentage']);
    $year        = mysqli_real_escape_string($conn, $_POST['year']);
    $description = mysqli_real_escape_string($conn, $_POST['description'] ?? '');
    $award_date  = mysqli_real_escape_string($conn, $_POST['award_date'] ?? date('Y-m-d'));

    $form_data = $_POST;

    // Validation
    if (!$studentid || !$percentage || !$year) {
        $message = "Please fill in all required fields!";
        $message_type = "danger";
    } elseif ($percentage < 1 || $percentage > 100) {
        $message = "Percentage must be between 1 and 100!";
        $message_type = "danger";
    } else {

        // Get student info (program & intake REQUIRED)
        $studentQuery = mysqli_query(
            $conn,
            "SELECT studentname, program, intake 
             FROM students 
             WHERE studentid = '$studentid' 
             LIMIT 1"
        );

        if (mysqli_num_rows($studentQuery) == 0) {
            $message = "Student not found!";
            $message_type = "danger";
        } else {

            $student = mysqli_fetch_assoc($studentQuery);
            $program = mysqli_real_escape_string($conn, $student['program']);
            $intake  = mysqli_real_escape_string($conn, $student['intake']);

            // Check if scholarship already exists
            $checkScholarship = mysqli_query(
                $conn,
                "SELECT id FROM scholarship WHERE studentid = '$studentid' LIMIT 1"
            );

            if (mysqli_num_rows($checkScholarship) > 0) {

                // UPDATE
                $update = "
                    UPDATE scholarship SET
                        program     = '$program',
                        intake      = '$intake',
                        description = '$description',
                        year        = '$year',
                        percentage  = '$percentage',
                        timestamp   = '$award_date'
                    WHERE studentid = '$studentid'
                ";

                if (mysqli_query($conn, $update)) {
                    $message = "Scholarship updated successfully for {$student['studentname']}!";
                    $message_type = "success";
                    $form_data = [];
                } else {
                    $message = mysqli_error($conn);
                    $message_type = "danger";
                }

            } else {

                // INSERT
                $insert = "
                    INSERT INTO scholarship
                        (studentid, program, intake, description, year, percentage, timestamp)
                    VALUES
                        ('$studentid', '$program', '$intake', '$description', '$year', '$percentage', '$award_date')
                ";

                if (mysqli_query($conn, $insert)) {
                    $message = "Scholarship awarded successfully to {$student['studentname']}!";
                    $message_type = "success";
                    $form_data = [];
                } else {
                    $message = mysqli_error($conn);
                    $message_type = "danger";
                }
            }
        }
    }
}

// Student lists
$studentsResult = mysqli_query(
    $conn,
    "SELECT studentid, studentname, program, intake FROM students ORDER BY studentname ASC"
);

$withoutScholarshipResult = mysqli_query(
    $conn,
    "SELECT s.studentid, s.studentname, s.program, s.intake
     FROM students s
     LEFT JOIN scholarship sch ON s.studentid = sch.studentid
     WHERE sch.studentid IS NULL
     ORDER BY s.studentname ASC
     LIMIT 50"
);

$recentAwardsResult = mysqli_query(
    $conn,
    "SELECT s.studentid, s.studentname, s.program, sch.percentage, sch.year, sch.timestamp
     FROM scholarship sch
     JOIN students s ON sch.studentid = s.studentid
     ORDER BY sch.timestamp DESC
     LIMIT 10"
);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Award Scholarship - Staff Portal</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --primary-light: #6c8aff;
            --primary-dark: #2d4ac4;
            --secondary: #6c757d;
            --success: #28a745;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
        }

        body {
            font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7ff;
            color: var(--dark);
        }

        .navbar {
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
        }

        .page-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px 20px;
        }

        .form-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(67, 97, 238, 0.15);
            padding: 40px;
            margin-bottom: 30px;
            border: 1px solid rgba(67, 97, 238, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .form-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(67, 97, 238, 0.2);
        }

        .card-header {
            background: transparent;
            border-bottom: none;
            padding: 0 0 25px 0;
            margin-bottom: 30px;
        }

        .section-title {
            color: var(--primary);
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 10px;
            position: relative;
            padding-bottom: 15px;
        }

        .section-title:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--primary-light));
            border-radius: 2px;
        }

        .section-subtitle {
            color: var(--secondary);
            font-size: 16px;
            margin-bottom: 30px;
        }

        .form-label {
            font-weight: 600;
            color: var(--dark);
            margin-bottom: 8px;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .form-control, .form-select {
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 12px 16px;
            font-size: 15px;
            transition: all 0.3s ease;
            height: 48px;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25);
            transform: translateY(-1px);
        }

        .form-control-lg {
            padding: 15px 20px;
            font-size: 16px;
            height: 56px;
        }

        .btn-primary {
            background: var(--primary);
            border: none;
            border-radius: 10px;
            padding: 14px 28px;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
        }

        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
        }

        .btn-secondary {
            background: white;
            color: var(--primary);
            border: 2px solid var(--primary);
            border-radius: 10px;
            padding: 14px 28px;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .btn-secondary:hover {
            background: var(--primary);
            color: white;
            transform: translateY(-2px);
        }

        .percentage-slider {
            width: 100%;
            height: 8px;
            -webkit-appearance: none;
            appearance: none;
            background: linear-gradient(90deg, #e9ecef, var(--primary));
            border-radius: 4px;
            outline: none;
            margin: 20px 0;
        }

        .percentage-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            border: 3px solid white;
        }

        .percentage-display {
            font-size: 48px;
            font-weight: 800;
            color: var(--primary);
            text-align: center;
            margin: 20px 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }

        .percentage-label {
            font-size: 14px;
            color: var(--secondary);
            text-align: center;
            margin-bottom: 10px;
        }

        .scholarship-badge {
            display: inline-flex;
            align-items: center;
            padding: 6px 12px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 12px;
            margin: 2px;
        }

        .badge-full { background: linear-gradient(135deg, #ffd700, #ffed4e); color: #000; }
        .badge-high { background: linear-gradient(135deg, #c0c0c0, #e0e0e0); color: #000; }
        .badge-medium { background: linear-gradient(135deg, #cd7f32, #e3965c); color: white; }
        .badge-low { background: linear-gradient(135deg, #90ee90, #b4f0b4); color: #000; }

        .student-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 15px;
            border: 2px solid transparent;
            transition: all 0.3s ease;
            cursor: pointer;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        }

        .student-card:hover {
            border-color: var(--primary);
            transform: translateY(-3px);
            box-shadow: 0 5px 20px rgba(67, 97, 238, 0.15);
        }

        .student-card.selected {
            border-color: var(--primary);
            background: linear-gradient(135deg, rgba(67, 97, 238, 0.05), rgba(67, 97, 238, 0.1));
        }

        .student-id {
            font-family: 'Courier New', monospace;
            background: var(--light);
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 13px;
            color: var(--primary);
        }

        .alert-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            min-width: 300px;
            max-width: 400px;
        }

        .alert {
            border-radius: 12px;
            border: none;
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
            padding: 20px;
        }

        .alert-success {
            background: linear-gradient(135deg, #d4edda, #c3e6cb);
            color: #155724;
            border-left: 5px solid #28a745;
        }

        .alert-danger {
            background: linear-gradient(135deg, #f8d7da, #f5c6cb);
            color: #721c24;
            border-left: 5px solid #dc3545;
        }

        .progress-ring {
            width: 120px;
            height: 120px;
            margin: 20px auto;
        }

        .progress-ring__circle {
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
        }

        .visualization-container {
            background: linear-gradient(135deg, #f8f9ff, #ffffff);
            border-radius: 12px;
            padding: 25px;
            margin-top: 20px;
            border: 2px dashed rgba(67, 97, 238, 0.2);
        }

        .info-box {
            background: linear-gradient(135deg, rgba(67, 97, 238, 0.05), rgba(67, 97, 238, 0.1));
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            border-left: 4px solid var(--primary);
        }

        .recent-award-card {
            background: white;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 10px;
            border-left: 4px solid var(--primary);
            transition: all 0.3s ease;
        }

        .recent-award-card:hover {
            transform: translateX(5px);
            box-shadow: 0 3px 15px rgba(0,0,0,0.1);
        }

        @media (max-width: 768px) {
            .form-card {
                padding: 25px;
            }
            
            .section-title {
                font-size: 24px;
            }
            
            .percentage-display {
                font-size: 36px;
            }
        }

        /* Animation for form elements */
        .form-group {
            animation: fadeInUp 0.5s ease forwards;
            opacity: 0;
            transform: translateY(20px);
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Step indicators */
        .steps-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 40px;
            position: relative;
        }

        .steps-container:before {
            content: '';
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            height: 2px;
            background: #e9ecef;
            z-index: 1;
        }

        .step {
            position: relative;
            z-index: 2;
            text-align: center;
            flex: 1;
        }

        .step-number {
            width: 40px;
            height: 40px;
            background: white;
            border: 2px solid #e9ecef;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-weight: 600;
            color: var(--secondary);
            transition: all 0.3s ease;
        }

        .step.active .step-number {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
            transform: scale(1.1);
        }

        .step-label {
            font-size: 12px;
            color: var(--secondary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .step.active .step-label {
            color: var(--primary);
        }
    </style>
</head>
<body>
    <?php include "../include/nav.php"; ?>
        <div class="content">

    <!-- Alert Message -->
    <?php if ($message): ?>
    <div class="alert-container">
        <div class="alert alert-<?php echo $message_type; ?> alert-dismissible fade show" role="alert">
            <div class="d-flex align-items-center">
                <i class="fas <?php echo $message_type == 'success' ? 'fa-check-circle' : 'fa-exclamation-triangle'; ?> fa-2x me-3"></i>
                <div>
                    <h6 class="mb-1"><?php echo $message_type == 'success' ? 'Success!' : 'Attention!'; ?></h6>
                    <p class="mb-0"><?php echo $message; ?></p>
                </div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>
    <?php endif; ?>

    <div class="page-container">
        <!-- Form Card -->
        <div class="form-card">
            <div class="card-header">
                <h1 class="section-title">
                    <i class="fas fa-award me-2"></i>Award Scholarship
                </h1>
                <p class="section-subtitle">
                    Complete the form below to award or update a student's scholarship
                </p>
            </div>

            <!-- Step Indicators -->
            <div class="steps-container">
                <div class="step active">
                    <div class="step-number">1</div>
                    <div class="step-label">Select Student</div>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <div class="step-label">Set Details</div>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <div class="step-label">Confirm & Submit</div>
                </div>
            </div>

            <form method="POST" action="" id="scholarshipForm">
                <div class="row">
                    <!-- Left Column: Student Selection -->
                    <div class="col-lg-6">
                        <div class="info-box">
                            <h6 class="mb-3"><i class="fas fa-user-graduate me-2"></i>Student Information</h6>
                            
                            <div class="form-group mb-4" style="animation-delay: 0.1s">
                                <label class="form-label">Search Student ID</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">
                                        <i class="fas fa-search text-primary"></i>
                                    </span>
                                    <input type="text" 
                                           class="form-control" 
                                           id="studentSearch" 
                                           placeholder="Enter or search student ID..."
                                           list="studentList"
                                           value="<?php echo htmlspecialchars($form_data['studentid'] ?? ''); ?>">
                                    <datalist id="studentList">
                                        <?php 
                                        mysqli_data_seek($studentsResult, 0);
                                        while ($student = mysqli_fetch_assoc($studentsResult)) {
                                            echo '<option value="' . $student['studentid'] . '">' . 
                                                 htmlspecialchars($student['studentname']) . ' - ' . 
                                                 $student['program'] . '</option>';
                                        }
                                        ?>
                                    </datalist>
                                </div>
                            </div>

                            <div class="form-group" style="animation-delay: 0.2s">
                                <label class="form-label">Student ID *</label>
                                <input type="text" 
                                       class="form-control form-control-lg" 
                                       name="studentid" 
                                       id="studentid" 
                                       required
                                       value="<?php echo htmlspecialchars($form_data['studentid'] ?? ''); ?>"
                                       >
                                <div class="mt-2">
                                    <small class="text-muted">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Student ID will be auto-filled when selected
                                    </small>
                                </div>
                            </div>

                            <div class="form-group mt-4" style="animation-delay: 0.3s">
                                <label class="form-label">Quick Select Students Without Scholarship</label>
                                <div style="max-height: 300px; overflow-y: auto; padding: 10px; background: #f8f9fa; border-radius: 10px;">
                                    <?php 
                                    if (mysqli_num_rows($withoutScholarshipResult) > 0) {
                                        while ($student = mysqli_fetch_assoc($withoutScholarshipResult)) {
                                            echo '
                                            <div class="student-card" onclick="selectStudent(\'' . $student['studentid'] . '\', \'' . htmlspecialchars($student['studentname']) . '\')">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div>
                                                        <h6 class="mb-1 fw-bold">' . htmlspecialchars($student['studentname']) . '</h6>
                                                        <div class="d-flex gap-3">
                                                            <span class="student-id">' . $student['studentid'] . '</span>
                                                            <span class="text-muted">' . $student['program'] . '</span>
                                                            <span class="badge bg-light text-dark">' . $student['intake'] . '</span>
                                                        </div>
                                                    </div>
                                                    <i class="fas fa-plus text-primary"></i>
                                                </div>
                                            </div>';
                                        }
                                    } else {
                                        echo '<p class="text-center text-muted p-3"><i class="fas fa-check-circle me-2"></i>All students already have scholarships!</p>';
                                    }
                                    ?>
                                </div>
                            </div>
                        </div>

                        <!-- Student Preview -->
                        <div class="info-box mt-4" id="studentPreview" style="display: none;">
                            <h6 class="mb-3"><i class="fas fa-eye me-2"></i>Selected Student</h6>
                            <div class="d-flex align-items-center">
                                <div class="me-3">
                                    <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" 
                                         style="width: 60px; height: 60px; font-size: 24px; font-weight: bold;" 
                                         id="studentInitial">
                                    </div>
                                </div>
                                <div>
                                    <h5 class="mb-1" id="studentName"></h5>
                                    <div class="d-flex gap-3">
                                        <span class="student-id" id="studentIdPreview"></span>
                                        <span class="text-muted" id="studentProgram"></span>
                                        <span class="badge bg-primary" id="studentIntake"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Right Column: Scholarship Details -->
                    <div class="col-lg-6">
                        <div class="info-box">
                            <h6 class="mb-3"><i class="fas fa-cogs me-2"></i>Scholarship Details</h6>
                            
                            <div class="form-group mb-4" style="animation-delay: 0.4s">
                                <label class="form-label">Scholarship Percentage *</label>
                                <div class="text-center">
                                    <div class="percentage-display" id="percentageDisplay">
                                        <?php echo htmlspecialchars($form_data['percentage'] ?? '50'); ?>%
                                    </div>
                                    <div class="percentage-label" id="percentageLabel">
                                        <?php 
                                        $percentage = $form_data['percentage'] ?? 50;
                                        if ($percentage == 100) {
                                            echo 'Full Scholarship';
                                        } elseif ($percentage >= 75) {
                                            echo 'High Scholarship';
                                        } elseif ($percentage >= 50) {
                                            echo 'Medium Scholarship';
                                        } else {
                                            echo 'Partial Scholarship';
                                        }
                                        ?>
                                    </div>
                                    <input type="range" 
                                           class="percentage-slider" 
                                           min="1" 
                                           max="100" 
                                           value="<?php echo htmlspecialchars($form_data['percentage'] ?? '50'); ?>"
                                           id="percentageSlider"
                                           oninput="updatePercentage(this.value)">
                                    <input type="hidden" 
                                           name="percentage" 
                                           id="percentageInput" 
                                           value="<?php echo htmlspecialchars($form_data['percentage'] ?? '50'); ?>"
                                           required>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group" style="animation-delay: 0.5s">
                                        <label class="form-label">Academic Year *</label>
                                        <select class="form-select" name="year" required>
                                            <option value="">Select Year</option>
                                            <option value="2025">2025</option>
                                            <option value="2026">2026</option>
                                            <option value="2027">2027</option>
                                            <option value="2028">2028</option>
                                            <option value="2029">2029</option>                                                                      <option value="2030">2030</option>


                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group" style="animation-delay: 0.6s">
                                        <label class="form-label">Award Date</label>
                                        <input type="date" 
                                               class="form-control" 
                                               name="award_date" 
                                               value="<?php echo htmlspecialchars($form_data['award_date'] ?? date('Y-m-d')); ?>">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group mt-3" style="animation-delay: 0.7s">
                                <label class="form-label">Description (Optional)</label>
                                <textarea class="form-control" 
                                          name="description" 
                                          rows="4" 
                                          placeholder="Enter scholarship description, reason for award, or any notes..."><?php echo htmlspecialchars($form_data['description'] ?? ''); ?></textarea>
                            </div>
                        </div>

                        <!-- Scholarship Visualization -->
                        <div class="visualization-container">
                          
                    <div class="col-md-8 offset-md-2">
                        <div class="d-grid gap-3">
                            <button type="submit" name="award_scholarship" class="btn btn-primary btn-lg">
                                <i class="fas fa-paper-plane me-2"></i>Submit Scholarship Award
                            </button>
                           
                        </div>
                    </div>
                </div>
            </form>
        </div>
                </div>

                

        
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize percentage display
            const initialPercentage = <?php echo $form_data['percentage'] ?? 50; ?>;
            updatePercentage(initialPercentage);
            
            // Update progress circle
            updateProgressCircle(initialPercentage);
            
            // Auto-hide alerts after 5 seconds
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                setTimeout(() => {
                    const bsAlert = new bootstrap.Alert(alert);
                    bsAlert.close();
                }, 5000);
            });
            
            // Student search functionality
            const studentSearch = document.getElementById('studentSearch');
            const studentIdInput = document.getElementById('studentid');
            
            studentSearch.addEventListener('input', function() {
                studentIdInput.value = this.value;
                
                // If valid student ID selected, fetch student info
                if (this.value.length >= 3) {
                    fetchStudentInfo(this.value);
                }
            });
            
            // Step indicators interaction
            const steps = document.querySelectorAll('.step');
            const formGroups = document.querySelectorAll('.form-group');
            
            // Animate form groups sequentially
            formGroups.forEach((group, index) => {
                group.style.animationDelay = `${index * 0.1}s`;
            });
            
            // Update steps based on form interaction
            document.querySelectorAll('input, select, textarea').forEach(element => {
                element.addEventListener('focus', function() {
                    const stepIndex = Array.from(this.closest('.col-lg-6').querySelectorAll('.form-group')).indexOf(this.closest('.form-group'));
                    updateStepIndicator(stepIndex);
                });
            });
        });
        
        function selectStudent(studentId, studentName) {
            document.getElementById('studentSearch').value = studentId;
            document.getElementById('studentid').value = studentId;
            fetchStudentInfo(studentId);
            
            // Highlight selected card
            document.querySelectorAll('.student-card').forEach(card => {
                card.classList.remove('selected');
            });
            event.currentTarget.classList.add('selected');
        }
        
        function fetchStudentInfo(studentId) {
            // In a real application, you would fetch this from the server
            // For now, we'll just update the preview with basic info
            const preview = document.getElementById('studentPreview');
            const studentInitial = document.getElementById('studentInitial');
            const studentName = document.getElementById('studentName');
            const studentIdPreview = document.getElementById('studentIdPreview');
            
            if (studentId && studentId.length >= 3) {
                preview.style.display = 'block';
                studentInitial.textContent = studentId.charAt(0).toUpperCase();
                studentName.textContent = `Student ${studentId}`;
                studentIdPreview.textContent = studentId;
                
                // Update step indicator
                updateStepIndicator(1);
            }
        }
        
        function updatePercentage(value) {
            // Update display
            document.getElementById('percentageDisplay').textContent = value + '%';
            document.getElementById('percentageInput').value = value;
            
            // Update label
            let label = 'Partial Scholarship';
            if (value == 100) label = 'Full Scholarship';
            else if (value >= 75) label = 'High Scholarship';
            else if (value >= 50) label = 'Medium Scholarship';
            document.getElementById('percentageLabel').textContent = label;
            
            // Update progress circle
            updateProgressCircle(value);
            
            // Update step indicator
            updateStepIndicator(1);
        }
        
        function updateProgressCircle(percentage) {
            const circle = document.getElementById('progressCircle');
            const circleText = document.getElementById('circleText');
            const radius = 54;
            const circumference = 2 * Math.PI * radius;
            const offset = circumference - (percentage / 100) * circumference;
            
            circle.style.strokeDashoffset = offset;
            circleText.textContent = percentage + '%';
            
            // Update circle text color based on percentage
            if (percentage == 100) {
                circleText.setAttribute('fill', '#ffd700');
            } else if (percentage >= 75) {
                circleText.setAttribute('fill', '#c0c0c0');
            } else if (percentage >= 50) {
                circleText.setAttribute('fill', '#cd7f32');
            } else {
                circleText.setAttribute('fill', '#90ee90');
            }
        }
        
        function updateStepIndicator(stepIndex) {
            const steps = document.querySelectorAll('.step');
            steps.forEach((step, index) => {
                if (index <= stepIndex) {
                    step.classList.add('active');
                } else {
                    step.classList.remove('active');
                }
            });
        }
        
        // Form validation
        document.getElementById('scholarshipForm').addEventListener('submit', function(e) {
            const studentId = document.getElementById('studentid').value;
            const percentage = document.getElementById('percentageInput').value;
            const year = document.querySelector('[name="year"]').value;
            
            if (!studentId || !percentage || !year) {
                e.preventDefault();
                alert('Please fill in all required fields!');
                return false;
            }
            
            if (percentage < 1 || percentage > 100) {
                e.preventDefault();
                alert('Percentage must be between 1 and 100!');
                return false;
            }
            
            // Update step indicator to final step
            updateStepIndicator(2);
            
            // Show confirmation
            const studentName = document.getElementById('studentName').textContent || 'the student';
            if (confirm(`Are you sure you want to award ${percentage}% scholarship to ${studentName}?`)) {
                return true;
            } else {
                e.preventDefault();
                return false;
            }
        });
    </script>
</body>
</html>