@extends('layouts.shell')
@section('title', $surah->number.'. '.$surah->name_latin.' — Al-Quran')
@section('meta_description', 'Surah '.$surah->name_latin.' ('.$surah->arti.'), '.$surah->ayah_count.' ayat. Teks Arab, Latin, terjemahan Indonesia & tafsir.')

@section('jsonld')
<script type="application/ld+json">{!! json_encode([
    '@context'=>'https://schema.org','@type'=>'CreativeWork','name'=>'Surah '.$surah->name_latin,
    'inLanguage'=>'ar','about'=>$surah->arti,'url'=>route('quran.show',$surah->number),
], JSON_UNESCAPED_SLASHES) !!}</script>
@endsection

@section('content')
<a href="{{ route('quran.index') }}" class="mb-4 inline-flex items-center gap-1 text-small text-muted hover:text-primary">
    <x-icon name="arrow-left" class="w-4 h-4"/> Daftar Surah
</a>

{{-- Header surah --}}
<div class="card surface-pattern relative overflow-hidden p-6 text-center mb-6" x-data="{ desc: false }">
    <p class="relative font-arabic text-3xl text-ink">{{ $surah->name_ar }}</p>
    <h1 class="relative text-h2 mt-2">{{ $surah->number }}. {{ $surah->name_latin }}</h1>
    <p class="relative text-body text-muted">{{ $surah->arti }} · {{ $surah->ayah_count }} ayat · {{ $surah->revelation }}</p>
    @if($surah->description)
    <button @click="desc=!desc" class="relative mt-3 text-small font-semibold text-primary" x-text="desc ? 'Tutup' : 'Tentang surah ini'"></button>
    <p x-show="desc" x-collapse class="relative mt-2 text-small text-muted text-left prose-body mx-auto">{{ $surah->description }}</p>
    @endif
</div>

{{-- Bismillah (kecuali At-Taubah/9; Al-Fatihah sudah memuatnya sbg ayat 1) --}}
@if(!in_array($surah->number, [1, 9]))
<p class="font-arabic text-2xl text-center text-ink mb-6">بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ</p>
@endif

{{-- Ayat --}}
<div class="space-y-5">
    @foreach($surah->ayahs as $ayah)
    <div class="card p-5" id="ayat-{{ $ayah->number }}" x-data="{ tafsir: false }">
        <div class="flex items-center justify-between mb-3">
            <span class="grid h-8 w-8 place-items-center rounded-full bg-primary/10 text-primary text-sm font-bold">{{ $ayah->number }}</span>
            <div class="flex items-center gap-1">
                @if($ayah->tafsir)
                <button @click="tafsir=!tafsir" class="grid h-9 w-9 place-items-center rounded-full text-muted hover:bg-ink/5" aria-label="Tafsir"><x-icon name="book" class="w-5 h-5"/></button>
                @endif
                <x-bookmark-button type="ayah" :id="$ayah->id" :model="$ayah"/>
            </div>
        </div>

        <p dir="rtl" class="font-arabic text-3xl leading-[2.2] text-ink text-right">{{ $ayah->arabic }}</p>
        @if($ayah->latin)<p class="mt-3 text-body text-primary/90 italic">{{ $ayah->latin }}</p>@endif
        <p class="mt-2 text-body text-muted leading-relaxed">{{ $ayah->translation }}</p>

        @if($ayah->tafsir)
        <div x-show="tafsir" x-collapse x-cloak class="mt-4 rounded-xl bg-surface-2 p-4">
            <p class="text-label text-muted mb-1.5">Tafsir (Kemenag)</p>
            <div class="text-small text-ink leading-relaxed whitespace-pre-line">{{ $ayah->tafsir }}</div>
        </div>
        @endif
    </div>
    @endforeach
</div>

{{-- Navigasi surah --}}
<div class="mt-7 flex gap-3">
    @if($prev)<a href="{{ route('quran.show', $prev->number) }}" class="btn-outline flex-1"><x-icon name="arrow-left" class="w-5 h-5"/> {{ $prev->name_latin }}</a>@endif
    @if($next)<a href="{{ route('quran.show', $next->number) }}" class="btn-outline flex-1 justify-end">{{ $next->name_latin }} <x-icon name="chevron-right" class="w-5 h-5"/></a>@endif
</div>
@endsection