@extends('layouts.app')

@section('title', 'Daftar Aduan')

@section('content')
<div>
    @php $canCreateComplaints = auth()->check() && Route::has('complaints.create'); @endphp
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-3xl font-bold text-gray-200">Daftar Aduan</h2>
        @if($canCreateComplaints)
            <a href="{{ route('complaints.create') }}" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                + Tambah Aduan
            </a>
        @endif
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow p-4 mb-6">
        <form method="GET" action="{{ route('complaints.index') }}" class="flex gap-4">
            <select name="status" class="border rounded px-3 py-2 text-black bg-white">
                <option value="">Semua Status</option>
                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="processing" {{ request('status') == 'processing' ? 'selected' : '' }}>Processing</option>
                <option value="dispatched" {{ request('status') == 'dispatched' ? 'selected' : '' }}>Dispatched</option>
                <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
            </select>
            <select name="category" class="border rounded px-3 py-2 text-black bg-white">
                <option value="">Semua Kategori</option>
                <option value="emergency_police" {{ request('category') == 'emergency_police' ? 'selected' : '' }}>Emergency Polisi</option>
                <option value="emergency_medical" {{ request('category') == 'emergency_medical' ? 'selected' : '' }}>Emergency Medis</option>
                <option value="emergency_fire" {{ request('category') == 'emergency_fire' ? 'selected' : '' }}>Emergency Kebakaran</option>
                <option value="non_emergency" {{ request('category') == 'non_emergency' ? 'selected' : '' }}>Non Emergency</option>
            </select>
            <button type="submit" class="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700">
                Filter
            </button>
        </form>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-lg shadow 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">Ticket</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Sumber</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Kategori</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Waktu</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Aksi</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($complaints as $complaint)
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $complaint->ticket_number }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ ucfirst($complaint->source) }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">
                            {{ ucfirst(str_replace('_', ' ', $complaint->category)) }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <span class="px-2 py-1 text-xs rounded-full 
                            {{ $complaint->status == 'completed' ? 'bg-green-100 text-green-800' : '' }}
                            {{ $complaint->status == 'pending' ? 'bg-yellow-100 text-yellow-800' : '' }}
                            {{ $complaint->status == 'processing' ? 'bg-orange-100 text-orange-800' : '' }}
                            {{ $complaint->status == 'dispatched' ? 'bg-blue-100 text-blue-800' : '' }}
                            {{ !in_array($complaint->status, ['completed', 'pending', 'processing', 'dispatched']) ? 'bg-gray-100 text-gray-800' : '' }}">
                            {{ ucfirst($complaint->status) }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $complaint->created_at->format('d/m/Y H:i') }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <a href="{{ route('complaints.show', $complaint) }}" class="text-blue-600 hover:text-blue-900">Detail</a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-6 py-4 text-center text-gray-500">Tidak ada data aduan</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-4">
        <div class="text-gray-200">
            {{ $complaints->links() }}
        </div>
    </div>
</div>

@push('styles')
<style>
    /* Ensure form filter text is black */
    .bg-white select,
    .bg-white select option {
        color: #000000 !important;
    }
    .bg-white select:focus {
        color: #000000 !important;
    }
    
    /* Ensure pagination links are visible on dark background */
    .pagination {
        color: #E5E7EB;
    }
    .pagination a,
    .pagination span {
        color: #E5E7EB;
    }
    .pagination .page-link {
        color: #E5E7EB;
        background-color: rgba(21, 25, 33, 0.8);
        border-color: rgba(255, 255, 255, 0.1);
    }
    .pagination .page-link:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #FFFFFF;
    }
    .pagination .active .page-link {
        background-color: #3B82F6;
        border-color: #3B82F6;
        color: #FFFFFF;
    }
    .pagination .disabled .page-link {
        color: #6B7280;
        background-color: rgba(21, 25, 33, 0.5);
    }
</style>
@endpush
@endsection