@extends('layouts.app')

@section('title', 'Manajemen Ulasan')

@section('content')
    <div class="container mx-auto py-4">
        <!-- Header -->
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold">Manajemen Ulasan</h3>
        </div>

        <!-- Alert sukses -->
        @if (session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4" role="alert">
                {{ session('success') }}
            </div>
        @endif

        <!-- Tabel Ulasan -->
        <div class="bg-white rounded-lg shadow-sm">
            <div class="p-4 overflow-x-auto">
                <table class="w-full table-fixed text-left border border-gray-300 border-collapse">
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="p-2 border border-gray-300 w-[50px] text-center">Nomor</th>
                            <th class="p-2 border border-gray-300 w-[150px] text-center">Nama</th>
                            <th class="p-2 border border-gray-300 w-[120px] text-center">Kota</th>
                            <th class="p-2 border border-gray-300 w-[120px] text-center">Rating</th>
                            <th class="p-2 border border-gray-300 w-[350px] text-center">Pesan</th>
                            <th class="p-2 border border-gray-300 w-[120px] text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($reviews as $key => $review)
                            <tr>
                                <td class="p-2 border border-gray-300 text-center truncate">{{ $key + 1 }}</td>
                                <td class="p-2 border border-gray-300 truncate">{{ $review->name }}</td>
                                <td class="p-2 border border-gray-300 truncate">{{ $review->city }}</td>
                                <td class="p-2 border border-gray-300 text-center">
                                    @for ($s = 1; $s <= 5; $s++)
                                        <i
                                            class="bi {{ $s <= $review->rating ? 'bi-star-fill text-yellow-500' : 'bi-star text-gray-400' }}"></i>
                                    @endfor
                                </td>
                                <td class="p-2 border border-gray-300 truncate" title="{{ $review->message }}">
                                    {{ $review->message }}
                                </td>
                                <td class="p-2 border border-gray-300 text-center">
                                    <div class="flex justify-center space-x-2">
                                        <button class="text-red-600 hover:underline flex items-center btn-delete"
                                            data-action="{{ route('admin.reviews.destroy', $review->id) }}"
                                            data-name="{{ $review->name }}">
                                            <i class="bi bi-trash mr-1"></i> Hapus
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="p-2 text-center text-gray-500 border border-gray-300">
                                    Belum ada ulasan
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal Konfirmasi Hapus Tailwind -->
    <div id="modalDelete" class="fixed inset-0 hidden items-center justify-center z-50">
        <div class="absolute inset-0 bg-black opacity-50" id="modalDeleteOverlay"></div>
        <div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
            <form id="deleteForm" method="POST">
                @csrf
                @method('DELETE')
                <div class="p-4 border-b">
                    <h5 class="text-lg font-medium">Hapus Ulasan</h5>
                </div>
                <div class="p-4">
                    Apakah Anda yakin ingin menghapus ulasan dari <strong id="deleteName">—</strong>?
                </div>
                <div class="p-4 border-t flex justify-end space-x-2">
                    <button type="button" id="closeDeleteModal"
                        class="bg-gray-300 text-black px-3 py-1 rounded">Batal</button>
                    <button type="submit" class="bg-red-600 text-white px-3 py-1 rounded">Ya, Hapus</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const modal = document.getElementById('modalDelete');
            const overlay = document.getElementById('modalDeleteOverlay');
            const closeBtn = document.getElementById('closeDeleteModal');
            const deleteForm = document.getElementById('deleteForm');
            const deleteName = document.getElementById('deleteName');

            document.querySelectorAll('.btn-delete').forEach(btn => {
                btn.addEventListener('click', () => {
                    deleteForm.action = btn.dataset.action;
                    deleteName.textContent = btn.dataset.name || 'pengguna ini';
                    modal.classList.remove('hidden');
                    modal.classList.add('flex');
                });
            });

            const closeModal = () => {
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            }

            closeBtn.addEventListener('click', closeModal);
            overlay.addEventListener('click', closeModal);
        });
    </script>
@endsection