{{> header}}

<style>
  .course-page {
    background: #f8fafc;
    min-height: calc(100vh - 70px);
  }
  .course-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 60px 40px;
    color: white;
  }
  .course-hero-content {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 3rem;
    align-items: start;
  }
  .course-info h1 {
    font-size: 2.25rem;
    margin-bottom: 1rem;
  }
  .course-info p {
    color: #94a3b8;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
  }
  .course-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
  }
  .meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #94a3b8;
    font-size: 0.95rem;
  }
  .enroll-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    position: sticky;
    top: 90px;
  }
  .enroll-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
  }
  .enroll-price.free {
    color: #10b981;
  }
  .enroll-card p {
    color: #64748b;
    margin-bottom: 1.5rem;
  }
  .btn-enroll {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .btn-enroll:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
  }
  .btn-enroll:disabled {
    background: #94a3b8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  .btn-continue {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  }
  .enroll-features {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
  }
  .enroll-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #64748b;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
  }
  .enroll-features .check {
    color: #10b981;
  }
  .course-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 40px;
  }
  .course-content h2 {
    font-size: 1.5rem;
    color: #0f172a;
    margin-bottom: 1.5rem;
  }
  .curriculum-list { background: white; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
  .module-section { border-bottom: 1px solid #e2e8f0; }
  .module-section:last-child { border-bottom: none; }
  .module-header { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: #f8fafc; cursor: pointer; }
  .module-header:hover { background: #f1f5f9; }
  .module-icon { color: #10b981; font-size: 1.2rem; }
  .module-title { flex: 1; font-weight: 600; color: #0f172a; }
  .module-count { color: #94a3b8; font-size: 0.85rem; }
  .module-lessons { display: none; }
  .module-lessons.open { display: block; }
  .lesson-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem 1rem 3rem; border-top: 1px solid #f1f5f9; }
  .lesson-item:hover { background: #fafafa; }
  .lesson-num { width: 28px; height: 28px; background: #f1f5f9; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #64748b; font-size: 0.8rem; }
  .lesson-title { flex: 1; color: #0f172a; font-weight: 500; }
  .lesson-type { color: #94a3b8; font-size: 0.8rem; padding: 2px 8px; background: #f1f5f9; border-radius: 4px; }
  .lesson-preview { color: #10b981; font-size: 0.75rem; padding: 2px 6px; background: #d1fae5; border-radius: 4px; margin-left: 0.5rem; }
  @media (max-width: 800px) {
    .course-hero-content {
      grid-template-columns: 1fr;
    }
    .enroll-card {
      position: static;
    }
  }
  @media (max-width: 600px) {
    .course-page { padding-top: 60px; }
    .course-hero { padding: 30px 15px; }
    .course-info h1 { font-size: 1.5rem; }
    .course-info p { font-size: 1rem; }
    .course-meta { gap: 0.75rem; flex-wrap: wrap; }
    .enroll-card { padding: 1.5rem; border-radius: 12px; }
    .curriculum { padding: 30px 15px; }
    .curriculum h2 { font-size: 1.25rem; padding: 0 0 1rem 0; }
    .module-header { padding: 1rem; }
    .lesson-item { padding: 0.75rem; }
    .btn-enroll { padding: 14px 20px; font-size: 1rem; }
  }
</style>

<section class="course-page">
  <div class="course-hero">
    <div class="course-hero-content">
      <div class="course-info">
        <h1>{{course.title}}</h1>
        {{#if course.shortDescription}}
        <p>{{course.shortDescription}}</p>
        {{/if}}
        <div class="course-meta">
          {{#if course.level}}<span class="meta-item">📊 {{course.level}}</span>{{/if}}
          {{#if course._count.lessons}}<span class="meta-item">📚 {{course._count.lessons}} lessons</span>{{/if}}
          {{#if course.instructor}}<span class="meta-item">👤 {{course.instructor.name}}</span>{{/if}}
        </div>
      </div>
      <div class="enroll-card">
        {{#if course.price}}
        <div class="enroll-price">${{course.price}}</div>
        {{else}}
        <div class="enroll-price free">Free</div>
        {{/if}}
        <p>Full lifetime access</p>
        {{#if isEnrolled}}
        <a href="/admin/lms/learn/{{course.id}}" class="btn-enroll btn-continue">Continue Learning</a>
        {{else}}
        <button class="btn-enroll" id="enrollBtn">Enroll Now</button>
        {{/if}}
        <ul class="enroll-features">
          <li><span class="check">✓</span> Full course access</li>
          <li><span class="check">✓</span> Certificate of completion</li>
          <li><span class="check">✓</span> Learn at your own pace</li>
        </ul>
      </div>
    </div>
  </div>

  {{#if course.description}}
  <div class="course-description" style="max-width: 1000px; margin: 2rem auto; padding: 0 40px;">
    <h2 style="color: #1e293b; margin-bottom: 1rem;">About This Course</h2>
    <div class="course-description-content" style="color: #475569; line-height: 1.8;">
      {{{course.description}}}
    </div>
  </div>
  {{/if}}

  <div class="course-content">
    <h2>Course Content</h2>
    <div class="curriculum-list">
      {{#if course.modules.length}}
        {{#each course.modules}}
        <div class="module-section">
          <div class="module-header">
            <span class="module-icon">📁</span>
            <span class="module-title">{{title}}</span>
            <span class="module-count">{{lessons.length}} lessons</span>
            <span class="module-toggle">▼</span>
          </div>
          <div class="module-lessons open">
            {{#each lessons}}
            <div class="lesson-item">
              <span class="lesson-num">{{add @index 1}}</span>
              <span class="lesson-title">{{title}}</span>
              <span class="lesson-type">{{type}}</span>
              {{#if isPreview}}<span class="lesson-preview">Preview</span>{{/if}}
            </div>
            {{/each}}
          </div>
        </div>
        {{/each}}
      {{else}}
        {{#each course.lessons}}
        <div class="lesson-item" style="padding-left:1.5rem">
          <span class="lesson-num">{{add @index 1}}</span>
          <span class="lesson-title">{{title}}</span>
          <span class="lesson-type">{{type}}</span>
          {{#if isPreview}}<span class="lesson-preview">Preview</span>{{/if}}
        </div>
        {{else}}
        <div class="lesson-item" style="padding-left:1.5rem"><span class="lesson-title" style="color:#94a3b8">Lessons coming soon...</span></div>
        {{/each}}
      {{/if}}
    </div>
  </div>
</section>

<script>
(function() {
  // Toggle module sections (event delegation)
  document.querySelectorAll('.curriculum-list').forEach(function(list) {
    list.addEventListener('click', function(e) {
      var header = e.target.closest('.module-header');
      if (!header) return;
      var lessons = header.nextElementSibling;
      var toggle = header.querySelector('.module-toggle');
      if (lessons.classList.contains('open')) {
        lessons.classList.remove('open');
        toggle.textContent = '▶';
      } else {
        lessons.classList.add('open');
        toggle.textContent = '▼';
      }
    });
  });

  // Enroll button
  var enrollBtn = document.getElementById('enrollBtn');
  if (enrollBtn) {
    enrollBtn.addEventListener('click', async function() {
      enrollBtn.disabled = true;
      enrollBtn.textContent = 'Enrolling...';
      try {
        var token = localStorage.getItem('token');
        var headers = { 'Content-Type': 'application/json' };
        if (token) headers['Authorization'] = 'Bearer ' + token;
        var r = await fetch('/api/lms/courses/{{course.id}}/enroll', {
          method: 'POST',
          credentials: 'include',
          headers: headers,
          body: JSON.stringify({})
        });
        if (r.status === 401) {
          window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname);
          return;
        }
        var data = await r.json().catch(function() { return {}; });
        if (!r.ok) {
          throw new Error(data.message || 'Enrollment failed');
        }
        window.location.href = '/admin/lms/learn/{{course.id}}';
      } catch(e) {
        enrollBtn.disabled = false;
        enrollBtn.textContent = 'Enroll Now';
        alert(e.message || 'Enrollment failed. Please try again.');
      }
    });
  }
})();
</script>

<!-- Related Courses Recommendations -->
{{> recommendations sourceType="course" sourceId=course.id contentType="course" recTitle="📚 Related Courses"}}

{{> footer}}

