{{--
    The reCAPTCHA challenge on the public sign-in forms.

    Renders NOTHING unless this host's panel has it switched on, with both keys
    set AND the middleware actually going to verify it — App\Support\Recaptcha::active()
    is the single source of truth, shared with VerifyRecaptcha. Rendering a
    challenge the server never checks (the case of a demo-mode install) only
    put an obstacle in front of the visitor for nothing.

    Renders the CONFIGURED version. It used to always render the v2 checkbox:
    with a saved v3 key, Google would answer "ERROR for site owner: Invalid key
    type" right in the visitor's face, and on a reseller's store it could even
    be a key that wasn't for their domain at all.
--}}
@php($recaptcha = app(\App\Support\Recaptcha::class))

@if ($recaptcha->active())
    @if ($recaptcha->version() === 'v3')
        {{-- v3: no visible challenge. The token is requested on submit and travels hidden. --}}
        <div data-rf-recaptcha-v3 data-sitekey="{{ $recaptcha->siteKey() }}">
            <input type="hidden" name="recaptcha_token" value="">
        </div>

        {{-- No async/defer: grecaptcha has to exist by the time the visitor
             submits, or the first attempt would go out without a token and get
             rejected. --}}
        <script src="https://www.google.com/recaptcha/api.js?render={{ $recaptcha->siteKey() }}"></script>
        <script>
            (function () {
                'use strict';

                var host = document.querySelector('[data-rf-recaptcha-v3]');
                var form = host && host.closest('form');
                var field = host && host.querySelector('input[name="recaptcha_token"]');

                if (!form || !field) return;

                /* How long to wait for Google before sending the form anyway. */
                var TOKEN_TIMEOUT_MS = 8000;

                var sent = false;

                /*
                 | Actually submits the form, with or without a token.
                 |
                 | TWO THINGS HAVE TO HAPPEN HERE, AND BOTH WERE MISSING:
                 |
                 | 1. THE ANTI-DOUBLE-SUBMIT LOCK HAS TO BE RELEASED. The submit
                 |    we just canceled already left the form marked as "in
                 |    flight" (data-rf-submitting, app.js), and that guard
                 |    REJECTS any later submit while the mark is still set. With
                 |    the mark still on, this re-submit was silently dropped: the
                 |    token would arrive from Google, get saved into the field...
                 |    and the request never went out. The visitor was left with a
                 |    dead button, no message, and no way to retry short of
                 |    reloading. That left the ENTIRE product's form-based
                 |    sign-in DEAD. Clearing the mark lets the guard re-arm itself
                 |    on the submit below, so the protection isn't lost.
                 |
                 | 2. IT HAS TO SUBMIT EVEN WHEN GOOGLE FAILS. A token that never
                 |    arrives — a blocked script, a dropped connection, a key
                 |    that isn't valid for this domain — can't turn into a dead
                 |    button. It submits without a token and lets the server
                 |    decide, which fails CLOSED and answers with a message the
                 |    visitor can read and act on.
                 */
                function send() {
                    if (sent) return;
                    sent = true;

                    delete form.dataset.rfSubmitting;

                    form.requestSubmit ? form.requestSubmit() : form.submit();
                }

                form.addEventListener('submit', function (event) {
                    // Second pass: the token is already resolved, let the real submit through.
                    if (sent || typeof grecaptcha === 'undefined') return;

                    event.preventDefault();

                    // The clock starts BEFORE talking to Google: if grecaptcha.ready()
                    // never calls back, there would be no other way out.
                    var fallback = window.setTimeout(send, TOKEN_TIMEOUT_MS);

                    grecaptcha.ready(function () {
                        grecaptcha.execute(host.dataset.sitekey, { action: 'auth' })
                            .then(function (token) { field.value = token; })
                            .catch(function () { /* no token: the server decides */ })
                            .then(function () {
                                window.clearTimeout(fallback);
                                send();
                            });
                    });
                });
            })();
        </script>
    @else
        <div>
            <div class="g-recaptcha" data-sitekey="{{ $recaptcha->siteKey() }}"></div>
        </div>

        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    @endif

    @error($recaptcha->tokenField())
        <p class="rf-hint" style="color:var(--color-danger);">{{ $message }}</p>
    @enderror
@endif