{{-- resources/views/admin/berita/kategori.blade.php --}}
@extends('admin.layouts.app') 
@section('title', 'Kategori Berita')
@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">Kategori Artikel</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola kategori pengelompokan berita dan informasi.</p>
        </div>
        <button class="btn btn-primary btn-sm d-flex align-items-center gap-2 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTambah">
            <i class="bi bi-plus-circle"></i> Tambah Kategori
        </button>
    </div>

    @if($errors->any())
        <div class="alert alert-danger border-0 shadow-sm">
            <ul class="mb-0">@foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach</ul>
        </div>
    @endif

    <div class="card shadow-sm border-0">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center" width="5%">NO</th>
                            <th width="40%">NAMA KATEGORI</th>
                            <th width="25%">SLUG (SEO)</th>
                            <th class="text-center" width="15%">TOTAL BERITA</th>
                            <th class="text-center" width="15%">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($kategoris as $index => $kat)
                        <tr>
                            <td class="text-center text-muted">{{ $index + 1 }}</td>
                            <td class="fw-bold text-primary">{{ $kat->nama_kategori }}</td>
                            <td class="text-muted">{{ $kat->slug }}</td>
                            <td class="text-center"><span class="badge bg-secondary">{{ $kat->beritas_count }} Artikel</span></td>
                            <td class="text-center">
                                <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#modalEdit{{ $kat->id }}"><i class="bi bi-pencil-square"></i></button>
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmDelete({{ $kat->id }}, '{{ $kat->nama_kategori }}')"><i class="bi bi-trash"></i></button>
                                <form id="delete-form-{{ $kat->id }}" action="{{ route('admin.kategori-berita.destroy', $kat->id) }}" method="POST" class="d-none">@csrf @method('DELETE')</form>
                            </td>
                        </tr>

                        <!-- Modal Edit -->
                        <div class="modal fade" id="modalEdit{{ $kat->id }}" tabindex="-1">
                            <div class="modal-dialog">
                                <form action="{{ route('admin.kategori-berita.update', $kat->id) }}" method="POST">
                                    @csrf @method('PUT')
                                    <div class="modal-content">
                                        <div class="modal-header"><h5 class="modal-title fw-bold">Edit Kategori</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                                        <div class="modal-body">
                                            <div class="mb-3">
                                                <label class="form-label">Nama Kategori</label>
                                                <input type="text" class="form-control" name="nama_kategori" value="{{ $kat->nama_kategori }}" required>
                                            </div>
                                        </div>
                                        <div class="modal-footer"><button type="submit" class="btn btn-primary">Simpan</button></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        @empty
                        <tr><td colspan="5" class="text-center py-4 text-muted">Belum ada kategori.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Tambah -->
<div class="modal fade" id="modalTambah" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('admin.kategori-berita.store') }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header"><h5 class="modal-title fw-bold">Tambah Kategori</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nama Kategori</label>
                        <input type="text" class="form-control" name="nama_kategori" required>
                    </div>
                </div>
                <div class="modal-footer"><button type="submit" class="btn btn-primary">Simpan</button></div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmDelete(id, nama) {
        Swal.fire({ title: 'Hapus Kategori?', text: "Hapus " + nama + "?", icon: 'warning', showCancelButton: true, confirmButtonText: 'Ya, Hapus!' }).then((res) => {
            if (res.isConfirmed) document.getElementById('delete-form-' + id).submit();
        });
    }
    @if(session('success')) Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{{ session('success') }}', timer: 2000, showConfirmButton: false }); @endif
</script>
@endpush
@endsection