@extends('layouts.app')

@section('title', 'Berita & Artikel Website')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Manajemen Website</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Berita & Artikel</p>
            <h1 class="pkbm-dashboard__title">Berita & Artikel Website</h1>
            <p class="pkbm-dashboard__subtitle">Kelola publikasi informasi, artikel edukasi, dan pengumuman untuk website resmi PKBM.</p>
        </div>
    </header>

    @include('pkbm.website.partials.navigation', ['menus' => $menus])

    @if (session('success') || session('status'))
        <div role="status" class="settings-notice settings-notice--success">
            <i class="bi bi-check-circle-fill" aria-hidden="true"></i>
            <span>{{ session('success') ?? session('status') }}</span>
        </div>
    @endif

    @if (session('error'))
        <div role="alert" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>
            <span>{{ session('error') }}</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">Terjadi kesalahan validasi:</p>
                <ul class="mt-1 list-inside list-disc text-sm">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <!-- Statistik -->
    <div class="grid gap-4 sm:grid-cols-3">
        <div class="sp-card flex items-center gap-4 p-4">
            <span class="flex size-12 shrink-0 items-center justify-center rounded-xl bg-blue-100 text-xl text-blue-700">
                <i class="bi bi-newspaper" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Total Berita</span>
                <span class="text-2xl font-bold text-slate-800">{{ number_format($totalBerita, 0, ',', '.') }}</span>
            </div>
        </div>
        <div class="sp-card flex items-center gap-4 p-4">
            <span class="flex size-12 shrink-0 items-center justify-center rounded-xl bg-emerald-100 text-xl text-emerald-700">
                <i class="bi bi-check2-circle" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Diterbitkan (Publish)</span>
                <span class="text-2xl font-bold text-emerald-700">{{ number_format($totalPublish, 0, ',', '.') }}</span>
            </div>
        </div>
        <div class="sp-card flex items-center gap-4 p-4">
            <span class="flex size-12 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-xl text-slate-600">
                <i class="bi bi-pencil-square" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Draft / Konsep</span>
                <span class="text-2xl font-bold text-slate-700">{{ number_format($totalDraft, 0, ',', '.') }}</span>
            </div>
        </div>
    </div>

    <!-- Filter & Aksi -->
    <section class="sp-card p-4">
        <form method="GET" action="{{ route('pkbm.website.berita') }}" class="flex flex-wrap items-end justify-between gap-3">
            <div class="flex flex-wrap items-end gap-3">
                <label class="sp-form-label mb-0">Pencarian
                    <input type="text" name="q" value="{{ $search }}" placeholder="Judul atau kata kunci..." class="sp-form-control mt-1 px-3 py-2 text-sm min-w-[16rem]">
                </label>
                <label class="sp-form-label mb-0">Status
                    <select name="status" class="sp-form-control mt-1 px-3 py-2 text-sm">
                        <option value="">Semua Status</option>
                        <option value="publish" @selected($status === 'publish')>Publish</option>
                        <option value="draft" @selected($status === 'draft')>Draft</option>
                    </select>
                </label>
                <button type="submit" class="sp-btn-primary"><i class="bi bi-funnel" aria-hidden="true"></i>Filter</button>
                @if ($search !== '' || $status !== '')
                    <a href="{{ route('pkbm.website.berita') }}" class="sp-btn-secondary">Reset</a>
                @endif
            </div>

            <div class="flex flex-wrap items-center gap-2">
                <button type="button" data-open-create class="sp-btn-primary">
                    <i class="bi bi-plus-lg" aria-hidden="true"></i>Tulis Berita
                </button>
            </div>
        </form>
    </section>

    <!-- Tabel Berita -->
    <section class="sp-card overflow-hidden">
        <div class="sp-card-header">
            <h2 class="sp-section-title">Daftar Berita & Artikel</h2>
            <p class="mt-1 text-xs text-slate-500">Seluruh artikel berita yang diterbitkan pada portal website lembaga.</p>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[55rem]">
                <thead>
                    <tr>
                        <th class="w-14 text-center">No.</th>
                        <th class="w-24">Thumbnail</th>
                        <th>Judul Berita & Tanggal</th>
                        <th class="text-center w-28">Status</th>
                        <th class="text-right w-36">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($berita as $index => $item)
                        <tr>
                            <td class="text-center">{{ $index + 1 }}</td>
                            <td>
                                @if ($item->gambar && file_exists(public_path('uploads/berita/' . $item->gambar)))
                                    <img src="{{ asset('uploads/berita/' . $item->gambar) }}" alt="{{ $item->judul }}" class="size-14 rounded-lg object-cover border border-slate-200">
                                @else
                                    <div class="size-14 rounded-lg bg-slate-100 border border-slate-200 flex items-center justify-center text-slate-400">
                                        <i class="bi bi-image text-xl" aria-hidden="true"></i>
                                    </div>
                                @endif
                            </td>
                            <td>
                                <div class="font-semibold text-slate-900 leading-snug">{{ $item->judul }}</div>
                                <div class="flex items-center gap-2 text-xs text-slate-500 mt-1">
                                    <i class="bi bi-calendar3" aria-hidden="true"></i>
                                    <span>{{ \Carbon\Carbon::parse($item->created_at)->translatedFormat('d M Y, H:i') }}</span>
                                </div>
                            </td>
                            <td class="text-center">
                                @if ($item->status === 'publish')
                                    <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 border border-emerald-200">
                                        <i class="bi bi-check-circle-fill text-[10px]" aria-hidden="true"></i> Publish
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-600 border border-slate-200">
                                        <i class="bi bi-pause-circle text-[10px]" aria-hidden="true"></i> Draft
                                    </span>
                                @endif
                            </td>
                            <td class="text-right">
                                <div class="inline-flex items-center gap-1 justify-end">
                                    <button
                                        type="button"
                                        class="sp-btn-secondary px-2.5 py-1 text-xs"
                                        title="Edit Berita"
                                        data-edit-berita
                                        data-id="{{ $item->id }}"
                                        data-judul="{{ $item->judul }}"
                                        data-status="{{ $item->status }}"
                                        data-konten="{{ $item->konten }}"
                                        data-action="{{ route('pkbm.website.berita.update', $item->id) }}"
                                    >
                                        <i class="bi bi-pencil-square" aria-hidden="true"></i>Edit
                                    </button>
                                    <form method="POST" action="{{ route('pkbm.website.berita.destroy', $item->id) }}" class="inline" onsubmit="return confirm('Hapus berita ini? File gambar terkait juga akan terhapus.');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="sp-btn-secondary px-2.5 py-1 text-xs text-rose-600 hover:border-rose-200 hover:bg-rose-50" title="Hapus Berita">
                                            <i class="bi bi-trash" aria-hidden="true"></i>Hapus
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-4 py-8 text-center text-slate-500">
                                <i class="bi bi-newspaper text-3xl text-slate-300 block mb-2" aria-hidden="true"></i>
                                Belum ada artikel berita yang dibuat.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>

<!-- Modal Tulis Berita -->
<dialog id="modal-create-berita" class="pkbm-master-dialog pkbm-class-form-dialog pkbm-spp-payment-dialog" aria-labelledby="modal-create-berita-title">
    <form method="POST" action="{{ route('pkbm.website.berita.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div class="flex items-start gap-3">
                <span class="pkbm-class-form-dialog__icon" aria-hidden="true"><i class="bi bi-pencil-square"></i></span>
                <div>
                    <h2 id="modal-create-berita-title" class="sp-section-title">Tulis Berita Baru</h2>
                    <p class="mt-1 text-xs text-slate-500">Lengkapi formulir untuk mempublikasikan artikel berita di website.</p>
                </div>
            </div>
            <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
        </div>

        <div class="grid gap-4 p-5 sm:grid-cols-2">
            <div class="sm:col-span-2">
                <label for="create-judul" class="sp-form-label">Judul Berita <span class="text-rose-500">*</span></label>
                <input id="create-judul" name="judul" type="text" required maxlength="255" placeholder="Contoh: Peringatan Hari Pendidikan Nasional di PKBM" class="sp-form-control mt-1 px-3 py-2 text-sm">
            </div>

            <div>
                <label for="create-gambar" class="sp-form-label">Gambar Utama / Banner <span class="text-rose-500">*</span></label>
                <input id="create-gambar" name="gambar" type="file" accept="image/*" required class="sp-form-control mt-1 px-3 py-2 text-sm">
                <p class="text-[11px] text-slate-500 mt-1">Format: JPG, PNG, WEBP (Maks. 5 MB)</p>
            </div>

            <div>
                <label for="create-status" class="sp-form-label">Status Publikasi <span class="text-rose-500">*</span></label>
                <select id="create-status" name="status" required class="sp-form-control mt-1 px-3 py-2 text-sm">
                    <option value="publish">Publish (Tayang Langsung)</option>
                    <option value="draft">Draft (Simpan Konsep)</option>
                </select>
            </div>

            <div class="sm:col-span-2">
                <label for="create-konten" class="sp-form-label">Isi Konten Berita <span class="text-rose-500">*</span></label>
                <textarea id="create-konten" name="konten" rows="8" required placeholder="Tuliskan isi artikel atau pengumuman secara lengkap di sini..." class="sp-form-control mt-1 px-3 py-2 text-sm leading-relaxed"></textarea>
            </div>
        </div>

        <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
            <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary">
                <i class="bi bi-send" aria-hidden="true"></i>Terbitkan Berita
            </button>
        </div>
    </form>
</dialog>

<!-- Modal Edit Berita -->
<dialog id="modal-edit-berita" class="pkbm-master-dialog pkbm-class-form-dialog pkbm-spp-payment-dialog" aria-labelledby="modal-edit-berita-title">
    <form id="form-edit-berita" method="POST" action="" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div class="flex items-start gap-3">
                <span class="pkbm-class-form-dialog__icon" aria-hidden="true"><i class="bi bi-pencil-square"></i></span>
                <div>
                    <h2 id="modal-edit-berita-title" class="sp-section-title">Edit Berita</h2>
                    <p class="mt-1 text-xs text-slate-500">Perbarui judul, gambar, status publikasi, atau isi artikel.</p>
                </div>
            </div>
            <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
        </div>

        <div class="grid gap-4 p-5 sm:grid-cols-2">
            <div class="sm:col-span-2">
                <label for="edit-judul" class="sp-form-label">Judul Berita <span class="text-rose-500">*</span></label>
                <input id="edit-judul" name="judul" type="text" required maxlength="255" class="sp-form-control mt-1 px-3 py-2 text-sm">
            </div>

            <div>
                <label for="edit-gambar" class="sp-form-label">Ganti Gambar <span class="font-normal text-slate-400">(opsional)</span></label>
                <input id="edit-gambar" name="gambar" type="file" accept="image/*" class="sp-form-control mt-1 px-3 py-2 text-sm">
                <p class="text-[11px] text-slate-500 mt-1">Biarkan kosong jika tidak ingin mengganti gambar.</p>
            </div>

            <div>
                <label for="edit-status" class="sp-form-label">Status Publikasi <span class="text-rose-500">*</span></label>
                <select id="edit-status" name="status" required class="sp-form-control mt-1 px-3 py-2 text-sm">
                    <option value="publish">Publish (Tayang Langsung)</option>
                    <option value="draft">Draft (Simpan Konsep)</option>
                </select>
            </div>

            <div class="sm:col-span-2">
                <label for="edit-konten" class="sp-form-label">Isi Konten Berita <span class="text-rose-500">*</span></label>
                <textarea id="edit-konten" name="konten" rows="8" required class="sp-form-control mt-1 px-3 py-2 text-sm leading-relaxed"></textarea>
            </div>
        </div>

        <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
            <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary">
                <i class="bi bi-save" aria-hidden="true"></i>Simpan Perubahan
            </button>
        </div>
    </form>
</dialog>

@push('scripts')
<script>
(() => {
    const createModal = document.getElementById('modal-create-berita');
    const editModal = document.getElementById('modal-edit-berita');
    const editForm = document.getElementById('form-edit-berita');

    document.querySelector('[data-open-create]')?.addEventListener('click', () => {
        createModal?.showModal();
    });

    document.querySelectorAll('[data-edit-berita]').forEach((btn) => {
        btn.addEventListener('click', () => {
            editForm.action = btn.dataset.action;
            document.getElementById('edit-judul').value = btn.dataset.judul || '';
            document.getElementById('edit-status').value = btn.dataset.status || 'publish';
            document.getElementById('edit-konten').value = btn.dataset.konten || '';
            editModal?.showModal();
        });
    });

    document.querySelectorAll('[data-close-dialog]').forEach((btn) => {
        btn.addEventListener('click', () => {
            btn.closest('dialog')?.close();
        });
    });

    [createModal, editModal].forEach((dlg) => {
        dlg?.addEventListener('click', (event) => {
            if (event.target === dlg) {
                dlg.close();
            }
        });
    });
})();
</script>
@endpush
@endsection