<?php
$bp = defined('BASE_PATH') ? BASE_PATH : '/gmind';
?>
<div class="admin-section">
    <div style="margin-bottom:14px;"><a href="<?= $bp ?>/super-admin/courses" style="color:#6c3fe8;text-decoration:none;font-size:0.85rem;">← Back to Courses</a></div>
    <form method="POST" action="<?= $bp ?>/super-admin/courses" enctype="multipart/form-data" style="max-width:800px;">
        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken ?? '', ENT_QUOTES, 'UTF-8') ?>">

        <div style="background:#fff;border-radius:12px;padding:24px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,0.06);">
            <h2 style="margin:0 0 16px;font-size:1.1rem;color:#2c1e4a;">Course Details</h2>
            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;">
                <div><label style="display:block;font-size:0.84rem;font-weight:600;color:#2c1e4a;margin-bottom:4px;">Course Name *</label><input type="text" name="name" required style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;"></div>
                <div><label style="display:block;font-size:0.84rem;font-weight:600;color:#2c1e4a;margin-bottom:4px;">Course Name (Hindi)</label><input type="text" name="name_hi" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;"></div>
                <div><label style="display:block;font-size:0.84rem;font-weight:600;color:#2c1e4a;margin-bottom:4px;">Category *</label><select name="category" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;"><option value="computer">Computer</option><option value="accounting">Accounting</option><option value="programming">Programming</option><option value="design">Design</option><option value="other">Other</option></select></div>
                <div><label style="display:block;font-size:0.84rem;font-weight:600;color:#2c1e4a;margin-bottom:4px;">Duration *</label><input type="text" name="duration" required placeholder="e.g. 6 Months" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;"></div>
                <div><label style="display:block;font-size:0.84rem;font-weight:600;color:#2c1e4a;margin-bottom:4px;">Duration Unit</label><select name="duration_unit" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;"><option value="months">Months</option><option value="weeks">Weeks</option><option value="days">Days</option><option value="years">Years</option></select></div>
                <div><label style="display:block;font-size:0.84rem;font-weight:600;color:#2c1e4a;margin-bottom:4px;">Default Fee (₹)</label><input type="number" name="fee" value="0" min="0" step="any" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;"></div>
            </div>
            <div style="margin-top:12px;"><label style="display:block;font-size:0.84rem;font-weight:600;color:#2c1e4a;margin-bottom:4px;">Description</label><textarea name="description" rows="3" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;resize:vertical;"></textarea></div>
            <div style="margin-top:10px;"><label style="display:block;font-size:0.84rem;font-weight:600;color:#2c1e4a;margin-bottom:4px;">Syllabus</label><textarea name="syllabus" rows="4" placeholder="Module 1: ...&#10;Module 2: ..." style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;resize:vertical;"></textarea></div>
            <div style="margin-top:10px;"><label style="display:block;font-size:0.84rem;font-weight:600;color:#2c1e4a;margin-bottom:4px;">Course Image</label><input type="file" name="image" accept="image/jpeg,image/png" style="width:100%;font-size:0.8rem;padding:6px;border:1px solid #ddd;border-radius:6px;"></div>
            <div style="display:flex;gap:16px;margin-top:10px;">
                <label style="display:flex;align-items:center;gap:6px;cursor:pointer;"><input type="checkbox" name="active" value="1" checked style="width:16px;height:16px;accent-color:#6c3fe8;"><span style="font-size:0.84rem;font-weight:600;color:#2c1e4a;">Active</span></label>
                <label style="display:flex;align-items:center;gap:6px;cursor:pointer;"><input type="checkbox" name="is_featured" value="1" style="width:16px;height:16px;accent-color:#6c3fe8;"><span style="font-size:0.84rem;font-weight:600;color:#2c1e4a;">Featured on Homepage</span></label>
            </div>
        </div>

        <!-- Subjects with Max Marks -->
        <div style="background:#fff;border-radius:12px;padding:24px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,0.06);">
            <h2 style="margin:0 0 6px;font-size:1.1rem;color:#2c1e4a;">Subjects & Max Marks</h2>
            <p style="margin:0 0 14px;font-size:0.82rem;color:#666;">Add subjects for this course. Each subject has a name and maximum marks (default 100). These will be used in marksheet generation.</p>
            <div id="subjectsContainer">
                <div class="subject-row" style="display:flex;gap:8px;margin-bottom:8px;">
                    <input type="text" name="subject_name[]" placeholder="Subject name (e.g. Computer Fundamentals)" style="flex:1;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:0.84rem;">
                    <input type="number" name="subject_max_marks[]" value="100" min="1" style="width:90px;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:0.84rem;text-align:center;">
                    <button type="button" onclick="this.parentElement.remove()" style="background:none;border:none;color:#e84118;cursor:pointer;font-size:1.2rem;padding:0 6px;">✕</button>
                </div>
            </div>
            <button type="button" onclick="addSubject()" style="padding:8px 14px;background:#6c3fe8;color:#fff;border:none;border-radius:6px;font-size:0.82rem;cursor:pointer;">+ Add Subject</button>
        </div>

        <div style="display:flex;gap:12px;justify-content:flex-end;">
            <a href="<?= $bp ?>/super-admin/courses" style="padding:12px 24px;border:1px solid #ddd;border-radius:8px;text-decoration:none;color:#666;font-weight:600;font-size:0.9rem;">Cancel</a>
            <button type="submit" style="padding:12px 28px;background:linear-gradient(135deg,#6c3fe8,#4a2db8);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:0.9rem;cursor:pointer;">Create Course</button>
        </div>
    </form>
</div>
<script>
function addSubject() {
    var div = document.createElement('div');
    div.className = 'subject-row';
    div.style.cssText = 'display:flex;gap:8px;margin-bottom:8px;';
    div.innerHTML = '<input type="text" name="subject_name[]" placeholder="Subject name" style="flex:1;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:0.84rem;"><input type="number" name="subject_max_marks[]" value="100" min="1" style="width:90px;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:0.84rem;text-align:center;"><button type="button" onclick="this.parentElement.remove()" style="background:none;border:none;color:#e84118;cursor:pointer;font-size:1.2rem;padding:0 6px;">✕</button>';
    document.getElementById('subjectsContainer').appendChild(div);
}
</script>
