<div class="bg-white mt-4 rounded-lg w-full max-w-md scrollbar-hide">
    <form id="captcha-form" x-data="formHandler()" @submit.prevent="submitForm">
        <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
        <div x-show="success" class="bg-emerald-200 text-emerald-700 px-4 py-2 rounded-md mb-4 text-xs" x-text="message"></div>
        <div x-show="error" class="bg-red-200 text-red-700 px-4 py-2 rounded-md mb-4 text-xs" x-text="message"></div>
        <div class="mb-4">
            <input type="email" id="email" x-model="email" placeholder="Il tuo indirizzo email" class="w-full px-3 py-4 border rounded-md focus:outline-none focus:border-blue-500" required>
        </div>
        <div class="mb-4" x-show="hideonsuccess">
            <label class="inline-flex items-center">
                <input type="checkbox" x-model="consent" class="form-checkbox size-8" required>
                <span class="ml-2 text-slate-700 text-xs">Ho letto l'informativa sulla <a rel="noopener" class="text-blue-500" target="_blank" href="https://www.hdnetwork.it/privacy-policy">privacy</a> e acconsento al trattamento dei dati. Dichiaro di essere maggiorenne</span>
            </label>
        </div>
        <div class="mb-4" x-show="hideonsuccess">
            <button type="submit" class="relative w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-600" @click="submitForm">
                Iscriviti
                <div class="absolute inset-y-0 end-4 flex items-center ps-3 pointer-events-none">
                    <div x-show="loading" class="spinner">
                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                    </div>
                </div>
            </button>

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



<script>
    grecaptcha.ready(function() {
        grecaptcha.execute('6LfaZgoqAAAAALGx-gX4jZH8fsXWWLtOE-9Ue5Hu', {action: 'submit'}).then(function(token) {
            document.getElementById('g-recaptcha-response').value = token;
        });
    });
    function formHandler() {
        return {
            email: '',
            consent: false,
            success: false,
            error: false,
            loading: false,
            message: '',
            hideonsuccess: true,
            submitForm() {
                if (this.email && this.consent) {
                    const domain = window.location.host;
                    this.loading = true;
                    fetch('https://www.hdmotori.it/wp-json/api/v1/newsletter-register/?timestamp=' + Date.now(), {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            email: this.email,
                            consent: this.consent,
                            refer_url: "https://www.hdmotori.it"
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        this.loading = false;
                        if (!data.error) {
                            this.success = true;
                            this.error = false;
                            this.hideonsuccess = false;
                            this.message = data.message || 'Grazie! Controlla la tua email e conferma l\'iscrizione. Controlla anche le cartelle Spam e Promozioni se non vedi l\'email di conferma';
                        } else {
                            this.success = false;
                            this.error = true;
                            this.hideonsuccess = true;
                            this.message = data.message;
                        }
                    })
                    .catch(() => {
                        this.loading = false;
                        this.success = false;
                        this.error = true;
                        this.hideonsuccess = true;
                        this.message = 'Qualcosa non va, riprova';
                    });
                } else {
                    this.success = false;
                    this.loading = false;
                    this.error = false;
                    this.hideonsuccess = true;
                    this.message = 'Per favore ricontrolla i campi';
                }
            }
        }
    }
</script>


