<?php
/**
 * Hyvä Themes - https://hyva.io
 * Copyright © Hyvä Themes 2020-present. All rights reserved.
 * This product is licensed per Magento install
 * See https://hyva.io/license
 */

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

/** @var Subscribe $block */
/** @var Escaper $escaper */
/** @var ViewModelRegistry $viewModels */
/** @var ReCaptcha $recaptcha */
/** @var HeroiconsOutline $heroicons */

$heroicons = $viewModels->require(HeroiconsOutline::class);

// Do not replace this with $viewModels->require(ReCaptcha::class); that might break the dependency
// on the Magento_ReCaptchaNewsletter module
$recaptcha = $block->getData('viewModelRecaptcha');
?>
<div class="newsletter w-full text-center bg-primary-darker mt-2">
    <form
        class="form subscribe py-5 px-6  lg:w-1/2 2xl:w-4/12 mx-auto max-w-screen-2xl"
        action="<?= $escaper->escapeUrl($block->getFormActionUrl()) ?>"
        method="post"
        x-data="initNewsletterForm()"
        @submit.prevent="submitForm()"
        id="newsletter-validate-detail"
        aria-label="<?= $escaper->escapeHtmlAttr(__('Subscribe to Newsletter')) ?>"
    >
        <h3
            class="mb-3 text-lg lg:text-3xl font-bold font-inter text-white"
            id="footer-newsletter-heading"
        >
            <?= $escaper->escapeHtml(__('Let’s keep in touch')) ?>
        </h3>
        <div class="flex justify-center md:w-3/5 lg:w-auto mx-auto">
            <label for="newsletter-subscribe" class="sr-only">
                <?= $escaper->escapeHtml(__('Email Address')) ?>
            </label>
            <input
                name="email"
                type="email"
                required
                id="newsletter-subscribe"
                class=" inline-flex md:w-full"
                placeholder="<?= $escaper->escapeHtmlAttr(__('Enter your email address')) ?>"
                aria-describedby="footer-newsletter-heading"
            >
            <?= $block->getBlockHtml('formkey') ?>
            <?= $recaptcha ? $recaptcha->getInputHtml(ReCaptcha::RECAPTCHA_FORM_ID_NEWSLETTER) : '' ?>
            <button class="bg-primary-banyo flex font-bold font-inter gap-3 items-center justify-center text-xs md:text-base text-white px-2 md:w-30p lg:w-1/3 xl:w-1/4 2xl:w-1/3 3xl:w-1/4">
                <?= $escaper->escapeHtml(__('Sign Up')) ?>
                <svg xmlns="http://www.w3.org/2000/svg" width="11" height="19" viewBox="0 0 11 19" fill="none" class="w-2 md:w-auto">
                    <path d="M10.3845 9.50003C10.3845 9.82653 10.2599 10.153 10.0111 10.4019L2.17784 18.235C1.67955 18.7333 0.871655 18.7333 0.373566 18.235C-0.124522 17.737 -0.124522 16.9292 0.373566 16.4309L7.30483 9.50003L0.373808 2.56913C-0.124281 2.07084 -0.124281 1.26319 0.373808 0.765144C0.871896 0.266611 1.67979 0.266611 2.17808 0.765144L10.0113 8.59816C10.2601 8.8472 10.3845 9.17366 10.3845 9.50003Z" fill="white"/>
                </svg>
            </button>
        </div>
        <span class="text-white text-sm py-3 block">By entering your email you are agreeing to the Banyo privacy policy.</span>
        <div class="bg-primary-darker pb-4 flex justify-center lg:gap-6">
            <!-- Instagram -->
            <div class="rounded-full p-3">
                <img src="<?= $this->getViewFileUrl('images/Insta.svg'); ?>" alt="Instagram" class="w-10 h-10" />
            </div>

            <!-- Facebook -->
            <a href="https://www.facebook.com/BanyoUK/" target="_blank" rel="noopener" class="rounded-full p-3">
                <img src="<?= $this->getViewFileUrl('images/F.svg'); ?>" alt="Facebook" class="w-10 h-10" />
            </a>

            <!-- Pinterest -->
            <a href="https://www.pinterest.co.uk/BanyoUK/" target="_blank" rel="noopener" class="rounded-full p-3">
                <img src="<?= $this->getViewFileUrl('images/P.svg'); ?>" alt="Pinterest" class="w-10 h-10" />
            </a>

            <!-- X (Twitter) -->
            <a href="https://x.com/BanyoUK" target="_blank" rel="noopener" class="rounded-full p-3">
                <img src="<?= $this->getViewFileUrl('images/X.svg'); ?>" alt="Twitter X" class="w-10 h-10" />
            </a>

            <!-- YouTube -->
            <a href="https://www.youtube.com/@BanyoUK" target="_blank" rel="noopener" class="rounded-full p-3">
                <img src="<?= $this->getViewFileUrl('images/youtube.svg'); ?>" alt="YouTube" class="w-10 h-10" />
            </a>
        </div>
        <div>
            <template x-if="displayErrorMessage">
                <p class="flex items-center text-red">
                    <span class="inline-block w-8 h-8 mr-3">
                        <?= $heroicons->exclamationCircleHtml(); ?>
                    </span>
                    <template x-for="errorMessage in errorMessages">
                        <span x-html="errorMessage"></span>
                    </template>
                </p>
            </template>
        </div>
    </form>
    <div class="w-full">
        <?= $recaptcha ? $recaptcha->getLegalNoticeHtml(ReCaptcha::RECAPTCHA_FORM_ID_NEWSLETTER) : '' ?>
    </div>
    <script>
        function initNewsletterForm() {
            return {
                errors: 0,
                hasCaptchaToken: 0,
                displayErrorMessage: false,
                errorMessages: [],
                setErrorMessages(messages) {
                    this.errorMessages = [messages]
                    this.displayErrorMessage = this.errorMessages.length
                },
                submitForm() {
                    // Do not rename $form, the variable is expected to be declared in the recaptcha output
                    const $form = document.querySelector('#newsletter-validate-detail');
                    <?= $recaptcha ? $recaptcha->getValidationJsHtml(ReCaptcha::RECAPTCHA_FORM_ID_NEWSLETTER) : '' ?>

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