@extends('layouts.front')

@section('title', $course->title . ' — ' . getSiteName())

@php
  // Blade's @json() directive splits its expression on every top-level comma,
  // so a translation call with a replacements array (which itself contains a
  // comma) can't be passed to @json() directly without silently losing its
  // HTML-safe escaping flags. Build the plain array first, then @json() it whole.
  $playerI18n = [
    'freeTag'              => __('front.player.free_tag'),
    'courseContent'        => __('front.player.course_content'),
    'noLessons'            => __('front.player.no_lessons'),
    'lessonNOf'            => __('front.player.lesson_n_of', ['i' => ':i', 'n' => ':n']),
    'markComplete'         => __('front.player.mark_complete'),
    'completedAgain'       => __('front.player.completed_again'),
    'allComplete'          => __('front.player.all_complete'),
    'lessonsComplete'      => __('front.player.lessons_complete', ['done' => ':done', 'total' => ':total']),
    'courseCompleteCta'    => __('front.player.course_complete_cta'),
    'finishUnlockExam'     => __('front.player.finish_unlock_exam'),
    'finishLessonsXpHtml'  => __('front.player.finish_lessons_xp_html', ['count' => ':count']),
    'courseCompleteXpHtml' => __('front.player.course_complete_xp_html'),
    'loginToUnlock'        => __('front.player.login_to_unlock'),
    'locked'               => __('front.player.locked'),
    'finishPrevious'       => __('front.player.finish_previous'),
  ];
@endphp
@section('content')
<script>
  window.NEXUS_COURSE_LESSONS = @json($lessonsData);
  window.NEXUS_I18N = @json($playerI18n);
  window.NEXUS_COURSE_ACCESS = {
    isGuest: {{ $isGuest ? 'true' : 'false' }},
    hasAccess: {{ $hasAccess ? 'true' : 'false' }},
    completeUrlTemplate: "{{ route('front.courses.lessons.complete', [$course->id, '__LESSON_ID__']) }}",
    viewUrlTemplate: "{{ route('front.courses.lessons.view', [$course->id, '__LESSON_ID__']) }}",
    reviewUrl: "{{ route('front.courses.review', $course) }}",
    hasReviewed: {{ $hasReviewed ? 'true' : 'false' }},
  };
</script>
<section class="page-section active" id="page-course">
<div class="page-hero" style="padding-bottom:26px;">
  <div class="container">
    <div class="breadcrumb"><a href="{{ url('/') }}" data-page="home">{{ __('front.nav.home') }}</a> / <a href="{{ route('front.courses.index') }}" data-page="courses">{{ __('front.nav.courses') }}</a> / {{ $course->title }}</div>
    @if($course->category)<span class="tag">{{ $course->category->name }}</span>@endif
    <span class="tag">{{ __('front.courses.' . $course->level) }}</span>
    <span class="tag tag-gold">★ {{ $course->ratings_avg_rating ? number_format($course->ratings_avg_rating, 1) : '—' }} · {{ number_format($course->students_count) }} {{ __('front.courses.students') }}</span>
    <h1 style="margin-top:14px;">{{ $course->title }}</h1>
    @if($course->description)
      <p class="muted" style="max-width:640px; margin-top:10px;">{{ $course->description }}</p>
    @endif
    <div class="course-instr-line">
      <div class="ph avatar-xs">
        @if(optional($course->instructor)->user)
          <img src="{{ $course->instructor->user->getImage() }}" alt="{{ $course->instructor->user->name }}" style="width:100%; height:100%; object-fit:cover;">
        @else
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M4 8a2 2 0 0 1 2-2h1.2a1 1 0 0 0 .89-.55L8.7 4.1A2 2 0 0 1 10.48 3h3.04a2 2 0 0 1 1.78 1.1l.6 1.35A1 1 0 0 0 16.8 6H18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z"/><circle cx="12" cy="13" r="3.4"/></svg>
        @endif
      </div>
      <span>
        {{ __('front.courses.taught_by') }}
        @if($course->instructor && isMultiInstructorsMode())
          <a href="{{ route('front.instructors.show', $course->instructor) }}" style="color:var(--primary); font-weight:600;">{{ optional($course->instructor->user)->name ?? __('front.courses.unknown_instructor') }}</a>
        @else
          <b style="font-weight:600;">{{ optional(optional($course->instructor)->user)->name ?? __('front.courses.unknown_instructor') }}</b>
        @endif
        · {{ __('front.courses.lessons_count', ['count' => $course->lessons->count()]) }}
      </span>
    </div>
  </div>
</div>

<div class="container" style="padding-top:24px;">
  @if($canEnrollWithSiteSubscription)
    <div class="course-enroll-banner">
      <p>{{ __('front.courses.you_have_subscription') }}</p>
      <form method="POST" action="{{ route('front.courses.enroll', $course) }}">
        @csrf
        <button type="submit" class="btn btn-primary btn-sm">{{ __('front.courses.enroll_now') }}</button>
      </form>
    </div>
  @endif
</div>

<div class="container course-layout">
  @php
    $firstLesson = $course->lessons->first();
  @endphp
  <div class="ph ph-video course-player @if(!optional($firstLesson)->video_url) shimmer @endif" id="coursePlayer">
    @if(optional($firstLesson)->video_url)
      <iframe id="coursePlayerFrame" src="{{ $firstLesson->video_url }}" style="position:absolute; inset:0; width:100%; height:100%; border:0;" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe>
    @else
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><rect x="2.5" y="4.5" width="19" height="15" rx="3"/><path d="M10.3 9.1v5.8a.6.6 0 0 0 .9.53l4.9-2.9a.6.6 0 0 0 0-1.04l-4.9-2.9a.6.6 0 0 0-.9.51Z" fill="currentColor" stroke="none"/></svg>
    @endif
    <span class="player-badge" id="playerFreeBadge">{{ __('front.courses.free_preview') }}</span>
  </div>

  <div class="course-main">
    <div class="course-main-head">
      <div>
        <span class="eyebrow" id="lessonModuleTag">{{ $course->lessons->count() ? __('front.courses.lesson_n_of', ['i' => 1, 'n' => $course->lessons->count()]) : __('front.courses.course_preview') }}</span>
        <h2 id="lessonTitle">{{ optional($firstLesson)->title ?? $course->title }}</h2>
      </div>
      <button class="btn btn-primary btn-sm" id="markCompleteBtn">{{ __('front.courses.mark_complete') }}</button>
    </div>
    <p class="muted" id="lessonDesc">{{ optional($firstLesson)->description ?? $course->description }}</p>

    @php
      $reviewsTabActive = request()->has('reviews_page');
    @endphp
    <div class="course-tabs">
      <div class="course-tab {{ $reviewsTabActive ? '' : 'active' }}" data-ctab="overview">{{ __('front.courses.overview') }}</div>
      <div class="course-tab {{ $reviewsTabActive ? 'active' : '' }}" data-ctab="reviews">{{ __('front.courses.reviews', ['count' => $reviews->total()]) }}</div>
    </div>

    <div class="course-tab-panel {{ $reviewsTabActive ? '' : 'active' }}" id="ctab-overview">
      <h3>{{ __('front.courses.about_course') }}</h3>
      @if($course->description)
        <p class="muted" style="line-height:1.7; font-size:14.5px;">{{ $course->description }}</p>
      @else
        <p class="muted">{{ __('front.courses.no_description') }}</p>
      @endif
    </div>

    <div class="course-tab-panel {{ $reviewsTabActive ? 'active' : '' }}" id="ctab-reviews">
      @forelse($reviews as $review)
      <div class="review-item">
        <div class="ph rev-avatar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M4 8a2 2 0 0 1 2-2h1.2a1 1 0 0 0 .89-.55L8.7 4.1A2 2 0 0 1 10.48 3h3.04a2 2 0 0 1 1.78 1.1l.6 1.35A1 1 0 0 0 16.8 6H18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z"/><circle cx="12" cy="13" r="3.4"/></svg></div>
        <div><b>{{ $review->reviewer_name ?: __('front.courses.anonymous') }}</b><span class="stars">{{ str_repeat('★', $review->rating) }}{{ str_repeat('☆', 5 - $review->rating) }}</span><p>{{ $review->comment }}</p></div>
      </div>
      @empty
      <p class="muted">{{ __('front.courses.no_reviews') }}</p>
      @endforelse

      @if($reviews->hasPages())
        <div class="pager">
          @if($reviews->onFirstPage())
            <span class="disabled">‹</span>
          @else
            <a href="{{ $reviews->previousPageUrl() }}#ctab-reviews">‹</a>
          @endif

          @foreach(range(1, $reviews->lastPage()) as $page)
            <a href="{{ $reviews->url($page) }}#ctab-reviews" class="{{ $page == $reviews->currentPage() ? 'active' : '' }}">{{ $page }}</a>
          @endforeach

          @if($reviews->hasMorePages())
            <a href="{{ $reviews->nextPageUrl() }}#ctab-reviews">›</a>
          @else
            <span class="disabled">›</span>
          @endif
        </div>
      @endif
    </div>
  </div>

  @php
    $completedCount = $lessonsData->where('completed', true)->count();
    $totalLessonsCount = $lessonsData->count();
    $progressPercent = $totalLessonsCount ? round($completedCount / $totalLessonsCount * 100) : 0;
  @endphp
  <aside class="course-sidebar">
    @if(!$hasAccess && !$isGuest && !$canEnrollWithSiteSubscription)
      <div class="card course-buy-card">
        <div class="cbc-head">
          <span class="cbc-ic">🔒</span>
          <div>
            <b>{{ __('front.courses.unlock_course') }}</b>
            <span class="cbc-sub">{{ $course->access_type === 'subscription' ? __('front.courses.course_subscription') : __('front.courses.one_time_payment') }}</span>
          </div>
        </div>
        <div class="cbc-price">EGP {{ number_format($course->price, 0) }}</div>
        <form method="POST" action="{{ route('front.courses.pay', $course) }}">
          @csrf
          @if($course->access_type === 'subscription')
            <button type="submit" class="btn btn-primary btn-block">{{ __('front.courses.subscribe_now') }}</button>
          @else
            <button type="submit" class="btn btn-primary btn-block">{{ __('front.courses.buy_now') }}</button>
          @endif
        </form>
        @if($course->access_type === 'subscription')
          <a href="{{ route('front.subscriptions.index') }}" class="btn btn-ghost btn-block" style="margin-top:8px;">{{ __('front.courses.or_subscribe_site') }}</a>
        @endif
      </div>
    @endif

    <div class="card course-progress-card">
      <div class="cpc-top"><b>{{ __('front.courses.your_progress') }}</b><span id="progressPct">{{ $progressPercent }}%</span></div>
      <div class="bar"><i id="progressBar" style="width:{{ $progressPercent }}%;"></i></div>
      <span class="muted" style="font-size:12px;" id="progressCount">{{ __('front.courses.lessons_complete', ['done' => $completedCount, 'total' => $totalLessonsCount]) }}</span>
    </div>

    <div class="card lessons-card" id="lessonsCard"></div>

    @if($course->exam && $course->exam->status === 'live')
      <a href="{{ route('front.exams.show', $course->exam) }}" class="btn btn-primary btn-block exam-cta" id="examCta">
        <span id="examCtaLabel">{{ __('front.courses.finish_unlock_exam') }}</span>
      </a>
    @endif

    <div class="card review-cta locked" id="reviewCta">
      <div class="rc-lock" id="reviewCtaLabel">{{ __('front.courses.finish_review') }}</div>
      <div class="review-form" id="reviewForm" style="display:none;">
        <div class="rc-unlocked-label">{{ __('front.courses.how_was_course') }}</div>
        <div class="star-picker" id="starPicker">
          <span data-star="1">★</span><span data-star="2">★</span><span data-star="3">★</span><span data-star="4">★</span><span data-star="5">★</span>
        </div>
        <textarea id="reviewText" placeholder="{{ __('front.courses.review_placeholder') }}"></textarea>
        <button class="btn btn-primary btn-sm btn-block" id="submitReviewBtn">{{ __('front.courses.post_review') }}</button>
      </div>
      <div class="review-thanks" id="reviewThanks" style="display:none;">{{ __('front.courses.review_thanks') }}</div>
    </div>
  </aside>
</div>
</section>

@if($course->exam && $course->exam->status === 'live')
<div class="paywall-modal-backdrop" id="examConfirmBackdrop">
  <div class="paywall-modal-box">
    <button type="button" class="paywall-modal-close" onclick="nexusCloseExamConfirm()">✕</button>
    <h3>{{ __('front.exam.confirm_title') }}</h3>
    <p>{{ __('front.exam.confirm_body') }}</p>
    <div class="exam-confirm-stats">
      <div><span>{{ __('front.exam.confirm_questions') }}</span><b>{{ $course->exam->questions_count }}</b></div>
      <div><span>{{ __('front.exam.confirm_time') }}</span><b>{{ __('front.exam.confirm_minutes', ['count' => $course->exam->time_limit]) }}</b></div>
    </div>
    <p class="exam-confirm-note">{{ __('front.exam.confirm_note') }}</p>
    <a href="{{ route('front.exams.show', $course->exam) }}" class="btn btn-primary btn-block">{{ __('front.exam.confirm_start') }}</a>
    <button type="button" class="btn btn-ghost btn-block" onclick="nexusCloseExamConfirm()">{{ __('front.exam.confirm_cancel') }}</button>
  </div>
</div>
@endif

@if(!$hasAccess && !$isGuest)
<div class="paywall-modal-backdrop" id="paywallModalBackdrop">
  <div class="paywall-modal-box">
    <button type="button" class="paywall-modal-close" onclick="nexusCloseCoursePaywall()">✕</button>
    <h3>{{ __('front.courses.locked_lesson_title') }}</h3>
    <p>{{ __('front.courses.locked_lesson_body') }}</p>
    @if($canEnrollWithSiteSubscription)
      <form method="POST" action="{{ route('front.courses.enroll', $course) }}">
        @csrf
        <button type="submit" class="btn btn-primary btn-block">{{ __('front.courses.enroll_with_subscription') }}</button>
      </form>
    @else
      <form method="POST" action="{{ route('front.courses.pay', $course) }}">
        @csrf
        @if($course->access_type === 'subscription')
          <button type="submit" class="btn btn-primary btn-block">{{ __('front.courses.subscribe_course_for', ['price' => number_format($course->price, 0)]) }}</button>
        @else
          <button type="submit" class="btn btn-primary btn-block">{{ __('front.courses.buy_course_for', ['price' => number_format($course->price, 0)]) }}</button>
        @endif
      </form>
      @if($course->access_type === 'subscription')
        <a href="{{ route('front.subscriptions.index') }}" class="btn btn-ghost btn-block">{{ __('front.courses.or_subscribe_site') }}</a>
      @endif
    @endif
  </div>
</div>
@endif

@endsection