<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>Pricing - {{ config('app.name', 'ViZuTrade') }}</title>

        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700,800&display=swap" rel="stylesheet" />

        <script>
            if (
                localStorage.theme === 'dark' ||
                (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
            ) {
                document.documentElement.classList.add('dark');
            }
        </script>

        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="bg-slate-50 font-sans text-slate-950 antialiased transition-colors duration-300 dark:bg-slate-950 dark:text-white">
        <x-public-navbar />

        <main
            x-data="{
                darkMode: document.documentElement.classList.contains('dark'),
                toggleTheme() {
                    this.darkMode = ! this.darkMode;
                    document.documentElement.classList.toggle('dark', this.darkMode);
                    localStorage.theme = this.darkMode ? 'dark' : 'light';
                    window.dispatchEvent(new Event('theme-changed'));
                }
            }"
            class="min-h-screen overflow-hidden bg-slate-50 text-slate-950 transition-colors duration-300 dark:bg-slate-950 dark:text-white"
        >
            <div class="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_top_right,rgba(37,99,235,0.16),transparent_34rem)] dark:bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.2),transparent_34rem)]"></div>

            <section class="px-4 py-8 sm:px-6 lg:px-8">
                <div class="relative mx-auto max-w-6xl">
                    <header class="mt-6 max-w-3xl">
                        <p class="text-sm font-black uppercase tracking-wide text-blue-600 dark:text-blue-300">Pricing</p>
                        <h1 class="mt-4 text-4xl font-black leading-tight sm:text-5xl">Choose a ViZuTrade plan.</h1>
                        <p class="mt-5 text-base leading-8 text-slate-600 dark:text-slate-300">
                            Pick the billing cycle that fits your trading workflow. Payments are handled through the active gateway selected by the admin.
                        </p>
                    </header>

                    @if (! $paymentModeEnabled)
                        <div class="mt-8 rounded-lg border border-blue-100 bg-blue-50 px-4 py-4 text-sm font-bold text-blue-700 shadow-sm dark:border-blue-900/50 dark:bg-blue-950/40 dark:text-blue-200">
                            Subscription payment is not active yet.
                        </div>
                    @elseif (! $activeGateway)
                        <div class="mt-8 rounded-lg border border-amber-200 bg-amber-50 px-4 py-4 text-sm font-bold text-amber-800 shadow-sm dark:border-amber-900/50 dark:bg-amber-950/40 dark:text-amber-200">
                            Payment gateway is not available right now.
                        </div>
                    @else
                        <div class="mt-8 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-4 text-sm font-bold text-emerald-700 shadow-sm dark:border-emerald-900/50 dark:bg-emerald-950/40 dark:text-emerald-200">
                            Payments are active through {{ $activeGateway->name }} {{ $activeGateway->is_test_mode ? '(test mode)' : '(live mode)' }}.
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="mt-8 rounded-lg border border-blue-100 bg-blue-50 px-4 py-3 text-sm font-bold text-blue-700 dark:border-blue-900/50 dark:bg-blue-950/40 dark:text-blue-200">
                            {{ session('error') }}
                        </div>
                    @endif

                    <section class="mt-8 grid gap-6 md:grid-cols-3">
                        @forelse ($plans as $plan)
                            <article class="relative flex flex-col rounded-lg border border-blue-100 bg-white p-6 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-blue-950/10 dark:border-blue-900/50 dark:bg-slate-900 dark:hover:shadow-black/30">
                                @if ($plan->is_recommended)
                                    <span class="absolute right-4 top-4 rounded-full bg-blue-600 px-3 py-1 text-xs font-black uppercase tracking-wide text-white dark:bg-blue-500">Recommended</span>
                                @endif

                                <p class="text-sm font-bold uppercase tracking-wide text-blue-600 dark:text-blue-300">{{ $plan->billing_period }}</p>
                                <h2 class="mt-3 text-2xl font-black text-slate-950 dark:text-white">{{ $plan->name }}</h2>
                                <p class="mt-5 text-4xl font-black text-slate-950 dark:text-white">{{ $plan->currency }} {{ number_format((float) $plan->price, 2) }}</p>
                                <p class="mt-2 text-sm font-semibold text-slate-500 dark:text-slate-400">{{ $plan->duration_days }} days access</p>

                                @if ($plan->features)
                                    <ul class="mt-6 flex-1 space-y-3">
                                        @foreach ($plan->features as $feature)
                                            <li class="flex gap-2 text-sm font-semibold text-slate-600 dark:text-slate-300">
                                                <span class="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-50 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300">
                                                    <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                        <path fill-rule="evenodd" d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.25 7.333a1 1 0 0 1-1.42.002L3.29 9.246a1 1 0 1 1 1.42-1.408l4.04 4.076 6.54-6.618a1 1 0 0 1 1.414-.006Z" clip-rule="evenodd" />
                                                    </svg>
                                                </span>
                                                <span>{{ $feature }}</span>
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif

                                @if ($paymentModeEnabled && $activeGateway)
                                    @auth
                                        <form method="POST" action="{{ route('payments.initialize', $plan) }}" class="mt-6">
                                            @csrf
                                            <label for="coupon_{{ $plan->id }}" class="mb-2 block text-xs font-bold uppercase text-slate-500 dark:text-slate-400">Coupon code</label>
                                            <input id="coupon_{{ $plan->id }}" name="coupon_code" value="{{ old('coupon_code') }}" placeholder="Optional" class="mb-3 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-100">
                                            <button type="submit" class="w-full rounded-lg bg-blue-600 px-4 py-3 text-sm font-bold text-white shadow-sm shadow-blue-600/20 transition hover:-translate-y-0.5 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus:ring-offset-slate-950">
                                                Subscribe
                                            </button>
                                        </form>
                                    @else
                                        <a href="{{ route('login') }}" class="mt-6 block rounded-lg bg-blue-600 px-4 py-3 text-center text-sm font-bold text-white shadow-sm shadow-blue-600/20 transition hover:-translate-y-0.5 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">
                                            Login to Subscribe
                                        </a>
                                    @endauth
                                @else
                                    <button type="button" disabled class="mt-6 w-full rounded-lg bg-slate-200 px-4 py-3 text-sm font-bold text-slate-500 dark:bg-slate-800 dark:text-slate-400">
                                        Subscribe
                                    </button>
                                @endif
                            </article>
                        @empty
                            <div class="rounded-lg border border-blue-100 bg-white p-10 text-center text-slate-500 dark:border-blue-900/50 dark:bg-slate-900 dark:text-slate-400 md:col-span-3">
                                No active subscription plans are available yet.
                            </div>
                        @endforelse
                    </section>

                    <section class="mt-8 rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                        <h2 class="text-lg font-bold text-slate-950 dark:text-white">Current access settings</h2>
                        <div class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                            <div class="rounded-lg bg-blue-50 p-4 dark:bg-blue-950/30">
                                <p class="text-xs font-bold uppercase text-blue-700 dark:text-blue-200">Payment Mode</p>
                                <p class="mt-1 text-sm font-black">{{ $paymentSettings['payment_mode_enabled'] === 'on' ? 'ON' : 'OFF' }}</p>
                            </div>
                            <div class="rounded-lg bg-blue-50 p-4 dark:bg-blue-950/30">
                                <p class="text-xs font-bold uppercase text-blue-700 dark:text-blue-200">Free Trial</p>
                                <p class="mt-1 text-sm font-black">{{ $paymentSettings['free_trial_days'] }} days</p>
                            </div>
                            <div class="rounded-lg bg-blue-50 p-4 dark:bg-blue-950/30">
                                <p class="text-xs font-bold uppercase text-blue-700 dark:text-blue-200">Grace Period</p>
                                <p class="mt-1 text-sm font-black">{{ $paymentSettings['subscription_grace_days'] }} days</p>
                            </div>
                            <div class="rounded-lg bg-blue-50 p-4 dark:bg-blue-950/30">
                                <p class="text-xs font-bold uppercase text-blue-700 dark:text-blue-200">Free Access</p>
                                <p class="mt-1 text-sm font-black">{{ $paymentSettings['allow_free_access'] === 'on' ? 'Allowed' : 'Disallowed' }}</p>
                            </div>
                        </div>
                    </section>
                </div>
            </section>
        </main>
    </body>
</html>
