@extends('layouts.member')
@section('title', $lesson->browser_title ?: $lesson->name)
@section('content')
@if(! empty($showLessonCourseSidebar) && ! empty($lessonCourseNav))
  <div class="d-lg-none mb-3">
    <button class="btn btn-outline-secondary btn-sm w-100" type="button" data-bs-toggle="collapse" data-bs-target="#member-lesson-nav-mobile" aria-expanded="false" aria-controls="member-lesson-nav-mobile">
      <i class="bi bi-list-ul me-1"></i>レッスン一覧
    </button>
    <div class="collapse mt-2" id="member-lesson-nav-mobile">
      @include('member.partials._lesson_course_sidebar', [
        'site' => $site,
        'lessonCourseNav' => $lessonCourseNav,
        'bundle' => $bundle,
      ])
    </div>
  </div>
@else
  <div class="mb-3 d-flex gap-2">
    <a href="{{ member_portal_route('member.bundle.show', ['slug' => $site->slug, 'bundle' => $bundle->id]) }}" class="btn btn-sm btn-outline-secondary">← {{ $bundle->name }}</a>
  </div>
@endif
<h1 class="h4 mb-3">{{ $lesson->name }}</h1>
@if(filled($lesson->thumbnail_url))
  <div class="mb-3 rounded overflow-hidden shadow-sm">
    @include('partials._bundle_course_thumbnail', [
      'url' => $lesson->thumbnail_url,
      'alt' => $lesson->name,
      'variant' => 'card-top',
    ])
  </div>
@endif
@if(session('success'))
  <div class="alert alert-success py-2 small">{{ session('success') }}</div>
@endif
@php
  $sequentialCompletion = $sequentialCompletion ?? false;
  $lessonCompleted = $lessonCompleted ?? false;
  $videoCompletionPercent = (int) ($videoCompletionPercent ?? 90);
  $videoUsesHtml5 = $videoUsesHtml5 ?? false;
  $showVideoOpts = filter_var(($courseSettings['basic']['show_video_options_hint'] ?? true), FILTER_VALIDATE_BOOLEAN);
  $isTestLesson = $isTestLesson ?? $lesson->isTestLesson();
@endphp
@if($isTestLesson)
  <div class="card shadow-sm mb-3">
    <div class="card-body">
      @if(!empty($isPreview))
        <p class="text-muted small mb-0">プレビューではテストの回答送信はできません。設問の表示のみ確認できます。</p>
      @endif
      @include('member.partials._lesson_test', [
        'site' => $site,
        'bundle' => $bundle,
        'track' => $track,
        'lesson' => $lesson,
        'testSettings' => $testSettings ?? null,
        'testResult' => $testResult ?? null,
        'lessonCompleted' => $lessonCompleted,
        'isPreview' => $isPreview ?? false,
      ])
    </div>
  </div>
@else
<div class="card shadow-sm"><div class="card-body lesson-content">
@if($lesson->video_url)
  @php
    $applyVideoOpts = filter_var(($courseSettings['basic']['show_video_options_hint'] ?? true), FILTER_VALIDATE_BOOLEAN);
    $lessonVideoSettings = $applyVideoOpts
      ? \App\Support\MembershipSiteLessonSettings::merge(is_array($lesson->lesson_settings) ? $lesson->lesson_settings : null)
      : \App\Support\MembershipSiteLessonSettings::defaults();
    $videoEmbedUrl = null;
    if ($lesson->video_type === 'youtube') {
        if (preg_match('~(?:youtube\\.com/watch\\?v=|youtu\\.be/|youtube\\.com/embed/)([A-Za-z0-9_-]+)~', $lesson->video_url, $m)) {
            $videoEmbedUrl = 'https://www.youtube.com/embed/' . $m[1];
            $ytParams = [];
            if ($lessonVideoSettings['video_autoplay'] ?? false) {
                $ytParams[] = 'autoplay=1';
                $ytParams[] = 'mute=1';
            }
            if (! ($lessonVideoSettings['video_show_seek'] ?? true)) {
                $ytParams[] = 'controls=0';
            }
            if ($ytParams !== []) {
                $videoEmbedUrl .= '?' . implode('&', $ytParams);
            }
        }
    } elseif ($lesson->video_type === 'vimeo') {
        if (preg_match('~vimeo\\.com/(?:video/)?([0-9]+)~', $lesson->video_url, $m)) {
            $videoEmbedUrl = 'https://player.vimeo.com/video/' . $m[1];
            if ($lessonVideoSettings['video_autoplay'] ?? false) {
                $videoEmbedUrl .= '?autoplay=1&muted=1';
            }
        }
    }
    $html5Controls = ($lessonVideoSettings['video_show_seek'] ?? true) ? 'controls' : '';
    if ($lessonVideoSettings['video_allow_playback_speed'] ?? true) {
        $html5Controls .= ' controlslist="nodownload"';
    }
  @endphp
  <div class="mb-4">
    @if($videoEmbedUrl)
      <div class="ratio ratio-16x9"><iframe src="{{ $videoEmbedUrl }}" allowfullscreen loading="lazy"></iframe></div>
    @elseif($lesson->video_type === 'embed')
      {!! $lesson->video_url !!}
    @else
      <video id="member-lesson-video" class="w-100 rounded" {!! $html5Controls !!} playsinline data-progress-url="{{ route('member.lesson.video-progress', ['slug' => $site->slug, 'bundle' => $bundle->id, 'track' => $track->id, 'lesson' => $lesson->id]) }}" data-threshold="{{ $videoCompletionPercent }}"><source src="{{ $lesson->video_url }}"></video>
    @endif
  </div>
@endif
{!! $lesson->content !!}
@if($lesson->button_label && $lesson->button_url)
  <div class="mt-4"><a href="{{ $lesson->button_url }}" class="btn btn-primary" target="_blank" rel="noopener">{{ $lesson->button_label }}</a></div>
@endif
@php
  $applyVideoOpts = filter_var(($courseSettings['basic']['show_video_options_hint'] ?? true), FILTER_VALIDATE_BOOLEAN);
  $allowDownloads = $applyVideoOpts
    ? (\App\Support\MembershipSiteLessonSettings::merge(is_array($lesson->lesson_settings) ? $lesson->lesson_settings : null)['video_allow_download'] ?? true)
    : true;
@endphp
@if($allowDownloads && ($lesson->attachment_url || $lesson->link_url))
  <div class="list-group mt-4">
    @if($lesson->attachment_url)
      <a class="list-group-item list-group-item-action" href="{{ $lesson->attachment_url }}" target="_blank" rel="noopener"><i class="bi bi-paperclip me-1"></i>{{ $lesson->attachment_label ?: '添付ファイル' }}</a>
    @endif
    @if($lesson->link_url)
      <a class="list-group-item list-group-item-action" href="{{ $lesson->link_url }}" target="_blank" rel="noopener"><i class="bi bi-link-45deg me-1"></i>{{ $lesson->link_label ?: '関連リンク' }}</a>
    @endif
  </div>
@endif
</div></div>
@endif

@if(! $isTestLesson && empty($isPreview))
<div class="mt-4 pt-3 border-top member-lesson-completion">
  @if($lessonCompleted)
    <div class="member-lesson-completion-done" role="status" aria-live="polite">
      <div class="member-lesson-completion-done__label">
        <i class="bi bi-check-circle-fill" aria-hidden="true"></i>
        <span>受講済みです</span>
      </div>
      @if($sequentialCompletion)
        <p class="member-lesson-completion-done__hint mb-0">次のレッスンが解放されています。</p>
      @endif
    </div>
  @else
    @if($sequentialCompletion)
      <p class="mb-2 text-muted small">受講完了にすると、次のレッスンが解放されます。</p>
      @if($videoUsesHtml5 && $showVideoOpts)
        <p class="mb-2 text-muted small">動画を {{ $videoCompletionPercent }}％ 以上視聴すると、自動で受講完了になります。</p>
      @endif
    @else
      <p class="mb-2 text-muted small">内容を終えたら、受講完了として登録できます。</p>
    @endif
    <form method="POST" action="{{ route('member.lesson.complete', ['slug' => $site->slug, 'bundle' => $bundle->id, 'track' => $track->id, 'lesson' => $lesson->id]) }}" class="member-lesson-completion-form">
      @csrf
      <button type="submit" class="btn btn-success member-lesson-completion-btn w-100">
        {{ \App\Support\BundleCourseSettings::resolveCompletionButtonLabel($courseSettings ?? []) }}
      </button>
    </form>
  @endif
</div>
@elseif($lessonCompleted)
<div class="mt-4 pt-3 border-top member-lesson-completion">
  <div class="member-lesson-completion-done" role="status" aria-live="polite">
    <div class="member-lesson-completion-done__label">
      <i class="bi bi-check-circle-fill" aria-hidden="true"></i>
      <span>テスト合格・受講済みです</span>
    </div>
    @if($sequentialCompletion)
      <p class="member-lesson-completion-done__hint mb-0">次のレッスンが解放されています。</p>
    @endif
  </div>
</div>
@endif

@if(! $isTestLesson && trim((string) ($site->lesson_footer_message ?? '')) !== '')
  <section class="mt-4 member-lesson-site-notice" aria-labelledby="lesson-site-notice-heading">
    <h2 id="lesson-site-notice-heading" class="h6 text-secondary border-bottom pb-2 mb-3">
      <i class="bi bi-info-circle me-1"></i>案内
    </h2>
    <div class="announcement-rich-content border rounded p-3 bg-white shadow-sm">
      {!! $site->lesson_footer_message !!}
    </div>
  </section>
@endif

@if(! $isTestLesson && !empty($commentsEnabled) && empty($isPreview))
  @include('member.partials._lesson_comments', [
    'site' => $site,
    'bundle' => $bundle,
    'track' => $track,
    'lesson' => $lesson,
    'lessonComments' => $lessonComments ?? collect(),
    'lessonCommentTotal' => $lessonCommentTotal ?? null,
  ])
@endif

@php
  $prev = $lessonNav['prev'] ?? null;
  $next = $lessonNav['next'] ?? null;
@endphp
@if($prev || $next)
  <div class="d-flex justify-content-between gap-2 mt-4">
    @if($prev)
      <a href="{{ member_portal_route('member.lesson.show', ['slug' => $site->slug, 'bundle' => $bundle->id, 'track' => $prev['track']->id, 'lesson' => $prev['lesson']->id]) }}" class="btn btn-outline-secondary btn-sm">← {{ $prev['lesson']->name }}</a>
    @else
      <span></span>
    @endif
    @if($next)
      <a href="{{ member_portal_route('member.lesson.show', ['slug' => $site->slug, 'bundle' => $bundle->id, 'track' => $next['track']->id, 'lesson' => $next['lesson']->id]) }}" class="btn btn-primary btn-sm">{{ $next['lesson']->name }} →</a>
    @endif
  </div>
@endif
@push('head')
<style>
  .member-lesson-sidebar { background: #f0f0f0; position: sticky; top: 1rem; }
  .member-lesson-sidebar__body { max-height: calc(100vh - 8rem); overflow-y: auto; }
  .member-lesson-sidebar__group + .member-lesson-sidebar__group { border-top: 1px solid #e0e0e0; }
  .member-lesson-sidebar__item { color: #333; font-size: 0.9rem; line-height: 1.35; }
  .member-lesson-sidebar__item:hover { background: rgba(0, 0, 0, 0.04); }
  .member-lesson-sidebar__item.is-current { background: #fff; font-weight: 600; border-left: 3px solid var(--bs-primary); }
  .member-lesson-sidebar__item.is-locked { cursor: not-allowed; }
  .member-lesson-sidebar__icon { flex: 0 0 1.1rem; margin-top: 0.1rem; }
  .member-lesson-sidebar__label { flex: 1; min-width: 0; word-break: break-word; }
  .member-lesson-completion-btn {
    font-size: 1.125rem;
    font-weight: 600;
    padding: 0.85rem 1.25rem;
    border-radius: 0.5rem;
  }
  .member-lesson-completion-done {
    text-align: center;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    background: rgba(25, 135, 84, 0.08);
    border: 1px solid rgba(25, 135, 84, 0.25);
  }
  .member-lesson-completion-done__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #198754;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
  }
  .member-lesson-completion-done__label .bi {
    font-size: 1.5rem;
  }
  .member-lesson-completion-done__hint {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
  }
</style>
@endpush
@if(!empty($lessonPageSettings['custom_css']))
  @push('head')<style>{!! $lessonPageSettings['custom_css'] !!}</style>@endpush
@endif
@if(!empty($lessonDisplaySettings['custom_css'] ?? ''))
  @push('head')<style>{!! $lessonDisplaySettings['custom_css'] !!}</style>@endpush
@endif
@if($sequentialCompletion && $videoUsesHtml5 && $showVideoOpts && ! $lessonCompleted)
@push('scripts')
<script>
(function () {
  const video = document.getElementById('member-lesson-video');
  if (!video || !video.dataset.progressUrl) return;
  const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
  let maxRatio = 0;
  let sentComplete = false;
  const postRatio = (ratio) => {
    if (sentComplete || ratio < 0.01) return;
    fetch(video.dataset.progressUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': token || '',
      },
      credentials: 'same-origin',
      body: JSON.stringify({ watched_ratio: ratio }),
    }).then((res) => res.json().then((data) => ({ ok: res.ok, data }))).then(({ ok, data }) => {
      if (ok && data.completed) {
        sentComplete = true;
        window.location.reload();
      }
    }).catch(() => {});
  };
  video.addEventListener('timeupdate', () => {
    if (!video.duration || video.duration <= 0) return;
    const ratio = video.currentTime / video.duration;
    if (ratio > maxRatio) maxRatio = ratio;
    if (maxRatio >= 0.25) postRatio(maxRatio);
  });
  video.addEventListener('ended', () => postRatio(1));
})();
</script>
@endpush
@endif
@endsection