@php
    $available = (float) $wallet->available_balance;

    $themes = [
        'starter' => [
            'card' => 'lg:border-slate-500/40 lg:bg-linear-to-br lg:from-slate-800/60 lg:via-surface lg:to-bg-deep',
            'badge' => 'border-slate-400/40 bg-slate-400/10 text-slate-200',
            'accent' => 'text-slate-200',
        ],
        'silver' => [
            'card' => 'lg:border-gray-400/40 lg:bg-linear-to-br lg:from-gray-700/50 lg:via-surface lg:to-bg-deep',
            'badge' => 'border-gray-300/40 bg-gray-300/10 text-gray-200',
            'accent' => 'text-gray-200',
        ],
        'gold' => [
            'card' => 'lg:border-gold-deep/60 lg:bg-linear-to-br lg:from-amber-500/20 lg:via-surface lg:to-bg-deep',
            'badge' => 'border-gold-deep/60 bg-gold/10 text-gold',
            'accent' => 'text-gold',
        ],
        'platinum' => [
            'card' => 'lg:border-cyan-400/40 lg:bg-linear-to-br lg:from-cyan-500/15 lg:via-surface lg:to-bg-deep',
            'badge' => 'border-cyan-400/40 bg-cyan-400/10 text-cyan-200',
            'accent' => 'text-cyan-200',
        ],
        'diamond' => [
            'card' => 'lg:border-indigo-400/40 lg:bg-linear-to-br lg:from-indigo-500/20 lg:via-surface lg:to-bg-deep',
            'badge' => 'border-indigo-400/40 bg-indigo-400/10 text-indigo-200',
            'accent' => 'text-indigo-200',
        ],
        'premium' => [
            'card' => 'lg:border-pink-400/40 lg:bg-linear-to-br lg:from-pink-500/20 lg:via-surface lg:to-bg-deep',
            'badge' => 'border-pink-400/40 bg-pink-400/10 text-pink-200',
            'accent' => 'text-pink-200',
        ],
        'vip' => [
            'card' => 'lg:border-orange-400/40 lg:bg-linear-to-br lg:from-orange-500/20 lg:via-surface lg:to-bg-deep',
            'badge' => 'border-orange-400/40 bg-orange-400/10 text-orange-200',
            'accent' => 'text-orange-200',
        ],
        'royal-vip' => [
            'card' => 'lg:border-gold/70 lg:bg-linear-to-br lg:from-purple-800/50 lg:via-surface lg:to-bg-deep lg:ring-1 lg:ring-gold/30',
            'badge' => 'border-gold/60 bg-gold/15 text-gold',
            'accent' => 'text-gold',
        ],
    ];

    $popularSlugs = ['gold', 'premium'];
@endphp

<x-layouts.app title="প্রিমিয়াম প্যাকেজ" wide>
    <div>
        @error('package')
            <div class="mb-4 rounded-xl border border-danger/40 bg-danger/10 px-4 py-3 text-sm leading-relaxed text-danger" role="alert">
                {{ $message }}
            </div>
        @enderror

        <section class="relative overflow-hidden rounded-2xl border border-panel-border bg-panel p-5 lg:rounded-3xl lg:border-line lg:bg-linear-to-br lg:from-panel lg:via-surface lg:to-bg-deep lg:p-8" aria-labelledby="packages-heading">
            <div class="pointer-events-none absolute -right-16 -top-16 hidden h-48 w-48 rounded-full bg-gold/10 blur-3xl lg:block" aria-hidden="true"></div>
            <div class="pointer-events-none absolute -bottom-20 -left-10 hidden h-48 w-48 rounded-full bg-info/10 blur-3xl lg:block" aria-hidden="true"></div>

            <div class="relative">
                <span class="badge border-gold-deep/60 bg-gold/10 text-gold">
                    <x-icon name="sparkles" class="h-3.5 w-3.5"/>
                    প্রিমিয়াম প্ল্যান
                </span>
                <h1 id="packages-heading" class="mt-3 text-xl font-bold leading-tight lg:text-4xl lg:font-extrabold">আপনার প্রিমিয়াম প্যাকেজ বেছে নিন</h1>
                <p class="mt-2 max-w-2xl text-sm leading-relaxed text-ink-muted lg:text-base">
                    দৈনিক আয়ের সুযোগ আনলক করতে এবং ২০ দিনের আয় পরিকল্পনা উপভোগ করতে একটি প্যাকেজ নির্বাচন করুন।
                </p>

                <div class="mt-5 grid grid-cols-3 gap-2 lg:mt-6 lg:gap-3">
                    <div class="rounded-xl border border-panel-border bg-surface/70 p-3 text-center lg:rounded-2xl lg:border-line lg:bg-surface/80 lg:p-4 lg:text-left">
                        <p class="text-[11px] font-semibold leading-tight text-ink-muted lg:text-xs lg:uppercase lg:tracking-wide">মোট প্যাকেজ</p>
                        <p class="mt-1 text-lg font-bold text-gold lg:text-2xl">{{ $totalPackages }}</p>
                    </div>
                    <div class="rounded-xl border border-panel-border bg-surface/70 p-3 text-center lg:rounded-2xl lg:border-line lg:bg-surface/80 lg:p-4 lg:text-left">
                        <p class="text-[11px] font-semibold leading-tight text-ink-muted lg:text-xs lg:uppercase lg:tracking-wide">প্যাকেজের মেয়াদ</p>
                        <p class="mt-1 text-lg font-bold text-gold lg:text-2xl">{{ $duration }} দিন</p>
                    </div>
                    <div class="rounded-xl border border-panel-border bg-surface/70 p-3 text-center lg:rounded-2xl lg:border-line lg:bg-surface/80 lg:p-4 lg:text-left">
                        <p class="text-[11px] font-semibold leading-tight text-ink-muted lg:text-xs lg:uppercase lg:tracking-wide">আয়ের সময়সূচি</p>
                        <p class="mt-1 text-lg font-bold text-gold lg:text-2xl">প্রতিদিন</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="mt-4 lg:mt-8" aria-labelledby="package-cards-heading">
            <div class="flex items-end justify-between gap-3">
                <div>
                    <h2 id="package-cards-heading" class="text-lg font-bold lg:text-xl">প্যাকেজ প্ল্যান</h2>
                    <p class="mt-1 text-sm text-ink-muted">আপনার ওয়ালেট ব্যালেন্স: <span class="font-bold text-gold">৳ {{ number_format($available, 2) }}</span></p>
                    @if ($activePackages->isNotEmpty())
                        <p class="mt-1 text-sm text-info">আপনার সক্রিয় প্যাকেজ ২০ দিনের জন্য তালিকা থেকে লুকানো আছে। শুধুমাত্র বড় প্যাকেজে আপগ্রেড করতে পারবেন।</p>
                    @endif
                </div>
            </div>

            @if ($packages->isEmpty())
                <div class="mt-4">
                    @if ($activePackages->isNotEmpty())
                        <x-empty-state icon="package" title="নতুন কোনো প্যাকেজ নেই" message="আপনার সক্রিয় প্যাকেজের চেয়ে বড় প্যাকেজ এখন নেই। ২০ দিন শেষ হলে আবার সব প্যাকেজ দেখতে পাবেন।"/>
                    @else
                        <x-empty-state icon="package" title="কোনো প্যাকেজ পাওয়া যায়নি" message="প্যাকেজ প্রকাশ করা হলে এখানে দেখা যাবে।"/>
                    @endif
                </div>
            @else
                <div class="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-4">
                    @foreach ($packages as $package)
                        @php
                            $theme = $themes[$package->slug] ?? $themes['starter'];
                            $isPopular = in_array($package->slug, $popularSlugs, true);
                            $isRoyal = $package->slug === 'royal-vip';
                            $canPurchase = $activePackages->isEmpty() || (float) $package->price > $highestActivePrice;
                        @endphp
                        <article class="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-line bg-surface p-4 shadow-sm transition duration-300 lg:p-5 lg:hover:-translate-y-1 lg:hover:shadow-xl {{ $theme['card'] }}">
                            @if ($isRoyal)
                                <span class="absolute right-3 top-3 flex h-9 w-9 items-center justify-center rounded-full border border-gold/50 bg-gold/15 text-gold" aria-label="রয়্যাল প্যাকেজ">
                                    <x-icon name="crown" class="h-5 w-5"/>
                                </span>
                            @elseif ($isPopular)
                                <span class="absolute right-3 top-3 badge border-gold-deep/60 bg-gold/15 text-gold">জনপ্রিয়</span>
                            @endif

                            <div class="flex items-center gap-3 pr-14">
                                <span class="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-line bg-bg-deep lg:h-16 lg:w-16">
                                    @if ($package->image)
                                        <img src="{{ asset($package->image) }}" alt="{{ $package->name }} প্যাকেজ" class="h-full w-full object-cover" width="64" height="64" loading="lazy">
                                    @else
                                        <x-icon name="package" class="h-6 w-6 text-gold"/>
                                    @endif
                                </span>
                                <div class="min-w-0">
                                    <h3 class="truncate text-base font-bold tracking-wide {{ $theme['accent'] }}">{{ $package->name }}</h3>
                                    <div class="mt-2 flex flex-wrap gap-1.5">
                                        <span class="badge {{ $theme['badge'] }}">
                                            <x-icon name="calendar" class="h-3.5 w-3.5"/>
                                            {{ $package->duration_days }} দিন
                                        </span>
                                        <span class="badge border-success/40 bg-success/10 text-success">
                                            <x-icon name="coins" class="h-3.5 w-3.5"/>
                                            ৳ {{ number_format((float) $package->daily_income, 0) }}/দিন
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <p class="mt-4 text-2xl font-extrabold text-ink lg:text-3xl">৳ {{ number_format((float) $package->price, 0) }}</p>
                            <p class="text-xs text-ink-muted">প্যাকেজ মূল্য</p>

                            <div class="mt-4 space-y-2 border-t border-line/70 pt-4 text-sm">
                                <div class="flex items-center justify-between gap-2">
                                    <span class="text-ink-muted">দৈনিক আয়</span>
                                    <span class="font-bold text-success">৳ {{ number_format((float) $package->daily_income, 0) }}</span>
                                </div>
                                <div class="flex items-center justify-between gap-2">
                                    <span class="text-ink-muted">{{ $package->duration_days }} দিনের আয়</span>
                                    <span class="font-bold text-gold">৳ {{ number_format((float) $package->total_income, 0) }}</span>
                                </div>
                                <div class="flex items-center justify-between gap-2">
                                    <span class="text-ink-muted">মেয়াদ</span>
                                    <span class="font-semibold">{{ $package->duration_days }} দিন</span>
                                </div>
                            </div>

                            <div class="mt-auto pt-5">
                                @if ($canPurchase)
                                    <form method="POST" action="{{ route('packages.purchase', $package) }}">
                                        @csrf
                                        <button type="submit" class="btn-primary w-full">
                                            <x-icon name="package" class="h-5 w-5"/>
                                            প্যাকেজ কিনুন
                                        </button>
                                    </form>
                                    <p class="mt-2 text-center text-xs leading-relaxed text-ink-muted">ক্রয় নিশ্চিত করতে নির্ধারিত মূল্য জমা দিতে হবে।</p>
                                @else
                                    <button
                                        type="button"
                                        class="btn-secondary w-full cursor-not-allowed opacity-60"
                                        disabled
                                        title="শুধুমাত্র আপনার সক্রিয় প্যাকেজের চেয়ে বড় প্যাকেজে আপগ্রেড করা যাবে"
                                    >
                                        <x-icon name="lock" class="h-5 w-5"/>
                                        বড় প্যাকেজে আপগ্রেড করুন
                                    </button>
                                @endif
                            </div>
                        </article>
                    @endforeach
                </div>
            @endif
        </section>

        @if ($activePackages->isNotEmpty())
            <section class="mt-4 lg:mt-8" aria-labelledby="active-packages-heading">
                <h2 id="active-packages-heading" class="text-lg font-bold lg:text-xl">সক্রিয় প্যাকেজ</h2>
                <p class="mt-1 text-sm text-ink-muted">আপনার দৈনিক অগ্রগতি ও প্রাপ্ত আয় দেখুন।</p>

                <div class="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
                    @foreach ($activePackages as $userPackage)
                        @php
                            $progress = $userPackage->progressPercent();
                            $received = $userPackage->totalReceived();
                        @endphp
                        <article class="rounded-2xl border border-line bg-surface p-4 lg:p-5">
                            <div class="flex items-center justify-between gap-3">
                                <div class="flex min-w-0 items-center gap-3">
                                    <span class="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-line bg-bg-deep">
                                        @if ($userPackage->package->image)
                                            <img src="{{ asset($userPackage->package->image) }}" alt="{{ $userPackage->package->name }} প্যাকেজ" class="h-full w-full object-cover" width="48" height="48" loading="lazy">
                                        @else
                                            <x-icon name="package" class="h-5 w-5 text-gold"/>
                                        @endif
                                    </span>
                                    <div class="min-w-0">
                                        <p class="text-xs font-semibold uppercase tracking-wide text-ink-muted">সক্রিয় প্যাকেজ</p>
                                        <h3 class="mt-1 truncate text-xl font-bold text-gold">{{ $userPackage->package->name }}</h3>
                                    </div>
                                </div>
                                <span class="badge border-success/50 bg-success/10 text-success">
                                    <x-icon name="check-circle" class="h-3.5 w-3.5"/>
                                    সক্রিয়
                                </span>
                            </div>

                            <dl class="mt-4 grid grid-cols-2 gap-3 text-sm">
                                <div class="rounded-xl bg-surface-raised p-3">
                                    <dt class="text-xs text-ink-muted">ক্রয়ের তারিখ</dt>
                                    <dd class="mt-0.5 font-semibold">{{ $userPackage->start_date->format('d/m/Y') }}</dd>
                                </div>
                                <div class="rounded-xl bg-surface-raised p-3">
                                    <dt class="text-xs text-ink-muted">প্যাকেজ মূল্য</dt>
                                    <dd class="mt-0.5 font-semibold">৳ {{ number_format((float) $userPackage->purchase_price, 0) }}</dd>
                                </div>
                                <div class="rounded-xl bg-surface-raised p-3">
                                    <dt class="text-xs text-ink-muted">দৈনিক আয়</dt>
                                    <dd class="mt-0.5 font-semibold text-success">৳ {{ number_format((float) $userPackage->daily_income, 0) }}</dd>
                                </div>
                                <div class="rounded-xl bg-surface-raised p-3">
                                    <dt class="text-xs text-ink-muted">মোট প্রত্যাশিত আয়</dt>
                                    <dd class="mt-0.5 font-semibold text-gold">৳ {{ number_format((float) $userPackage->total_income, 0) }}</dd>
                                </div>
                            </dl>

                            <div class="mt-4">
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-ink-muted">সম্পন্ন দিন</span>
                                    <span class="font-semibold">{{ $userPackage->completed_days }}/{{ $userPackage->duration_days }}</span>
                                </div>
                                <div class="mt-2 h-2.5 w-full overflow-hidden rounded-full bg-surface-raised" role="progressbar" aria-valuenow="{{ $progress }}" aria-valuemin="0" aria-valuemax="100" aria-label="প্যাকেজের অগ্রগতি">
                                    <div class="h-full rounded-full bg-linear-to-r from-gold-deep to-gold" style="width: {{ $progress }}%"></div>
                                </div>
                                <div class="mt-2 flex items-center justify-between text-xs text-ink-muted">
                                    <span>অগ্রগতি: {{ $progress }}%</span>
                                    <span>বাকি দিন: {{ $userPackage->daysRemaining() }}</span>
                                </div>
                            </div>

                            <div class="mt-4 flex items-center justify-between rounded-xl border border-line bg-surface-raised px-4 py-3 text-sm">
                                <span class="text-ink-muted">মোট প্রাপ্ত আয়</span>
                                <span class="font-bold text-success">৳ {{ number_format($received, 0) }}</span>
                            </div>
                        </article>
                    @endforeach
                </div>
            </section>
        @endif

        <section class="mt-4 lg:mt-8" aria-labelledby="comparison-heading">
            <h2 id="comparison-heading" class="text-lg font-bold lg:text-xl">প্যাকেজ তুলনা</h2>
            <p class="mt-1 text-sm text-ink-muted">এক নজরে সব প্যাকেজ তুলনা করুন।</p>

            <div class="mt-4 overflow-x-auto rounded-2xl border border-line bg-surface">
                <table class="min-w-full text-left text-sm">
                    <thead class="bg-surface-raised text-xs uppercase tracking-wide text-ink-muted">
                        <tr>
                            <th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">প্যাকেজের নাম</th>
                            <th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">প্যাকেজ মূল্য</th>
                            <th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">দৈনিক আয়</th>
                            <th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">মেয়াদ</th>
                            <th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">মোট আয়</th>
                            <th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">পদক্ষেপ</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-line">
                        @foreach ($packages as $package)
                            @php
                                $theme = $themes[$package->slug] ?? $themes['starter'];
                                $canPurchase = $activePackages->isEmpty() || (float) $package->price > $highestActivePrice;
                            @endphp
                            <tr class="transition-colors hover:bg-surface-raised/60">
                                <td class="whitespace-nowrap px-4 py-3 font-bold {{ $theme['accent'] }}">
                                    <span class="flex items-center gap-2">
                                        <span class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-line bg-bg-deep">
                                            @if ($package->image)
                                                <img src="{{ asset($package->image) }}" alt="" class="h-full w-full object-cover" width="32" height="32" loading="lazy">
                                            @else
                                                <x-icon name="package" class="h-4 w-4 text-gold"/>
                                            @endif
                                        </span>
                                        {{ $package->name }}
                                    </span>
                                </td>
                                <td class="whitespace-nowrap px-4 py-3 font-semibold">৳ {{ number_format((float) $package->price, 0) }}</td>
                                <td class="whitespace-nowrap px-4 py-3 text-success">৳ {{ number_format((float) $package->daily_income, 0) }}</td>
                                <td class="whitespace-nowrap px-4 py-3">{{ $package->duration_days }} দিন</td>
                                <td class="whitespace-nowrap px-4 py-3 font-semibold text-gold">৳ {{ number_format((float) $package->total_income, 0) }}</td>
                                <td class="whitespace-nowrap px-4 py-3">
                                    @if ($canPurchase)
                                        <form method="POST" action="{{ route('packages.purchase', $package) }}">
                                            @csrf
                                            <button type="submit" class="inline-flex items-center gap-1.5 rounded-lg border border-gold-deep/60 bg-gold/10 px-3 py-1.5 text-sm font-bold text-gold transition-colors hover:bg-gold hover:text-bg">
                                                কিনুন
                                            </button>
                                        </form>
                                    @else
                                        <button type="button" class="inline-flex cursor-not-allowed items-center gap-1.5 rounded-lg border border-line bg-surface-raised px-3 py-1.5 text-sm font-semibold text-ink-muted opacity-60" disabled>
                                            আপগ্রেড প্রয়োজন
                                        </button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </section>

        <section class="mt-4 lg:mt-8" aria-labelledby="how-it-works-heading">
            <h2 id="how-it-works-heading" class="text-lg font-bold lg:text-xl">কীভাবে কাজ করে</h2>
            <p class="mt-1 text-sm text-ink-muted">প্রতিদিন আয় শুরু করতে তিনটি সহজ ধাপ।</p>

            <div class="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-3">
                <article class="rounded-2xl border border-line bg-surface p-4 lg:p-5">
                    <span class="flex h-11 w-11 items-center justify-center rounded-xl bg-gold/10 text-gold">
                        <x-icon name="package" class="h-6 w-6"/>
                    </span>
                    <h3 class="mt-3 font-bold">ধাপ ১: প্যাকেজ বাছাই করুন</h3>
                    <p class="mt-1.5 text-sm leading-relaxed text-ink-muted">আপনার বাজেট অনুযায়ী পছন্দের প্যাকেজ নির্বাচন করুন।</p>
                </article>
                <article class="rounded-2xl border border-line bg-surface p-4 lg:p-5">
                    <span class="flex h-11 w-11 items-center justify-center rounded-xl bg-info/10 text-info">
                        <x-icon name="zap" class="h-6 w-6"/>
                    </span>
                    <h3 class="mt-3 font-bold">ধাপ ২: মূল্য জমা দিন</h3>
                    <p class="mt-1.5 text-sm leading-relaxed text-ink-muted">প্যাকেজের নির্ধারিত মূল্য জমা দিন। অ্যাডমিন যাচাই করলে প্যাকেজটি সক্রিয় হবে।</p>
                </article>
                <article class="rounded-2xl border border-line bg-surface p-4 lg:p-5">
                    <span class="flex h-11 w-11 items-center justify-center rounded-xl bg-success/10 text-success">
                        <x-icon name="trending-up" class="h-6 w-6"/>
                    </span>
                    <h3 class="mt-3 font-bold">ধাপ ৩: দৈনিক আয় গ্রহণ করুন</h3>
                    <p class="mt-1.5 text-sm leading-relaxed text-ink-muted">ড্যাশবোর্ড থেকে আপনার দৈনিক আয় ও প্যাকেজের অগ্রগতি দেখুন।</p>
                </article>
            </div>
        </section>
    </div>

</x-layouts.app>