@extends('layouts.app')

@section('title', 'Pengumuman')

@section('content')
@php
    $bulanId = [1 => 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
    $tanggal = function (?string $tgl) use ($bulanId): string {
        if (! $tgl) {
            return '-';
        }
        $ts = strtotime($tgl);

        return date('j', $ts).' '.$bulanId[(int) date('n', $ts)].' '.date('Y', $ts);
    };
@endphp
<div class="pkbm-master-page mx-auto max-w-4xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><span>Beranda</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Pengumuman</p>
            <h1 class="pkbm-dashboard__title">Pengumuman Lembaga</h1>
            <p class="pkbm-dashboard__subtitle">Informasi dan pemberitahuan terbaru untuk {{ $name }}.</p>
        </div>
        <div class="pkbm-period-chip">
            <span class="pkbm-period-chip__icon"><i class="bi bi-megaphone" aria-hidden="true"></i></span>
            <span>
                <span class="pkbm-period-chip__label">Total pengumuman</span>
                <span class="pkbm-period-chip__value">{{ $announcements->count() }} pengumuman aktif</span>
            </span>
        </div>
    </header>

    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>
            <div>
                <p class="font-semibold">Permintaan belum dapat diproses.</p>
                <ul class="mt-1 list-inside list-disc">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    @forelse ($announcements as $announcement)
        <article id="pengumuman-{{ $announcement->id }}" class="sp-card overflow-hidden scroll-mt-24">
            <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
                <div class="flex items-center gap-3">
                    <span class="settings-panel-heading__icon"><i class="bi bi-megaphone" aria-hidden="true"></i></span>
                    <h2 class="sp-section-title">{{ $announcement->judul }}</h2>
                </div>
                <time class="text-xs text-slate-500" datetime="{{ $announcement->tanggal }}">
                    <i class="bi bi-calendar3 me-1" aria-hidden="true"></i>{{ $tanggal($announcement->tanggal) }}
                </time>
            </div>
            <div class="p-5">
                <p class="whitespace-pre-line text-sm leading-6 text-slate-600">{{ $announcement->isi }}</p>
                @if ($announcement->lampiran)
                    <a href="{{ route('pkbm.announcement.attachment', $announcement->lampiran) }}" class="sp-btn-secondary mt-4">
                        <i class="bi bi-paperclip" aria-hidden="true"></i>Lihat lampiran dokumen
                    </a>
                @endif
            </div>
        </article>
    @empty
        <div class="sp-card p-10 text-center">
            <span class="mx-auto grid size-12 place-items-center rounded-full bg-slate-100 text-slate-400"><i class="bi bi-megaphone" aria-hidden="true"></i></span>
            <p class="mt-4 text-sm text-slate-500">Belum ada pengumuman untuk lembaga Anda.</p>
        </div>
    @endforelse
</div>
@endsection