@extends('layouts.shell')
@section('title', $series->title)
@section('main-pad', 'px-5 pt-6')

@section('content')
@php
$firstUnwatched = $episodes->first(fn($e) => empty($progress[$e->id]));
$resume = $firstUnwatched ?? $episodes->first();
$done = collect($progress)->filter()->count();
$pct = $episodes->count() ? round($done / $episodes->count() * 100) : 0;
@endphp

{{-- Hero series (immersive) --}}
<div class="cinema relative -mx-5 -mt-6 mb-6 overflow-hidden">
    <div class="relative aspect-[4/5] sm:aspect-video w-full bg-black">
        <img src="{{ $series->coverUrl() }}" alt="{{ $series->title }}" class="h-full w-full object-cover opacity-80">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent"></div>
    </div>
    <div class="absolute inset-x-0 bottom-0 px-5 pb-1">
        <div class="flex items-center gap-2 mb-2">
            <span class="chip-primary">Series</span>
            <span class="chip !bg-white/15 !text-white">{{ $series->level }}</span>
            <span class="text-caption text-white/70">{{ $episodes->count() }} episode</span>
        </div>
        <h1 class="text-h1 text-white drop-shadow">{{ $series->title }}</h1>
        <p class="mt-1 text-body text-white/75 line-clamp-2 prose-body">{{ $series->description }}</p>
        <div class="mt-4 flex items-center gap-2">
        @if($canAccess && $resume)
            <a href="{{ route('video.show', $resume->slug) }}" class="btn-filled flex-1 sm:flex-none">
                <x-icon name="play" class="w-5 h-5" :fill="true"/>
                {{ $firstUnwatched ? 'Lanjutkan Episode '.$resume->episode_number : 'Mulai Episode 1' }}
            </a>
        @elseif(!$canAccess)
            <a href="{{ route('membership.index') }}" class="btn-filled flex-1 sm:flex-none">
                <x-icon name="lock" class="w-5 h-5"/> Jadi Member untuk Akses
            </a>
        @endif
            <span class="[&_button]:!bg-white/15 [&_button]:!text-white [&_a]:!bg-white/15 [&_a]:!text-white"><x-bookmark-button type="series" :id="$series->id" :model="$series"/></span>
        </div>
    </div>
</div>

{{-- Progress --}}
@if($canAccess && $episodes->count())
<div class="mb-5">
    <div class="flex items-center justify-between text-small text-muted mb-1.5">
        <span>Progress kelas</span><span>{{ $done }}/{{ $episodes->count() }} selesai</span>
    </div>
    <div class="h-2 rounded-full bg-surface-2 overflow-hidden">
        <div class="h-full rounded-full bg-primary transition-all" style="width: {{ max(3,$pct) }}%"></div>
    </div>
</div>
@endif

{{-- Daftar episode --}}
<h2 class="text-h3 mb-3">Daftar Episode</h2>
<div class="space-y-2.5">
    @foreach($episodes as $ep)
    @php $watched = !empty($progress[$ep->id]); $locked = $ep->is_premium && !$canAccess; @endphp
    <a href="{{ $locked ? route('membership.index') : route('video.show', $ep->slug) }}"
       class="card flex items-center gap-4 p-3 hover:shadow-e3 transition-shadow">
        <div class="relative h-16 w-28 shrink-0 overflow-hidden rounded-lg bg-surface-2">
            <img src="{{ $ep->thumbnailUrl() }}" class="h-full w-full object-cover" alt="">
            <span class="absolute inset-0 grid place-items-center bg-black/30">
                <x-icon name="{{ $locked ? 'lock' : 'play' }}" class="w-6 h-6 text-white" :fill="true"/>
            </span>
            @if($watched)<span class="absolute bottom-1 right-1 grid h-5 w-5 place-items-center rounded-full bg-primary text-on-primary"><x-icon name="check" class="w-3.5 h-3.5"/></span>@endif
        </div>
        <div class="min-w-0 flex-1">
            <p class="text-caption text-muted">Episode {{ $ep->episode_number }}</p>
            <h3 class="text-h4 truncate">{{ $ep->title }}</h3>
            @if($ep->duration)<p class="text-small text-muted">{{ gmdate('i:s', $ep->duration) }} menit</p>@endif
        </div>
        <x-icon name="chevron-right" class="w-5 h-5 text-muted shrink-0"/>
    </a>
    @endforeach
</div>
@endsection