@extends('layouts.user')

@section('page-title', __('Order') . ' ' . $order->code)

@section('content')
<div class="max-w-5xl mx-auto space-y-6">
    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <div class="flex items-start justify-between mb-6">
            <div>
                <p class="text-sm text-gray-500">{{ __('Order Code') }}</p>
                <p class="text-xl font-bold font-mono">{{ $order->code }}</p>
            </div>
            <span class="px-3 py-1 text-sm font-medium rounded-full
                {{ $order->status === 'completed' ? 'bg-green-100 text-green-700' : '' }}
                {{ in_array($order->status, ['pending','processing']) ? 'bg-yellow-100 text-yellow-700' : '' }}
                {{ $order->status === 'in_progress' ? 'bg-blue-100 text-blue-700' : '' }}
                {{ in_array($order->status, ['cancelled','failed','refunded']) ? 'bg-red-100 text-red-700' : '' }}
                {{ $order->status === 'partial' ? 'bg-orange-100 text-orange-700' : '' }}">
                {{ ucfirst(str_replace('_', ' ', $order->status)) }}
            </span>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div><p class="text-xs text-gray-500">{{ __('Service') }}</p><p class="font-medium text-sm">{{ $order->service->name }}</p></div>
            <div><p class="text-xs text-gray-500">{{ __('Link') }}</p><p class="font-medium text-sm truncate">{{ $order->link }}</p></div>
            <div><p class="text-xs text-gray-500">{{ __('Quantity') }}</p><p class="font-medium text-sm">{{ number_format($order->quantity) }}</p></div>
            <div><p class="text-xs text-gray-500">{{ __('Charge') }}</p><p class="font-medium text-sm">{{ currency($order->charge) }}</p></div>
            <div><p class="text-xs text-gray-500">{{ __('Start Count') }}</p><p class="font-medium text-sm">{{ number_format((float) $order->start_count) }}</p></div>
            <div><p class="text-xs text-gray-500">{{ __('Remains') }}</p><p class="font-medium text-sm">{{ number_format((float) ($order->remains ?? 0)) }}</p></div>
            <div><p class="text-xs text-gray-500">{{ __('Avg. Time') }}</p><p class="font-medium text-sm">{{ $order->service->formattedAvgTime() }}</p></div>
            <div><p class="text-xs text-gray-500">{{ __('Date') }}</p><p class="font-medium text-sm">{{ $order->created_at->format('M d, Y H:i') }}</p></div>
        </div>

        @if($order->canRefill() || $order->canCancel())
            <div class="flex gap-3 mt-6 pt-6 border-t border-gray-100">
                @if($order->canRefill())
                    <form action="{{ route('user.orders.refill', $order) }}" method="POST">
                        @csrf
                        <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700">{{ __('Request Refill') }}</button>
                    </form>
                @endif
                @if($order->canCancel())
                    <form action="{{ route('user.orders.cancel', $order) }}" method="POST">
                        @csrf
                        <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">{{ __('Cancel Order') }}</button>
                    </form>
                @endif
            </div>
        @endif
    </div>

    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <h3 class="font-semibold mb-4">{{ __('Order Timeline') }}</h3>
        <div class="space-y-4">
            @forelse($order->logs as $log)
                <div class="flex gap-3">
                    <div class="w-2 h-2 rounded-full bg-indigo-600 mt-2 flex-shrink-0"></div>
                    <div>
                        <p class="text-sm font-medium">{{ ucfirst(str_replace('_', ' ', $log->status)) }}</p>
                        <p class="text-xs text-gray-400">{{ $log->created_at->format('M d, Y H:i') }} · {{ $log->note }}</p>
                    </div>
                </div>
            @empty
                <p class="text-sm text-gray-500">{{ __('No activity yet') }}</p>
            @endforelse
        </div>
    </div>
</div>
@endsection