@extends('theme::layouts.app', ['title' => $title ?? __('subscription.title|Subscription Order')])

@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('frontend.subscriptions.index') }}">{{ __('subscription.My Subscriptions') }}</a>
            <span class="material-symbols-outlined text-[14px]">chevron_right</span>
            <a class="hover:text-primary" href="{{ route('frontend.subscriptions.show', $order->subscription->id) }}">#{{ optional($order->subscription)->reference_id }}</a>
            <span class="material-symbols-outlined text-[14px]">chevron_right</span>
            <span class="text-text-main dark:text-white">{{ __('subscription.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">{{ __('subscription.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">{{ __('subscription.Placed on') }} {{ $order->created_at->format('F d, Y \\a\\t h:i A') }}</p>
            </div>
            <div class="flex flex-wrap gap-3">
                @if($order->pdf_invoice_path || $order->hasMedia('invoices'))
                    <a href="{{ route('frontend.account.orders.download', $order->id) }}"
                        class="flex items-center gap-2 px-4 py-2 bg-white dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-xl text-sm font-semibold hover:bg-gray-50 dark:hover:bg-gray-800 transition-all shadow-sm">
                        <span class="material-symbols-outlined text-[20px]">receipt_long</span>
                        {{ __('subscription.Download Invoice (PDF)') }}
                    </a>
                @endif
                <button
                    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>
                    {{ __('subscription.Get Support') }}
                </button>
            </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">
                                <img alt="{{ $item->name }}" class="size-20 rounded-xl object-cover shadow-sm"
                                     src="{{ $item->product && $item->product->image ? $item->product->image : get_placeholder_img() }}" />
                                <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">
                                        @if($order->subscription)
                                             <span
                                                class="px-2 py-0.5 bg-primary/5 text-primary dark:text-primary-light text-[10px] font-bold uppercase tracking-wider rounded">{{ getConstantLabel('billing_cycle', $order->subscription->billing_cycle) }}
                                                Subscription</span>
                                        @endif
                                    </div>

                                    <div class="flex flex-wrap gap-3">
                                        @if(isset($productFiles) && $productFiles->count() > 0 && ($order->status == getConstant('ORDER_STATUS_COMPLETED')))
                                            <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>
                                                Access Downloads
                                            </a>
                                        @endif
                                        <a href="{{route('frontend.subscriptions.show', $order->subscription->id)}}" 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>
                                            {{ __('subscription.Manage Subscription') }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                    @endforeach

                    @if($order->addon_items->count() > 0)
                        <!-- Add-ons -->
                        <h4 class="text-xs font-bold uppercase tracking-wider text-text-muted mb-4">{{ __('subscription.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]">extension</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>

                <!-- 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">{{ __('subscription.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">{{ __('subscription.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-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">{{ __('subscription.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">{{ __('subscription.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">{{ __('subscription.Price Breakdown') }}</h3>
                    <div class="space-y-4 mb-6">
                        <div class="flex justify-between text-sm">
                            <span class="text-text-muted">{{ __('subscription.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">{{ __('subscription.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
                        <div class="flex justify-between text-sm">
                            <span class="text-text-muted">{{ __('subscription.Tax') }}</span>
                            <span class="font-medium text-text-main dark:text-white">{!! ch_format_price($order->tax_amount, $order->currency) !!}</span>
                        </div>
                        <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">{{ __('subscription.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>

                    @if($order->subscription)
                    <div class="p-4 bg-gray-50 dark:bg-gray-800/50 rounded-xl">
                        <div class="flex items-start gap-3">
                            <span class="material-symbols-outlined text-[20px] text-primary">info</span>
                            <p class="text-xs text-text-muted leading-relaxed">
                                {{ __('subscription.This order includes a recurring subscription.') }}
                                @if($order->subscription->next_billing_date)
                                        {{ __('subscription.You will be billed :amount on :date.', ['amount' => ch_format_price($order->subscription->total_price, $order->currency), 'date' => $order->subscription->next_billing_date->format('M d, Y')]) }}
                                @endif
                            </p>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </main>
@endsection