<?php include_once('header.php'); 
$module=get_modules($_GET['course_id']); 
?>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
      :root {
           /* --primary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);*/
		    --primary-gradient: linear-gradient(135deg, #2eca7fa1 0%, #2eca7f 100%);
            --motion-gradient: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
            --glass-bg: rgba(255, 255, 255, 0.07);
            --glass-border: rgba(255, 255, 255, 0.125);
            --text-dim: #94a3b8;
        }

        body {
            font-family: 'Outfit', sans-serif;
            background: #0f172a; 
            color: #f8fafc;
            overflow-x: hidden;
            padding-bottom: 100px;
        }

        .bg-glow {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at 50% 50%, rgba(99, 102, #000004, 0.15) 0%, transparent 50%);
            z-index: -1;
            animation: pulseGlow 10s infinite alternate;
        }

        @keyframes pulseGlow {
            0% { transform: scale(1); opacity: 0.5; }
            100% { transform: scale(1.5); opacity: 0.8; }
        }

        .course-header { margin-top: 80px; margin-bottom: 60px; }

        /* Main Card Styling */
        .topic-card {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            margin-bottom: 1.5rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }

        .topic-card:hover {
            border-color: #6366f1;
            box-shadow: 0 10px 40px -10px rgba(99, 102, 241, 0.3);
        }

        .topic-btn {
            width: 100%;
            padding: 25px 30px;
            background: none;
            border: none;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
        }

        .topic-icon-box {
            width: 54px; height: 54px;
            border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            margin-right: 20px; font-size: 1.4rem; flex-shrink: 0;
        }

        .ui-ux-icon { background: var(--primary-gradient); }
        .motion-icon { background: var(--motion-gradient); }

        /* --- Main Progress --- */
        .progress-wrapper { flex-grow: 1; margin-right: 20px; }
        .progress-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        
        .progress-container {
            width: 100%; height: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px; overflow: hidden;
        }

        .progress-bar-fill {
            height: 100%; border-radius: 10px;
            transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* --- Subtopic Styling --- */
        .subtopic-list {
            padding: 10px 30px 30px 104px;
            border-top: 1px solid var(--glass-border);
            margin: 0;
        }

        .subtopic-item {
            padding: 15px 0;
            list-style: none;
            transition: 0.3s;
            opacity: 0;
            transform: translateY(10px);
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .subtopic-item:last-child { border-bottom: none; }

        .collapse.show .subtopic-item {
            opacity: 1; transform: translateY(0);
        }

        .subtopic-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }

        .subtopic-title { font-size: 0.95rem; font-weight: 400; color: #e2e8f0; }
        .subtopic-percent { font-size: 0.8rem; color: var(--text-dim); }

        /* Mini Progress Bars for Subtopics */
        .sub-progress-container {
            width: 100%; height: 4px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
        }

        .sub-progress-fill {
            height: 100%; border-radius: 10px;
            background: rgba(255, 255, 255, 0.3); /* Default subtle color */
            transition: width 1s ease;
        }

        .chevron-icon { transition: transform 0.3s ease; color: var(--text-dim); }
        .topic-btn[aria-expanded="true"] .chevron-icon { transform: rotate(180deg); }
    </style>


<div class="bg-glow"></div>

<div class="container" style="margin-bottom:100px">
    <div class="course-header text-center" data-aos="fade-down">
        <h1 class="display-4 fw-bold text-light">Master Full-Stack Design</h1>
        <p class="lead text-secondary">A cinematic journey through modern web architecture.</p>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-9">
		<?php
		   for($i=0;$i<count($module);$i++)
		   {
		   	$lessions=get_lessons($module[$i]['course_id'],$module[$i]['id']);  
		 ?>
            <div class="topic-card" data-aos="fade-up" data-aos-delay="<?php echo $i+1; ?>00">
                <button class="topic-btn" data-bs-toggle="collapse" data-bs-target="#module<?php echo $i+1; ?>">
                    <div class="d-flex align-items-center w-100">
                        <div class="topic-icon-box ui-ux-icon"><?php echo $i+1; ?></div>
                        <div class="progress-wrapper">
                            <div class="progress-meta">
                                <div class="text-start">
                                    <h5 class="mb-0 text-light"><?php echo $module[$i]['course_title']; ?></h5>
                                    <small class="text-secondary"><?php echo count($lessions); ?> Subtopics </small>
                                </div>
                                <span class="fw-bold" style="color: #2dc67e;">65%</span>
                            </div>
                            <div class="progress-container">
                                <div class="progress-bar-fill" style="width: 65%; background: var(--primary-gradient); box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);"></div>
                            </div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-down chevron-icon"></i>
                </button>
                <div id="module<?php echo $i+1; ?>" class="collapse">
                    <ul class="subtopic-list">
                    	<?php
							
							for($j=0;$j<count($lessions);$j++)
		   					{
						?>
                        <li class="subtopic-item" style="transition-delay: 0.<?php echo $j+1; ?>s;">
                           <div class="subtopic-info">
                              <span class="subtopic-title"><i class="fas fa-circle me-2 text-primary"></i> <?php echo $lessions[$j]['lesson_title']; ?></span>
                              <span class="subtopic-percent">100%</span>
                           </div>
                            <div class="sub-progress-container">
                                <div class="sub-progress-fill" style="width: 100%; background: #6366f1;"></div>
                            </div>
                        </li>
                       <?php } if(count($lessions)==0){ ?>
                       <li class="subtopic-item" style="transition-delay: 0.<?php echo $j+1; ?>s;">
                            <div class="subtopic-info">
                                <span class="subtopic-title"><i class="fas fa-circle me-2 text-danger"></i>No Data Found</span>
                            </div>
                        </li>
                       <?php } ?>
                    </ul>
                </div>
            </div>
		<?php } ?>
           <!-- <div class="topic-card" data-aos="fade-up" data-aos-delay="200">
                <button class="topic-btn" data-bs-toggle="collapse" data-bs-target="#module2">
                    <div class="d-flex align-items-center w-100">
                        <div class="topic-icon-box motion-icon"><i class="fas fa-code"></i></div>
                        <div class="progress-wrapper">
                            <div class="progress-meta">
                                <div class="text-start">
                                    <h5 class="mb-0">Advanced CSS Motion</h5>
                                    <small class="text-secondary">3 Subtopics • 5 Hours</small>
                                </div>
                                <span class="fw-bold" style="color: #f59e0b;">30%</span>
                            </div>
                            <div class="progress-container">
                                <div class="progress-bar-fill" style="width: 65%; background: var(--primary-gradient); box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);"></div>
                            </div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-down chevron-icon"></i>
                </button>
                <div id="module2" class="collapse">
                    <ul class="subtopic-list">
                        <li class="subtopic-item" style="transition-delay: 0.1s;">
                            <div class="subtopic-info">
                                <span class="subtopic-title"><i class="fas fa-bolt me-2 text-warning"></i> Keyframe Masterclass</span>
                                <span class="subtopic-percent">90%</span>
                            </div>
                            <div class="sub-progress-container">
                                <div class="sub-progress-fill" style="width: 90%; background: #f59e0b;"></div>
                            </div>
                        </li>
                        <li class="subtopic-item" style="transition-delay: 0.2s;">
                            <div class="subtopic-info">
                                <span class="subtopic-title"><i class="fas fa-bolt me-2 text-warning"></i> GSAP Library Integration</span>
                                <span class="subtopic-percent">0%</span>
                            </div>
                            <div class="sub-progress-container">
                                <div class="sub-progress-fill" style="width: 0%; background: #f59e0b;"></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>-->

        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init({ duration: 1000, once: true });
</script>

<?php include_once('footer.php'); ?>
