@extends('theme::layouts.app', ['title' => __('checkout.title|Secure Checkout')])

@section('content')
<main class="flex-grow w-full pb-16" id="checkout-app" v-cloak>
    {{-- Loading Overlay --}}
    <div v-if="loading" class="fixed inset-0 z-50 bg-white/70 dark:bg-black/70 flex items-center justify-center">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
    </div>

    {{-- Breadcrumb & SSL Badge --}}
    @include('theme::partials.breadcrumbs')

    {{-- Guest Account Notice --}}
    @guest
    <div class="max-w-[1440px] mx-auto px-6 lg:px-10 pt-6">
        <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800 text-blue-800 dark:text-blue-200 rounded-xl p-4 text-sm">
            <strong>{{ __("checkout.Don't have an account?") }}</strong>
            {{ __("checkout.We'll create an account automatically for you using your email from the billing details.") }}
            {{ __('checkout.Please create a password below so you can access your new account after checkout.') }}
            {{ __('checkout.If you already have an account,') }}
            <a class="font-semibold underline hover:text-primary" href="{{ route('login') }}">{{ __('checkout.click here to sign in') }}</a>.
        </div>
    </div>
    @endguest

    {{-- Error Message --}}
    <div v-if="errorMessage" class="max-w-[1440px] mx-auto px-6 lg:px-10 pt-4">
        <div class="bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-800 text-red-800 dark:text-red-200 rounded-xl p-4 text-sm">
            @{{ errorMessage }}
        </div>
    </div>

    <div class="max-w-[1440px] mx-auto px-6 lg:px-10 py-8 lg:py-12">
        <form @submit.prevent="submitOrder" class="grid grid-cols-1 lg:grid-cols-12 gap-10 xl:gap-14">
            {{-- Left Column --}}
            <div class="lg:col-span-7 xl:col-span-8 space-y-8">

                {{-- Section 1: Billing Information --}}
                <section class="bg-surface-light dark:bg-surface-dark border border-gray-200 dark:border-gray-800 rounded-2xl p-6 md:p-8 shadow-soft">
                    <div class="flex items-center gap-4 mb-8">
                        <div class="size-10 rounded-full bg-primary text-white flex items-center justify-center font-bold text-lg">1</div>
                        <h2 class="text-2xl font-bold text-text-main dark:text-white">{{ __('checkout.heading|Billing Information') }}</h2>
                    </div>

                    {{-- Saved Billing Display (for logged-in users) --}}
                    <div v-if="!showBillingForm && hasBillingInfo" class="mb-6">
                        <div class="bg-gray-50 dark:bg-white/5 p-4 rounded-xl mb-4">
                            <h4 class="font-bold text-text-main dark:text-white mb-1">@{{ billing.first_name }} @{{ billing.last_name }}</h4>
                            <p class="text-sm text-text-muted">
                                @{{ billing.phone_number }}<br v-if="billing.phone_number">
                                @{{ billingDisplayAddress }}
                            </p>
                        </div>
                        <button type="button" @click="editBilling" class="text-sm font-medium text-primary hover:text-primary-dark transition-colors">
                            {{ __('checkout.button|Add/Update Details') }}
                        </button>
                    </div>

                    {{-- Billing Form --}}
                    <div v-if="showBillingForm" class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-text-main dark:text-white">{{ __('checkout.First Name') }} *</label>
                            <input v-model="tempBilling.first_name" type="text" required
                                :class="{'border-red-500': errors.first_name}"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-primary focus:border-primary" />
                            <p v-if="errors.first_name" class="text-xs text-red-500">@{{ errors.first_name[0] }}</p>
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-text-main dark:text-white">{{ __('checkout.Last Name') }} *</label>
                            <input v-model="tempBilling.last_name" type="text" required
                                :class="{'border-red-500': errors.last_name}"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-primary focus:border-primary" />
                            <p v-if="errors.last_name" class="text-xs text-red-500">@{{ errors.last_name[0] }}</p>
                        </div>

                        @guest
                        <div class="md:col-span-2 space-y-2">
                            <label class="text-sm font-medium text-text-main dark:text-white">{{ __('checkout.Email Address') }} *</label>
                            <input v-model="tempBilling.email" type="email" required
                                :class="{'border-red-500': errors.email}"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-primary focus:border-primary" />
                            <p class="text-[11px] text-text-muted">{{ __('checkout.Order confirmation will be sent here.') }}</p>
                            <p v-if="errors.email" class="text-xs text-red-500">@{{ errors.email[0] }}</p>
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-text-main dark:text-white">{{ __('checkout.Create Password') }} *</label>
                            <input v-model="tempBilling.password" type="password" required autocomplete="new-password"
                                :class="{'border-red-500': errors.password}"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-primary focus:border-primary" />
                            <p v-if="errors.password" class="text-xs text-red-500">@{{ errors.password[0] }}</p>
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-text-main dark:text-white">{{ __('checkout.Confirm Password') }} *</label>
                            <input v-model="tempBilling.password_confirmation" type="password" required autocomplete="new-password"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-primary focus:border-primary" />
                        </div>
                        @endguest

                        <div class="space-y-2">
                            <label class="text-sm font-medium text-text-main dark:text-white">{{ __('checkout.Phone Number') }}</label>
                            <input v-model="tempBilling.phone_number" type="tel"
                                :class="{'border-red-500': errors.phone_number}"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-primary focus:border-primary" />
                            <p v-if="errors.phone_number" class="text-xs text-red-500">@{{ errors.phone_number[0] }}</p>
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-text-main dark:text-white">{{ __('checkout.Company Name') }} ({{ __('checkout.Optional') }})</label>
                            <input v-model="tempBilling.company_name" type="text"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-primary focus:border-primary" />
                        </div>

                        <div class="md:col-span-2 space-y-2">
                            <label class="text-sm font-medium text-text-main dark:text-white">{{ __('checkout.Address') }} *</label>
                            <input v-model="tempBilling.address" type="text" required
                                :class="{'border-red-500': errors.address}"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-primary focus:border-primary" />
                            <p v-if="errors.address" class="text-xs text-red-500">@{{ errors.address[0] }}</p>
                        </div>

                        <div class="space-y-2">
                            <label class="text-sm font-medium text-text-main dark:text-white">{{ __('checkout.City') }} *</label>
                            <input v-model="tempBilling.city" type="text" required
                                :class="{'border-red-500': errors.city}"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-primary focus:border-primary" />
                            <p v-if="errors.city" class="text-xs text-red-500">@{{ errors.city[0] }}</p>
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-text-main dark:text-white">{{ __('checkout.Postal Code') }} *</label>
                            <input v-model="tempBilling.zip" type="text" required
                                :class="{'border-red-500': errors.zip}"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-primary focus:border-primary" />
                            <p v-if="errors.zip" class="text-xs text-red-500">@{{ errors.zip[0] }}</p>
                        </div>

                        <div class="space-y-2">
                            <label class="text-sm font-medium text-text-main dark:text-white">{{ __('checkout.Country') }} *</label>
                            <select v-model="tempBilling.country_id" @change="updateStates" required
                                :class="{'border-red-500': errors.country_id}"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-primary focus:border-primary appearance-none">
                                <option value="0">{{ __('checkout.Select country') }}</option>
                                <option v-for="country in countries" :key="country.id" :value="country.id">@{{ country.name }}</option>
                            </select>
                            <p v-if="errors.country_id" class="text-xs text-red-500">@{{ errors.country_id[0] }}</p>
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-text-main dark:text-white">{{ __('checkout.State/Province') }} *</label>
                            <select v-model="tempBilling.state_id" required
                                :class="{'border-red-500': errors.state_id}"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-primary focus:border-primary appearance-none">
                                <option value="0">{{ __('checkout.Select state') }}</option>
                                <option v-for="state in states" :key="state.id" :value="state.id">@{{ state.name }}</option>
                            </select>
                            <p v-if="errors.state_id" class="text-xs text-red-500">@{{ errors.state_id[0] }}</p>
                        </div>

                        {{-- Save/Cancel Buttons for logged-in users --}}
                        @auth
                        <div class="md:col-span-2 flex gap-3 pt-2">
                            <button type="button" @click="saveBillingInfo"
                                class="px-6 py-2.5 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary-dark transition-colors">
                                {{ __('checkout.button|Save') }}
                            </button>
                            <button type="button" @click="cancelBillingEdit" v-if="hasBillingInfo"
                                class="px-6 py-2.5 bg-gray-100 dark:bg-gray-800 text-text-main dark:text-white rounded-lg text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
                                {{ __('checkout.button|Cancel') }}
                            </button>
                        </div>
                        @endauth
                    </div>
                </section>

                {{-- Section 2: Additional Information (Custom Checkout Fields) --}}
                <section v-if="customFieldDefs && Object.keys(customFieldDefs).length > 0"
                    class="bg-surface-light dark:bg-surface-dark border border-gray-200 dark:border-gray-800 rounded-2xl p-6 md:p-8 shadow-soft">
                    <div class="flex items-center gap-4 mb-8">
                        <div class="size-10 rounded-full bg-primary text-white flex items-center justify-center font-bold text-lg">2</div>
                        <h2 class="text-2xl font-bold text-text-main dark:text-white">{{ __('checkout.heading|Additional Information') }}</h2>
                    </div>
                    <p class="text-sm text-text-muted mb-6">{{ __('checkout.Please fill in the details required to set up your service.') }}</p>

                    <div v-for="(group, rowId) in customFieldDefs" :key="rowId" class="mb-8 last:mb-0">
                        <h3 class="text-sm font-bold uppercase tracking-wider text-text-muted mb-4">@{{ group.product_name }}</h3>

                        <div v-for="field in group.fields" :key="field.id" class="mb-5">
                            <label class="block text-sm font-medium text-text-main dark:text-white mb-1.5">
                                @{{ field.label }}
                                <span v-if="field.required" class="text-red-500 ml-0.5">*</span>
                            </label>

                            {{-- text / email / url / number --}}
                            <input
                                v-if="['text','email','url','number'].includes(field.type)"
                                :type="field.type"
                                v-model="customFields[rowId][field.name]"
                                :placeholder="field.placeholder || ''"
                                :class="errors['custom_fields.' + rowId + '.' + field.name] ? 'border-red-500' : 'border-gray-200 dark:border-gray-700'"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border rounded-lg text-sm focus:ring-primary focus:border-primary"
                            />

                            {{-- textarea --}}
                            <textarea
                                v-else-if="field.type === 'textarea'"
                                v-model="customFields[rowId][field.name]"
                                :placeholder="field.placeholder || ''"
                                rows="3"
                                :class="errors['custom_fields.' + rowId + '.' + field.name] ? 'border-red-500' : 'border-gray-200 dark:border-gray-700'"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border rounded-lg text-sm focus:ring-primary focus:border-primary resize-none"
                            ></textarea>

                            {{-- select --}}
                            <select
                                v-else-if="field.type === 'select'"
                                v-model="customFields[rowId][field.name]"
                                :class="errors['custom_fields.' + rowId + '.' + field.name] ? 'border-red-500' : 'border-gray-200 dark:border-gray-700'"
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border rounded-lg text-sm focus:ring-primary focus:border-primary appearance-none"
                            >
                                <option value="">{{ __('checkout.Select an option') }}</option>
                                <option v-for="opt in field.options" :key="opt.value" :value="opt.value">@{{ opt.label }}</option>
                            </select>

                            {{-- radio --}}
                            <div v-else-if="field.type === 'radio'" class="flex flex-wrap gap-4 mt-1">
                                <label v-for="opt in field.options" :key="opt.value" class="flex items-center gap-2 cursor-pointer">
                                    <input
                                        type="radio"
                                        :name="'cf_' + rowId + '_' + field.name"
                                        :value="opt.value"
                                        v-model="customFields[rowId][field.name]"
                                        class="text-primary focus:ring-primary"
                                    />
                                    <span class="text-sm text-text-main dark:text-white">@{{ opt.label }}</span>
                                </label>
                            </div>

                            {{-- checkbox --}}
                            <label v-else-if="field.type === 'checkbox'" class="flex items-center gap-3 cursor-pointer mt-1">
                                <input
                                    type="checkbox"
                                    v-model="customFields[rowId][field.name]"
                                    class="rounded text-primary focus:ring-primary"
                                />
                                <span class="text-sm text-text-main dark:text-white">@{{ field.label }}</span>
                            </label>

                            <p v-if="field.help_text" class="text-xs text-text-muted mt-1">@{{ field.help_text }}</p>
                            <p v-if="errors['custom_fields.' + rowId + '.' + field.name]" class="text-xs text-red-500 mt-1">
                                @{{ errors['custom_fields.' + rowId + '.' + field.name][0] }}
                            </p>
                        </div>
                    </div>
                </section>

                {{-- Section 3 (or 2): Payment Method --}}
                <section class="bg-surface-light dark:bg-surface-dark border border-gray-200 dark:border-gray-800 rounded-2xl p-6 md:p-8 shadow-soft">
                    <div class="flex items-center gap-4 mb-8">
                        <div class="size-10 rounded-full bg-primary text-white flex items-center justify-center font-bold text-lg">
                            @{{ Object.keys(customFieldDefs || {}).length > 0 ? 3 : 2 }}
                        </div>
                        <h2 class="text-2xl font-bold text-text-main dark:text-white">{{ __('checkout.heading|Payment Method') }}</h2>
                    </div>

                    <div class="space-y-4">
                        @foreach ($gateways as $gateway)
                        <label class="block cursor-pointer">
                            <input class="sr-only" type="radio" name="payment_method" value="{{ $gateway['id'] }}" v-model="paymentMethod" />
                            <div class="p-5 border rounded-xl transition-all"
                                :class="paymentMethod === '{{ $gateway['id'] }}' ? 'border-primary ring-1 ring-primary' : 'border-gray-200 dark:border-gray-700 hover:border-primary'">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <div class="size-5 rounded-full border transition-colors"
                                            :class="paymentMethod === '{{ $gateway['id'] }}' ? 'border-4 border-primary bg-white' : 'border-gray-300 dark:border-gray-600'"></div>
                                        <span class="font-semibold text-text-main dark:text-white">{{ $gateway['name'] }}</span>
                                    </div>
                                    @if(!empty($gateway['icon']))
                                    <img src="{{ $gateway['icon'] }}" alt="{{ $gateway['name'] }}" class="h-6" />
                                    @endif
                                </div>
                                {{-- Gateway specific form container --}}
                                <div v-if="paymentMethod === '{{ $gateway['id'] }}'" class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700 w-full" id="payment-form-{{ $gateway['id'] }}">
                                    @include('core.payment_forms.' . $gateway['id'], $gateway['formParams'] ?? [])
                                </div>
                            </div>
                        </label>
                        @endforeach
                    </div>
                </section>
            </div>

            {{-- Right Column: Order Summary --}}
            <div class="lg:col-span-5 xl:col-span-4">
                <div class="sticky top-24 space-y-6">
                    <div class="bg-white dark:bg-surface-dark border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-soft">
                        <h3 class="text-lg font-bold text-text-main dark:text-white mb-6">{{ __('checkout.heading|Order Summary') }}</h3>

                        {{-- Cart Items --}}
                        <div class="space-y-4 mb-6">
                            <div v-for="(item, key) in orderSummary.cartItems" :key="key" class="flex items-start justify-between gap-4">
                                <div class="flex gap-3">
                                    <div class="size-12 rounded-lg bg-gray-50 dark:bg-background-dark border border-gray-100 dark:border-gray-800 flex items-center justify-center shrink-0">
                                        <span class="material-symbols-outlined text-primary">inventory_2</span>
                                    </div>
                                    <div>
                                        <p class="text-sm font-bold text-text-main dark:text-white" v-html="item.name"></p>
                                        <p v-if="item?.options?.trial_available" class="text-xs text-text-muted">
                                            {{ __('checkout.Free Trial') }}: @{{ item.options.trial_period_info }}
                                        </p>
                                        <p v-if="item?.options?.trial_available && item?.options?.after_trial_price_label" class="text-xs text-text-muted">
                                            <strong>{{ __('checkout.After Trial') }}:</strong> <span v-html="item.options.after_trial_price_label"></span>
                                        </p>
                                    </div>
                                </div>
                                <span class="text-sm font-bold text-text-main dark:text-white" v-html="item.options?.price_label ?? item.priceFormatted"></span>
                            </div>
                        </div>

                        {{-- Coupon Code --}}
                        @if(($checkoutMode ?? 'cart') !== 'payment')
                        <div class="mb-6">
                            <label class="block text-xs font-bold text-text-muted uppercase mb-2">{{ __('checkout.Coupon Code') }}</label>
                            <div class="flex gap-2">
                                <input v-model="couponData.code" type="text" :disabled="couponData.applied" placeholder="{{ __('checkout.Enter code') }}"
                                    class="flex-grow px-3 py-2 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-1 focus:ring-primary focus:outline-none disabled:opacity-60" />
                                <button v-if="!couponData.applied" type="button" @click="applyCoupon"
                                    class="px-4 py-2 bg-text-main dark:bg-gray-100 dark:text-text-main text-white rounded-lg text-sm font-bold hover:bg-black dark:hover:bg-white transition-colors">
                                    {{ __('checkout.button|Apply') }}
                                </button>
                                <button v-else type="button" @click="removeCoupon"
                                    class="px-4 py-2 bg-red-500 text-white rounded-lg text-sm font-bold hover:bg-red-600 transition-colors">
                                    {{ __('checkout.button|Remove') }}
                                </button>
                            </div>
                            <p v-if="couponData.error" class="text-[10px] mt-2 text-red-500">@{{ couponData.error }}</p>
                            <p v-if="couponData.success" class="text-[10px] mt-2 text-green-500">{{ __('checkout.Coupon applied successfully!') }}</p>
                        </div>
                        @endif

                        {{-- Order Totals --}}
                        <div class="space-y-2 mb-8">
                            <div class="flex justify-between text-sm">
                                <span class="text-text-muted">{{ __('checkout.Subtotal') }}</span>
                                <span class="text-text-main dark:text-white" v-html="orderSummary.subtotal"></span>
                            </div>
                            <div v-if="orderSummary.discount" class="flex justify-between text-sm">
                                <span class="text-text-muted">{{ __('checkout.Discount Applied') }}</span>
                                <span class="text-green-500" v-html="orderSummary.discount"></span>
                            </div>
                            <div v-if="orderSummary.tax" class="flex justify-between text-sm">
                                <span class="text-text-muted">{{ __('checkout.Tax') }}</span>
                                <span class="text-text-main dark:text-white" v-html="orderSummary.tax"></span>
                            </div>
                            <div class="flex justify-between items-end pt-4 border-t border-gray-100 dark:border-gray-800">
                                <span class="text-base font-bold text-text-main dark:text-white">{{ __('checkout.Total') }}</span>
                                <span class="text-2xl font-bold text-primary" v-html="orderSummary.total"></span>
                            </div>
                        </div>

                        {{-- Complete Order Button --}}
                        <button type="submit" :disabled="!canSubmit"
                            class="w-full bg-primary hover:bg-primary-dark text-white font-bold py-4 rounded-xl transition-all shadow-lg shadow-primary/20 hover:shadow-primary/40 flex items-center justify-center gap-2 mb-4 disabled:opacity-70 disabled:cursor-not-allowed">
                            <span class="material-symbols-outlined text-[20px]">shopping_cart_checkout</span>
                            <span v-if="!submitting">{{ ($checkoutMode ?? 'cart') === 'payment' ? __('checkout.button|Pay Now') : __('checkout.button|Complete Order') }}</span>
                            <span v-else>{{ __('checkout.button|Processing...') }}</span>
                        </button>

                        <p class="text-[11px] text-center text-text-muted leading-relaxed">
                            {{ __('checkout.By completing your purchase, you agree to our Terms of Service & Privacy Policy.') }}
                        </p>
                    </div>

                    {{-- Trust Badges --}}
                    <div class="bg-gray-50 dark:bg-surface-dark border border-gray-100 dark:border-gray-800 rounded-xl p-5 space-y-4">
                        <div class="flex items-center gap-3">
                            <div class="size-10 rounded-full bg-green-50 dark:bg-green-900/20 text-green-600 flex items-center justify-center">
                                <span class="material-symbols-outlined">verified_user</span>
                            </div>
                            <div>
                                <p class="text-xs font-bold text-text-main dark:text-white">{{ __('checkout.heading|Secure Checkout') }}</p>
                                <p class="text-[10px] text-text-muted">{{ __('checkout.Your data is always encrypted.') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</main>

@include('theme::partials.recaptcha', ['action' => 'checkout_order'])
@endsection

@push('ch_footer')
{{-- Vue 3 --}}
<script src="{{ url('assets/themes/tailwind/js/vue.min.js') }}"></script>
<script src="{{ url('assets/themes/tailwind/js/axios.min.js') }}"></script>

{{-- Checkout Config --}}
<script>
    // Global variables required by paymentMethods/config.js
    const get_token_url = '{{ url('gateway/token') }}';
    const safe_redirect_url = '{{ route('gateway.safe.redirect') }}';
    const base_url = '{{ url('/') }}';
    
    // For pay order page (not used in checkout but prevents errors)
    const paying_order_id = null;
    
    // Checkout Config for Vue App
    window.checkoutConfig = {
        isLoggedIn: {{ Auth::check() ? 'true' : 'false' }},
        mode: '{{ $checkoutMode ?? 'cart' }}',
        urls: {!! json_encode($checkoutUrls ?? [
            'orderSummary' => route('ch_get_order_summary'),
            'billingDetails' => route('ch_billing_details'),
            'validateBilling' => route('frontend.validate.billing-info'),
            'updateBilling' => route('ch_update_billing'),
            'updateCart' => route('ch_cart_update'),
            'saveOrder' => route('ch_order_save'),
            'safeRedirect' => route('gateway.safe.redirect'),
            'getStates' => url('ch-admin/ajax')
        ]) !!},
        data: {
            countries: {!! $countries !!},
            states: {!! $states !!},
            userCountry: {{ $user_country ?? 'null' }},
            userState: {{ $user_state ?? 'null' }},
            couponCode: '{{ session()->get('coupon_code', '') }}',
            customFields: {!! json_encode($customFieldDefs ?? []) !!},
            customFieldsInit: {!! json_encode($customFieldsInit ?? []) !!},
        },
        messages: {
            paymentMethodRequired: '{{ __('checkout.Please select a payment method to proceed.') }}'
        }
    };
</script>
<script src="{{ asset('assets/themes/tailwind/js/checkout.js') }}"></script>
@endpush

@push('styles')
<style>
    [v-cloak] { display: none; }
</style>
@endpush