@extends("layouts.admin")
@section("title","Manajemen Keluhan")
@section("content")
<h2 class="text-xl font-bold mb-4">Dasbor Keluhan (CRM)</h2>
<div class="flex gap-2 mb-4">
    @foreach(["" => "Semua","baru"=>"Baru","diproses"=>"Diproses","selesai"=>"Selesai"] as $val => $label)
    <a href="{{ route("admin.keluhan.index", $val?["status"=>$val]:[]) }}"
       class="px-4 py-1.5 rounded-full text-sm {{ request("status")===$val?"bg-blue-700 text-white":"bg-white border hover:bg-gray-50" }}">
        {{ $label }}
    </a>
    @endforeach
</div>
<div class="space-y-3">
@forelse($keluhan as $k)
    <div class="bg-white rounded-xl shadow p-4 flex justify-between items-start">
        <div>
            <div class="font-semibold">{{ $k->subjek }}</div>
            <div class="text-sm text-gray-500 mt-1">
                {{ $k->pengguna->nama_lengkap }} &middot; {{ $k->created_at->diffForHumans() }}
            </div>
            <div class="text-sm text-gray-400 mt-1">{{ Str::limit($k->isi_keluhan,100) }}</div>
        </div>
        <div class="flex flex-col items-end gap-2 ml-4 flex-shrink-0">
            <span class="px-2 py-0.5 rounded-full text-xs
                {{ $k->status==="selesai"?"bg-green-100 text-green-700":($k->status==="diproses"?"bg-yellow-100 text-yellow-700":"bg-red-100 text-red-700") }}">
                {{ ucfirst($k->status) }}
            </span>
            <a href="{{ route("admin.keluhan.show",$k) }}" class="text-blue-600 hover:underline text-sm">Detail →</a>
        </div>
    </div>
@empty
    <div class="bg-white rounded-xl shadow p-8 text-center text-gray-400">Tidak ada keluhan.</div>
@endforelse
</div>
<div class="mt-4">{{ $keluhan->links() }}</div>
@endsection