@extends('layouts.shell')
@section('title', 'Event')
@section('meta_description', 'Daftar event Islami Quran Review: Zoominar, kajian offline, dan workshop. Daftar sekarang, kuota terbatas.')

@section('content')
<header class="mb-5">
    <span class="chip-primary mb-2"><x-icon name="calendar" class="w-3.5 h-3.5"/> Event</span>
    <h1 class="text-h1">Event & Kajian</h1>
    <p class="text-body text-muted mt-1">Zoominar, kajian offline, dan workshop pilihan.</p>
</header>

{{-- Toggle List/Kalender + Filter --}}
<div class="mb-5 flex items-center justify-between gap-3">
    <div class="flex gap-1 rounded-xl bg-surface-2 p-1">
        <a href="{{ route('events.index', array_filter(['filter' => $filter, 'view' => 'list'])) }}" class="rounded-lg px-3 py-1.5 text-sm font-semibold {{ ($view ?? 'list') !== 'calendar' ? 'bg-primary text-on-primary' : 'text-muted' }}">List</a>
        <a href="{{ route('events.index', array_filter(['filter' => $filter, 'view' => 'calendar'])) }}" class="rounded-lg px-3 py-1.5 text-sm font-semibold {{ ($view ?? '') === 'calendar' ? 'bg-primary text-on-primary' : 'text-muted' }}">Kalender</a>
    </div>
</div>
<div class="-mx-5 mb-6 flex gap-2 overflow-x-auto px-5 scrollbar-hide">
    @foreach(['' => 'Semua', 'online' => '🌐 Online', 'offline' => '📍 Offline', 'free' => 'Gratis'] as $key => $label)
    <a href="{{ route('events.index', array_filter(['filter' => $key, 'view' => $view ?? 'list'])) }}"
       class="{{ ($filter ?? '') === $key ? 'chip-primary' : 'chip' }} shrink-0">{{ $label }}</a>
    @endforeach
</div>

@if(($view ?? '') === 'calendar' && $calendar)
@php
    $m = $calendar['month']; $evs = $calendar['events'];
    $start = $m->copy()->startOfMonth(); $end = $m->copy()->endOfMonth();
    $lead = ($start->dayOfWeekIso - 1); // Senin=0
@endphp
<div class="card p-4 mb-8">
    <div class="mb-3 flex items-center justify-between">
        <a href="{{ route('events.index', ['view'=>'calendar','month'=>$m->copy()->subMonth()->format('Y-m')]) }}" class="grid h-9 w-9 place-items-center rounded-full hover:bg-ink/5"><x-icon name="chevron-left" class="w-5 h-5"/></a>
        <h2 class="text-h4">{{ $m->translatedFormat('F Y') }}</h2>
        <a href="{{ route('events.index', ['view'=>'calendar','month'=>$m->copy()->addMonth()->format('Y-m')]) }}" class="grid h-9 w-9 place-items-center rounded-full hover:bg-ink/5"><x-icon name="chevron-right" class="w-5 h-5"/></a>
    </div>
    <div class="grid grid-cols-7 gap-1 text-center">
        @foreach(['Sen','Sel','Rab','Kam','Jum','Sab','Min'] as $d)<div class="text-caption text-muted py-1">{{ $d }}</div>@endforeach
        @for($i = 0; $i < $lead; $i++)<div></div>@endfor
        @for($day = 1; $day <= $end->day; $day++)
            @php $dayEvents = $evs[$day] ?? collect(); $isToday = $m->copy()->day($day)->isToday(); @endphp
            <div class="aspect-square rounded-lg p-1 {{ $isToday ? 'bg-primary/10' : '' }} {{ $dayEvents->isNotEmpty() ? 'ring-1 ring-primary/40' : '' }}">
                <div class="text-small {{ $isToday ? 'font-bold text-primary' : 'text-ink' }}">{{ $day }}</div>
                @foreach($dayEvents->take(2) as $e)
                <a href="{{ route('events.show', $e->slug) }}" class="mt-0.5 block truncate rounded bg-primary px-1 text-[9px] font-semibold text-on-primary">{{ $e->title }}</a>
                @endforeach
                @if($dayEvents->count() > 2)<span class="text-[9px] text-muted">+{{ $dayEvents->count()-2 }}</span>@endif
            </div>
        @endfor
    </div>
</div>
@endif

{{-- Event Saya --}}
@if(($myEvents ?? collect())->isNotEmpty())
<section class="mb-8">
    <h2 class="text-label text-muted mb-3">Event Saya</h2>
    <div class="rail-track scrollbar-hide">
        @foreach($myEvents as $event)
        <a href="{{ route('events.show', $event->slug) }}" class="poster poster-16x9 group">
            @if($event->coverUrl())<img src="{{ $event->coverUrl() }}" class="h-full w-full object-cover" alt="">@else<div class="h-full w-full bg-gradient-to-br from-primary to-amber"></div>@endif
            <div class="absolute inset-0 bg-gradient-to-t from-black/85 to-transparent"></div>
            <span class="absolute left-2 top-2 chip-primary !bg-secondary/90 !text-white">Terdaftar</span>
            <div class="absolute inset-x-0 bottom-0 p-2.5">
                <p class="text-[13px] font-semibold text-white line-clamp-2">{{ $event->title }}</p>
                <p class="text-[11px] text-white/70">{{ $event->starts_at?->translatedFormat('d M, H:i') }}</p>
            </div>
        </a>
        @endforeach
    </div>
</section>
@endif

@if(($view ?? '') !== 'calendar')
<h2 class="text-label text-muted mb-3">Akan Datang</h2>
<div class="space-y-4">
    @forelse($upcoming as $event)
    <a href="{{ route('events.show', $event->slug) }}" class="card overflow-hidden block group">
        <div class="cinema relative aspect-[16/8] overflow-hidden">
            @if($event->coverUrl())<img src="{{ $event->coverUrl() }}" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" alt="">
            @else<div class="h-full w-full bg-gradient-to-br from-primary to-amber"></div>@endif
            <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/15 to-transparent"></div>

            {{-- date badge --}}
            <div class="absolute left-3 top-3 rounded-xl bg-surface/95 px-3 py-2 text-center shadow-e2">
                <p class="text-h3 leading-none text-primary">{{ $event->starts_at?->format('d') }}</p>
                <p class="text-caption text-muted uppercase">{{ $event->starts_at?->translatedFormat('M') }}</p>
            </div>
            {{-- urgensi --}}
            @if($event->urgencyLabel())
            <span class="absolute right-3 top-3 rounded-full bg-primary px-2.5 py-1 text-[11px] font-bold text-on-primary shadow-e2">{{ $event->urgencyLabel() }}</span>
            @endif

            <div class="absolute inset-x-0 bottom-0 p-4">
                <div class="flex flex-wrap items-center gap-2 mb-1">
                    <span class="chip !bg-white/15 !text-white">{{ $event->isOnline() ? 'Online' : 'Offline' }}</span>
                    <span class="text-caption font-bold {{ $event->isFree() ? 'text-white' : 'text-amber' }}">{{ $event->isFree() ? 'GRATIS' : 'Rp'.number_format($event->price,0,',','.') }}</span>
                    @if($event->remainingSeats() !== null)<span class="text-caption text-white/80">· {{ $event->remainingSeats() }} kursi</span>@endif
                </div>
                <h3 class="text-h3 text-white leading-tight">{{ $event->title }}</h3>
                <p class="text-small text-white/75 mt-0.5">
                    {{ $event->starts_at?->translatedFormat('l, d M Y · H:i') }} WIB
                    @if($event->speaker) · {{ $event->speaker }}@endif
                </p>
            </div>
        </div>
    </a>
    @empty
    <div class="card p-10 text-center"><x-icon name="calendar" class="mx-auto mb-2 w-10 h-10 text-muted"/><p class="text-body text-muted">Tidak ada event {{ $filter ? 'untuk filter ini' : 'mendatang' }}.</p></div>
    @endforelse
</div>
@endif

@if($past->isNotEmpty())
<h2 class="text-label text-muted mb-3 mt-9">Sudah Berlalu</h2>
<div class="grid grid-cols-2 gap-4">
    @foreach($past as $event)
    <a href="{{ route('events.show', $event->slug) }}" class="card overflow-hidden opacity-75 hover:opacity-100 transition-opacity">
        <div class="aspect-[16/9] overflow-hidden bg-surface-2">
            @if($event->coverUrl())<img src="{{ $event->coverUrl() }}" class="h-full w-full object-cover grayscale" alt="">@endif
        </div>
        <div class="p-3"><h3 class="text-body font-semibold leading-tight line-clamp-2">{{ $event->title }}</h3>
        <p class="text-caption text-muted mt-1">{{ $event->starts_at?->translatedFormat('d M Y') }}</p></div>
    </a>
    @endforeach
</div>
@endif
@endsection