@extends('layout.layout')
@php
    $title    = 'Daftar Berita & Pengumuman';
    $subTitle = 'Manajemen Berita';
    $script   = '<script src="' . asset('assets/js/data-table.js') . '"></script>';
@endphp

@section('content')
    <div class="grid grid-cols-12">
        <div class="col-span-12">
            <div class="card border-0 overflow-hidden">
                <div class="card-header flex justify-between items-center bg-white dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700">
                    <h6 class="card-title mb-0 text-lg">Data Berita</h6>
                    
                    <a href="{{ route('news.create') }}"
                        class="btn btn-primary text-sm px-3 py-3 rounded-lg flex items-center gap-2">
                        <iconify-icon icon="ic:baseline-plus" class="icon text-xl line-height-1"></iconify-icon>
                        Tambah Berita
                    </a>
                    
                </div>

                <div class="card-body">
                    <table id="selection-table" class="border border-neutral-200 dark:border-neutral-600 rounded-lg border-separate">
                        <thead>
                            <tr>
                                <th scope="col" class="text-neutral-800 dark:text-white">No.</th>
                                <th scope="col" class="text-neutral-800 dark:text-white">Judul Berita</th>
                                <th scope="col" class="text-neutral-800 dark:text-white">Isi Singkat</th>
                                <th scope="col" class="text-neutral-800 dark:text-white">Tgl. Dibuat</th>
                                <th scope="col" class="text-neutral-800 dark:text-white">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($newsData as $index => $item)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    {{-- Ubah pemanggilan menjadi Object -> --}}
                                    <td class="font-medium text-neutral-800 dark:text-white">{{ $item->title }}</td>
                                    <td>{{ Str::limit($item->content, 50) }}</td>
                                    
                                    {{-- Tanggal bisa diformat langsung menggunakan Carbon --}}
                                    <td>{{ $item->created_at->format('d M Y') }}</td>
                                    
                                    <td>
                                        <div class="flex items-center gap-2">
                                            {{-- Tombol Edit Tetap --}}
                                            <a href="{{ route('news.edit', $item->id) }}"
                                            class="w-8 h-8 bg-primary-50 text-primary-600 rounded-full inline-flex items-center justify-center">
                                                <iconify-icon icon="lucide:edit"></iconify-icon>
                                            </a>

                                            {{-- Tombol Hapus: Sekarang memanggil fungsi hapusData --}}
                                            <button type="button" 
                                                onclick="hapusData('{{ $item->id }}', '{{ $item->title }}')"
                                                class="w-8 h-8 bg-red-50 text-red-600 rounded-full inline-flex items-center justify-center">
                                                <iconify-icon icon="lucide:trash-2"></iconify-icon>
                                            </button>

                                            {{-- Form Hapus: Diberi ID khusus dan dibuat tersembunyi (hidden) --}}
                                            <form id="form-hapus-{{ $item->id }}" action="{{ route('news.destroy', $item->id) }}" method="POST" class="hidden">
                                                @csrf 
                                                @method('DELETE')
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-4 text-gray-500">Belum ada berita.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection