@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