@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-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><span>Admin Kabupaten</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Pengumuman</p>
            <h1 class="pkbm-dashboard__title">Manajemen Pengumuman</h1>
            <p class="pkbm-dashboard__subtitle">Kelola informasi dan tagihan iuran untuk lembaga PKBM.</p>
        </div>
        <div class="flex shrink-0 flex-wrap gap-2">
            <form method="POST" action="{{ route('fk.pengumuman.iuran') }}" onsubmit="return confirm('Buat pengumuman iuran untuk semua PKBM?')">
                @csrf
                <button type="submit" class="sp-btn-secondary">
                    <i class="bi bi-cash-coin" aria-hidden="true"></i>Buat Tagihan Iuran
                </button>
            </form>
            <button type="button" class="sp-btn-primary" data-open-create>
                <i class="bi bi-plus-circle" aria-hidden="true"></i>Tambah Baru
            </button>
        </div>
    </header>

    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--{{ session('status')['type'] ?? 'success' }}">
            <i class="bi {{ (session('status')['type'] ?? 'success') === 'success' ? 'bi-check-circle-fill' : 'bi-exclamation-circle-fill' }}" aria-hidden="true"></i>
            <span>{{ session('status')['message'] }}</span>
        </div>
    @endif
    @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

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
            <div class="flex items-center gap-3">
                <h2 class="sp-section-title">Daftar Pengumuman</h2>
                <span class="inline-flex rounded-full bg-sky-50 px-3 py-1 text-xs font-semibold text-sky-700">{{ $pengumuman->count() }}</span>
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[48rem]">
                <thead>
                    <tr>
                        <th scope="col" class="w-12 text-center">No</th>
                        <th scope="col">Judul &amp; Tujuan</th>
                        <th scope="col">Isi Pesan</th>
                        <th scope="col">Distribusi</th>
                        <th scope="col" class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($pengumuman as $row)
                        <tr>
                            <td class="text-center align-top text-slate-500">{{ $loop->iteration }}</td>
                            <th scope="row" class="font-normal align-top">
                                <div class="font-semibold text-slate-800">{{ $row->judul }}</div>
                                <div class="mt-0.5 text-xs text-sky-600">
                                    <i class="bi bi-people me-1" aria-hidden="true"></i>{{ $row->tujuan === 'semua' ? 'Semua PKBM' : ($names[$row->tujuan] ?? 'Tidak diketahui') }}
                                </div>
                                <div class="mt-0.5 text-xs text-slate-400">
                                    <i class="bi bi-calendar3 me-1" aria-hidden="true"></i>{{ $tanggal($row->tanggal) }}
                                </div>
                            </th>
                            <td class="align-top text-sm text-slate-500">
                                {{ \Illuminate\Support\Str::limit($row->isi, 150) }}
                                @if ($row->lampiran)
                                    <span class="mt-1 block text-xs text-slate-400"><i class="bi bi-paperclip" aria-hidden="true"></i>{{ $row->lampiran }}</span>
                                @endif
                            </td>
                            <td class="align-top">
                                @if ($row->tampil_dashboard === 'ya')
                                    <span class="mb-1 inline-flex rounded-full bg-sky-50 px-2.5 py-1 text-xs font-semibold text-sky-700"><i class="bi bi-desktop me-1" aria-hidden="true"></i>Dashboard</span>
                                @endif
                                @if ($row->kirim_wa === 'ya')
                                    <span class="inline-flex rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700"><i class="bi bi-whatsapp me-1" aria-hidden="true"></i>WhatsApp</span>
                                @endif
                            </td>
                            <td class="text-right align-top">
                                <div class="inline-flex items-center gap-1">
                                    <button type="button" class="settings-icon-action" data-edit="{{ $row->id }}" aria-label="Ubah" title="Ubah">
                                        <i class="bi bi-pencil-square" aria-hidden="true"></i>
                                    </button>
                                    @if ($row->kirim_wa === 'ya')
                                        <a href="https://wa.me/?text={{ urlencode($row->isi) }}" target="_blank" rel="noopener" class="settings-icon-action text-emerald-600" aria-label="Kirim WA" title="Kirim via WhatsApp">
                                            <i class="bi bi-whatsapp" aria-hidden="true"></i>
                                        </a>
                                    @endif
                                    <form method="POST" action="{{ route('fk.pengumuman.destroy', $row->id) }}" onsubmit="return confirm('Yakin hapus?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="settings-icon-action text-rose-600" aria-label="Hapus" title="Hapus">
                                            <i class="bi bi-trash" aria-hidden="true"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="py-12 text-center text-sm text-slate-500">Belum ada pengumuman.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>

<dialog id="create-pengumuman-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="create-pengumuman-title">
    <form method="POST" action="{{ route('fk.pengumuman.store') }}" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="_form" value="create">
        @include('fk.pengumuman.partials.form-fields', ['mode' => 'create', 'item' => null, 'institutions' => $institutions])
    </form>
</dialog>

@foreach ($pengumuman as $row)
    <dialog id="edit-pengumuman-{{ $row->id }}" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="edit-pengumuman-title-{{ $row->id }}">
        <form method="POST" action="{{ route('fk.pengumuman.update', $row->id) }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <input type="hidden" name="_form" value="edit">
            <input type="hidden" name="_id" value="{{ $row->id }}">
            @include('fk.pengumuman.partials.form-fields', ['mode' => 'edit', 'item' => $row, 'institutions' => $institutions])
        </form>
    </dialog>
@endforeach
@endsection

@push('scripts')
    <script>
        const createDialog = document.querySelector('#create-pengumuman-dialog');
        document.querySelector('[data-open-create]')?.addEventListener('click', () => createDialog.showModal());
        document.querySelectorAll('[data-edit]').forEach((button) => {
            button.addEventListener('click', () => document.querySelector(`#edit-pengumuman-${button.dataset.edit}`)?.showModal());
        });
        document.querySelectorAll('[data-close-dialog]').forEach((button) => {
            button.addEventListener('click', () => button.closest('dialog').close());
        });

        @if (old('_form') === 'create')
            createDialog.showModal();
        @elseif (old('_form') === 'edit' && old('_id'))
            document.querySelector(`#edit-pengumuman-{{ old('_id') }}`)?.showModal();
        @endif
    </script>
@endpush