@extends('frontend::layouts.master')

@section('content')
    <!-- ================= SECTION 1: HERO ================= -->
    @if (!empty($scholarship))
        <section id="scholarship" class="relative bg-myis-dark text-white overflow-hidden min-h-[85vh] flex items-center">
            <!-- Gradient Overlay -->
            <div class="absolute inset-0 bg-gradient-to-r from-myis-dark/95 via-myis-dark/80 to-transparent z-10"></div>
            <!-- Hero Image -->
            <div class="absolute inset-0 z-0 overflow-hidden">
                <img src="{{ $scholarship['image'] ?? '' }}" alt="{{ $scholarship['name'] ?? '' }}"
                    class="w-full h-full object-cover">
            </div>

            <div class="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 w-full">
                <div class="max-w-3xl">
                    @if (!empty($scholarship['name']))
                        <span
                            class="inline-block py-1.5 px-4 rounded-sm border border-myis-primary/50 text-white text-xs font-semibold tracking-[0.2em] uppercase mb-6 bg-myis-primary/50 backdrop-blur-sm">
                            {!! $scholarship['name'] ?? '' !!}
                        </span>
                    @endif
                    {!! $scholarship['detail'] ?? '' !!}
                    <a href="#register-interest-form"
                        class="group inline-flex items-center bg-myis-primary hover:bg-myis-secondary text-white text-sm font-medium py-4 px-8 rounded-sm transition-all duration-300 shadow-lg">
                        @lang('frontend::lang.register_interest_to_apply')
                        <i data-lucide="arrow-right"
                            class="ml-3 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
                    </a>
                </div>
            </div>
        </section>
    @endif


    <!-- ================= SECTION 2: OVERVIEW ================= -->
    <section id="overview" class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-xs font-semibold text-myis-primary tracking-[0.2em] uppercase mb-3 relative z-10"
                style="bottom: -70px;">{{ $overview['name'] ?? '' }}</h2>
            {!! $overview['detail'] ?? '' !!}
        </div>
    </section>

    <!-- ================= SECTION 3: WHO SHOULD APPLY ================= -->
    @if (!empty($should_apply['dt']) || !empty($should_apply['content']))
        <section class="relative py-24 bg-myis-gray overflow-hidden">

            <!-- Background Image -->
            @if (!empty($should_apply['dt']['image']))
                <div class="absolute inset-0 z-0">
                    <img src="{{ $should_apply['dt']['image'] }}" alt="{{ $should_apply['dt']['name'] ?? '' }}"
                        class="w-full h-full object-cover">
                </div>
            @endif

            <!-- Overlay -->
            <div class="absolute inset-0 bg-gradient-to-b from-myis-primary/90 via-myis-primary/60 to-myis-primary/40 z-10">
            </div>

            <div class="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                @if (!empty($should_apply['dt']['name']))
                    <div class="text-center">
                        <h2
                            class="text-xs font-semibold text-white tracking-[0.2em] uppercase mb-3 text-center py-1.5 px-4 rounded-sm bg-myis-primary/100 inline-block">
                            {!! $should_apply['dt']['name'] ?? '' !!}</h2>
                    </div>
                @endif
                @if (!empty($should_apply['dt']['desc']))
                    <h3 class="text-3xl md:text-4xl font-light text-white mb-16 text-center">{!! $should_apply['dt']['desc'] ?? '' !!}</h3>
                @endif

                @if (!empty($should_apply['content']['list']))
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                        @foreach ($should_apply['content']['list'] as $content)
                            <div
                                class="p-8 bg-white rounded-sm border border-transparent hover:border-myis-primary/20 transition-all duration-300 shadow-sm hover:shadow-md">
                                <img src="{{ $content['image'] ?? '' }}" alt="{{ $content['name'] ?? '' }}"
                                    stroke-width="1.5" class="w-7 h-7 object-cover">
                                {{-- <i data-lucide="graduation-cap" class="text-myis-primary mb-6 w-7 h-7" stroke-width="1.5"></i> --}}
                                <h4 class="text-base font-medium text-myis-dark mb-3 mt-5">{!! $content['name'] ?? '' !!}</h4>
                                <p class="text-myis-dark/60 text-sm font-light leading-relaxed">{!! $content['desc'] ?? '' !!}</p>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </section>
    @endif

    <!-- ================= SECTION 4 & 5: ELIGIBILITY & EXPECTATIONS ================= -->
    @if (!empty($expectations))
        <section class="py-24 bg-myis-dark text-white relative">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div class="grid grid-cols-1 lg:grid-cols-1 gap-20 items-center">
                    <!-- Section 5: Expectations -->
                    <div class="relative">
                        <div class="bg-[#1A1F24] p-10 relative z-10 rounded-sm border border-white/5 shadow-2xl">
                            @if (!empty($expectations['name']))
                                <h2 class="text-xs font-semibold text-myis-secondary tracking-[0.2em] uppercase mb-3">
                                    {!! $expectations['name'] ?? '' !!}</h2>
                            @endif
                            {!! $expectations['detail'] ?? '' !!}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif


    <!-- ================= SECTION 6: WHY MYIS ================= -->
    @if (!empty($why_myis))
        <section id="why-myis" class="py-24 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                    <!-- Image Side -->
                    <div class="relative h-[500px] lg:h-[700px] rounded-sm overflow-hidden order-2 lg:order-1 shadow-lg">
                        @if (!empty($why_myis['image']))
                            <img src="{{ $why_myis['image'] }}" alt="{{ $why_myis['name'] ?? '' }}"
                                class="absolute inset-0 w-full h-full object-cover">
                        @endif
                        <div class="absolute inset-0 bg-gradient-to-t from-myis-dark/60 to-transparent flex items-end p-8">
                            <p class="text-white text-lg font-light">{!! $why_myis['desc'] ?? '' !!}</p>
                        </div>
                    </div>

                    <!-- Content Side -->
                    <div class="order-1 lg:order-2">
                        {!! $why_myis['detail'] ?? '' !!}
                    </div>
                </div>
            </div>
        </section>
    @endif


    <!-- ================= SECTION 7: PATHWAYS (DROPDOWNS) ================= -->
    @if (!empty($pathways['content']) || !empty($pathways['dt']))
        <section id="pathways" class="py-24 bg-myis-gray border-y border-gray-200">
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-xs font-semibold text-myis-primary tracking-[0.2em] uppercase mb-3">
                        {!! $pathways['dt']['name'] ?? '' !!}</h2>

                    {!! $pathways['dt']['detail'] ?? '' !!}
                </div>

                <!-- Alpine.js Accordion / Dropdowns -->
                <div x-data="{ activeAccordion: 1 }" class="space-y-4">
                    <!-- Dropdown 1 -->
                    @if (!empty($pathways['content']['list']))
                        @foreach ($pathways['content']['list'] as $k => $list)
                            <div class="bg-white border border-gray-200 rounded-sm shadow-sm overflow-hidden">
                                <button
                                    @click="activeAccordion = activeAccordion === {{ $k + 1 }} ? null : {{ $k + 1 }}"
                                    class="w-full flex justify-between items-center p-6 bg-white hover:bg-gray-50 transition-colors focus:outline-none"
                                    x-init="if (activeAccordion === undefined || activeAccordion === null) activeAccordion = {{ $k === 0 ? 1 : 'activeAccordion' }}">
                                    <h4 class="text-xl font-medium text-myis-dark text-left">{!! $list['name'] ?? '' !!}</h4>
                                    <i data-lucide="chevron-down"
                                        class="text-myis-primary w-5 h-5 transform transition-transform duration-300"
                                        :class="activeAccordion === {{ $k + 1 }} ? 'rotate-180' : ''"></i>
                                </button>
                                <div x-show="activeAccordion === {{ $k + 1 }}" x-collapse style="display: none;"
                                    class="px-6 pb-6 pt-2 border-t border-gray-100">
                                    <p class="text-myis-dark/70 font-light text-sm leading-relaxed mb-4">
                                        {!! $list['desc'] ?? '' !!}
                                    </p>
                                    <div class="bg-myis-gray p-4 rounded-sm border-l-2 border-myis-primary">
                                        {!! $list['detail'] ?? '' !!}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </section>
    @endif


    @if (!empty($application_process['dt']) || !empty($application_process['content']))
        <!-- ================= SECTION 8: APPLICATION PROCESS ================= -->
        <section id="application" class="py-24 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-xs font-semibold text-myis-primary tracking-[0.2em] uppercase mb-3 text-center">
                    {!! $application_process['dt']['name'] ?? '' !!}</h2>
                <h3 class="text-3xl md:text-4xl font-light text-myis-dark text-center mb-20">{!! $application_process['dt']['desc'] ?? '' !!}</h3>

                @if (!empty($application_process['content']['list']))
                    @php
                        $steps = $application_process['content']['list'];
                        $stepIndex = 0;
                    @endphp

                    @foreach (array_chunk($steps, 4) as $chunk)
                        <div class="relative max-w-7xl mx-auto mb-12 last:mb-0">
                            <div class="hidden md:block absolute top-6 left-12 right-12 h-px bg-gray-200 z-0"></div>

                            <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
                                @foreach ($chunk as $ls)
                                    @php
                                        $stepIndex++;
                                    @endphp
                                    <div class="relative z-10 flex flex-col items-center text-center">
                                        <div
                                            class="w-12 h-12 bg-white border-2 border-myis-primary text-myis-primary flex items-center justify-center text-sm font-semibold rounded-full mb-6 shadow-sm">
                                            {{ sprintf('%02d', $stepIndex) }}</div>
                                        <h4 class="font-medium text-myis-dark mb-3">{!! $ls['name'] ?? '' !!}</h4>
                                        {!! $ls['detail'] ?? '' !!}
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                @endif
                <div class="mt-20 text-center">
                    @if (!empty($application_process['dt']['publish_at']))
                        <div class="inline-block border border-gray-200 bg-myis-gray px-8 py-4 rounded-sm shadow-sm">
                            <p class="text-myis-dark text-base font-light">
                                @lang('frontend::lang.deadline_to_apply') <span
                                    class="text-myis-primary font-bold ml-2">{{ date('d M Y', strtotime($application_process['dt']['publish_at'])) }}</span>
                            </p>
                        </div>
                    @endif
                </div>
            </div>
        </section>
    @endif


    <!-- ================= SECTION 9: REGISTER FORM ================= -->
    <section id="register-interest-form" class="py-24 bg-myis-dark relative">

        <div class="absolute inset-0 bg-gradient-to-b from-myis-primary/100 to-myis-dark/100 z-10"></div>

        <!-- <div class="absolute inset-0 z-0 overflow-hidden">
                <img
                    src="{{ asset('modules/frontend/images/mockup/mockup-04.jpg') }}"
                    alt="MYIS Scholarship Hero"
                    class="w-full h-full object-cover"
                >
            </div> -->

        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="bg-white shadow-2xl rounded-sm overflow-hidden">

                <div
                    class="border-b border-myis-gray p-10 md:p-12 text-center bg-gradient-to-b from-myis-gray/50 to-transparent relative overflow-hidden">
                    <!-- Abstract Background element -->
                    <div class="absolute top-0 right-0 -mt-10 -mr-10 w-40 h-40 bg-myis-primary/5 rounded-full blur-3xl">
                    </div>

                    <h2 class="text-xs font-semibold text-myis-primary tracking-[0.2em] uppercase mb-3 relative z-10">
                        {!! $register_interest_form['dt']['name'] ?? '' !!}</h2>
                    <h3 class="text-3xl font-light text-myis-dark mb-2 relative z-10">{!! $register_interest_form['dt']['desc'] ?? '' !!}</h3>
                    <p class="text-myis-dark/60 font-light text-sm relative z-10">{!! $register_interest_form['dt']['detail'] ?? '' !!}</p>
                </div>

                <!-- Form Submission Success Message (Alpine.js State) -->
                <div x-show="formSubmitted" style="display: none;" class="p-16 text-center">
                    <div class="w-16 h-16 bg-myis-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i data-lucide="check-circle-2" class="w-8 h-8 text-myis-primary" stroke-width="1.5"></i>
                    </div>
                    <h4 class="text-2xl font-light text-myis-dark mb-4">@lang('frontend::lang.submission_successful')</h4>
                    <p class="text-myis-dark/60 font-light text-sm mb-8 max-w-md mx-auto leading-relaxed">
                        @lang('frontend::lang.thank_you_for_your_interest')
                    </p>
                    <button
                        @click="
                            formSubmitted = false;
                            $el.closest('.bg-white').querySelector('form')?.reset();
                            if (window.grecaptcha && window.scholarshipCaptchaWidgetId !== undefined) {
                                window.grecaptcha.reset(window.scholarshipCaptchaWidgetId);
                                const captchaInput = document.getElementById('captcha_token');
                                if (captchaInput) captchaInput.value = '';
                            }
                        "
                        class="text-myis-primary text-sm font-medium hover:text-myis-secondary transition-colors uppercase tracking-wider">
                        @lang('frontend::lang.submit_another_inquiry')
                    </button>
                </div>

                <!-- Registration Form -->
                <!-- Use @csrf in Laravel -->
                <form x-show="!formSubmitted"
                    @submit.prevent="
                        const form = $event.target;
                        const payload = new FormData(form);
                        const hasRecaptcha = !!document.getElementById('recaptcha')?.value;
                        const captchaToken = document.getElementById('captcha_token')?.value || '';
                        if (hasRecaptcha && !captchaToken) {
                            alert('Please complete reCAPTCHA.');
                            return;
                        }

                        fetch('{{ request()->routeIs('lang.*') ? route('lang.frontend.register_interest', ['locale' => app()->getLocale()]) : route('frontend.register_interest') }}', {
                            method: 'POST',
                            headers: { 'Accept': 'application/json' },
                            body: payload
                        })
                        .then(async (response) => {
                            const data = await response.json();
                            if (!response.ok) {
                                throw new Error(data.message || 'Submit failed');
                            }
                            formSubmitted = true;
                            form.reset();
                            if (window.grecaptcha && window.scholarshipCaptchaWidgetId !== undefined) {
                                window.grecaptcha.reset(window.scholarshipCaptchaWidgetId);
                                const captchaInput = document.getElementById('captcha_token');
                                if (captchaInput) captchaInput.value = '';
                            }
                            if (window.toggleSubmitButtonState) {
                                window.toggleSubmitButtonState(!hasRecaptcha);
                            }
                        })
                        .catch((error) => {
                            alert(error.message || 'Unable to submit form.');
                        });
                    "
                    class="p-10 md:p-12">
                    @csrf

                    <!-- Student Information -->
                    <h4
                        class="text-sm font-semibold text-myis-dark tracking-widest uppercase mb-6 border-b border-gray-200 pb-2">
                        {!! __('frontend::lang.student_information') !!}</h4>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-6 mb-12">
                        <div>
                            <label
                                class="block text-xs font-medium text-myis-dark/70 mb-2 uppercase tracking-wide">@lang('frontend::lang.student_name')
                                <span class="text-red-500">*</span></label>
                            <input type="text" name="student_name" required
                                class="w-full bg-myis-gray border-none px-4 py-3 text-sm focus:ring-1 focus:ring-myis-primary outline-none transition-shadow rounded-sm"
                                placeholder="John Doe" />
                        </div>
                        <div>
                            <label
                                class="block text-xs font-medium text-myis-dark/70 mb-2 uppercase tracking-wide">@lang('frontend::lang.student_nickname')
                                <span class="text-red-500">*</span></label>
                            <input type="text" name="student_nickname" required
                                class="w-full bg-myis-gray border-none px-4 py-3 text-sm focus:ring-1 focus:ring-myis-primary outline-none transition-shadow rounded-sm"
                                placeholder="Johnny" />
                        </div>
                        <div>
                            <label
                                class="block text-xs font-medium text-myis-dark/70 mb-2 uppercase tracking-wide">@lang('frontend::lang.student_date_of_birth')
                                <span class="text-red-500">*</span></label>
                            <input type="date" name="student_date_of_birth" required
                                class="w-full bg-myis-gray border-none px-4 py-3 text-sm focus:ring-1 focus:ring-myis-primary text-myis-dark/80 outline-none transition-shadow rounded-sm" />
                        </div>
                        <div>
                            <label
                                class="block text-xs font-medium text-myis-dark/70 mb-2 uppercase tracking-wide">@lang('frontend::lang.student_nationality')
                                <span class="text-red-500">*</span></label>
                            <input type="text" name="student_nationality" required
                                class="w-full bg-myis-gray border-none px-4 py-3 text-sm focus:ring-1 focus:ring-myis-primary outline-none transition-shadow rounded-sm"
                                placeholder="e.g. Thai, American" />
                        </div>
                        <div class="md:col-span-2">
                            <label
                                class="block text-xs font-medium text-myis-dark/70 mb-2 uppercase tracking-wide">@lang('frontend::lang.student_current_school')
                                <span class="text-red-500">*</span></label>
                            <input type="text" name="student_current_school" required
                                class="w-full bg-myis-gray border-none px-4 py-3 text-sm focus:ring-1 focus:ring-myis-primary outline-none transition-shadow rounded-sm"
                                placeholder="School Name" />
                        </div>
                    </div>

                    <!-- Parent Information -->
                    <h4
                        class="text-sm font-semibold text-myis-dark tracking-widest uppercase mb-6 border-b border-gray-200 pb-2">
                        {!! __('frontend::lang.parent_information') !!}</h4>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-6 mb-12">
                        <div class="md:col-span-2">
                            <label
                                class="block text-xs font-medium text-myis-dark/70 mb-2 uppercase tracking-wide">@lang('frontend::lang.parent_name')
                                <span class="text-red-500">*</span></label>
                            <input type="text" name="parent_name" required
                                class="w-full bg-myis-gray border-none px-4 py-3 text-sm focus:ring-1 focus:ring-myis-primary outline-none transition-shadow rounded-sm"
                                placeholder="Jane Doe" />
                        </div>
                        <div>
                            <label
                                class="block text-xs font-medium text-myis-dark/70 mb-2 uppercase tracking-wide">@lang('frontend::lang.parent_phone_number')
                                <span class="text-red-500">*</span></label>
                            <input type="tel" name="parent_phone_number" required
                                class="w-full bg-myis-gray border-none px-4 py-3 text-sm focus:ring-1 focus:ring-myis-primary outline-none transition-shadow rounded-sm"
                                placeholder="+66 8X XXX XXXX" />
                        </div>
                        <div>
                            <label
                                class="block text-xs font-medium text-myis-dark/70 mb-2 uppercase tracking-wide">@lang('frontend::lang.parent_email')
                                <span class="text-red-500">*</span></label>
                            <input type="email" name="parent_email" required
                                class="w-full bg-myis-gray border-none px-4 py-3 text-sm focus:ring-1 focus:ring-myis-primary outline-none transition-shadow rounded-sm"
                                placeholder="jane.doe@email.com" />
                        </div>
                    </div>

                    <!-- Referral Source -->
                    @if (!empty($option))
                        <div class="mb-10">
                            <label
                                class="block text-xs font-medium text-myis-dark/70 mb-4 uppercase tracking-wide">@lang('frontend::lang.referral_source')
                                <span class="text-red-500">*</span></label>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                <!-- Replaced with the exact 5 options from the Google Doc -->
                                @foreach ($option as $item)
                                    <label
                                        class="flex items-center space-x-3 p-3 bg-white border border-gray-200 rounded-sm cursor-pointer hover:border-myis-primary/50 transition-colors">
                                        <input type="radio" name="referral_source" value="{{ $item['id'] }}"
                                            required
                                            class="w-4 h-4 text-myis-primary focus:ring-myis-primary border-gray-200" />
                                        <span class="text-sm font-light text-myis-dark/80">{!! $item['name'] ?? '' !!}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    @endif


                    <!-- reCAPTCHA -->
                    <div class="mb-8">
                        <div id="captcha"></div>
                        <input type="hidden" name="recaptcha" id="recaptcha"
                            value="{{ $page_init['setting']['recapcha'] ?? '' }}">
                        <input type="hidden" name="captcha" id="captcha_token">
                    </div>
                    <div class="pt-2">
                        <div class="flex items-start justify-center mb-4">
                            <label class="inline-flex items-start text-xs text-myis-dark/70 font-light">
                                <input type="checkbox" id="accept_privacy_checkbox" name="accept_privacy" required
                                    class="mt-0.5 w-4 h-4 text-myis-primary border-gray-300 rounded-sm focus:ring-myis-primary mr-2" />
                                <span>@lang('frontend::lang.by_submitting')
                                    <a href="{{ $page_init['policy']['url'] ?? '' }}"
                                        class="underline hover:text-myis-primary"
                                        target="_blank">{!! $page_init['policy']['name'] ?? '' !!}</a>.
                                </span>
                            </label>
                        </div>
                        <button id="submit_application_btn" disabled type="submit"
                            class="w-full bg-myis-primary hover:bg-myis-secondary disabled:bg-gray-400 disabled:hover:bg-gray-400 disabled:cursor-not-allowed text-white text-sm font-medium py-4 px-8 rounded-sm transition-colors uppercase tracking-widest shadow-md">
                            @lang('frontend::lang.submit_application')
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </section>

    <style>
        #submit_application_btn:disabled,
        #submit_application_btn:disabled:hover {
            background-color: #9ca3af;
            cursor: not-allowed;
        }
    </style>

    <script>
        window.logPolicyAcceptance = function() {
            fetch('{{ route('api.pdpa.accept_policy') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({})
            }).catch(() => {
                // Ignore errors: logging should not block form interactions.
            });
        };

        document.addEventListener('DOMContentLoaded', function() {
            const privacyCheckbox = document.getElementById('accept_privacy_checkbox');
            if (!privacyCheckbox) return;

            privacyCheckbox.addEventListener('change', function() {
                if (!this.checked || this.dataset.policyLogged === '1') return;

                this.dataset.policyLogged = '1';
                window.logPolicyAcceptance();
            });
        });

        window.toggleSubmitButtonState = function(enabled) {
            const submitButton = document.getElementById('submit_application_btn');
            if (!submitButton) return;

            submitButton.disabled = !enabled;
        };

        window.setCaptchaToken = function(token) {
            const target = document.getElementById('captcha_token');
            if (target) target.value = token;
            window.toggleSubmitButtonState(!!token);
        };

        window.expireCaptchaToken = function() {
            const target = document.getElementById('captcha_token');
            if (target) target.value = '';
            window.toggleSubmitButtonState(false);
        };

        window.renderScholarshipCaptcha = function() {
            const keyInput = document.getElementById('recaptcha');
            const captchaBox = document.getElementById('captcha');
            const siteKey = keyInput ? keyInput.value : '';

            if (!siteKey || !captchaBox || !window.grecaptcha) {
                // Keep submit usable when no site key is configured.
                if (!siteKey) window.toggleSubmitButtonState(true);
                return;
            }

            if (window.scholarshipCaptchaWidgetId !== undefined) {
                return;
            }

            window.scholarshipCaptchaWidgetId = window.grecaptcha.render('captcha', {
                sitekey: siteKey,
                callback: window.setCaptchaToken,
                'expired-callback': window.expireCaptchaToken
            });
        };
    </script>
    <script src="https://www.google.com/recaptcha/api.js?onload=renderScholarshipCaptcha&render=explicit" async defer>
    </script>
@endsection