@extends('theme::layouts.app', ['title' => $title ?? trans('account.title|Order Details')])

@section('content')
    <main class="flex-grow w-full max-w-[1000px] mx-auto px-6 py-10 lg:py-16">
        <!-- Breadcrumbs -->
        <nav class="flex items-center gap-2 text-xs font-medium text-text-muted mb-6">
            <a class="hover:text-primary" href="{{route('ch_user_orders')}}">{{ __('account.My Orders') }}</a>
            <span class="material-symbols-outlined text-[14px]">chevron_right</span>
            <span class="text-text-main dark:text-white">{{ __('account.Order') }} #{{$order->order_reference}}</span>
        </nav>

        <!-- Order Header -->
        <div
            class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-10 pb-8 border-b border-border-light dark:border-border-dark">
            <div>
                <div class="flex items-center gap-3 mb-2">
                    <h1 class="text-3xl font-bold text-text-main dark:text-white tracking-tight">Order #{{$order->order_reference}}</h1>
                    @php
                        $statusDetails = getStatusDetails($order->status);
                        $statusClass = match((int)$order->status) {
                            1 => 'status-completed',
                            0 => 'status-pending',
                            2 => 'status-processing',
                            3 => 'status-refunded',
                            4, 5 => 'status-failed',
                            6, 7 => 'status-cancelled',
                            default => 'status-default',
                        };
                    @endphp
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold {{ $statusClass }}">
                        <span class="size-1.5 rounded-full status-dot"></span>
                        {{ $statusDetails['label'] }}
                    </span>
                </div>
                <p class="text-text-muted dark:text-gray-400">{{ __('account.Placed on') }} {{ $order->created_at->format('F j, Y \a\t g:i A') }}</p>
            </div>
            <div class="flex flex-wrap gap-3">
                <a href="{{route('helpdesk.tickets.create')}}"
                    class="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-xl text-sm font-semibold hover:bg-primary-dark transition-all shadow-md shadow-primary/10">
                    <span class="material-symbols-outlined text-[20px]">support_agent</span>
                    {{ __('account.Get Support') }}
                </a>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
            <!-- Left Column: Order Items -->
            <div class="lg:col-span-2 space-y-8">
                <!-- Main Product -->
                <div
                    class="bg-white dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-2xl overflow-hidden shadow-sm">
                    <div class="p-6">
                        @foreach($order->main_items as $item)
                            <div class="flex items-start gap-4 mb-6 pb-6 border-b border-gray-50 dark:border-gray-800">
                                @if($item->product_image)
                                    <img alt="Product" class="size-20 rounded-xl object-cover shadow-sm" src="{{ $item->product_image }}" />
                                @else
                                    <span class="material-symbols-outlined text-gray-400 text-3xl">inventory_2</span>
                                @endif
                                <div class="flex-grow">
                                    <div class="flex items-center justify-between gap-4 mb-1">
                                        <h3 class="font-bold text-lg text-text-main dark:text-white">
                                            {!! $item->name !!}
                                        </h3>
                                        <span class="font-bold text-text-main dark:text-white">{!! ch_format_price($item->price, $order->currency) !!}</span>
                                    </div>
                                    <div class="flex flex-wrap gap-2 mb-4">
{{--                                        <span class="px-2 py-0.5 bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400 text-[10px] font-bold uppercase tracking-wider rounded">v1.2.4</span>--}}
                                    </div>
                                    @if(isset($productFiles) && count($productFiles))
                                        <div class="flex flex-wrap gap-3">
                                            <a href="{{ route('frontend.account.downloads') }}"
                                               class="flex items-center gap-1.5 text-xs font-bold text-primary hover:text-primary-dark transition-colors">
                                                <span class="material-symbols-outlined text-[18px]">download</span>
                                                {{ __('account.Access Downloads') }}
                                            </a>
{{--                                            <a href="#"--}}
{{--                                               class="flex items-center gap-1.5 text-xs font-bold text-primary hover:text-primary-dark transition-colors">--}}
{{--                                            <span--}}
{{--                                                class="material-symbols-outlined text-[18px]">settings_accessibility</span>--}}
{{--                                                Manage Subscription--}}
{{--                                            </a>--}}
                                        </div>
                                    @endif

                                </div>
                            </div>
                        @endforeach

                        <!-- Add-ons -->
                        @if($order->addon_items->count() > 0)
                            <h4 class="text-xs font-bold uppercase tracking-wider text-text-muted mb-4">{{ __('account.Add-ons Included') }}</h4>
                            <div class="space-y-4">
                                @foreach($order->addon_items as $addon)
                                    <div class="flex items-center justify-between gap-4">
                                        <div class="flex items-center gap-3">
                                            <div
                                                class="size-10 bg-gray-50 dark:bg-background-dark border border-border-light dark:border-border-dark rounded-lg flex items-center justify-center text-text-muted">
                                                <span class="material-symbols-outlined text-[20px]">build</span>
                                            </div>
                                            <div>
                                                <p class="text-sm font-semibold text-text-main dark:text-white">{{ $addon->name }}</p>
                                            </div>
                                        </div>
                                        <span class="text-sm font-bold text-text-main dark:text-white">{!! ch_format_price($addon->price, $order->currency) !!}</span>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Custom Checkout Field Values (e.g. domain name for hosting) --}}
                @php
                    $itemsWithFields = $order->items->filter(fn($i) => $i->relationLoaded('customFields') && $i->customFields->isNotEmpty());
                @endphp
                @if($itemsWithFields->isNotEmpty())
                <div class="bg-white dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-2xl p-6 shadow-sm">
                    <h3 class="font-bold text-text-main dark:text-white mb-6">{{ __('account.Service Details') }}</h3>
                    @foreach($itemsWithFields as $item)
                        @if(!$loop->first)
                            <div class="border-t border-gray-100 dark:border-gray-800 my-4"></div>
                        @endif
                        <p class="text-xs font-bold uppercase tracking-wider text-text-muted mb-3">{{ $item->name }}</p>
                        <dl class="space-y-2">
                            @foreach($item->customFields as $cf)
                                <div class="flex justify-between gap-4 text-sm">
                                    <dt class="text-text-muted shrink-0">{{ ucwords(str_replace('_', ' ', $cf->field_name)) }}</dt>
                                    <dd class="font-medium text-text-main dark:text-white text-right">{{ $cf->field_value ?? '—' }}</dd>
                                </div>
                            @endforeach
                        </dl>
                    @endforeach
                </div>
                @endif

                <!-- Payment Details Card -->
                <div
                    class="bg-white dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-2xl p-6 shadow-sm">
                    <h3 class="font-bold text-text-main dark:text-white mb-6">{{ __('account.Payment Information') }}</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div>
                            <p class="text-xs font-bold uppercase tracking-wider text-text-muted mb-3">{{ __('account.Payment Method') }}
                            </p>
                            <div class="flex items-center gap-3">
                                <div
                                    class="w-12 h-8 bg-gray-50 dark:bg-background-dark border border-border-light dark:border-border-dark rounded flex items-center justify-center">
                                    <span class="material-symbols-outlined text-[20px] text-text-muted">credit_card</span>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-text-main dark:text-white">{{$order->payment_method_label}}</p>
                                    @if($order->transaction_id)
                                        <p class="text-xs text-text-muted">{{ __('account.Transaction ID') }}: {{$order->transaction_id}}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div>
                            <p class="text-xs font-bold uppercase tracking-wider text-text-muted mb-3">{{ __('account.Billing Address') }}
                            </p>
                            <p class="text-sm leading-relaxed text-text-main dark:text-white">
                                {{$order->billingInfo?->fullName}}<br />
                                {{$order->billingInfo?->address}}<br />
                                {{$order->billingInfo?->city}}, {{optional($order->billingInfo->state)->name}} {{optional($order->billingInfo)->zip}}<br />
                                {{optional($order->billingInfo->country)->name}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Order Summary -->
            <div class="space-y-6">
                <div
                    class="bg-white dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-2xl p-6 shadow-sm sticky top-24">
                    <h3 class="font-bold text-text-main dark:text-white mb-6">{{ __('account.Price Breakdown') }}</h3>
                    <div class="space-y-4 mb-6">
                        <div class="flex justify-between text-sm">
                            <span class="text-text-muted">Subtotal</span>
                            <span class="font-medium text-text-main dark:text-white">{!! ch_format_price($order->subtotal, $order->currency) !!}</span>
                        </div>
                        @if($order->discount_amount > 0)
                        <div class="flex justify-between text-sm">
                            <span class="text-text-muted">Discount <span
                                    class="text-green-600 dark:text-green-400 font-bold ml-1 text-[10px] uppercase">{!! $order->discount_code !!}</span></span>
                            <span class="text-green-600 dark:text-green-400 font-medium">({!! ch_format_price($order->discount_amount, $order->currency) !!})</span>
                        </div>
                        @endif
                        @if($order->tax_amount > 0)
                            <div class="flex justify-between text-sm">
                                <span class="text-text-muted">Tax</span>
                                <span class="font-medium text-text-main dark:text-white">{!! ch_format_price($order->tax_amount, $order->currency) !!}</span>
                            </div>
                        @endif
                        <div class="pt-4 border-t border-gray-100 dark:border-gray-800 flex justify-between">
                            <span class="font-bold text-text-main dark:text-white text-lg">{{ __('account.Total Paid') }}</span>
                            <span
                                class="font-bold text-text-main dark:text-white text-lg font-display tracking-tight">{!! ch_format_price($order->total, $order->currency) !!}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection