@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>
        <button class="bg-blue-600 text-white px-3 py-1 rounded" data-bs-toggle="modal" data-bs-target="#modalTambah">
            <i class="bi bi-plus-lg mr-1"></i> Tambah Ulasan
        </button>
    </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">
            <table class="w-full table-auto text-left">
                <thead class="bg-gray-100">
                    <tr>
                        <th class="p-2">No</th>
                        <th class="p-2">Nama</th>
                        <th class="p-2">Kota</th>
                        <th class="p-2">Rating</th>
                        <th class="p-2">Pesan</th>
                        <th class="p-2 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($reviews as $key => $review)
                    <tr class="border-t">
                        <td class="p-2">{{ $key + 1 }}</td>
                        <td class="p-2">{{ $review->name }}</td>
                        <td class="p-2">{{ $review->city }}</td>
                        <td class="p-2">
                            @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">{{ $review->message }}</td>
                        <td class="p-2 text-center">
                            <div class="flex justify-center space-x-2">
                                <button class="text-blue-600 pr-4 hover:underline flex items-center" data-bs-toggle="modal" data-bs-target="#modalEdit{{ $review->id }}">
                                    <i class="bi bi-pencil mr-1"></i> Edit
                                </button>
                                <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">Belum ada ulasan</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Tambah -->
<div class="modal fade" id="modalTambah" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('admin.reviews.store') }}" method="POST" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title text-lg font-medium">Tambah Ulasan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-4">
                    <label class="block text-sm font-medium">Nama</label>
                    <input type="text" name="name" class="w-full p-2 border rounded" required>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium">Kota</label>
                    <input type="text" name="city" class="w-full p-2 border rounded" required>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium">Rating</label>
                    <select name="rating" class="w-full p-2 border rounded" required>
                        <option value="1">1 Bintang</option>
                        <option value="2">2 Bintang</option>
                        <option value="3">3 Bintang</option>
                        <option value="4">4 Bintang</option>
                        <option value="5">5 Bintang</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium">Pesan</label>
                    <textarea name="message" class="w-full p-2 border rounded" required></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="bg-gray-300 text-black px-3 py-1 rounded" data-bs-dismiss="modal">Batal</button>
                <button type="submit" class="bg-blue-600 text-white px-3 py-1 rounded">Simpan</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal Edit -->
@foreach ($reviews as $review)
<div class="modal fade" id="modalEdit{{ $review->id }}" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('admin.reviews.update', $review->id) }}" method="POST" class="modal-content">
            @csrf
            @method('PUT')
            <div class="modal-header">
                <h5 class="modal-title text-lg font-medium">Edit Ulasan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-4">
                    <label class="block text-sm font-medium">Nama</label>
                    <input type="text" name="name" value="{{ $review->name }}" class="w-full p-2 border rounded" required>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium">Kota</label>
                    <input type="text" name="city" value="{{ $review->city }}" class="w-full p-2 border rounded" required>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium">Rating</label>
                    <select name="rating" class="w-full p-2 border rounded" required>
                        <option value="1" {{ $review->rating == 1 ? 'selected' : '' }}>1 Bintang</option>
                        <option value="2" {{ $review->rating == 2 ? 'selected' : '' }}>2 Bintang</option>
                        <option value="3" {{ $review->rating == 3 ? 'selected' : '' }}>3 Bintang</option>
                        <option value="4" {{ $review->rating == 4 ? 'selected' : '' }}>4 Bintang</option>
                        <option value="5" {{ $review->rating == 5 ? 'selected' : '' }}>5 Bintang</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium">Pesan</label>
                    <textarea name="message" class="w-full p-2 border rounded" required>{{ $review->message }}</textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="bg-gray-300 text-black px-3 py-1 rounded" data-bs-dismiss="modal">Batal</button>
                <button type="submit" class="bg-blue-600 text-white px-3 py-1 rounded">Simpan Perubahan</button>
            </div>
        </form>
    </div>
</div>
@endforeach

<!-- Modal Konfirmasi Hapus -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1">
    <div class="modal-dialog">
        <form id="deleteForm" method="POST" class="modal-content">
            @csrf
            @method('DELETE')
            <div class="modal-header">
                <h5 class="modal-title text-lg font-medium">Hapus Ulasan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                Apakah Anda yakin ingin menghapus ulasan dari <strong id="deleteName">—</strong>?
            </div>
            <div class="modal-footer">
                <button type="button" class="bg-gray-300 text-black px-3 py-1 rounded" data-bs-dismiss="modal">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 modalEl = document.getElementById('confirmDeleteModal');
    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';
            new bootstrap.Modal(modalEl).show();
        });
    });
});
</script>
@endsection