@extends('layouts.shell')
@section('title', $q ? 'Cari: '.$q : 'Pencarian')

@section('content')
<h1 class="text-h1 mb-4">Pencarian</h1>

<form method="GET" action="{{ route('search') }}" class="mb-7">
    <div class="relative">
        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-muted"><x-icon name="search" class="w-5 h-5"/></span>
        <input name="q" value="{{ $q }}" autofocus placeholder="Cari video, kelas, artikel, event, produk…"
               class="field !pl-12 !py-3.5 text-base">
    </div>
</form>

@if($q && mb_strlen($q) < 2)
    <p class="text-body text-muted">Ketik minimal 2 huruf.</p>
@elseif($q)
    <p class="text-small text-muted mb-5">{{ $total }} hasil untuk "<span class="text-ink font-semibold">{{ $q }}</span>"</p>

    @if($total === 0)
    <div class="card p-10 text-center">
        <x-icon name="search" class="mx-auto mb-2 w-10 h-10 text-muted"/>
        <p class="text-body text-muted">Tidak ada hasil. Coba kata kunci lain.</p>
    </div>
    @endif

    @php $canPremium = auth()->check() && (auth()->user()->isAdmin() || auth()->user()->hasActiveMembership()); @endphp

    @if($results['series']->isNotEmpty())
    <x-rail title="Kelas Berseri">
        @foreach($results['series'] as $s)
        <a href="{{ route('series.show', $s->slug) }}" class="poster poster-2x3 group">
            <img src="{{ $s->coverUrl() }}" class="h-full w-full object-cover" alt="">
            <div class="absolute inset-0 bg-gradient-to-t from-black/85 to-transparent"></div>
            <div class="absolute inset-x-0 bottom-0 p-2.5"><p class="text-[13px] font-semibold text-white line-clamp-2">{{ $s->title }}</p><p class="text-[11px] text-white/70">{{ $s->episodes_count }} eps</p></div>
        </a>
        @endforeach
    </x-rail>
    @endif

    @if($results['videos']->isNotEmpty())
    <x-rail title="Video">
        @foreach($results['videos'] as $v)
        <x-poster :href="route('video.show', $v->slug)" :image="$v->thumbnailUrl()" :title="$v->title"
            :subtitle="$v->category?->name" :duration="$v->duration"
            :locked="$v->is_premium && !$canPremium" ratio="16x9" />
        @endforeach
    </x-rail>
    @endif

    @if($results['articles']->isNotEmpty())
    <x-rail title="Artikel">
        @foreach($results['articles'] as $a)
        <a href="{{ route('articles.show', $a->slug) }}" class="poster !w-[280px] !aspect-auto bg-surface-1 border-outline/70 p-0">
            <div class="aspect-[16/9] overflow-hidden rounded-t-xl bg-surface-2"><img src="{{ $a->coverUrl() }}" class="h-full w-full object-cover" alt=""></div>
            <div class="p-3"><p class="text-h4 leading-tight line-clamp-2">{{ $a->title }}</p><p class="text-caption text-muted mt-1">{{ $a->readingMinutes() }} mnt baca</p></div>
        </a>
        @endforeach
    </x-rail>
    @endif

    @if($results['events']->isNotEmpty())
    <x-rail title="Event">
        @foreach($results['events'] as $e)
        <x-poster :href="route('events.show', $e->slug)" :image="$e->coverUrl()" :title="$e->title"
            :subtitle="$e->starts_at?->translatedFormat('d M Y')" ratio="16x9" />
        @endforeach
    </x-rail>
    @endif

    @if($results['products']->isNotEmpty())
    <x-rail title="Produk" :more="route('products.index')">
        @foreach($results['products'] as $p)
        <a href="{{ route('products.show', $p->slug) }}" class="poster poster-2x3 group">
            @if($p->image)<img src="{{ $p->image }}" class="h-full w-full object-cover" alt="">@else<div class="grid h-full w-full place-items-center bg-surface-2"><x-icon name="shopping" class="w-8 h-8 text-muted"/></div>@endif
            <div class="absolute inset-0 bg-gradient-to-t from-black/85 to-transparent"></div>
            <div class="absolute inset-x-0 bottom-0 p-2.5"><p class="text-[13px] font-semibold text-white line-clamp-2">{{ $p->title }}</p><p class="text-[11px] text-amber font-bold">Rp{{ number_format($p->price,0,',','.') }}</p></div>
        </a>
        @endforeach
    </x-rail>
    @endif
@else
    {{-- belum ada query: saran --}}
    <div class="card p-8 text-center">
        <x-icon name="search" class="mx-auto mb-2 w-10 h-10 text-primary"/>
        <p class="text-body text-muted">Cari kajian, kelas, artikel, event, atau produk.</p>
    </div>
@endif
@endsection