@extends("layouts.pelanggan")
@section("title","Detail Keluhan")
@section("content")
<div class="max-w-3xl mx-auto pb-10">
    <div class="mb-6">
        <a href="{{ route('p.keluhan') }}" class="inline-flex items-center gap-1 text-blue-600 text-sm hover:text-blue-800 transition">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Kembali ke Keluhan Saya
        </a>
        <h1 class="text-2xl font-bold text-blue-800 mt-3">Detail Keluhan</h1>
    </div>

    {{-- Info Tiket & Status --}}
    <div class="card mb-6">
        <div class="flex justify-between items-start gap-4">
            <div class="space-y-1">
                <div class="text-xs uppercase tracking-wide text-gray-400 font-medium">E-Tiket</div>
                <div class="font-semibold text-gray-800">{{ $keluhan->pemesanan->kode_booking }}</div>
                <div class="flex items-center gap-1.5 text-sm text-gray-500">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                    {{ $keluhan->pemesanan->jadwal->tanggal_berangkat->isoFormat('D MMMM Y') }}, {{ $keluhan->pemesanan->jadwal->slot_waktu }} WIB
                </div>
            </div>

            @php
                $statusStyle = match($keluhan->status) {
                    'selesai' => 'bg-green-100 text-green-700',
                    'diproses' => 'bg-yellow-100 text-yellow-700',
                    'ditolak' => 'bg-red-100 text-red-700',
                    default => 'bg-gray-100 text-gray-600',
                };
            @endphp
            <span class="shrink-0 px-3 py-1 rounded-full text-sm font-medium {{ $statusStyle }}">
                {{ ucfirst($keluhan->status) }}
            </span>
        </div>
    </div>

    {{-- Isi Keluhan --}}
    <div class="card mb-6">
        <div class="space-y-5">
            <div>
                <div class="text-xs uppercase tracking-wide text-gray-400 font-medium mb-1">Isi Keluhan</div>
                <p class="whitespace-pre-line text-gray-700 leading-relaxed">{{ $keluhan->isi_keluhan }}</p>
                @if($keluhan->created_at)
                    <div class="text-xs text-gray-400 mt-2">Dikirim {{ $keluhan->created_at->isoFormat('D MMMM Y, HH:mm') }} WIB</div>
                @endif
            </div>

            @if($keluhan->fotoKeluhan->isNotEmpty())
                <div>
                    <div class="text-xs uppercase tracking-wide text-gray-400 font-medium mb-2">
                        Foto Keluhan ({{ $keluhan->fotoKeluhan->count() }})
                    </div>
                    <div class="grid grid-cols-2 gap-3 md:grid-cols-3">
                        @foreach($keluhan->fotoKeluhan as $foto)
                            <a href="{{ route('p.keluhan.foto', [$keluhan, $foto]) }}" target="_blank" class="group relative block overflow-hidden rounded-lg border">
                                <img src="{{ route('p.keluhan.foto', [$keluhan, $foto]) }}" alt="Foto keluhan"
                                     class="h-32 w-full object-cover transition duration-200 group-hover:scale-105 group-hover:opacity-90">
                                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition"></div>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif

            @if($keluhan->balasan_admin)
                <div class="flex gap-3">
                    <div class="shrink-0 w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
                        <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8-1.05 0-2.058-.16-3-.457L3 21l1.5-4.5C3.55 15.163 3 13.632 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                        </svg>
                    </div>
                    <div class="flex-1 bg-blue-50 border border-blue-100 rounded-xl rounded-tl-none p-4">
                        <div class="text-sm font-semibold text-blue-700 mb-1">Balasan Admin</div>
                        <p class="text-sm text-gray-700 whitespace-pre-line leading-relaxed">{{ $keluhan->balasan_admin }}</p>
                    </div>
                </div>
            @else
                <div class="text-center py-6 text-sm text-gray-400 border border-dashed rounded-xl">
                    Keluhan Anda masih menunggu balasan dari admin.
                </div>
            @endif
        </div>
    </div>
</div>
@endsection