@extends('layout.user')
@section('title', $video->title)

@section('content')
<div class="mx-auto max-w-5xl px-1 sm:px-2 py-3">

  <div class="mb-2 flex items-center gap-2">
    <a href="{{ route('course.show', $session->course_id) }}"
       class="inline-flex items-center gap-1.5 text-[12.5px] font-semibold text-[#334155] hover:text-[#2563EB] transition">
      <i class="fa-solid fa-arrow-left-long"></i>
      <span>{{ $session->course->title ?? 'কোর্স' }}</span>
    </a>
  </div>

  <div class="relative mb-3">
    <div class="pointer-events-none absolute inset-0 -z-10 blur-2xl opacity-70"
         style="background:
           radial-gradient(140px 100px at 10% 20%, rgba(37,99,235,.10), transparent),
           radial-gradient(180px 120px at 90% 20%, rgba(99,102,241,.10), transparent),
           radial-gradient(220px 160px at 50% 95%, rgba(20,184,166,.10), transparent);">
    </div>

    <div class="rounded-2xl border-blue-ring shadow-[0_10px_28px_rgba(2,6,23,.12)] bg-white">
      <div class="p-3 sm:p-4 flex items-start gap-3 animate-fade-in">
        <div class="shrink-0 h-10 w-10 rounded-xl grid place-items-center text-white shadow-sm
                    bg-gradient-to-br from-[#2563EB] via-[#6366F1] to-[#0EA5E9] border-blue-ring-inverse">
          <i class="fa-solid fa-play text-[14px]"></i>
        </div>
        <div class="min-w-0 flex-1">
          <h1 class="text-[16px] sm:text-[18px] font-black tracking-tight text-[#0F172A] leading-snug">
            {{ $video->title }}
          </h1>
          <div class="mt-1 flex flex-wrap items-center gap-1.5 text-[11px] sm:text-[11.5px]">
            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full font-semibold bg-[#EEF2FF] text-[#3730A3] border-blue-ring-soft">
              <i class="fa-solid fa-layer-group"></i> {{ $session->title }}
            </span>
            @if($video->duration)
              <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full font-semibold bg-[#ECFDF5] text-[#065F46] border-blue-ring-soft">
                <i class="fa-regular fa-clock"></i> {{ gmdate('i:s',$video->duration) }}
              </span>
            @endif
            @if(!empty($video->source_type))
              <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full font-semibold bg-[#F8FAFC] text-[#334155] border-blue-ring-soft">
                <i class="fa-solid fa-signal-stream"></i> {{ strtoupper($video->source_type) }}
              </span>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="rounded-2xl overflow-hidden bg-black shadow-[0_8px_22px_rgba(2,6,23,.15)] animate-rise-in border-blue-ring">
    @if($video->player_type === 'file')
      <video id="player" src="{{ $video->player_src }}" controls playsinline class="w-full max-h-[70vh]"></video>
    @else
      <div class="aspect-video w-full">
        <iframe
          id="embed"
          src="{{ $video->player_src }}"
          class="w-full h-full"
          title="{{ $video->title }}"
          referrerpolicy="strict-origin-when-cross-origin"
          allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
          allowfullscreen
        ></iframe>
      </div>
    @endif
  </div>

  <div class="mt-3 rounded-xl bg-gradient-to-br from-[#EFF6FF] to-white p-3 shadow-sm animate-fade-in-fast border-blue-ring">
    <div class="flex items-start gap-2">
      <div class="h-7 w-7 shrink-0 rounded-md bg-white grid place-items-center text-[#2563EB] border-blue-ring-soft">
        <i class="fa-solid fa-circle-info"></i>
      </div>
      <p class="text-[12.5px] text-[#475569] leading-relaxed">
        আপনার দেখা অগ্রগতি স্বয়ংক্রিয়ভাবে সংরক্ষণ করা হবে।
      </p>
    </div>
  </div>
</div>

<style>
.border-blue-ring{
  border:2.5px solid rgba(37,99,235,.95)!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.border-blue-ring-soft{
  border:1.5px solid rgba(37,99,235,.6)!important;
}
.border-blue-ring-inverse{
  outline:3px solid rgba(255,255,255,.95);
  outline-offset:-2px;
}

@keyframes fadeIn    { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
@keyframes fadeInUp  { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@keyframes riseIn    { from{opacity:0; transform:translateY(10px) scale(.992)} to{opacity:1; transform:none} }

.animate-fade-in      { animation: fadeIn .35s ease-out both; }
.animate-fade-in-fast { animation: fadeIn .28s ease-out both; }
.animate-fade-in-up   { animation: fadeInUp .38s ease-out both; }
.animate-rise-in      { animation: riseIn .45s cubic-bezier(.21,.64,.29,.99) .03s both; }
</style>

@if($video->player_type === 'file')
<script>
(function(){
  const player = document.getElementById('player');
  if(!player) return;

  let lastSent = 0;
  function postProgress(seconds, completed=false){
    const now = Date.now();
    if(!completed && (now - lastSent) < 3000) return;
    lastSent = now;

    fetch("{{ route('course.progress',$video->id) }}", {
      method: 'POST',
      headers: { 'Content-Type':'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
      body: JSON.stringify({
        seconds: Math.floor(seconds || 0),
        duration: Math.floor(player.duration || 0),
        completed: completed ? 1 : 0
      })
    }).catch(()=>{});
  }

  player.addEventListener('timeupdate', () => postProgress(player.currentTime, false));
  player.addEventListener('ended', () => postProgress(player.duration || player.currentTime || 0, true));
})();
</script>
@endif
@endsection
