@push('head')
    <script src="https://checkout.razorpay.com/v1/checkout.js" defer></script>
@endpush

<x-app-shell title="Unlock Your Remote Job Matches" max="max-w-5xl">
    <section class="grid flex-1 gap-6 lg:grid-cols-[1.08fr_0.92fr] lg:items-center">
        <div class="surface p-5 sm:p-8">
            <p class="eyebrow">Locked preview</p>
            <h1 class="page-title mt-2">Your matches are ready to be unlocked.</h1>
            <p class="body-copy mt-4 max-w-2xl">We found remote opportunities aligned with your category preferences, role direction, skills, availability, and work style. Actual job details and apply links stay hidden until payment and resume analysis are complete.</p>

            <div class="mt-6 grid gap-3 sm:grid-cols-3">
                <div class="metric-card">
                    <p class="text-2xl font-black text-slate-950">Top</p>
                    <p class="muted-copy mt-1">Personalized matches prioritized first</p>
                </div>
                <div class="metric-card">
                    <p class="text-2xl font-black text-slate-950">ATS</p>
                    <p class="muted-copy mt-1">Resume score after upload</p>
                </div>
                <div class="metric-card">
                    <p class="text-2xl font-black text-slate-950">Apply</p>
                    <p class="muted-copy mt-1">Tracked redirect after unlock</p>
                </div>
            </div>

            <div class="mt-6 rounded-3xl border border-slate-200 bg-slate-50 p-4">
                <div class="grid gap-3 sm:grid-cols-3">
                    @foreach (['Company names hidden', 'Source URLs hidden', 'Apply buttons hidden'] as $item)
                        <div class="rounded-2xl border border-slate-200 bg-white p-4">
                            <span class="chip-accent">Locked</span>
                            <p class="mt-3 text-sm font-black text-slate-800">{{ $item }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="surface p-5 sm:p-7">
            <div class="mb-5 flex items-start justify-between gap-4">
                <div>
                    <p class="muted-copy">Preview for</p>
                    <p class="mt-1 text-xl font-black text-slate-950">{{ $user->name }}</p>
                    <p class="text-sm text-slate-500">{{ $user->email }}</p>
                </div>
                <span class="chip">Secure</span>
            </div>

            <div class="space-y-3">
                @foreach (['Best matched remote jobs', 'Other relevant jobs below', 'Filters and saved jobs', 'Resume ATS and remote-readiness report'] as $item)
                    <div class="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white p-3 shadow-sm shadow-slate-900/5">
                        <span class="flex size-7 shrink-0 items-center justify-center rounded-full bg-teal-100 text-xs font-black text-teal-800">OK</span>
                        <span class="text-sm font-bold text-slate-700">{{ $item }}</span>
                    </div>
                @endforeach
            </div>

            <div class="alert-warn mt-5">
                Real company names, descriptions, source URLs, and apply buttons are hidden until payment is verified and resume analysis is complete.
            </div>

            <button
                class="btn-primary mt-5 w-full"
                type="button"
                data-pay-button
                @disabled(! filled($razorpayKey) || $amountPaise <= 0)
            >
                Unlock and continue
            </button>

            @if (! filled($razorpayKey) || $amountPaise <= 0)
                <p class="mt-3 text-sm font-bold text-rose-700">Razorpay key or unlock amount is not configured yet.</p>
            @endif

            <p class="mt-4 text-center text-xs leading-5 text-slate-500">Payment is created and verified on the server. Secrets never touch the browser.</p>
        </div>
    </section>

    <script>
        (() => {
            const button = document.querySelector('[data-pay-button]');
            if (!button) {
                return;
            }

            button.addEventListener('click', async () => {
                button.disabled = true;
                button.textContent = 'Creating secure order...';

                try {
                    const response = await fetch(@json(route('payment.order')), {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        },
                        body: JSON.stringify({}),
                    });

                    const order = await response.json();

                    if (!response.ok) {
                        throw new Error(order.message || 'Unable to create order.');
                    }

                    const checkout = new Razorpay({
                        key: order.key,
                        amount: order.amount,
                        currency: order.currency,
                        name: order.name,
                        description: order.description,
                        order_id: order.order_id,
                        prefill: order.prefill,
                        handler: async (paymentResponse) => {
                            button.textContent = 'Verifying payment...';

                            const verifyResponse = await fetch(@json(route('payment.verify')), {
                                method: 'POST',
                                headers: {
                                    'Accept': 'application/json',
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                },
                                body: JSON.stringify(paymentResponse),
                            });

                            const verification = await verifyResponse.json();

                            if (!verifyResponse.ok) {
                                throw new Error(verification.message || 'Payment verification failed.');
                            }

                            window.location.href = verification.redirect_url;
                        },
                        modal: {
                            ondismiss: () => {
                                button.disabled = false;
                                button.textContent = 'Unlock and continue';
                            },
                        },
                    });

                    checkout.open();
                } catch (error) {
                    button.disabled = false;
                    button.textContent = error.message || 'Try again';
                }
            });
        })();
    </script>
</x-app-shell>