<?php require_once 'layouts/header.php'; ?>
<?php require_once 'layouts/sidebar.php'; ?>

<div class="flex-1 flex flex-col min-w-0 h-full overflow-hidden">
 <?php require_once 'layouts/topbar.php'; ?>

 <main class="flex-1 relative overflow-y-auto py-4 sm:py-6 px-3 sm:px-6 lg:px-8 bg-gray-50 custom-scrollbar">
 <div class="max-w-6xl mx-auto space-y-6 pb-6">
 <!-- Page Header -->
 <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 px-1 py-2">
 <div>
 <h1 class="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">Generate Certificate</h1>
 <p class="text-[10px] sm:text-xs font-medium text-gray-400 mt-0.5 uppercase tracking-wider">Create a new professional course completion certificate</p>
 </div>
 <div class="flex items-center gap-3">
 <a href="<?php echo url('admin/certificates'); ?>" 
 class="inline-flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 text-gray-600 text-[11px] font-bold rounded-xl hover:bg-gray-50 transition-all active:scale-95">
 <i class="fa-solid fa-arrow-left"></i>
 <span>Back to List</span>
 </a>
 </div>
 </div>

 <!-- Generation Form Card -->
 <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
 <div class="px-6 py-6 sm:p-10">
 <div class="mb-8 border-b border-gray-50 pb-6">
 <h3 class="text-lg font-bold text-gray-900 leading-tight">Certificate Details</h3>
 <p class="text-[11px] font-medium text-gray-400 mt-1 uppercase tracking-widest">Select a course first to see enrolled students and auto-fill duration</p>
 </div>

 <form action="<?php echo url('admin/certificates/generate'); ?>" method="POST" target="_blank" class="space-y-8">
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-12 gap-y-8">
 <!-- Left Column -->
 <div class="space-y-6">
 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Step 1: Select Course</label>
 <div class="relative group">
 <select name="course_name" id="course_select" required onchange="handleCourseChange(this)"
 class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-semibold text-gray-900 focus:ring-4 focus:ring-<?php echo $theme['accent']; ?>-600/5 focus:border-<?php echo $theme['accent']; ?>-600 transition-all outline-none appearance-none cursor-pointer">
 <option value="">Select a course...</option>
 <?php foreach($courses as $c): ?>
 <option value="<?php echo htmlspecialchars($c['name']); ?>" data-id="<?php echo $c['id']; ?>" data-duration="<?php echo $c['duration_months'] . ' Months'; ?>"><?php echo htmlspecialchars($c['name']); ?></option>
 <?php endforeach; ?>
 </select>
 <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-gray-400 border-l border-gray-100 ml-2 pl-4">
 <i class="fa-solid fa-book-open text-[10px]"></i>
 </div>
 </div>
 </div>

 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Step 2: Select Student</label>
 <div class="relative group">
 <select name="student_id" id="student_id" required onchange="updateStudentName(this)" disabled
 class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl text-xs font-semibold text-gray-900 focus:ring-4 focus:ring-<?php echo $theme['accent']; ?>-600/5 focus:border-<?php echo $theme['accent']; ?>-600 transition-all outline-none appearance-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed">
 <option value="">Please select a course first...</option>
 <?php foreach($students as $st): ?>
 <option value="<?php echo $st['id']; ?>" data-course-id="<?php echo $st['course_id']; ?>" data-name="<?php echo htmlspecialchars($st['name']); ?>" class="student-option hidden"><?php echo htmlspecialchars($st['name']); ?></option>
 <?php endforeach; ?>
 </select>
 <input type="hidden" name="student_name" id="student_name">
 <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-gray-400 border-l border-gray-100 ml-2 pl-4">
 <i class="fa-solid fa-user-graduate text-[10px]"></i>
 </div>
 </div>
 </div>
 </div>

 <!-- Right Column -->
 <div class="space-y-6">
 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Course Duration</label>
 <div class="relative group">
 <input type="text" name="duration" id="duration_input" required 
 class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-semibold text-gray-900 focus:ring-4 focus:ring-<?php echo $theme['accent']; ?>-600/5 focus:border-<?php echo $theme['accent']; ?>-600 transition-all outline-none" 
 placeholder="Will be filled automatically">
 <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-gray-400 border-l border-gray-100 ml-2 pl-4">
 <i class="fa-solid fa-clock text-[10px]"></i>
 </div>
 </div>
 </div>

 <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Completion Date</label>
 <input type="date" name="completion_date" value="<?php echo date('Y-m-d'); ?>" required 
 class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-semibold text-gray-900 focus:ring-4 focus:ring-<?php echo $theme['accent']; ?>-600/5 focus:border-<?php echo $theme['accent']; ?>-600 transition-all outline-none">
 </div>
 <div class="space-y-2">
 <label class="text-[10px] font-bold text-gray-400 ml-0.5 uppercase tracking-widest">Certificate ID</label>
 <input type="text" name="certificate_no" value="<?php echo $next_id; ?>" required 
 class="w-full px-4 py-3.5 bg-white border border-gray-200 rounded-xl text-xs font-semibold text-gray-900 focus:ring-4 focus:ring-<?php echo $theme['accent']; ?>-600/5 focus:border-<?php echo $theme['accent']; ?>-600 transition-all outline-none">
 </div>
 </div>
 </div>
 </div>

 <div class="pt-10 flex flex-col sm:flex-row items-center justify-end gap-3 border-t border-gray-50">
 <button type="reset" onclick="resetForm()" class="w-full sm:w-auto px-6 py-2.5 bg-white border border-gray-200 text-gray-600 text-[11px] font-bold rounded-xl hover:bg-gray-50 transition-all">Clear Form</button>
 <button type="submit" class="w-full sm:w-auto px-10 py-2.5 <?php echo $theme['bg']; ?> text-white text-[11px] font-bold rounded-xl <?php echo $theme['hover-bg']; ?> transition-all flex items-center justify-center gap-2 shadow-lg shadow-<?php echo $theme['accent']; ?>-600/20 active:scale-95">
 <i class="fa-solid fa-file-pdf text-[11px]"></i>
 <span>Generate Certificate PDF</span>
 </button>
 </div>
 </form>
 </div>
 </div>
 </div>
 </main>
</div>

<script>
function handleCourseChange(select) {
    const selectedOption = select.options[select.selectedIndex];
    const courseId = selectedOption.getAttribute('data-id');
    const duration = selectedOption.getAttribute('data-duration');
    const studentSelect = document.getElementById('student_id');
    const durationInput = document.getElementById('duration_input');
    const studentOptions = document.querySelectorAll('.student-option');

    // Reset student dropdown
    studentSelect.value = "";
    document.getElementById('student_name').value = "";
    
    if (courseId) {
        // Enable student dropdown
        studentSelect.disabled = false;
        studentSelect.classList.remove('bg-gray-50');
        studentSelect.classList.add('bg-white');
        
        // Update first option text
        studentSelect.options[0].text = "Select a student from this course...";

        // Set duration
        durationInput.value = duration || "";

        // Filter students
        let found = false;
        studentOptions.forEach(opt => {
            if (opt.getAttribute('data-course-id') == courseId) {
                opt.classList.remove('hidden');
                found = true;
            } else {
                opt.classList.add('hidden');
            }
        });
        
        if (!found) {
            studentSelect.options[0].text = "No students enrolled in this course";
            studentSelect.disabled = true;
            studentSelect.classList.add('bg-gray-50');
        }
    } else {
        // Reset to initial state
        studentSelect.disabled = true;
        studentSelect.classList.add('bg-gray-50');
        studentSelect.options[0].text = "Please select a course first...";
        durationInput.value = "";
        studentOptions.forEach(opt => opt.classList.add('hidden'));
    }
}

function updateStudentName(select) {
    const selectedOption = select.options[select.selectedIndex];
    document.getElementById('student_name').value = selectedOption.getAttribute('data-name') || '';
}

function resetForm() {
    const studentSelect = document.getElementById('student_id');
    studentSelect.disabled = true;
    studentSelect.classList.add('bg-gray-50');
    studentSelect.options[0].text = "Please select a course first...";
    document.querySelectorAll('.student-option').forEach(opt => opt.classList.add('hidden'));
}
</script>

<?php require_once 'layouts/footer.php'; ?>
