@extends('layouts.shell')
@section('title', 'Al-Quran')
@section('meta_description', 'Baca Al-Quran 30 juz lengkap: teks Arab, transliterasi Latin, terjemahan Indonesia (Kemenag), dan tafsir. Gratis di Quran Review.')

@section('content')
<header class="mb-5">
    <span class="chip-primary mb-2"><x-icon name="book" class="w-3.5 h-3.5"/> Al-Quran</span>
    <h1 class="text-h1">Al-Quran Digital</h1>
    <p class="text-body text-muted mt-1">114 surah · teks Arab, Latin, terjemahan & tafsir (Kemenag).</p>
</header>

@if($lastRead)
<a href="{{ route('quran.show', $lastRead->number) }}" class="card flex items-center gap-3 p-4 mb-5 border-primary/30 bg-primary/5">
    <span class="grid h-10 w-10 place-items-center rounded-full bg-primary text-on-primary"><x-icon name="play" class="w-5 h-5" :fill="true"/></span>
    <div class="flex-1"><p class="text-caption text-muted">Lanjutkan membaca</p><p class="text-h4">{{ $lastRead->number }}. {{ $lastRead->name_latin }}</p></div>
    <x-icon name="chevron-right" class="w-5 h-5 text-muted"/>
</a>
@endif

@php
$data = $surahs->map(fn ($s) => [
    'number' => $s->number, 'name' => $s->name_latin, 'arti' => $s->arti,
    'ayah' => $s->ayah_count, 'rev' => $s->revelation, 'ar' => $s->name_ar,
    'url' => route('quran.show', $s->number),
    'key' => strtolower($s->name_latin.' '.$s->arti.' '.$s->number),
])->values();
@endphp

<div x-data="{
        q: @js($q),
        all: @js($data),
        get list() {
            const t = this.q.toLowerCase().trim();
            return t === '' ? this.all : this.all.filter(s => s.key.includes(t));
        }
    }">
    {{-- Live search instan --}}
    <div class="relative mb-5">
        <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 x-model="q" type="search" placeholder="Cari surah (nama / arti / nomor)…" class="field !pl-12 !py-3" autofocus>
        <button x-show="q" @click="q=''" x-cloak class="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-ink" aria-label="Bersihkan">✕</button>
    </div>

    <div class="grid gap-3 sm:grid-cols-2">
        <template x-for="s in list" :key="s.number">
            <a :href="s.url" class="card flex items-center gap-3 p-4 hover:shadow-e3 transition-shadow">
                <span class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-primary/10 text-primary font-bold" x-text="s.number"></span>
                <div class="min-w-0 flex-1">
                    <h3 class="text-h4 truncate" x-text="s.name"></h3>
                    <p class="text-caption text-muted"><span x-text="s.arti"></span> · <span x-text="s.ayah"></span> ayat · <span x-text="s.rev"></span></p>
                </div>
                <span class="font-arabic text-xl text-ink shrink-0" x-text="s.ar"></span>
            </a>
        </template>
    </div>

    <div x-show="list.length === 0" x-cloak class="card p-8 text-center mt-3">
        <p class="text-body text-muted">Surah tidak ditemukan untuk "<span x-text="q"></span>".</p>
    </div>
</div>
@endsection