@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="fw-bold">Manajemen Ulasan</h3>

        {{-- Info kecil bahwa tambah data via Postman --}}
   
    </div>

    {{-- Alert sukses --}}
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    {{-- Tabel Ulasan --}}
    <div class="card shadow-sm border-0">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th width="60">No</th>
                            <th>Nama</th>
                            <th>Kota</th>
                            <th>Rating</th>
                            <th>Pesan</th>
                            <th width="120" class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($reviews as $i => $review)
                            <tr>
                                <td>{{ $i + 1 }}</td>
                                <td>{{ $review->name }}</td>
                                <td>{{ $review->city }}</td>
                                <td>
                                    @for($s=1; $s<=5; $s++)
                                        <i class="bi {{ $s <= $review->rating ? 'bi-star-fill text-warning' : 'bi-star text-secondary' }}"></i>
                                    @endfor
                                </td>
                                <td>{{ $review->message }}</td>
                                <td class="text-center">
                                    <button
                                        type="button"
                                        class="btn btn-sm btn-danger btn-delete"
                                        data-action="{{ route('admin.reviews.destroy', $review) }}"
                                        data-name="{{ $review->name }}"
                                    >
                                        <i class="bi bi-trash"></i> Hapus
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted">Belum ada ulasan</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

        
        </div>
    </div>
</div>

{{-- Modal Konfirmasi Hapus (satu modal untuk semua baris) --}}
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form id="deleteForm" method="POST" class="modal-content">
            @csrf
            @method('DELETE')
            <div class="modal-header">
                <h5 class="modal-title">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="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="submit" class="btn btn-danger">Ya, Hapus</button>
            </div>
        </form>
    </div>
</div>

{{-- Script kecil untuk set action form hapus --}}
<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