@extends('layouts.app') {{-- Adjust layout as needed --}}

@section('title', __('orders.show.title', ['order_id' => $order->id]))

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

        {{-- Header with Actions --}}
        <div class="mb-8">
            <div class="flex justify-between items-start">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
                        {{ __('orders.show.header', ['order_id' => $order->id]) }}
                    </h1>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        {{ __('orders.show.created_at') }} {{ $order->created_at->format('M j, Y \a\t g:i A') }}
                    </p>
                </div>

                <div class="flex space-x-3">
                    <a href="{{ route('admin.orders.index') }}"
                        class="inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        ← {{ __('orders.show.back_to_orders') }}
                    </a>

                    <a href="{{ route('admin.orders.print', $order) }}" target="_blank"
                        class="inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        🖨️ {{ __('orders.show.print_order_button') }}
                    </a>

                    <a href="{{ route('admin.orders.export.single.json', $order) }}"
                        class="inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        📄 {{ __('orders.show.export_json_button') }}
                    </a>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

            {{-- Left Column --}}
            <div class="space-y-6">

                {{-- Order Status & PO Numbers --}}
                <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6">
                    <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">{{ __('orders.show.order_status') }}
                    </h2>

                    <dl class="space-y-3">
                        <div class="flex justify-between">
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ __('orders.show.status') }}
                            </dt>
                            <dd class="text-sm text-gray-900 dark:text-white">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                @if ($order->status === 'completed') bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
                                @elseif($order->status === 'pending') bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200
                                @elseif($order->status === 'failed') bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200
                                @else bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 @endif">
                                    {{ __('orders.show.status_' . $order->status) }}
                                </span>
                            </dd>
                        </div>

                        @if ($order->our_po_number)
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                                    {{ __('orders.show.our_po_number') }}</dt>
                                <dd class="text-sm font-mono text-gray-900 dark:text-white">{{ $order->our_po_number }}
                                </dd>
                            </div>
                        @endif

                        @if ($order->amazon_po_number)
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                                    {{ __('orders.show.amazon_po_number') }}</dt>
                                <dd class="text-sm font-mono text-gray-900 dark:text-white">{{ $order->amazon_po_number }}
                                </dd>
                            </div>
                        @endif

                        @if ($order->payment_transaction_id)
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                                    {{ __('orders.show.payment_transaction_id') }}</dt>
                                <dd class="text-sm font-mono text-gray-900 dark:text-white">
                                    {{ $order->payment_transaction_id }}</dd>
                            </div>
                        @endif

                        @if ($order->payment_gateway)
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                                    {{ __('orders.show.payment_gateway') }}</dt>
                                <dd class="text-sm text-gray-900 dark:text-white">{{ ucfirst($order->payment_gateway) }}
                                </dd>
                            </div>
                        @endif
                    </dl>

                    @if ($order->error_message)
                        <div
                            class="mt-4 p-3 bg-red-50 dark:bg-red-900/50 border border-red-200 dark:border-red-700 rounded-md">
                            <h4 class="text-sm font-medium text-red-800 dark:text-red-200 mb-1">
                                {{ __('orders.show.error_message') }}</h4>
                            <p class="text-sm text-red-700 dark:text-red-300">{{ $order->error_message }}</p>
                        </div>
                    @endif
                </div>

                {{-- Donor Information --}}
                <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6">
                    <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
                        {{ __('orders.show.donor_information') }}</h2>

                    @php
                        // For backward compatibility with older records, fallback to JSON billing_info
                        $billingInfo = $order->billing_info ?? [];
                        if (!is_array($billingInfo)) {
                            $billingInfo = [];
                        }
                    @endphp

                    <dl class="space-y-3">
                        <div class="flex justify-between">
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                                {{ __('orders.show.contact_email') }}</dt>
                            <dd class="text-sm text-gray-900 dark:text-white">
                                <a href="mailto:{{ $order->contact_email }}"
                                    class="text-indigo-600 dark:text-indigo-400 hover:underline">
                                    {{ $order->contact_email }}
                                </a>
                            </dd>
                        </div>

                        @if (
                            $order->billing_first_name ||
                                $order->billing_last_name ||
                                !empty($billingInfo['first_name']) ||
                                !empty($billingInfo['last_name']))
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                                    {{ __('orders.show.full_name') }}</dt>
                                <dd class="text-sm text-gray-900 dark:text-white">
                                    {{ trim(($order->billing_first_name ?? ($billingInfo['first_name'] ?? '')) . ' ' . ($order->billing_last_name ?? ($billingInfo['last_name'] ?? ''))) }}
                                </dd>
                            </div>
                        @endif

                        @if ($order->billing_company || !empty($billingInfo['company']))
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                                    {{ __('orders.show.company') }}</dt>
                                <dd class="text-sm text-gray-900 dark:text-white">
                                    {{ $order->billing_company ?? $billingInfo['company'] }}</dd>
                            </div>
                        @endif

                        @if ($order->user)
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                                    {{ __('orders.show.registered_user') }}</dt>
                                <dd class="text-sm text-gray-900 dark:text-white">
                                    {{ __('orders.show.yes') }} ({{ $order->user->first_name }}
                                    {{ $order->user->last_name }})
                                </dd>
                            </div>
                        @else
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                                    {{ __('orders.show.registered_user') }}</dt>
                                <dd class="text-sm text-gray-500 dark:text-gray-400">{{ __('orders.show.guest_checkout') }}
                                </dd>
                            </div>
                        @endif

                        <div class="flex justify-between">
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                                {{ __('orders.show.marketing_opt_in') }}</dt>
                            <dd class="text-sm text-gray-900 dark:text-white">
                                @if ($order->marketing_opt_in)
                                    <span class="text-green-600 dark:text-green-400">✓ {{ __('orders.show.yes') }}</span>
                                @else
                                    <span class="text-gray-500 dark:text-gray-400">✗ {{ __('orders.show.no') }}</span>
                                @endif
                            </dd>
                        </div>
                    </dl>
                </div>

                {{-- Billing Address --}}
                @if ($order->billing_first_name || $order->billing_address_line_1 || !empty($billingInfo))
                    <div
                        class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6">
                        <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Billing Address</h2>

                        <div class="text-sm text-gray-900 dark:text-white space-y-1">
                            @if (
                                $order->billing_first_name ||
                                    $order->billing_last_name ||
                                    !empty($billingInfo['first_name']) ||
                                    !empty($billingInfo['last_name']))
                                <div class="font-medium">
                                    {{ trim(($order->billing_first_name ?? ($billingInfo['first_name'] ?? '')) . ' ' . ($order->billing_last_name ?? ($billingInfo['last_name'] ?? ''))) }}
                                </div>
                            @endif

                            @if ($order->billing_company || !empty($billingInfo['company']))
                                <div>{{ $order->billing_company ?? $billingInfo['company'] }}</div>
                            @endif

                            @if ($order->billing_address_line_1 || !empty($billingInfo['address_line_1']))
                                <div>{{ $order->billing_address_line_1 ?? $billingInfo['address_line_1'] }}</div>
                            @endif

                            @if ($order->billing_address_line_2 || !empty($billingInfo['address_line_2']))
                                <div>{{ $order->billing_address_line_2 ?? $billingInfo['address_line_2'] }}</div>
                            @endif

                            @if (
                                $order->billing_city ||
                                    $order->billing_state ||
                                    $order->billing_zip_code ||
                                    !empty($billingInfo['city']) ||
                                    !empty($billingInfo['state']) ||
                                    !empty($billingInfo['zip_code']))
                                <div>
                                    {{ $order->billing_city ?? ($billingInfo['city'] ?? '') }}{{ ($order->billing_city ?? $billingInfo['city']) && ($order->billing_state ?? $billingInfo['state']) ? ', ' : '' }}{{ $order->billing_state ?? ($billingInfo['state'] ?? '') }}
                                    {{ $order->billing_zip_code ?? ($billingInfo['zip_code'] ?? '') }}
                                </div>
                            @endif

                            @if ($order->billing_country || !empty($billingInfo['country']))
                                <div>{{ $order->billing_country ?? $billingInfo['country'] }}</div>
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Campaign Information --}}
                @if ($order->campaign)
                    <div
                        class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6">
                        <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Campaign</h2>

                        <dl class="space-y-3">
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Campaign Name</dt>
                                <dd class="text-sm text-gray-900 dark:text-white">{{ $order->campaign->title }}</dd>
                            </div>

                            @if ($order->campaign->po_number)
                                <div class="flex justify-between">
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Campaign PO Prefix</dt>
                                    <dd class="text-sm font-mono text-gray-900 dark:text-white">
                                        {{ $order->campaign->po_number }}</dd>
                                </div>
                            @endif
                        </dl>
                    </div>
                @endif

            </div>

            {{-- Right Column --}}
            <div class="space-y-6">

                {{-- Shipping Address --}}
                @if ($order->shippingAddress)
                    <div
                        class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6">
                        <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Shipping Address</h2>

                        <div class="text-sm text-gray-900 dark:text-white space-y-1">
                            @if ($order->shippingAddress->nickname)
                                <div class="font-medium text-indigo-600 dark:text-indigo-400">
                                    {{ $order->shippingAddress->nickname }}
                                </div>
                            @endif

                            @if ($order->shippingAddress->contact_name)
                                <div class="font-medium">{{ $order->shippingAddress->contact_name }}</div>
                            @endif

                            @if ($order->shippingAddress->company)
                                <div>{{ $order->shippingAddress->company }}</div>
                            @endif

                            <div>{{ $order->shippingAddress->address_line_1 }}</div>

                            @if ($order->shippingAddress->address_line_2)
                                <div>{{ $order->shippingAddress->address_line_2 }}</div>
                            @endif

                            <div>
                                {{ $order->shippingAddress->city }}, {{ $order->shippingAddress->state }}
                                {{ $order->shippingAddress->zip_code }}
                            </div>

                            <div>{{ $order->shippingAddress->country }}</div>

                            @if ($order->shippingAddress->phone)
                                <div class="mt-2 text-gray-600 dark:text-gray-400">
                                    📞 {{ $order->shippingAddress->phone }}
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Order Totals --}}
                <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6">
                    <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">{{ __('orders.show.order_totals') }}
                    </h2>

                    <dl class="space-y-3">
                        <div class="flex justify-between">
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                                {{ __('orders.show.product_subtotal') }}</dt>
                            <dd class="text-sm text-gray-900 dark:text-white">
                                ${{ number_format($order->total_product_value, 2) }}</dd>
                        </div>

                        @if ($order->donation_amount > 0)
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                                    {{ __('orders.show.donation_amount') }}</dt>
                                <dd class="text-sm text-gray-900 dark:text-white">
                                    ${{ number_format($order->donation_amount, 2) }}</dd>
                            </div>
                        @endif

                        @if ($order->surcharge_amount > 0)
                            <div class="flex justify-between">
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                                    {{ $order->surcharge_label ?? __('orders.show.convenience_fee') }}
                                    @if ($order->surcharge_percentage > 0)
                                        ({{ number_format($order->surcharge_percentage, 2) }}%)
                                    @endif
                                </dt>
                                <dd class="text-sm text-gray-900 dark:text-white">
                                    ${{ number_format($order->surcharge_amount, 2) }}</dd>
                            </div>
                        @endif

                        <div class="border-t border-gray-200 dark:border-gray-700 pt-3">
                            <div class="flex justify-between">
                                <dt class="text-base font-medium text-gray-900 dark:text-white">
                                    {{ __('orders.show.grand_total') }}</dt>
                                <dd class="text-base font-medium text-gray-900 dark:text-white">
                                    ${{ number_format($order->grand_total, 2) }}</dd>
                            </div>
                        </div>
                    </dl>
                </div>

                {{-- Order Items --}}
                @if (!empty($order->cart_items) && is_array($order->cart_items))
                    <div
                        class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6">
                        <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
                            Order Items ({{ count($order->cart_items) }}
                            {{ Str::plural('item', count($order->cart_items)) }})
                        </h2>

                        <div class="space-y-4">
                            @foreach ($order->cart_items as $item)
                                <div
                                    class="flex justify-between items-start border-b border-gray-200 dark:border-gray-700 pb-4 last:border-b-0 last:pb-0">
                                    <div class="flex-1">
                                        <h4 class="text-sm font-medium text-gray-900 dark:text-white">
                                            {{ $item['name'] ?? 'Unknown Product' }}
                                        </h4>

                                        @if (!empty($item['attributes']))
                                            <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                                @if (!empty($item['attributes']['asin']))
                                                    ASIN: {{ $item['attributes']['asin'] }}
                                                @endif
                                                @if (!empty($item['attributes']['currency']))
                                                    • {{ $item['attributes']['currency'] }}
                                                @endif
                                            </div>
                                        @endif

                                        <div class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                                            Qty: {{ $item['quantity'] ?? 1 }} ×
                                            ${{ number_format($item['price'] ?? 0, 2) }}
                                        </div>
                                    </div>

                                    <div class="text-sm font-medium text-gray-900 dark:text-white">
                                        ${{ number_format(($item['price'] ?? 0) * ($item['quantity'] ?? 1), 2) }}
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

            </div>
        </div>
    </div>
@endsection