@extends('layouts.app')

@section('title', 'Kelola Aspirasi - Admin')

@section('content')
<div class="flex h-full min-h-screen bg-slate-50">
    @include('admin.partials.sidebar')

    {{-- Main Content --}}
    <div class="flex-1 overflow-x-hidden p-8">
        <h1 class="text-3xl font-bold text-slate-800 mb-8">Kelola Aspirasi</h1>

        {{-- Filters --}}
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 mb-8">
            <form action="{{ url('/admin/aspirasi') }}" method="GET" class="flex flex-col sm:flex-row gap-4">
                <div class="flex-1">
                    <input type="text" name="search" placeholder="Cari judul aspirasi..." value="{{ request('search') }}"
                           class="w-full rounded-xl border border-slate-200 px-4 py-2.5 focus:border-red-400 focus:ring-2 focus:ring-red-100 text-sm">
                </div>
                <div class="w-full sm:w-48">
                    <select name="status" class="w-full rounded-xl border border-slate-200 px-4 py-2.5 focus:border-red-400 focus:ring-2 focus:ring-red-100 text-sm">
                        <option value="">Semua Status</option>
                        <option value="menunggu" {{ request('status') == 'menunggu' ? 'selected' : '' }}>Menunggu</option>
                        <option value="aktif" {{ request('status') == 'aktif' ? 'selected' : '' }}>Aktif</option>
                        <option value="diterima" {{ request('status') == 'diterima' ? 'selected' : '' }}>Diterima</option>
                        <option value="ditolak" {{ request('status') == 'ditolak' ? 'selected' : '' }}>Ditolak</option>
                        <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                    </select>
                </div>
                <button type="submit" class="px-6 py-2.5 rounded-xl text-sm font-semibold text-white bg-red-600 hover:bg-red-700 transition-colors">
                    Filter
                </button>
            </form>
        </div>

        {{-- Aspirasi List --}}
        <div class="space-y-4">
            @forelse($aspirasi as $item)
                <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 flex flex-col lg:flex-row gap-6 items-start lg:items-center">
                    <div class="flex-1">
                        <div class="flex flex-wrap items-center gap-2 mb-2">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-800">
                                {{ $item->kategori->nama ?? 'Umum' }}
                            </span>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                @if($item->status == 'aktif') bg-emerald-100 text-emerald-800
                                @elseif($item->status == 'diterima') bg-blue-100 text-blue-800
                                @elseif($item->status == 'menunggu') bg-amber-100 text-amber-800
                                @elseif($item->status == 'ditolak') bg-red-100 text-red-800
                                @else bg-slate-100 text-slate-800
                                @endif">
                                {{ ucfirst($item->status) }}
                            </span>
                        </div>
                        <h3 class="text-lg font-semibold text-slate-800 mb-1">
                            <a href="{{ url('/aspirasi-publik/' . $item->id) }}" target="_blank" class="hover:text-red-600 hover:underline">{{ $item->judul }}</a>
                        </h3>
                        <p class="text-sm text-slate-500 mb-2 line-clamp-2">{{ $item->isi }}</p>
                        <div class="flex items-center gap-4 text-xs text-slate-400">
                            <span>Oleh: {{ $item->anonim ? 'Anonim' : ($item->user->nama ?? 'User') }}</span>
                            <span>&middot;</span>
                            <span>{{ $item->created_at->format('d M Y, H:i') }}</span>
                            <span>&middot;</span>
                            <span class="text-emerald-600">{{ $item->dukungan_count }} Dukungan</span>
                        </div>
                    </div>

                    {{-- Status Action Form --}}
                    <div class="w-full lg:w-auto shrink-0 bg-slate-50 rounded-xl p-4 border border-slate-100">
                        <form action="{{ url('/admin/aspirasi/' . $item->id . '/status') }}" method="POST" class="flex flex-col gap-2">
                            @csrf
                            <label class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Ubah Status</label>
                            <div class="flex gap-2">
                                <select name="status" class="w-40 rounded-lg border border-slate-200 px-3 py-2 focus:border-red-400 focus:ring-1 focus:ring-red-200 text-sm bg-white">
                                    <option value="menunggu" {{ $item->status == 'menunggu' ? 'selected' : '' }}>Menunggu</option>
                                    <option value="aktif" {{ $item->status == 'aktif' ? 'selected' : '' }}>Aktif</option>
                                    <option value="diterima" {{ $item->status == 'diterima' ? 'selected' : '' }}>Diterima</option>
                                    <option value="ditolak" {{ $item->status == 'ditolak' ? 'selected' : '' }}>Ditolak</option>
                                </select>
                                <button type="submit" class="px-4 py-2 rounded-lg text-sm font-semibold text-white bg-slate-800 hover:bg-slate-700 transition-colors">
                                    Simpan
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            @empty
                <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-12 text-center">
                    <p class="text-slate-500">Tidak ada aspirasi yang ditemukan.</p>
                </div>
            @endforelse
        </div>

        @if($aspirasi->hasPages())
            <div class="mt-8">
                {{ $aspirasi->links() }}
            </div>
        @endif
    </div>
</div>
@endsection