@extends('layouts.shell')
@section('title', 'Belajar — '.($brand['name'] ?? 'Quran Review'))

@section('content')
@php $canPremium = auth()->check() && (auth()->user()->isAdmin() || auth()->user()->hasActiveMembership()); @endphp
<h1 class="text-h1 mb-1">Belajar</h1>
<p class="text-body text-muted mb-5">Video kajian, kelas berseri, ebook, dan kuis interaktif.</p>

<div x-data="{ tab: '{{ $tab }}' }" x-init="$watch('tab', t => history.replaceState(null,'','?tab='+t))">
    <div class="mb-6 flex gap-1 rounded-2xl bg-surface-2 p-1">
        @foreach(['series' => 'Series', 'video' => 'Video', 'ebook' => 'Ebook', 'quiz' => 'Kuis'] as $key => $label)
        <button @click="tab='{{ $key }}'"
            :class="tab==='{{ $key }}' ? 'bg-primary text-on-primary shadow-e2' : 'text-muted hover:text-ink'"
            class="flex-1 rounded-xl py-2.5 text-sm font-semibold transition-all">{{ $label }}</button>
        @endforeach
    </div>

    {{-- SERIES --}}
    <div x-show="tab==='series'" x-cloak>
        <div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
            @forelse($series as $s)
            <a href="{{ route('series.show', $s->slug) }}" class="group">
                <div class="relative aspect-[2/3] overflow-hidden rounded-xl bg-surface-2 border border-outline/60 shadow-e2 transition-transform duration-300 ease-out-expo group-hover:-translate-y-1 group-hover:shadow-e3">
                    <img src="{{ $s->coverUrl() }}" class="h-full w-full object-cover" alt="{{ $s->title }}">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-transparent"></div>
                    @if($s->is_premium && !$canPremium)
                    <span class="absolute right-2 top-2 grid h-7 w-7 place-items-center rounded-full bg-black/55 backdrop-blur"><x-icon name="lock" class="w-4 h-4 text-amber"/></span>
                    @endif
                    <div class="absolute inset-x-0 bottom-0 p-3">
                        <span class="chip-primary !bg-primary/90 !text-on-primary mb-1.5">{{ $s->episodes_count }} eps</span>
                        <h3 class="text-h4 text-white leading-tight line-clamp-2">{{ $s->title }}</h3>
                        <p class="text-caption text-white/70">{{ $s->level }}</p>
                    </div>
                </div>
            </a>
            @empty
            <p class="col-span-full text-body text-muted">Belum ada series.</p>
            @endforelse
        </div>
    </div>

    {{-- VIDEO --}}
    <div x-show="tab==='video'" x-cloak>
        {{-- Filter kategori --}}
        <div class="-mx-5 mb-5 flex gap-2 overflow-x-auto px-5 scrollbar-hide">
            <a href="{{ route('learn.index') }}?tab=video" class="{{ empty($activeCat) ? 'chip-primary' : 'chip' }} shrink-0">Semua</a>
            @foreach($categories as $c)
            <a href="{{ route('learn.index') }}?tab=video&cat={{ $c->slug }}" class="{{ ($activeCat ?? '') === $c->slug ? 'chip-primary' : 'chip' }} shrink-0">{{ $c->name }}</a>
            @endforeach
        </div>
        @if($videos->isEmpty())
            <div class="card p-10 text-center"><x-icon name="film" class="mx-auto mb-2 w-10 h-10 text-muted"/><p class="text-body text-muted">Belum ada video di kategori ini.</p></div>
        @endif
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            @foreach($videos as $video)
            <x-poster :href="route('video.show', $video->slug)" :image="$video->thumbnailUrl()"
                :title="$video->title" :subtitle="$video->category?->name" :duration="$video->duration"
                :locked="$video->is_premium && !$canPremium"
                :badge="$video->is_premium ? null : 'PREVIEW'" ratio="16x9" class="!w-full" />
            @endforeach
        </div>
        <div class="mt-6">{{ $videos->links() }}</div>
    </div>

    {{-- EBOOK --}}
    <div x-show="tab==='ebook'" x-cloak class="space-y-3">
        @forelse($ebooks as $ebook)
        <a href="{{ route('ebook.show', $ebook->slug) }}" class="card flex items-center gap-4 p-4 hover:shadow-e3 transition-shadow">
            <div class="h-16 w-12 shrink-0 overflow-hidden rounded-lg bg-primary/10">
                @if($ebook->coverUrl())<img src="{{ $ebook->coverUrl() }}" class="h-full w-full object-cover" alt="">
                @else<span class="grid h-full w-full place-items-center"><x-icon name="book" class="w-6 h-6 text-primary"/></span>@endif
            </div>
            <div class="min-w-0 flex-1"><h3 class="text-h4 truncate">{{ $ebook->title }}</h3><p class="text-small text-muted truncate">{{ $ebook->category?->name ?? 'Ebook' }}</p></div>
            <x-icon name="{{ $ebook->is_premium && !$canPremium ? 'lock' : 'chevron-right' }}" class="w-5 h-5 {{ $ebook->is_premium && !$canPremium ? 'text-amber' : 'text-muted' }}"/>
        </a>
        @empty<p class="text-body text-muted">Belum ada ebook.</p>@endforelse
    </div>

    {{-- QUIZ --}}
    <div x-show="tab==='quiz'" x-cloak class="space-y-3">
        @forelse($quizzes as $quiz)
        <a href="{{ route('quiz.show', $quiz->slug) }}" class="card flex items-center gap-4 p-4 hover:shadow-e3 transition-shadow">
            <div class="grid h-14 w-12 shrink-0 place-items-center rounded-lg bg-secondary/10"><x-icon name="sparkles" class="w-6 h-6 text-secondary"/></div>
            <div class="min-w-0 flex-1"><h3 class="text-h4 truncate">{{ $quiz->title }}</h3><p class="text-small text-muted truncate">Kuis interaktif</p></div>
            <x-icon name="{{ $quiz->is_premium && !$canPremium ? 'lock' : 'chevron-right' }}" class="w-5 h-5 {{ $quiz->is_premium && !$canPremium ? 'text-amber' : 'text-muted' }}"/>
        </a>
        @empty<p class="text-body text-muted">Belum ada kuis.</p>@endforelse
    </div>
</div>
@endsection