@extends('layouts.app')
@section('title', $req->ticket_code . ' — Jasa Desain')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <div class="flex flex-col lg:flex-row gap-8">
        @include('account.partials.sidebar')
        <div class="flex-1">
            <a href="{{ route('account.design-requests') }}" class="text-sm text-brand-600 font-semibold hover:underline">← Semua request</a>

            @if (session('success'))
                <div class="mt-4 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-800 px-4 py-3 text-sm">{{ session('success') }}</div>
            @endif
            @if ($errors->any())
                <div class="mt-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-800 px-4 py-3 text-sm">
                    <ul class="list-disc list-inside">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
                </div>
            @endif

            <div class="bg-white border border-slate-100 rounded-2xl p-6 mt-4">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <p class="text-sm text-slate-400">{{ $req->ticket_code }} · {{ $req->packageLabel() }}</p>
                        <h1 class="text-2xl font-extrabold mt-1">{{ $req->subject }}</h1>
                        <p class="text-xs text-slate-400 mt-1">Diajukan {{ $req->created_at->format('d M Y H:i') }}</p>
                    </div>
                    @php $tone = match($req->status){ 'done','delivered' => 'bg-emerald-100 text-emerald-700', 'revision' => 'bg-amber-100 text-amber-700', 'in_progress' => 'bg-blue-100 text-blue-700', 'cancelled' => 'bg-rose-100 text-rose-700', default => 'bg-slate-100 text-slate-600' }; @endphp
                    <span class="text-xs font-semibold px-2.5 py-1 rounded-full {{ $tone }}">{{ $req->statusLabel() }}</span>
                </div>

                <div class="mt-5">
                    <p class="text-xs font-semibold text-slate-400 uppercase">Brief Anda</p>
                    <p class="text-sm text-slate-600 mt-1 whitespace-pre-line">{{ $req->brief }}</p>
                </div>

                @if ($req->customer_note)
                    <div class="mt-4 rounded-xl bg-brand-50 border border-brand-100 p-4">
                        <p class="text-xs font-semibold text-brand-700 uppercase">Pesan dari desainer</p>
                        <p class="text-sm text-slate-700 mt-1 whitespace-pre-line">{{ $req->customer_note }}</p>
                    </div>
                @endif

                <div class="flex flex-wrap gap-4 mt-5">
                    @if ($req->reference_path)
                        <a href="{{ $req->referenceUrl() }}" target="_blank" class="inline-flex items-center gap-1 text-sm text-brand-600 font-semibold"><x-icon name="image" class="w-4 h-4"/> Referensi Anda</a>
                    @endif
                    @if ($req->result_path && in_array($req->status, ['delivered', 'done', 'revision'], true))
                        <a href="{{ $req->resultUrl() }}" target="_blank" class="inline-flex items-center gap-1 text-sm text-emerald-700 font-semibold"><x-icon name="download" class="w-4 h-4"/> Unduh hasil desain</a>
                    @endif
                </div>

                @if ($req->result_path && in_array($req->status, ['delivered', 'done', 'revision'], true) && in_array(strtolower(pathinfo($req->result_path, PATHINFO_EXTENSION)), ['jpg','jpeg','png','webp','gif'], true))
                    <img src="{{ $req->resultUrl() }}" class="mt-4 rounded-xl border border-slate-100 max-h-80" alt="Hasil">
                @endif
            </div>

            @if ($req->status === 'delivered')
                <div class="grid sm:grid-cols-2 gap-4 mt-4">
                    <form method="POST" action="{{ route('account.design-requests.accept', $req) }}" class="bg-white border border-slate-100 rounded-2xl p-5">
                        @csrf
                        <h2 class="font-bold">Setujui hasil</h2>
                        <p class="text-sm text-slate-500 mt-1">Jika sudah cocok, konfirmasi agar request ditutup.</p>
                        <button class="mt-4 w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2.5 rounded-xl text-sm">Setujui & selesai</button>
                    </form>
                    <form method="POST" action="{{ route('account.design-requests.revise', $req) }}" class="bg-white border border-slate-100 rounded-2xl p-5 space-y-3">
                        @csrf
                        <h2 class="font-bold">Minta revisi</h2>
                        <textarea name="note" rows="3" required class="w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm" placeholder="Jelaskan bagian yang ingin diubah…"></textarea>
                        <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-2.5 rounded-xl text-sm">Kirim permintaan revisi</button>
                    </form>
                </div>
            @endif

            <div class="bg-white border border-slate-100 rounded-2xl p-6 mt-4">
                <h2 class="font-bold mb-4">Update dari tim desain</h2>
                <div class="space-y-3">
                    @forelse ($req->notes as $note)
                        <div class="rounded-xl bg-slate-50 border border-slate-100 p-3">
                            <p class="text-xs text-slate-400">{{ $note->user->name ?? $note->author_name ?? 'Tim desain' }} · {{ $note->created_at->format('d M Y H:i') }}</p>
                            <p class="text-sm text-slate-700 mt-1 whitespace-pre-line">{{ $note->body }}</p>
                        </div>
                    @empty
                        <p class="text-sm text-slate-400">Belum ada update.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
@endsection