@extends('layouts.app')

@section('title', 'Order #' . $order->id)

@section('content')
    {{-- Back Navigation & Title --}}
    <div class="mb-6">
        <a href="{{ route('admin.orders.index') }}"
            class="text-sm text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-200 hover:underline">
            &larr; Back to Orders List
        </a>
        <h1 class="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-white mt-2">
            Order Details <span class="text-gray-500 dark:text-gray-400 font-normal">#{{ $order->id }}</span>
        </h1>
    </div>

    {{-- Order Details Container --}}
    <div
        class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 md:p-8 border border-gray-200 dark:border-gray-700 space-y-6">

        {{-- Order Summary --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
            <div>
                <dt class="font-medium text-gray-500 dark:text-gray-400">Order ID:</dt>
                <dd class="mt-1 text-gray-900 dark:text-gray-100">#{{ $order->id }}</dd>
            </div>
            <div>
                <dt class="font-medium text-gray-500 dark:text-gray-400">Date Placed:</dt>
                <dd class="mt-1 text-gray-900 dark:text-gray-100">{{ $order->created_at->format('M d, Y H:i:s') }}</dd>
            </div>
            <div>
                <dt class="font-medium text-gray-500 dark:text-gray-400">Status:</dt>
                <dd class="mt-1">
                    @switch($order->status)
                        @case('completed')
                            <span
                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
                        @break

                        @case('failed')
                            <span
                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Failed</span>
                        @break

                        @default
                            <span
                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
                    @endswitch
                </dd>
            </div>
            <div>
                <dt class="font-medium text-gray-500 dark:text-gray-400">Amazon PO Number:</dt>
                <dd class="mt-1 text-gray-900 dark:text-gray-100">{{ $order->amazon_po_number ?? 'N/A' }}</dd>
            </div>
            <div>
                <dt class="font-medium text-gray-500 dark:text-gray-400">Product Total:</dt>
                <dd class="mt-1 text-gray-900 dark:text-gray-100 font-semibold">
                    ${{ number_format($order->total_product_value, 2) }}</dd>
            </div>
            <div>
                <dt class="font-medium text-gray-500 dark:text-gray-400">Additional Donation:</dt>
                <dd class="mt-1 text-gray-900 dark:text-gray-100 font-semibold">
                    ${{ number_format($order->donation_amount, 2) }}</dd>
            </div>
            <div>
                <dt class="font-medium text-gray-500 dark:text-gray-400">Associated Campaign:</dt>
                <dd class="mt-1 text-gray-900 dark:text-gray-100">{{ $order->campaign->title ?? 'N/A' }}</dd>
            </div>
            <div>
                <dt class="font-medium text-gray-500 dark:text-gray-400">Placed By:</dt>
                <dd class="mt-1 text-gray-900 dark:text-gray-100">{{ $order->user->name ?? 'Guest' }}
                    ({{ $order->user->email ?? 'N/A' }})</dd>
            </div>
        </div>

        {{-- Shipping Address --}}
        <div class="pt-6 border-t border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Shipping Address</h3>
            @if ($order->shippingAddress)
                <div class="text-sm text-gray-700 dark:text-gray-300">
                    @if ($order->shippingAddress->nickname)
                        <p class="font-semibold">{{ $order->shippingAddress->nickname }}</p>
                    @endif
                    <div class="leading-relaxed">
                        {{ $order->shippingAddress->address_line_1 }}<br>
                        @if ($order->shippingAddress->address_line_2)
                            {{ $order->shippingAddress->address_line_2 }}<br>
                        @endif
                        {{ $order->shippingAddress->city }}, {{ $order->shippingAddress->state }}
                        {{ $order->shippingAddress->zip_code }}<br>
                        {{ $order->shippingAddress->country }}
                    </div>
                </div>
            @else
                <p class="text-sm text-gray-500 dark:text-gray-400 italic">Address details not available.</p>
            @endif
        </div>

        {{-- Ordered Items --}}
        <div class="pt-6 border-t border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Items Ordered</h3>
            @if (!empty($order->cart_items))
                <ul class="divide-y divide-gray-200 dark:divide-gray-700 border-y border-gray-200 dark:border-gray-700">
                    @foreach ($order->cart_items as $item)
                        <li class="flex py-4">
                            <div
                                class="h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 flex items-center justify-center">
                                @if (!empty($item['attributes']['image_url']))
                                    <img src="{{ $item['attributes']['image_url'] }}" alt="{{ $item['name'] }}"
                                        class="h-full w-full object-contain">
                                @else
                                    <svg class="h-8 w-8 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg"
                                        fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                                    </svg>
                                @endif
                            </div>
                            <div class="ml-4 flex flex-1 flex-col">
                                <div>
                                    <div class="flex justify-between text-base font-medium text-gray-900 dark:text-white">
                                        <h3>{{ $item['name'] }}</h3>
                                        <p class="ml-4">${{ number_format($item['price'] * $item['quantity'], 2) }}</p>
                                    </div>
                                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">ASIN:
                                        {{ $item['attributes']['asin'] ?? 'N/A' }}</p>
                                </div>
                                <div class="flex flex-1 items-end justify-between text-sm">
                                    <p class="text-gray-500 dark:text-gray-400">Qty: {{ $item['quantity'] }}</p>
                                    <p class="text-gray-500 dark:text-gray-400">Unit Price:
                                        ${{ number_format($item['price'], 2) }}</p>
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            @else
                <p class="text-sm text-gray-500 dark:text-gray-400 italic">Item details not stored for this order.</p>
            @endif
        </div>

        {{-- Error Message --}}
        @if ($order->error_message)
            <div class="pt-6 border-t border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-medium text-red-600 dark:text-red-400 mb-2">Error Details</h3>
                <pre
                    class="text-xs text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-900/50 p-3 rounded-md overflow-x-auto whitespace-pre-wrap">{{ $order->error_message }}</pre>
            </div>
        @endif

    </div> {{-- End Order Details Container --}}
@endsection