@php
    $transactions = [
        ['icon' => 'fa-bus', 'label' => 'Route 5 Tap-In', 'time' => 'Today, 8:42 AM', 'amount' => '-NPR 25', 'positive' => false],
        ['icon' => 'fa-wallet', 'label' => 'Recharge via eSewa', 'time' => 'Today, 7:10 AM', 'amount' => '+NPR 500', 'positive' => true],
        ['icon' => 'fa-bus', 'label' => 'Route 12 Tap-In', 'time' => 'Yesterday, 6:15 PM', 'amount' => '-NPR 30', 'positive' => false],
        ['icon' => 'fa-bus', 'label' => 'Route 12 Tap-Out', 'time' => 'Yesterday, 5:40 PM', 'amount' => '-NPR 0', 'positive' => false],
        ['icon' => 'fa-building-columns', 'label' => 'Bank Transfer Recharge', 'time' => 'Mon, 9:00 AM', 'amount' => '+NPR 1,000', 'positive' => true],
    ];
    $quickActions = [
        ['icon' => 'fa-wallet', 'label' => 'Top Up'],
        ['icon' => 'fa-clock-rotate-left', 'label' => 'History'],
        ['icon' => 'fa-rotate', 'label' => 'Auto Reload'],
        ['icon' => 'fa-qrcode', 'label' => 'Scan & Pay'],
    ];
@endphp

@component('layouts.app', [
    'title' => 'Dashboard',
    'metaDescription' => 'A preview of the Yatra Card rider dashboard — balance, trip history, and card controls.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Account',
        'title' => 'Welcome Back, Anita',
        'subtitle' => 'This is a preview of the Yatra Card dashboard. Apply for a card to unlock your real account.',
    ])

    <section class="dark:bg-ink"
              x-data="{
                  notifOpen: false,
                  notifications: [
                      { icon: 'fa-wallet', text: 'Recharge of NPR 500 confirmed', time: '2h ago' },
                      { icon: 'fa-bus', text: 'Route 12 tap-out — NPR 30 deducted', time: '1d ago' },
                      { icon: 'fa-gift', text: 'You earned a loyalty point', time: '1d ago' },
                  ],
                  referral: 'YATRA-ANITA82',
                  copied: false,
                  copyReferral() {
                      navigator.clipboard.writeText(this.referral).then(() => {
                          this.copied = true;
                          window.showToast('Copied!', 'Referral code copied to clipboard.', 'fa-copy');
                          setTimeout(() => this.copied = false, 2000);
                      });
                  },
              }">
        <div class="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 px-6 pb-6">
            <button type="button" @click="copyReferral()"
                    class="flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-xs font-semibold text-slate-600 transition hover:border-secondary hover:text-secondary dark:border-white/10 dark:bg-panel dark:text-slate-300">
                <i class="fa-solid" :class="copied ? 'fa-check' : 'fa-gift'"></i>
                <span>Referral: <span class="font-mono" x-text="referral"></span></span>
            </button>

            <div class="relative">
                <button type="button" @click="notifOpen = !notifOpen" aria-label="Notifications"
                        class="relative grid h-11 w-11 place-items-center rounded-xl border border-slate-200 bg-white text-slate-600 transition hover:border-secondary hover:text-secondary dark:border-white/10 dark:bg-panel dark:text-slate-300">
                    <i class="fa-solid fa-bell"></i>
                    <span class="absolute -right-1 -top-1 grid h-4 w-4 place-items-center rounded-full bg-red-500 text-[9px] font-bold text-white" x-text="notifications.length"></span>
                </button>
                <div x-show="notifOpen" x-cloak @click.outside="notifOpen = false" x-transition
                     class="absolute right-0 z-20 mt-2 w-72 rounded-2xl border border-slate-100 bg-white p-3 shadow-2xl dark:border-white/10 dark:bg-panel">
                    <p class="px-2 pb-2 text-xs font-bold uppercase tracking-wide text-slate-400 dark:text-slate-500">Notifications</p>
                    <template x-for="(n, i) in notifications" :key="i">
                        <div class="flex items-start gap-3 rounded-xl px-2 py-2.5 hover:bg-slate-50 dark:hover:bg-white/5">
                            <span class="mt-0.5 grid h-8 w-8 flex-shrink-0 place-items-center rounded-full bg-secondary/10 text-secondary">
                                <i class="fa-solid text-xs" :class="n.icon"></i>
                            </span>
                            <div>
                                <p class="text-xs text-slate-700 dark:text-slate-200" x-text="n.text"></p>
                                <p class="text-[10px] text-slate-400 dark:text-slate-500" x-text="n.time"></p>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </section>

    <section x-data="{ frozen: false }" class="pb-10 dark:bg-ink lg:pb-16">
        <div class="mx-auto max-w-7xl px-6">
            <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
                <!-- Balance card -->
                <div class="reveal-left lg:col-span-1">
                    <div class="rounded-[1.75rem] bg-gradient-to-br from-[#123a63] via-[#0F4C81] to-[#0d6e63] p-7 text-white shadow-2xl transition duration-500"
                         :class="frozen && 'grayscale opacity-70'">
                        <div class="flex items-center justify-between">
                            <p class="text-xs uppercase tracking-widest text-white/60">Yatra Card</p>
                            <i class="fa-solid fa-wifi rotate-90 text-white/70"></i>
                        </div>
                        <p class="mt-6 text-xs uppercase tracking-widest text-white/50">Available Balance</p>
                        <p class="font-heading text-4xl font-extrabold">NPR 2,450</p>
                        <p class="mt-4 font-mono text-sm tracking-[0.2em] text-white/70">YC •••• •••• 8821</p>
                        <p x-show="frozen" x-cloak class="mt-3 inline-flex items-center gap-1.5 rounded-full bg-white/15 px-3 py-1 text-xs font-semibold">
                            <i class="fa-solid fa-snowflake"></i> Card Frozen
                        </p>
                    </div>

                    <div class="mt-4 grid grid-cols-4 gap-3">
                        @foreach ($quickActions as $action)
                            <button type="button"
                                    data-toast-title="{{ $action['label'] }}"
                                    data-toast-message="This is a preview — sign in to a real account to continue."
                                    data-toast-icon="{{ $action['icon'] }}"
                                    class="flex flex-col items-center gap-2 rounded-xl border border-slate-100 bg-white p-3 text-center transition duration-300 hover:-translate-y-0.5 hover:border-secondary hover:shadow-md dark:border-white/10 dark:bg-panel">
                                <i class="fa-solid {{ $action['icon'] }} text-secondary"></i>
                                <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-300">{{ $action['label'] }}</span>
                            </button>
                        @endforeach
                    </div>

                    <button type="button" @click="frozen = !frozen"
                            class="mt-4 flex w-full items-center justify-center gap-2 rounded-xl border border-slate-200 py-3 text-sm font-semibold text-slate-700 transition duration-300 hover:border-red-400 hover:text-red-500 dark:border-white/10 dark:text-slate-200">
                        <i class="fa-solid" :class="frozen ? 'fa-fire' : 'fa-snowflake'"></i>
                        <span x-text="frozen ? 'Unfreeze Card' : 'Freeze Card'"></span>
                    </button>
                </div>

                <!-- Spend + transactions -->
                <div class="reveal-right space-y-6 lg:col-span-2">
                    <div class="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm dark:border-white/10 dark:bg-panel">
                        <div class="mb-5 flex items-center justify-between">
                            <div>
                                <p class="text-xs uppercase tracking-widest text-slate-400 dark:text-slate-500">This Month's Spend</p>
                                <p class="font-heading text-2xl font-extrabold text-slate-900 dark:text-white">NPR 1,840</p>
                            </div>
                            <span class="flex items-center gap-1.5 rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-bold text-emerald-600 dark:text-emerald-400">
                                <i class="fa-solid fa-arrow-down"></i> 12% vs last month
                            </span>
                        </div>
                        <div class="flex h-24 items-end gap-2">
                            @foreach ([40, 65, 50, 80, 55, 90, 70] as $bar)
                                <div class="flex-1 rounded-t-md bg-gradient-to-t from-primary/20 to-secondary/60 dark:from-secondary/10 dark:to-secondary" style="height: {{ $bar }}%"></div>
                            @endforeach
                        </div>
                        <div class="mt-2 flex justify-between text-[10px] text-slate-400 dark:text-slate-500">
                            <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm dark:border-white/10 dark:bg-panel">
                        <p class="mb-4 font-heading text-sm font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Recent Transactions</p>
                        <div class="divide-y divide-slate-100 dark:divide-white/5">
                            @foreach ($transactions as $tx)
                                <div class="flex items-center justify-between py-3">
                                    <div class="flex items-center gap-3">
                                        <span class="grid h-9 w-9 place-items-center rounded-full bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary">
                                            <i class="fa-solid {{ $tx['icon'] }} text-xs"></i>
                                        </span>
                                        <div>
                                            <p class="text-sm font-semibold text-slate-800 dark:text-white">{{ $tx['label'] }}</p>
                                            <p class="text-xs text-slate-400 dark:text-slate-500">{{ $tx['time'] }}</p>
                                        </div>
                                    </div>
                                    <span class="text-sm font-bold {{ $tx['positive'] ? 'text-emerald-600 dark:text-emerald-400' : 'text-slate-700 dark:text-slate-300' }}">
                                        {{ $tx['amount'] }}
                                    </span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <div class="reveal mt-10 rounded-2xl border border-slate-100 bg-white p-6 shadow-sm dark:border-white/10 dark:bg-panel"
                 x-data="{
                     filter: 'all',
                     history: [
                         { icon: 'fa-bus', label: 'Route 5 Tap-In', date: 'Jul 6, 2026', amount: '-NPR 25', type: 'trip' },
                         { icon: 'fa-wallet', label: 'Recharge via eSewa', date: 'Jul 6, 2026', amount: '+NPR 500', type: 'recharge' },
                         { icon: 'fa-bus', label: 'Route 12 Tap-In', date: 'Jul 5, 2026', amount: '-NPR 30', type: 'trip' },
                         { icon: 'fa-bus', label: 'Route 12 Tap-Out', date: 'Jul 5, 2026', amount: '-NPR 0', type: 'trip' },
                         { icon: 'fa-building-columns', label: 'Bank Transfer Recharge', date: 'Jul 3, 2026', amount: '+NPR 1,000', type: 'recharge' },
                         { icon: 'fa-bus', label: 'Route 8 Tap-In', date: 'Jul 2, 2026', amount: '-NPR 20', type: 'trip' },
                         { icon: 'fa-mobile-screen', label: 'Recharge via Khalti', date: 'Jun 30, 2026', amount: '+NPR 300', type: 'recharge' },
                     ],
                 }">
                <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
                    <p class="font-heading text-sm font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Full Trip History</p>
                    <div class="flex gap-2">
                        @foreach (['all' => 'All', 'trip' => 'Trips', 'recharge' => 'Recharges'] as $key => $label)
                            <button type="button" @click="filter = '{{ $key }}'"
                                    :class="filter === '{{ $key }}' ? 'bg-primary text-white dark:bg-secondary' : 'text-slate-500 hover:bg-primary/5 dark:text-slate-400 dark:hover:bg-white/5'"
                                    class="rounded-lg px-3 py-1.5 text-xs font-semibold transition duration-200">
                                {{ $label }}
                            </button>
                        @endforeach
                    </div>
                </div>

                <div class="divide-y divide-slate-100 dark:divide-white/5">
                    <template x-for="(tx, i) in history.filter(t => filter === 'all' || t.type === filter)" :key="i">
                        <div class="flex items-center justify-between py-3">
                            <div class="flex items-center gap-3">
                                <span class="grid h-9 w-9 place-items-center rounded-full bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary">
                                    <i class="fa-solid text-xs" :class="tx.icon"></i>
                                </span>
                                <div>
                                    <p class="text-sm font-semibold text-slate-800 dark:text-white" x-text="tx.label"></p>
                                    <p class="text-xs text-slate-400 dark:text-slate-500" x-text="tx.date"></p>
                                </div>
                            </div>
                            <span class="text-sm font-bold" :class="tx.amount.startsWith('+') ? 'text-emerald-600 dark:text-emerald-400' : 'text-slate-700 dark:text-slate-300'" x-text="tx.amount"></span>
                        </div>
                    </template>
                </div>
            </div>

            <div class="reveal mt-10 flex items-center justify-center gap-3 rounded-2xl border border-primary/20 bg-primary/5 px-6 py-4 text-center dark:border-secondary/20 dark:bg-secondary/5">
                <i class="fa-solid fa-circle-info text-primary dark:text-secondary"></i>
                <p class="text-sm text-slate-600 dark:text-slate-300">
                    This is a preview with sample data. <a href="{{ route('cards') }}" class="font-semibold text-primary underline dark:text-secondary">Apply for a Yatra Card</a> to create your real account.
                </p>
            </div>
        </div>
    </section>
@endcomponent