195 lines
8.8 KiB
PHP
195 lines
8.8 KiB
PHP
@extends('layouts.admin.app')
|
|
|
|
@section('content')
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-800">Manajemen Kritik & Saran</h1>
|
|
</div>
|
|
|
|
@if(session('success'))
|
|
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
|
|
<span class="block sm:inline">{{ session('success') }}</span>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Filter Buttons -->
|
|
<div class="flex flex-wrap gap-4 mb-6">
|
|
<button class="feedback-filter px-6 py-2 rounded-full bg-[#8B0000] text-white hover:bg-red-800 transition-colors" data-type="all">
|
|
Semua
|
|
</button>
|
|
<button class="feedback-filter px-6 py-2 rounded-full border border-[#8B0000] text-[#8B0000] hover:bg-[#8B0000] hover:text-white transition-colors" data-type="kritik">
|
|
Kritik
|
|
</button>
|
|
<button class="feedback-filter px-6 py-2 rounded-full border border-[#8B0000] text-[#8B0000] hover:bg-[#8B0000] hover:text-white transition-colors" data-type="saran">
|
|
Saran
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="bg-white shadow-md rounded-lg overflow-hidden">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">No</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tanggal</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nama</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jenis</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pesan</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@foreach($feedbacks as $index => $feedback)
|
|
<tr class="feedback-item" data-type="{{ $feedback->jenis }}">
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{{ $index + 1 }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{{ $feedback->created_at->format('d/m/Y H:i') }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-sm font-medium text-gray-900">
|
|
{{ $feedback->nama }}
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-sm text-gray-900">{{ $feedback->email }}</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
|
|
{{ $feedback->jenis === 'kritik' ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800' }}">
|
|
{{ ucfirst($feedback->jenis) }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="text-sm text-gray-900 max-w-xs overflow-hidden overflow-ellipsis">
|
|
{{ $feedback->pesan }}
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<button onclick="showDetailModal('{{ $feedback->id }}')" class="text-blue-600 hover:text-blue-900 mr-3">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
<form action="{{ route('admin.kritiksaran.destroy', $feedback->id) }}" method="POST" class="inline">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="text-red-600 hover:text-red-900" onclick="return confirm('Apakah Anda yakin ingin menghapus feedback ini?')">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Detail Modal -->
|
|
<div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
|
|
<div class="bg-white rounded-lg p-8 max-w-2xl w-full m-4" onclick="event.stopPropagation();">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-bold">Detail Feedback</h2>
|
|
<button type="button" onclick="closeDetailModal()" class="text-gray-600 hover:text-gray-800">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-gray-700 font-bold mb-2">Nama:</label>
|
|
<p id="detailNama" class="text-gray-600"></p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-gray-700 font-bold mb-2">Email:</label>
|
|
<p id="detailEmail" class="text-gray-600"></p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-gray-700 font-bold mb-2">Jenis:</label>
|
|
<p id="detailJenis" class="text-gray-600"></p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-gray-700 font-bold mb-2">Tanggal:</label>
|
|
<p id="detailTanggal" class="text-gray-600"></p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-gray-700 font-bold mb-2">Pesan:</label>
|
|
<p id="detailPesan" class="text-gray-600"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 flex justify-end">
|
|
<button type="button" onclick="closeDetailModal()" class="bg-gray-300 text-gray-700 px-4 py-2 rounded">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const filterButtons = document.querySelectorAll('.feedback-filter');
|
|
const feedbackItems = document.querySelectorAll('.feedback-item');
|
|
|
|
filterButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
// Remove active class from all buttons
|
|
filterButtons.forEach(btn => {
|
|
btn.classList.remove('bg-[#8B0000]', 'text-white');
|
|
btn.classList.add('border', 'border-[#8B0000]', 'text-[#8B0000]');
|
|
});
|
|
|
|
// Add active class to clicked button
|
|
this.classList.remove('border', 'border-[#8B0000]', 'text-[#8B0000]');
|
|
this.classList.add('bg-[#8B0000]', 'text-white');
|
|
|
|
const selectedType = this.dataset.type;
|
|
|
|
feedbackItems.forEach(item => {
|
|
if (selectedType === 'all' || item.dataset.type === selectedType) {
|
|
item.style.display = 'table-row';
|
|
} else {
|
|
item.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// Set "Semua" as active by default
|
|
document.querySelector('[data-type="all"]').click();
|
|
});
|
|
|
|
function showDetailModal(id) {
|
|
const feedback = @json($feedbacks);
|
|
const item = feedback.find(f => f.id == id);
|
|
|
|
if (item) {
|
|
document.getElementById('detailNama').textContent = item.nama;
|
|
document.getElementById('detailEmail').textContent = item.email;
|
|
document.getElementById('detailJenis').textContent = item.jenis.charAt(0).toUpperCase() + item.jenis.slice(1);
|
|
document.getElementById('detailTanggal').textContent = new Date(item.created_at).toLocaleString('id-ID');
|
|
document.getElementById('detailPesan').textContent = item.pesan;
|
|
|
|
document.getElementById('detailModal').classList.remove('hidden');
|
|
document.getElementById('detailModal').classList.add('flex');
|
|
}
|
|
}
|
|
|
|
function closeDetailModal() {
|
|
document.getElementById('detailModal').classList.remove('flex');
|
|
document.getElementById('detailModal').classList.add('hidden');
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
document.getElementById('detailModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeDetailModal();
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection
|