@extends('layouts.shell')
@section('title', 'Jadwal Sholat '.$activeCity)
@section('meta_description', 'Jadwal sholat hari ini untuk '.$activeCity.' — Subuh, Dzuhur, Ashar, Maghrib, Isya. Metode Kemenag RI.')

@section('content')
<header class="mb-6 text-center">
    <span class="mx-auto mb-3 grid h-14 w-14 place-items-center rounded-2xl bg-primary/10"><x-icon name="mosque" class="w-7 h-7 text-primary"/></span>
    <h1 class="text-h1">Jadwal Sholat</h1>
    <p class="text-body text-muted mt-1">{{ now()->translatedFormat('l, d F Y') }}@if(!empty($prayer['hijri'])) · {{ $prayer['hijri'] }}@endif</p>
</header>

{{-- Pilih kota (autocomplete ketik) --}}
<form method="GET" action="{{ route('prayer.index') }}" class="mb-6">
    <label class="label">Ketik nama kota / kabupaten</label>
    <div class="flex gap-2">
        <div class="relative flex-1">
            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-muted"><x-icon name="location" class="w-5 h-5"/></span>
            <input name="kota" list="citylist" value="{{ $activeCity }}" autocomplete="off"
                   placeholder="cth: Yogyakarta, Sleman, Bandung…" class="field !pl-12"
                   onchange="if([...this.list.options].some(o=>o.value===this.value)) this.form.submit()">
            <datalist id="citylist">
                @foreach($cities as $c)<option value="{{ $c }}">@endforeach
            </datalist>
        </div>
        <button class="btn-filled shrink-0">Tampilkan</button>
    </div>
    <div class="mt-2 flex flex-wrap gap-1.5">
        @foreach(\App\Services\PrayerTimeService::POPULAR as $c)
        <a href="{{ route('prayer.index', ['kota' => $c]) }}" class="chip {{ $activeCity === $c ? '!bg-primary/10 !text-primary' : '' }}">{{ $c }}</a>
        @endforeach
    </div>
</form>

{{-- Kartu utama: sholat berikutnya --}}
@if($next)
<div class="card surface-pattern relative overflow-hidden p-6 text-center mb-5">
    <p class="relative text-small text-muted">Sholat berikutnya</p>
    <p class="relative text-display text-primary leading-none my-1">{{ $next['name'] }}</p>
    <p class="relative text-h2">{{ $next['time'] }} <span class="text-body text-muted">WIB</span></p>
</div>
@endif

{{-- Semua waktu --}}
<div class="card divide-y divide-outline overflow-hidden">
    @foreach($prayer['times'] as $name => $time)
    @php $active = ($next['name'] ?? '') === $name; @endphp
    <div class="flex items-center justify-between px-5 py-4 {{ $active ? 'bg-primary/5' : '' }}">
        <span class="flex items-center gap-2 {{ $active ? 'text-primary font-bold' : 'font-semibold' }}">
            @if($active)<x-icon name="mosque" class="w-5 h-5"/>@endif {{ $name }}
        </span>
        <span class="text-h4 {{ $active ? 'text-primary' : '' }}">{{ $time }}</span>
    </div>
    @endforeach
</div>

<p class="mt-4 text-center text-caption text-muted">Sumber: Aladhan API · metode Kementerian Agama RI. Waktu dapat berbeda tipis dengan jadwal setempat.</p>

@guest
<div class="card mt-6 p-5 text-center">
    <p class="text-body text-muted">Dapatkan akses kajian, kelas, & event Islami lengkap.</p>
    <a href="{{ route('membership.index') }}" class="btn-filled mt-3">Jadi Member</a>
</div>
@endguest
@endsection