<?php

use Hyva\Theme\ViewModel\ReCaptcha;
use Magento\Framework\Escaper;
use Magento\Newsletter\Block\Subscribe;

/** @var Subscribe $block */
/** @var Escaper $escaper */

/** @var ReCaptcha $recaptchaViewModel */
//Do not replace this with $viewModels->require(ReCaptcha::class); that might break the dependency on
//Magento's Recaptcha module
$recaptchaViewModel = $block->getData('viewModelRecaptcha');
$recaptchaInputField = '';
$recaptchaLegalNotice = '';
if ($recaptchaViewModel !== null && $recaptchaData = $recaptchaViewModel->getRecaptchaData('newsletter')) {
    $recaptchaInputField = $block->getBlockHtml($recaptchaData[ReCaptcha::RECAPTCHA_INPUT_FIELD]);
    $recaptchaLegalNotice = $block->getBlockHtml($recaptchaData[ReCaptcha::RECAPTCHA_LEGAL_NOTICE_BLOCK]);
}
?>
 <div class="mb-2.5 lg:mb-0 w-full lg:w-1/2">
    <p class="font-bold uppercase text-xl mb-3 lg:mb-2.5 tracking-wider">
            <?= $escaper->escapeHtml(__('Sign up and receive the latest offers')) ?>
    </p>
    <p><?= $escaper->escapeHtml(__("Receive offers and be first to hear about news and updates plus much more")) ?></p>
</div>
<div class="w-full lg:w-1/2">
    <form class="form subscribe"
          action="<?= $escaper->escapeUrl($block->getFormActionUrl()) ?>"
          method="post"
          x-data="initNewsletterForm()"
          @submit.prevent="submitForm()"
          id="newsletter-validate-detail">
        <div class="md:flex justify-center">
            <input name="email"
                   type="email"
                   aria-label="<?= $escaper->escapeHtml(__('Email Address')) ?>"
                   required
                   id="newsletter-subscribe"
                   class="input w-full focus:ring-0 focus:outline-none focus:shadow-none mb-2 md:mb-0 md:mr-0 md:w-2/3"
                   placeholder="<?= $escaper->escapeHtmlAttr(__('Your email address')) ?>" type="text"
            />
            <?= $block->getBlockHtml('formkey') ?>
            <button class="btn w-full justify-center md:w-1/3 font-bold">
                <?= $escaper->escapeHtmlAttr(__('Sign Up')) ?>
            </button>
            <?= /** @noEscape */ $recaptchaInputField ?>
        </div>
        <div>
            <template x-if="displayErrorMessage">
                <p class="flex items-center text-red">
                    <span class="inline-block w-8 h-8 mr-3">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                             stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </span>
                    <template x-for="errorMessage in errorMessages">
                        <span x-html="errorMessage"></span>
                    </template>
                </p>
            </template>
        </div>
    </form>
    <div class="w-full">
    <?= /** @noEscape */ $recaptchaLegalNotice ?>
    </div>
    <script>
        function initNewsletterForm() {
            return {
                errors: 0,
                hasCaptchaToken: 0,
                displayErrorMessage: false,
                errorMessages: [],
                setErrorMessages(messages) {
                    this.errorMessages = [messages]
                    this.displayErrorMessage = this.errorMessages.length
                },
                submitForm() {
                    var $form = document.querySelector('#newsletter-validate-detail');
                    <?= $block->getChildHtml('recaptcha_validation_newsletter'); ?>

                    if (this.errors === 0) {
                        $form.submit();
                    }
                }
            }
        }
    </script>
</div>
