@extends('layouts.shell')
@section('title', 'Daftar Saya')

@section('content')
<h1 class="text-h1 mb-5">Daftar Saya</h1>

@if($grouped->isEmpty())
    <x-empty-state icon="bookmark" title="Belum ada yang disimpan"
        message="Simpan video, kelas, artikel, atau event favorit Anda untuk diakses cepat di sini."
        :actionUrl="route('learn.index')" actionLabel="Jelajahi Konten" />
@else
    @php
        $titles = ['Video' => 'Video', 'Series' => 'Kelas Berseri', 'Article' => 'Artikel', 'Event' => 'Event'];
    @endphp
    @foreach($grouped as $type => $items)
    <section class="mb-8">
        <h2 class="text-h3 mb-3">{{ $titles[$type] ?? $type }}</h2>
        <div class="space-y-3">
            @foreach($items as $b)
            @php $m = $b->bookmarkable; @endphp
            @php
                $href = match($type){
                    'Video' => route('video.show', $m->slug),
                    'Series' => route('series.show', $m->slug),
                    'Article' => route('articles.show', $m->slug),
                    'Event' => route('events.show', $m->slug),
                    default => '#',
                };
                $img = match($type){
                    'Video' => $m->thumbnailUrl(),
                    'Series','Event','Article' => $m->coverUrl(),
                    default => null,
                };
            @endphp
            <a href="{{ $href }}" class="card flex items-center gap-4 p-3 hover:shadow-e3 transition-shadow">
                <div class="h-14 w-24 shrink-0 overflow-hidden rounded-lg bg-surface-2">
                    @if($img)<img src="{{ $img }}" class="h-full w-full object-cover" alt="">@endif
                </div>
                <div class="min-w-0 flex-1">
                    <h3 class="text-h4 truncate">{{ $m->title }}</h3>
                    <p class="text-caption text-muted">Disimpan {{ $b->created_at->diffForHumans() }}</p>
                </div>
                <form method="POST" action="{{ route('bookmark.toggle', [strtolower($type), $m->id]) }}">@csrf
                    <button class="grid h-9 w-9 place-items-center rounded-full text-primary" aria-label="Hapus"><x-icon name="bookmark" class="w-5 h-5" :fill="true"/></button>
                </form>
            </a>
            @endforeach
        </div>
    </section>
    @endforeach
@endif
@endsection