@extends('layouts.app')

@section('content')
<section class="py-16 md:py-24 bg-[#1a1614]">
    <div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-8">
            <a href="{{ localized_route('customer.dashboard') }}" class="text-sm text-[#c77d4a] hover:text-white transition">← {{ __('back_to_account') }}</a>
        </div>

        <h1 class="text-3xl font-light text-white mb-8">{{ __('order_number') }}: {{ $order->order_number }}</h1>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div class="lg:col-span-2 space-y-6">
                <div class="bg-[#231e1b] rounded-xl p-6">
                    <h2 class="text-lg font-medium text-white mb-4">{{ __('order_items') }}</h2>
                    <div class="space-y-4">
                        @foreach($order->items as $item)
                            <div class="flex justify-between items-center border-b border-white/5 pb-4 last:border-0">
                                <div>
                                    <p class="text-white font-medium">{{ $item->product_name }}</p>
                                    @if($item->variant_info)
                                        <p class="text-white/50 text-sm">{{ $item->variant_info }}</p>
                                    @endif
                                    <p class="text-white/50 text-sm">x{{ $item->quantity }}</p>
                                </div>
                                <p class="text-white">{{ number_format($item->total, 2, ',', ' ') }} AZN</p>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="bg-[#231e1b] rounded-xl p-6">
                    <h2 class="text-lg font-medium text-white mb-4">{{ __('status_history') }}</h2>
                    <div class="space-y-3">
                        @foreach($order->statusHistory as $history)
                            <div class="flex justify-between text-sm">
                                <span class="text-white/60">{{ $history->created_at->format('d.m.Y H:i') }}</span>
                                <span class="text-white">{{ $history->status }}{{ $history->comment ? ' — ' . $history->comment : '' }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="bg-[#231e1b] rounded-xl p-6 h-fit">
                <h2 class="text-lg font-medium text-white mb-4">{{ __('order_summary') }}</h2>
                <div class="space-y-3 text-sm border-b border-white/10 pb-4 mb-4">
                    <div class="flex justify-between text-white/60">
                        <span>{{ __('subtotal') }}</span>
                        <span>{{ number_format($order->subtotal, 2, ',', ' ') }} AZN</span>
                    </div>
                    <div class="flex justify-between text-white/60">
                        <span>{{ __('discount') }}</span>
                        <span>{{ number_format($order->discount, 2, ',', ' ') }} AZN</span>
                    </div>
                    <div class="flex justify-between text-white/60">
                        <span>{{ __('shipping') }}</span>
                        <span>{{ number_format($order->shipping, 2, ',', ' ') }} AZN</span>
                    </div>
                </div>
                <div class="flex justify-between text-white text-lg font-medium">
                    <span>{{ __('total') }}</span>
                    <span>{{ number_format($order->total, 2, ',', ' ') }} AZN</span>
                </div>
                <div class="mt-6 pt-6 border-t border-white/10 text-sm text-white/50">
                    <p><strong class="text-white/70">{{ __('payment_type') }}:</strong> {{ $order->payment_type }}</p>
                    <p class="mt-1"><strong class="text-white/70">{{ __('shipping_address') }}:</strong> {{ $order->shipping_address }}</p>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection