@extends('layouts.app')

@section('content')
<section class="bg-slate-50">
    <div class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
        <div class="grid gap-6 lg:grid-cols-[1fr_360px]">
            <div class="grid gap-6">
                <div class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
                    <div class="flex flex-wrap items-start justify-between gap-4">
                        <div>
                            <p class="text-sm font-semibold uppercase tracking-wide text-emerald-700">Order {{ $order->order_number }}</p>
                            <h1 class="mt-2 text-3xl font-bold">{{ $order->topic_title }}</h1>
                            <p class="mt-2 text-sm leading-6 text-slate-600">{{ $order->type_of_service }} for {{ $order->academic_level }}.</p>
                        </div>
                        <span class="rounded-lg bg-slate-950 px-3 py-2 text-sm font-bold text-white">{{ $order->status }}</span>
                    </div>
                    <div class="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
                        @foreach ([
                            'Subject' => $order->subject,
                            'Deadline' => $order->deadline,
                            'Writer' => $order->writer_category,
                            'Payment' => str($order->payment_status)->headline(),
                        ] as $label => $value)
                            <div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
                                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ $label }}</p>
                                <p class="mt-1 font-semibold text-slate-950">{{ $value }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
                    <h2 class="text-2xl font-bold">Instructions</h2>
                    <p class="mt-3 whitespace-pre-line text-sm leading-7 text-slate-700">{{ $order->order_description }}</p>
                    @if ($order->additional_features)
                        <div class="mt-5 flex flex-wrap gap-2">
                            @foreach ($order->additional_features as $feature)
                                <span class="rounded-lg bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-800">{{ $feature }}</span>
                            @endforeach
                        </div>
                    @endif
                    @if ($order->custom_fields)
                        <div class="mt-5 grid gap-3 sm:grid-cols-2">
                            @foreach ($order->custom_fields as $label => $value)
                                <div class="rounded-lg border border-slate-200 bg-slate-50 p-3 text-sm">
                                    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ str($label)->headline() }}</p>
                                    <p class="mt-1 font-semibold text-slate-800">{{ $value }}</p>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                <div class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
                    <div class="flex items-center justify-between gap-4">
                        <h2 class="text-2xl font-bold">Files</h2>
                        <span class="text-sm font-semibold text-slate-500">{{ $order->files->count() }} uploaded</span>
                    </div>
                    <div class="mt-4 grid gap-3">
                        @forelse ($order->files as $file)
                            <div class="flex items-center justify-between gap-3 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm">
                                <span class="font-semibold text-slate-700">{{ $file->original_name }}</span>
                                <span class="text-slate-500">{{ number_format($file->size / 1024, 1) }} KB</span>
                            </div>
                        @empty
                            <p class="text-sm text-slate-600">No files uploaded yet.</p>
                        @endforelse
                    </div>
                    @auth
                        <form action="{{ route('orders.files.store', [$order, 'access_token' => $order->access_token]) }}" method="post" enctype="multipart/form-data" class="mt-5 flex flex-col gap-3 sm:flex-row">
                            @csrf
                            <input name="attachment" type="file" required class="order-input flex-1">
                            <button class="inline-flex items-center justify-center gap-2 rounded-lg bg-slate-950 px-4 py-2 text-sm font-semibold text-white"><i data-lucide="upload" class="h-4 w-4"></i> Upload</button>
                        </form>
                    @endauth
                </div>

                <div class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
                    <h2 class="text-2xl font-bold">Support messages</h2>
                    <div class="mt-4 grid gap-3">
                        @forelse ($order->messages as $message)
                            <div class="rounded-lg bg-slate-50 p-4 text-sm leading-6 text-slate-700">
                                <p>{{ $message->body }}</p>
                                <p class="mt-2 text-xs font-semibold text-slate-500">{{ $message->created_at->format('M j, Y g:i A') }}</p>
                            </div>
                        @empty
                            <p class="text-sm text-slate-600">No messages yet.</p>
                        @endforelse
                    </div>
                    @auth
                        <form action="{{ route('orders.messages.store', [$order, 'access_token' => $order->access_token]) }}" method="post" class="mt-5 grid gap-3">
                            @csrf
                            <textarea name="body" rows="4" required class="order-input" placeholder="Send a note to support"></textarea>
                            <button class="inline-flex w-fit items-center gap-2 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white"><i data-lucide="message-square" class="h-4 w-4"></i> Send Message</button>
                        </form>
                    @endauth
                </div>
            </div>

            <aside class="lg:sticky lg:top-24 lg:self-start">
                <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-xl shadow-slate-200/70">
                    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Invoice summary</p>
                    <p class="mt-2 text-4xl font-bold">{{ $order->currency }} {{ number_format((float) $order->total_price, 2) }}</p>
                    <div class="mt-5 grid gap-2 text-sm">
                        @foreach (($order->pricing_breakdown ?? []) as $line)
                            <div class="flex justify-between gap-4 border-b border-slate-100 py-2">
                                <span>
                                    <span class="block font-semibold">{{ $line['label'] ?? 'Cost' }}</span>
                                    <span class="block text-xs text-slate-500">{{ $line['detail'] ?? '' }}</span>
                                </span>
                                <span class="font-semibold">{{ $order->currency }} {{ number_format((float) ($line['amount'] ?? 0), 2) }}</span>
                            </div>
                        @endforeach
                    </div>
                    <div class="mt-4 rounded-lg bg-slate-50 p-4 text-sm">
                        <div class="flex justify-between"><span>Subtotal</span><span>{{ $order->currency }} {{ number_format((float) $order->subtotal, 2) }}</span></div>
                        <div class="mt-2 flex justify-between text-emerald-700"><span>Discount</span><span>-{{ $order->currency }} {{ number_format((float) $order->discount_total, 2) }}</span></div>
                    </div>
                    @if ($order->status === 'Pending Payment' && $order->payment_status !== 'paid')
                        <form action="{{ route('orders.pay', [$order, 'access_token' => $order->access_token]) }}" method="post" class="mt-4">
                            @csrf
                            <button class="flex w-full items-center justify-center gap-2 rounded-lg bg-emerald-600 px-4 py-3 text-sm font-bold text-white shadow-lg shadow-emerald-600/20 hover:bg-emerald-700"><i data-lucide="credit-card" class="h-4 w-4"></i> Pay with PayPal</button>
                        </form>
                    @endif
                    @auth
                        @if ($order->status === 'Completed')
                            <form action="{{ route('orders.revision', [$order, 'access_token' => $order->access_token]) }}" method="post" class="mt-3">
                                @csrf
                                <button class="w-full rounded-lg border border-rose-300 px-4 py-2 text-sm font-semibold text-rose-700">Request Revision</button>
                            </form>
                        @endif
                    @endauth
                </div>
            </aside>
        </div>
    </div>
</section>
@endsection