@extends('layouts.site')

@section('meta_title')
    {{ __('site.track_title') }} {{ $trackingCode ? '— '.$trackingCode : '' }} — {{ brand_name() }}
@endsection

@section('title', __('site.track_title'))

@section('content')
    <div class="site-container max-w-3xl pb-16">
        <header class="mb-6 flex flex-wrap items-end justify-between gap-4">
            <div>
                <h1 class="text-3xl font-bold eca-theme-text">{{ __('site.track_title') }}</h1>
                <p class="mt-2 text-sm eca-theme-text-muted">{{ __('site.track_subtitle') }}</p>
            </div>
            <a href="{{ route('site.repair-tracking.index', ['locale' => app()->getLocale()]) }}" class="site-btn-outline text-xs">
                {{ __('site.track_search_again') }}
            </a>
        </header>

        @if ($notFound)
            <div
                class="rounded-2xl border px-6 py-10 text-center"
                style="border-color: var(--eca-border); background: var(--eca-card);">
                <p class="font-mono text-sm eca-theme-text-muted" dir="ltr">{{ $trackingCode }}</p>
                <p class="mt-3 text-lg font-semibold eca-theme-text">{{ __('site.track_not_found') }}</p>
                <p class="mt-2 text-sm eca-theme-text-muted">{{ __('site.track_not_found_hint') }}</p>
                <div class="mt-6 flex flex-wrap justify-center gap-3">
                    <a href="{{ route('site.repair-tracking.index', ['locale' => app()->getLocale()]) }}" class="site-btn-primary text-sm">
                        {{ __('site.track_search_again') }}
                    </a>
                    <button type="button" class="site-btn-outline text-sm" data-assistant-open data-intent="repair">
                        {{ __('site.cta_request') }}
                    </button>
                </div>
            </div>
        @else
            @php($t = $tracking){{-- @var array $t --}}
            <article
                class="eca-track-result rounded-2xl border p-5 sm:p-7"
                style="border-color: var(--eca-border); background: var(--eca-card);">
                <div class="flex flex-wrap items-start justify-between gap-4 border-b pb-5" style="border-color: var(--eca-border);">
                    <div class="min-w-0">
                        <p class="text-[11px] font-semibold uppercase tracking-wider eca-theme-text-muted">{{ __('site.track_code_label') }}</p>
                        <p class="mt-1 font-mono text-lg font-bold eca-theme-text" dir="ltr">{{ $t['tracking_code'] }}</p>
                        <p class="mt-3 text-base font-semibold eca-theme-text">{{ $t['device_name'] }}</p>
                        @if (! empty($t['category']))
                            <p class="mt-1 text-sm eca-theme-text-muted">{{ $t['category'] }}</p>
                        @endif
                    </div>
                    <div class="text-end">
                        <span
                            @class([
                                'inline-flex rounded-full px-3 py-1 text-xs font-bold',
                                'bg-red-500/15 text-red-500' => $t['is_cancelled'],
                                'bg-brand-accent/15 text-brand-accent' => ! $t['is_cancelled'],
                            ])>
                            {{ $t['status_label'] }}
                        </span>
                        <p class="mt-2 font-mono text-2xl font-bold tabular-nums eca-theme-text">{{ (int) $t['progress_percent'] }}%</p>
                    </div>
                </div>

                @if ($t['is_cancelled'])
                    <p class="mt-5 rounded-xl bg-red-500/10 px-4 py-3 text-sm text-red-600">{{ __('site.track_cancelled_notice') }}</p>
                @else
                    <div class="eca-track-progress mt-6">
                        <div class="eca-track-progress__bar" aria-hidden="true">
                            <div
                                class="eca-track-progress__fill"
                                style="--track-progress: {{ (int) $t['progress_percent'] }}"
                            ></div>
                        </div>
                        <ol class="eca-track-progress__steps mt-5">
                            @foreach ($t['steps'] as $step)
                                <li @class([
                                    'eca-track-progress__step',
                                    'eca-track-progress__step--done' => $step['state'] === 'done',
                                    'eca-track-progress__step--current' => $step['state'] === 'current',
                                    'eca-track-progress__step--upcoming' => $step['state'] === 'upcoming',
                                ])>
                                    <span class="eca-track-progress__dot" aria-hidden="true"></span>
                                    <span class="eca-track-progress__label">{{ $step['label'] }}</span>
                                    <span class="eca-track-progress__pct tabular-nums">{{ (int) $step['progress'] }}%</span>
                                </li>
                            @endforeach
                        </ol>
                    </div>
                @endif

                <dl class="mt-6 grid gap-3 text-sm sm:grid-cols-2">
                    @if (! empty($t['received_at']))
                        <div class="rounded-xl px-4 py-3" style="background: color-mix(in srgb, var(--eca-surface) 90%, var(--eca-accent) 10%);">
                            <dt class="text-[11px] font-semibold uppercase tracking-wider eca-theme-text-muted">{{ __('site.track_received_at') }}</dt>
                            <dd class="mt-1 font-medium eca-theme-text">{{ $t['received_at']->timezone(config('app.timezone'))->format('Y/m/d H:i') }}</dd>
                        </div>
                    @endif
                    @if (! empty($t['delivered_at']))
                        <div class="rounded-xl px-4 py-3" style="background: color-mix(in srgb, var(--eca-surface) 90%, var(--eca-accent) 10%);">
                            <dt class="text-[11px] font-semibold uppercase tracking-wider eca-theme-text-muted">{{ __('site.track_delivered_at') }}</dt>
                            <dd class="mt-1 font-medium eca-theme-text">{{ $t['delivered_at']->timezone(config('app.timezone'))->format('Y/m/d H:i') }}</dd>
                        </div>
                    @endif
                </dl>
            </article>

            <div class="mt-8 flex flex-wrap gap-3">
                <button type="button" class="site-btn-primary text-sm" data-assistant-open data-intent="repair">
                    {{ __('site.cta_request') }}
                </button>
                <a href="{{ route('site.contact', ['locale' => app()->getLocale()]) }}" class="site-btn-outline text-sm">
                    {{ __('site.nav_contact') }}
                </a>
            </div>
        @endif
    </div>
@endsection