@component('layouts.app', [
    'title' => 'Track Your Application',
    'metaDescription' => 'Check the status of your Fintech application using your reference number.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Support',
        'title' => 'Track Your Application',
        'subtitle' => 'Enter the reference number from your confirmation screen to check where your card application stands.',
    ])

    <section class="pb-20 dark:bg-ink lg:pb-28"
             x-data="{
                 ref: '{{ request()->query('ref', '') }}',
                 result: null,
                 notFound: false,
                 stages: ['Application Received', 'KYC Verification in Progress', 'Verified — Preparing Card', 'Card Dispatched'],
                 checkStatus() {
                     this.notFound = false;
                     this.result = null;
                     const code = this.ref.trim().toUpperCase();
                     if (!code) return;

                     let applications = {};
                     try { applications = JSON.parse(localStorage.getItem('yc-applications') || '{}'); } catch {}
                     const application = applications[code];
                     if (!application) {
                         this.notFound = true;
                         return;
                     }

                     // Simulated progress: no real backend exists on this site, so status
                     // is derived from elapsed time against the 3-business-day estimate
                     // quoted at submission, rather than a real review pipeline.
                     const totalMs = 3 * 24 * 60 * 60 * 1000;
                     const elapsedMs = Date.now() - application.submittedAt;
                     const pct = Math.min(1, Math.max(0, elapsedMs / totalMs));
                     let stageIndex = 0;
                     if (pct >= 0.9) stageIndex = 3;
                     else if (pct >= 0.5) stageIndex = 2;
                     else if (pct >= 0.1) stageIndex = 1;

                     this.result = { ...application, stageIndex, pct };
                 },
             }"
             x-init="if (ref) checkStatus()">
        <div class="mx-auto max-w-2xl px-6">
            <div class="reveal rounded-2xl border border-slate-100 bg-white p-8 shadow-sm dark:border-white/10 dark:bg-panel">
                <label for="track-ref" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">
                    Application Reference Number
                </label>
                <div class="flex flex-col gap-3 sm:flex-row">
                    <input id="track-ref" type="text" x-model="ref" @keydown.enter="checkStatus()" placeholder="YC-2026-123456"
                           class="flex-1 rounded-xl border border-slate-200 bg-white px-4 py-3 font-mono text-sm uppercase text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                    <button type="button" @click="checkStatus()"
                            class="rounded-xl bg-primary px-6 py-3 text-sm font-semibold text-white shadow-lg transition duration-300 hover:scale-105 dark:bg-secondary dark:text-ink">
                        Check Status
                    </button>
                </div>

                <p x-show="notFound" x-cloak class="mt-4 flex items-center gap-2 text-sm font-semibold text-red-600 dark:text-red-400">
                    <i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i>
                    We couldn't find an application with that reference number on this device.
                </p>
                <p class="mt-4 text-xs leading-relaxed text-slate-400 dark:text-slate-500">
                    This demo stores applications in your browser only — tracking works from the same
                    browser and device you applied on. In production this would look up a real record instead.
                </p>
            </div>

            <div x-show="result" x-cloak class="reveal mt-8 rounded-2xl border border-slate-100 bg-white p-8 shadow-sm dark:border-white/10 dark:bg-panel">
                <template x-if="result">
                    <div>
                        <div class="mb-8 flex items-center justify-between">
                            <div>
                                <p class="text-xs font-bold uppercase tracking-wide text-secondary-a11y dark:text-secondary">Applicant</p>
                                <p class="font-heading text-lg font-bold text-slate-900 dark:text-white" x-text="result.name"></p>
                                <p class="text-xs text-slate-500 dark:text-slate-400" x-text="result.cardType + ' Card'"></p>
                            </div>
                            <p class="font-mono text-xs text-slate-400 dark:text-slate-500" x-text="ref.toUpperCase()"></p>
                        </div>

                        <ol class="relative">
                            <span class="absolute left-4 top-2 bottom-2 w-px bg-slate-100 dark:bg-white/10" aria-hidden="true"></span>
                            <template x-for="(label, i) in stages" :key="i">
                                <li class="relative flex gap-4 pb-8 last:pb-0">
                                    <span class="relative z-10 grid h-8 w-8 flex-shrink-0 place-items-center rounded-full border-2 bg-white text-xs font-bold transition duration-300 dark:bg-ink"
                                          :class="i < result.stageIndex
                                              ? 'border-primary bg-primary text-white dark:border-secondary dark:bg-secondary dark:text-ink'
                                              : (i === result.stageIndex ? 'border-primary text-primary dark:border-secondary dark:text-secondary' : 'border-slate-200 text-slate-300 dark:border-white/10 dark:text-slate-600')">
                                        <i class="fa-solid fa-check text-[10px]" x-show="i < result.stageIndex" aria-hidden="true"></i>
                                        <span x-show="i >= result.stageIndex" x-text="i + 1"></span>
                                    </span>
                                    <div class="pt-1">
                                        <p class="text-sm font-semibold transition duration-300"
                                           :class="i <= result.stageIndex ? 'text-slate-900 dark:text-white' : 'text-slate-400 dark:text-slate-500'"
                                           x-text="label"></p>
                                        <p class="text-xs text-secondary-a11y dark:text-secondary" x-show="i === result.stageIndex">In progress</p>
                                    </div>
                                </li>
                            </template>
                        </ol>

                        <p class="mt-2 text-xs text-slate-400 dark:text-slate-500">
                            Estimated completion: 3 business days from submission.
                        </p>
                    </div>
                </template>
            </div>
        </div>
    </section>

    @include('frontend.partials.home.cta')
@endcomponent