@extends('layouts.app')

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

@section('content')
<div class="container mx-auto py-6">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold">Daftar Ulasan</h2>
    </div>

    <!-- Flash Message -->
    @if(session('success'))
        <div class="mb-4 p-3 rounded bg-green-100 text-green-800 border border-green-300 shadow">
            {{ session('success') }}
        </div>
    @endif

    <!-- Tabel -->
    <div class="bg-white rounded-lg shadow overflow-x-auto">
        <table class="w-full border border-gray-200 text-left border-collapse">
            <thead class="bg-gray-100">
                <tr>
                    <th class="px-3 py-2 border border-gray-200 w-[50px] text-center">No.</th>
                    <th class="px-3 py-2 border border-gray-200">Nama</th>
                    <th class="px-3 py-2 border border-gray-200">Kota</th>
                    <th class="px-3 py-2 border border-gray-200 text-center">Penilaian</th>
                    <th class="px-3 py-2 border border-gray-200">Pesan</th>
                    <th class="px-3 py-2 border border-gray-200 text-center w-[120px]">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($reviews as $index => $review)
                    <tr class="hover:bg-gray-50">
                        <td class="px-3 py-2 border border-gray-200 text-center">{{ $index + 1 }}</td>
                        <td class="px-3 py-2 border border-gray-200">{{ $review->name }}</td>
                        <td class="px-3 py-2 border border-gray-200">{{ $review->city }}</td>
                        <td class="px-3 py-2 border border-gray-200 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="px-3 py-2 border border-gray-200">{{ $review->message }}</td>
                        <td class="px-3 py-2 border border-gray-200 text-center">
                            <div class="flex justify-center gap-2">
                                <form action="{{ route('admin.reviews.destroy', $review->id) }}" method="POST" onsubmit="return confirm('Hapus ulasan dari {{ $review->name }}?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="px-3 py-1 rounded bg-red-600 text-white text-sm hover:bg-red-700 flex items-center">
                                        <i class="bi bi-trash mr-1"></i> Hapus
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-3 py-4 text-center text-gray-500 border border-gray-200">
                            Belum ada ulasan.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </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