@extends("layouts.admin")
@section("title","Detail Keluhan")
@section("content")
<div class="max-w-2xl">
    <a href="{{ route("admin.keluhan.index") }}" class="text-blue-600 text-sm mb-4 inline-block">← Kembali</a>
    <div class="bg-white rounded-xl shadow p-6 space-y-4">
        <div class="flex justify-between items-start border-b pb-4">
            <div>
                <h2 class="text-xl font-bold">{{ $keluhan->subjek }}</h2>
                <p class="text-sm text-gray-500 mt-1">
                    Dari: <strong>{{ $keluhan->pengguna->nama_lengkap }}</strong>
                    ({{ $keluhan->pengguna->email }}) &middot;
                    {{ $keluhan->created_at->isoFormat("D MMM Y, HH:mm") }}
                </p>
            </div>
            <span class="px-3 py-1 rounded-full text-sm flex-shrink-0
                {{ $keluhan->status==="selesai"?"bg-green-100 text-green-700":($keluhan->status==="diproses"?"bg-yellow-100 text-yellow-700":"bg-red-100 text-red-700") }}">
                {{ ucfirst($keluhan->status) }}
            </span>
        </div>
        <div class="bg-gray-50 rounded-lg p-4">
            <p class="text-sm whitespace-pre-line">{{ $keluhan->isi_keluhan }}</p>
        </div>
        @if($keluhan->fotoKeluhan->isNotEmpty())
        <div>
            <p class="text-sm font-semibold mb-2">Foto Keluhan</p>
            <div class="grid grid-cols-2 gap-3 md:grid-cols-3">
                @foreach($keluhan->fotoKeluhan as $foto)
                <a href="{{ route('admin.keluhan.foto', [$keluhan, $foto]) }}" target="_blank">
                    <img src="{{ route('admin.keluhan.foto', [$keluhan, $foto]) }}" alt="Foto keluhan"
                         class="h-32 w-full rounded-lg border object-cover hover:opacity-80">
                </a>
                @endforeach
            </div>
        </div>
        @endif
        @if($keluhan->balasan_admin)
        <div class="bg-blue-50 border-l-4 border-blue-400 p-4">
            <p class="text-sm font-semibold text-blue-700 mb-1">
                Balasan Admin ({{ $keluhan->dibalas_pada?->isoFormat("D MMM Y HH:mm") }})
            </p>
            <p class="text-sm whitespace-pre-line">{{ $keluhan->balasan_admin }}</p>
        </div>
        @endif
        @if($keluhan->status !== "selesai")
        <form method="POST" action="{{ route("admin.keluhan.balas",$keluhan) }}" class="space-y-3">
            @csrf @method("PATCH")
            <div>
                <label class="block text-sm font-medium mb-1">Balasan Admin</label>
                <textarea name="balasan" rows="5" class="input-field"
                          placeholder="Tulis balasan..." required minlength="10"></textarea>
                @error("balasan")<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
            </div>
            <button type="submit" class="btn-primary">Kirim Balasan & Selesaikan</button>
        </form>
        @endif
    </div>
</div>
@endsection