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

@section('content')
@php
  $sessionPct = max(0, min(100, (int)($stats['pct'] ?? 0)));

  $R = 54;
  $C = 2 * 3.1416 * $R;
  $sessionOffset = $C - ($C * $sessionPct / 100);
@endphp

<div class="mx-auto max-w-5xl px-1 sm:px-1 py-3">

  <div class="mt-1 mb-3 rounded-2xl bg-white border-blue-ring shadow-[0_8px_22px_rgba(37,99,235,.10)] overflow-hidden card-fade">
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 items-center p-3 sm:p-4">

      <div class="mx-auto text-center">
        <div class="gauge-ring inline-flex items-center justify-center">
          <svg width="160" height="160" viewBox="0 0 120 120">
            <circle cx="60" cy="60" r="{{ $R }}" fill="none" stroke="#E5E7EB" stroke-width="12" stroke-linecap="round"/>
            <circle cx="60" cy="60" r="{{ $R }}" fill="none" stroke="#2563EB" stroke-width="12"
                    stroke-linecap="round" stroke-dasharray="{{ $C }}" stroke-dashoffset="{{ $sessionOffset }}"
                    style="transition: stroke-dashoffset .7s ease; transform: rotate(-90deg); transform-origin: 60px 60px"/>
            <text x="60" y="66" text-anchor="middle" font-size="22" font-weight="800" fill="#2563EB">{{ $sessionPct }}%</text>
          </svg>
        </div>
        <div class="mt-2 text-[13px] font-bold text-[#2563EB]">এই সেশনের স্কোর</div>
      </div>

      <div class="sm:col-span-2">
        <div class="rounded-xl bg-[#F8FAFF] p-3 sm:p-4 border-blue-ring-soft">
          <div class="flex items-start gap-2.5">
            <div class="h-9 w-9 shrink-0 rounded-xl grid place-items-center text-white shadow-sm bg-gradient-to-br from-[#2563EB] to-[#3B82F6] border-blue-ring-inverse">
              <i class="fa-solid fa-clapperboard text-[14px]"></i>
            </div>
            <div class="min-w-0">
              <h1 class="text-[16px] sm:text-[18px] font-black text-[#0F172A] leading-snug">{{ $session->title }}</h1>
              <p class="mt-0.5 text-[12.5px] text-[#475569]">
                {{ $session->description ?? 'এই সেশনের ভিডিওগুলো ক্রমানুসারে দেখুন।' }}
              </p>

              <div class="mt-2 h-2 rounded-full bg-[#EEF2FF] overflow-hidden border-blue-ring-soft">
                <div class="h-full rounded-full bg-gradient-to-r from-[#2563EB] via-[#3B82F6] to-[#60A5FA]"
                     style="width: {{ $sessionPct }}%; transition: width .6s ease"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  @php
    $themes = [
      ['primary' => '#2563EB', 'accent' => '#60A5FA'],
      ['primary' => '#7C3AED', 'accent' => '#C084FC'],
      ['primary' => '#0EA5E9', 'accent' => '#22D3EE'],
      ['primary' => '#F59E0B', 'accent' => '#FBBF24'],
      ['primary' => '#EC4899', 'accent' => '#F472B6'],
      ['primary' => '#10B981', 'accent' => '#34D399'],
      ['primary' => '#EF4444', 'accent' => '#FB7185'],
      ['primary' => '#14B8A6', 'accent' => '#2DD4BF'],
      ['primary' => '#6366F1', 'accent' => '#818CF8'],
    ];
  @endphp

  <div class="space-y-2">
    @forelse($session->videos as $idx => $v)
      @php
        $prog = $v->progresses()->where('user_id', auth()->id())->latest()->first();

        $videoPct = 0;
        if ($prog) {
          if (isset($prog->percent)) {
            $videoPct = (int)$prog->percent;
          } elseif (isset($prog->watched_seconds) && $v->duration) {
            $videoPct = (int) floor(($prog->watched_seconds / max(1,$v->duration)) * 100);
          } elseif (!is_null($prog->completed_at)) {
            $videoPct = 100;
          }
        }
        $videoPct = max(0, min(100, $videoPct));
        $done = $videoPct >= 100;

        $r = 22; $circ = 2 * 3.1416 * $r; $off = $circ - ($circ * $videoPct / 100);

        $t = $themes[$idx % count($themes)];
        $primary = $t['primary']; $accent = $t['accent'];
      @endphp

      <a href="{{ route('course.watch',$v->id) }}"
         class="group rounded-2xl bg-white overflow-hidden hover:shadow-lg transition session-row border-blue-ring"
         style="--delay: {{ $idx * 70 }}ms;">

        <div class="flex items-center gap-3 p-3">
          <span class="h-10 w-1.5 rounded-full {{ $done ? 'bg-emerald-500' : '' }}"
                style="{{ $done ? '' : 'background:linear-gradient(180deg,'.$primary.','.$accent.')'}}"></span>

          <div class="h-9 w-9 shrink-0 rounded-lg grid place-items-center text-white shadow-sm border-blue-ring-inverse"
               style="background: {{ $done ? '#16A34A' : 'linear-gradient(135deg,'.$primary.','.$accent.')'}}">
            <i class="fa-solid {{ $done ? 'fa-circle-check' : 'fa-play' }} text-[12px]"></i>
          </div>

          <div class="min-w-0 flex-1">
            <div class="flex items-start justify-between gap-2">
              <div class="min-w-0">
                <div class="text-[13.5px] sm:text-[14px] font-extrabold text-[#0F172A] leading-snug line-clamp-2">
                  {{ $v->title }}
                </div>
                <div class="mt-0.5 flex items-center gap-2 text-[11px] text-[#475569]">
                  <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-white border-blue-ring-soft">
                    <i class="fa-regular fa-clock"></i>
                    {{ $v->duration ? gmdate('i:s',$v->duration) : 'Duration N/A' }}
                  </span>
                </div>
              </div>

              <div class="shrink-0 text-right pl-1">
                <div class="ring-wrapper">
                  <svg width="54" height="54" viewBox="0 0 60 60">
                    <circle cx="30" cy="30" r="{{ $r }}" fill="none" stroke="#E5E7EB" stroke-width="6"/>
                    <circle cx="30" cy="30" r="{{ $r }}" fill="none"
                            stroke="{{ $done ? '#10B981' : $primary }}" stroke-width="6"
                            stroke-linecap="round"
                            stroke-dasharray="{{ $circ }}" stroke-dashoffset="{{ $off }}"
                            style="transition: stroke-dashoffset .6s ease; transform: rotate(-90deg); transform-origin: 30px 30px"/>
                    <text x="30" y="34" text-anchor="middle" font-size="12" font-weight="800"
                          fill="{{ $done ? '#047857' : $primary }}">{{ $videoPct }}%</text>
                  </svg>
                </div>
                <div class="text-[10px] {{ $done ? 'text-emerald-600' : 'text-[#64748B]' }}">
                  {{ $done ? 'সম্পন্ন' : 'প্রগ্রেস' }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </a>
    @empty
      <div class="p-6 text-center text-slate-500 rounded-2xl bg-white border-blue-ring">এই সেশনে এখনো কোনো ভিডিও নেই</div>
    @endforelse
  </div>
</div>

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

.gauge-ring{
  border-radius:50%;
  padding:8px;
  border:3px solid rgba(37,99,235,.9);
  box-shadow:0 0 0 4px rgba(37,99,235,.15);
}

.ring-wrapper{
  padding:4px;
  border-radius:50%;
  border:3px solid rgba(37,99,235,.9);
  box-shadow:0 0 0 4px rgba(37,99,235,.15);
}

.card-fade{
  opacity:.0; transform: translateY(6px) scale(.985);
  animation: cardIn .45s cubic-bezier(.21,.64,.29,.99) .05s forwards;
}
@keyframes cardIn{ to{ opacity:1; transform:none } }

.session-row{
  opacity:0; transform: translateX(-16px);
  animation: rowIn .48s cubic-bezier(.21,.64,.29,.99) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes rowIn{ to{ opacity:1; transform:none } }
</style>
@endsection