@extends('layouts.admin-apoteker')

@section('title', 'Manajemen Komentar Berita')

@section('content')
<div class="container mx-auto px-4 py-6">
    <h1 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">💬 Komentar Berita</h1>

    {{-- 🔎 Filter --}}
<form method="GET" class="mb-6 flex flex-wrap gap-4 items-center">
    <input type="text" name="search" value="{{ request('search') }}"
           placeholder="Cari nama atau komentar..."
           class="px-4 py-2 rounded border dark:bg-gray-800 dark:text-white dark:border-gray-600">

    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
        🔍 Cari
    </button>

    @if(request()->has('search'))
        <a href="{{ route('admin.comments.index') }}"
           class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded">
            🔄 Reset
        </a>
    @endif
</form>


    {{-- 🗃️ Tabel Komentar --}}
    <form id="bulk-delete-form" method="POST" action="{{ route('admin.comments.bulk-delete') }}">
        @csrf
        @method('DELETE')

        <div class="overflow-x-auto">
            <table class="min-w-full bg-white dark:bg-gray-900 rounded shadow text-sm">
                <thead class="bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200">
                    <tr>
                        <th class="px-4 py-2"><input type="checkbox" id="select-all"></th>
                        <th class="px-4 py-2">Pengguna</th>
                        <th class="px-4 py-2">Komentar</th>
                        <th class="px-4 py-2">Berita</th>
                        <th class="px-4 py-2">Tanggal</th>
                        <th class="px-4 py-2 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="text-gray-800 dark:text-gray-100">
                    @forelse ($comments as $comment)
                        <tr class="border-b dark:border-gray-700">
                            <td class="px-4 py-2">
                                <input type="checkbox" name="selected[]" value="{{ $comment->id }}">
                            </td>
                            <td class="px-4 py-2">{{ $comment->user->name }}</td>
                            <td class="px-4 py-2 max-w-sm truncate">{{ $comment->comment }}</td>
                            <td class="px-4 py-2">{{ $comment->news->title }}</td>
                            <td class="px-4 py-2 text-sm">{{ $comment->created_at->format('d-m-Y H:i') }}</td>
                            <td class="px-4 py-2 text-right">
                                <form id="delete-comment-{{ $comment->id }}" action="{{ route('admin.comments.destroy', $comment->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" onclick="confirmDelete({{ $comment->id }})" class="text-red-600 hover:text-red-800 text-sm">
                                        🗑️ Hapus
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-6 text-center text-gray-500 dark:text-gray-400">
                                Tidak ada komentar ditemukan.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- 🧹 Tombol Hapus Massal --}}
        @if ($comments->count())
            <div class="mt-4">
                <button type="button"
                        onclick="confirmBulkDelete()"
                        class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded">
                    🗑️ Hapus Terpilih
                </button>
            </div>
        @endif

        {{ $comments->links() }}
    </form>
</div>

{{-- ✅ SweetAlert & Select All --}}
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.all.min.js"></script>

<script>
    // Select All checkbox
    document.getElementById('select-all').addEventListener('change', function () {
        const checkboxes = document.querySelectorAll('input[name="selected[]"]');
        checkboxes.forEach(checkbox => checkbox.checked = this.checked);
    });

    // Hapus satuan
    function confirmDelete(id) {
        Swal.fire({
            title: 'Yakin hapus komentar ini?',
            text: "Tindakan ini tidak dapat dibatalkan.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-comment-' + id).submit();
            }
        });
    }

    // Bulk delete
    function confirmBulkDelete() {
        const checked = document.querySelectorAll('input[name="selected[]"]:checked');
        if (!checked.length) {
            Swal.fire('Tidak ada komentar yang dipilih!', '', 'info');
            return;
        }

        Swal.fire({
            title: 'Yakin ingin menghapus komentar terpilih?',
            text: "Semua komentar yang dicentang akan dihapus permanen.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('bulk-delete-form').submit();
            }
        });
    }
</script>
@endpush
@endsection