@extends('layouts.app')
@section('content')
<section class="mb-6 rounded-[2rem] bg-gradient-to-br from-slate-950 via-teal-950 to-emerald-800 p-8 text-white shadow-soft"><span class="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2 text-sm font-bold"><i class="fa-solid fa-rocket text-emerald-300"></i> Informasi Program RT</span><h2 class="mt-5 text-4xl font-black tracking-tight">Rencana, Progress, dan Laporan Kegiatan</h2><p class="mt-3 max-w-2xl text-slate-300">Transparansi program RT agar warga bisa melihat arah kegiatan dan realisasinya.</p></section>
<div class="grid gap-5 md:grid-cols-2 lg:grid-cols-3">@forelse($programs as $p)<article class="card group overflow-hidden transition hover:-translate-y-1 hover:shadow-soft"><div class="h-2 bg-gradient-to-r from-teal-500 via-emerald-500 to-cyan-500"></div><div class="p-6"><div class="mb-4 flex items-center justify-between gap-3"><span class="badge"><i class="fa-solid fa-circle-dot"></i>{{ method_exists($p,'statusLabel') ? $p->statusLabel() : $p->status }}</span><span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-black text-slate-500"><i class="fa-solid fa-house-flag text-teal-600"></i> RT</span></div><div class="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-teal-100 to-emerald-100 text-2xl text-emerald-700 ring-1 ring-teal-100"><i class="fa-solid fa-clipboard-list"></i></div><h3 class="text-2xl font-black text-slate-950">{{ $p->title }}</h3><p class="mt-3 min-h-[72px] leading-7 text-slate-500">{{ $p->description }}</p><div class="mt-5 rounded-2xl bg-slate-50 p-4 ring-1 ring-slate-100"><p class="text-xs font-bold uppercase tracking-wider text-slate-400"><i class="fa-solid fa-wallet text-teal-600"></i> Anggaran</p><p class="mt-1 text-xl font-black text-slate-950">Rp {{ number_format($p->budget,0,',','.') }}</p></div><a class="mt-5 btn-primary w-full" href="{{ route('programs.show',$p) }}">Lihat Detail <i class="fa-solid fa-arrow-right text-xs"></i></a></div></article>@empty<div class="card col-span-full p-8 text-center"><i class="fa-solid fa-folder-open text-3xl text-slate-400"></i><h3 class="mt-4 text-2xl font-black">Belum ada program RT</h3></div>@endforelse</div>
@endsection