@extends("layouts.pelanggan")
@section("title","Ajukan Keluhan")
@section("content")
<div class="max-w-3xl mx-auto">
    <div class="mb-6">
        <a href="{{ route('p.riwayat') }}" class="text-blue-600 text-sm">← Kembali ke Riwayat</a>
        <h1 class="text-2xl font-bold text-blue-800 mt-3">Ajukan Keluhan</h1>
    </div>

    <div class="card mb-6">
        <div class="space-y-3">
            <div>
                <div class="text-sm text-gray-500">E-Tiket</div>
                <div class="font-semibold">{{ $pemesanan->kode_booking }}</div>
            </div>
            <div>
                <div class="text-sm text-gray-500">Rute</div>
                <div>{{ $pemesanan->jadwal->rute->label }}</div>
            </div>
            <div>
                <div class="text-sm text-gray-500">Jadwal</div>
                <div>{{ $pemesanan->jadwal->tanggal_berangkat->isoFormat('D MMMM Y') }}, {{ $pemesanan->jadwal->slot_waktu }} WIB</div>
            </div>
        </div>
    </div>

    <div class="card">
        <form method="POST" action="{{ route('p.keluhan.kirim') }}" enctype="multipart/form-data" class="space-y-4">
            @csrf
            <input type="hidden" name="pemesanan_id" value="{{ $pemesanan->id }}">

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Subjek</label>
                <input type="text" name="subjek" class="input-field w-full" placeholder="Ringkasan keluhan Anda" value="{{ old('subjek') }}" required maxlength="200">
                @error('subjek')<p class="text-red-600 text-xs mt-1">{{ $message }}</p>@enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Isi Keluhan</label>
                <textarea name="isi_keluhan" rows="6" class="input-field w-full" placeholder="Jelaskan keluhan Anda secara detail" required minlength="20" maxlength="2000">{{ old('isi_keluhan') }}</textarea>
                @error('isi_keluhan')<p class="text-red-600 text-xs mt-1">{{ $message }}</p>@enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Foto Keluhan (opsional)</label>
                <input type="file" name="foto[]" accept="image/png,image/jpeg" multiple class="input-field w-full">
                <p class="text-xs text-gray-500 mt-1">Maksimal 5 foto JPG/PNG, masing-masing 3 MB.</p>
                @error('foto')<p class="text-red-600 text-xs mt-1">{{ $message }}</p>@enderror
                @error('foto.*')<p class="text-red-600 text-xs mt-1">{{ $message }}</p>@enderror
            </div>

            <button type="submit" class="btn-primary py-2.5">Kirim Keluhan</button>
        </form>
    </div>
</div>
@endsection