@extends('storefront.layout')

@section('title', 'Track Order')

@section('content')
@php
    $paymentLabels = [
        'unpaid'   => ['label' => 'Unpaid',   'cls' => 'sf-badge--warn'],
        'paid'     => ['label' => 'Paid',     'cls' => 'sf-badge--success'],
        'partial'  => ['label' => 'Partial',  'cls' => 'sf-badge--info'],
        'refunded' => ['label' => 'Refunded', 'cls' => 'sf-badge--purple'],
    ];
    $fulfillLabels = [
        'pending'    => ['label' => 'Pending',    'cls' => 'sf-badge--muted'],
        'processing' => ['label' => 'Processing', 'cls' => 'sf-badge--info'],
        'approved'   => ['label' => 'Approved',   'cls' => 'sf-badge--info'],
        'shipped'    => ['label' => 'Shipped',    'cls' => 'sf-badge--purple'],
        'delivered'  => ['label' => 'Delivered',  'cls' => 'sf-badge--success'],
        'cancelled'  => ['label' => 'Cancelled',  'cls' => 'sf-badge--danger'],
    ];

    if (isset($order) && $order) {
        $fs = $order->fulfillment_status ?? 'pending';
        if ($fs === 'accepted') {
            $fs = 'approved';
        }
        $ps = $order->payment_status    ?? 'unpaid';

        $timelineSteps = [
            [
                'label'    => 'Order Placed',
                'sublabel' => $order->created_at->format('d M Y, h:i A'),
                'done'     => true,
                'icon'     => 'order',
            ],
            [
                'label'    => 'Payment',
                'sublabel' => $paymentLabels[$ps]['label'] ?? ucfirst($ps),
                'done'     => in_array($ps, ['paid', 'partial']),
                'icon'     => 'payment',
            ],
            [
                'label'    => 'Processing',
                'sublabel' => 'Being prepared',
                'done'     => in_array($fs, ['processing', 'approved', 'shipped', 'delivered']),
                'icon'     => 'gear',
            ],
            [
                'label'    => 'Shipped',
                'sublabel' => $order->shipping_tracking_no ? 'Tracking: ' . $order->shipping_tracking_no : 'On the way',
                'done'     => in_array($fs, ['shipped', 'delivered']),
                'icon'     => 'truck',
            ],
            [
                'label'    => 'Delivered',
                'sublabel' => 'Order complete',
                'done'     => $fs === 'delivered',
                'icon'     => 'home',
            ],
        ];

        if ($fs === 'cancelled') {
            $timelineSteps = array_map(function ($s) { $s['done'] = false; return $s; }, $timelineSteps);
        }
    }
@endphp

<section class="sf-section sf-track-page">

    {{-- Page header --}}
    <div class="sf-track-hero">
        <div class="sf-track-hero__icon" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
        </div>
        <h1 class="sf-section-title">Track Your Order</h1>
        <p class="sf-track-hero__sub">Enter your order number, email address, or transaction ID.</p>
    </div>

    {{-- Search form --}}
    <form method="get" action="{{ route('storefront.track', ['slug' => $sfStore->slug]) }}" class="sf-track-form">
        <div class="sf-track-form__row">
            <input
                type="text"
                name="q"
                value="{{ $query ?? '' }}"
                placeholder="e.g. ORD-1001 · customer@email.com · TXN123456"
                class="sf-track-input"
                autocomplete="off"
                autofocus
            >
            <button type="submit" class="sf-btn sf-btn--accent sf-track-form__btn">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                Track
            </button>
        </div>
    </form>

    {{-- Error --}}
    @if(isset($error) && $error)
        <div class="sf-track-empty">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="sf-track-empty__icon"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
            <p class="sf-track-empty__msg">{{ $error }}</p>
            <p class="sf-track-empty__hint">Try your order number (e.g. <strong>ORD-1001</strong>), the email you used at checkout, or your payment transaction ID.</p>
        </div>
    @endif

    {{-- Result --}}
    @if(isset($order) && $order)
    @php
        $pBadge = $paymentLabels[$ps]  ?? ['label' => ucfirst($ps), 'cls' => 'sf-badge--muted'];
        $fBadge = $fulfillLabels[$fs]  ?? ['label' => ucfirst($fs), 'cls' => 'sf-badge--muted'];
    @endphp
    <div class="sf-track-result">

        {{-- Top card: order meta + status --}}
        <div class="sf-track-card sf-track-card--meta">
            <div class="sf-track-card__left">
                <p class="sf-track-order-num">Order #{{ $order->order_number }}</p>
                <p class="sf-track-order-date">Placed {{ $order->created_at->format('d M Y \a\t h:i A') }}</p>
                @if($order->customer_name)
                    <p class="sf-track-customer">{{ $order->customer_name }}@if($order->customer_email) &bull; {{ $order->customer_email }}@endif</p>
                @endif
            </div>
            <div class="sf-track-card__badges">
                <span class="sf-track-badge {{ $pBadge['cls'] }}">{{ $pBadge['label'] }}</span>
                <span class="sf-track-badge {{ $fBadge['cls'] }}">{{ $fBadge['label'] }}</span>
                @if($fs === 'cancelled')
                    <span class="sf-track-badge sf-badge--danger">Cancelled</span>
                @endif
            </div>
        </div>

        {{-- Timeline --}}
        <div class="sf-track-card sf-track-card--timeline">
            <h3 class="sf-track-card__title">Order Progress</h3>
            <div class="sf-track-timeline {{ $fs === 'cancelled' ? 'sf-track-timeline--cancelled' : '' }}">
                @foreach($timelineSteps as $i => $step)
                @php $isLast = $i === count($timelineSteps) - 1; @endphp
                <div class="sf-track-step {{ $step['done'] ? 'is-done' : '' }}">
                    <div class="sf-track-step__col">
                        <div class="sf-track-step__dot">
                            @if($step['done'])
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            @endif
                        </div>
                        @if(!$isLast)<div class="sf-track-step__line"></div>@endif
                    </div>
                    <div class="sf-track-step__body">
                        <p class="sf-track-step__label">{{ $step['label'] }}</p>
                        <p class="sf-track-step__sub">{{ $step['sublabel'] }}</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Items --}}
        @if($order->orderDetails && $order->orderDetails->count())
        <div class="sf-track-card sf-track-card--items">
            <h3 class="sf-track-card__title">Items Ordered</h3>
            <div class="sf-track-items">
                @foreach($order->orderDetails as $line)
                <div class="sf-track-item">
                    <div class="sf-track-item__name">
                        <strong>{{ $line->product_name }}</strong>
                        @if($line->variant_name)<small>{{ $line->variant_name }}</small>@endif
                    </div>
                    <div class="sf-track-item__meta">
                        <span>{{ $line->quantity }} &times; {{ format_currency($line->final_unit_price) }}</span>
                        <strong>{{ format_currency($line->line_total) }}</strong>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        {{-- Totals + payment --}}
        <div class="sf-track-card sf-track-card--totals">
            <div class="sf-track-totals">
                <div class="sf-track-totals__col">
                    <h3 class="sf-track-card__title">Order Summary</h3>
                    <div class="sf-track-summary-rows">
                        @if((float)$order->total_discount > 0)
                        <div class="sf-track-summary-row">
                            <span>Discount</span>
                            <span>-{{ format_currency($order->total_discount) }}</span>
                        </div>
                        @endif
                        @if((float)$order->total_tax > 0)
                        <div class="sf-track-summary-row">
                            <span>Tax</span>
                            <span>{{ format_currency($order->total_tax) }}</span>
                        </div>
                        @endif
                        @if($order->coupon_code)
                        <div class="sf-track-summary-row">
                            <span>Coupon ({{ $order->coupon_code }})</span>
                            <span>-{{ format_currency($order->coupon_discount) }}</span>
                        </div>
                        @endif
                        <div class="sf-track-summary-row sf-track-summary-row--total">
                            <span>Total Paid</span>
                            <strong>{{ format_currency($order->grand_total) }}</strong>
                        </div>
                    </div>
                </div>
                <div class="sf-track-totals__col">
                    <h3 class="sf-track-card__title">Payment Info</h3>
                    <div class="sf-track-summary-rows">
                        <div class="sf-track-summary-row">
                            <span>Method</span>
                            <span>{{ ucfirst(str_replace('_', ' ', $order->payment_method ?? '—')) }}</span>
                        </div>
                        @if($order->transaction_id)
                        <div class="sf-track-summary-row">
                            <span>Transaction ID</span>
                            <span class="sf-track-txn">{{ $order->transaction_id }}</span>
                        </div>
                        @endif
                        @if($order->card_last_four)
                        <div class="sf-track-summary-row">
                            <span>Card</span>
                            <span>•••• {{ $order->card_last_four }}</span>
                        </div>
                        @endif
                        <div class="sf-track-summary-row">
                            <span>Payment Status</span>
                            <span class="sf-track-badge {{ $pBadge['cls'] }}">{{ $pBadge['label'] }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    @endif

</section>
@endsection