<?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
 */

declare(strict_types=1);

use Magento\Contact\Block\ContactForm;
use Magento\Contact\Helper\Data as ContactHelper;
use Magento\Framework\Escaper;
use Hyva\Theme\ViewModel\ReCaptcha;

// phpcs:disable Magento2.Templates.ThisInTemplate.FoundHelper

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

$formId = 'contact';
/** @var ContactHelper $contactHelper */
$contactHelper = $this->helper(ContactHelper::class);

/** @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');
$recaptchaInputFieldBlock = '';
$recaptchaLegalNoticeBlock = '';
if ($recaptchaViewModel !== null && $recaptchaData = $recaptchaViewModel->getRecaptchaData('contact')) {
    $recaptchaInputFieldBlock = $recaptchaData[ReCaptcha::RECAPTCHA_INPUT_FIELD];
    $recaptchaLegalNoticeBlock = $recaptchaData[ReCaptcha::RECAPTCHA_LEGAL_NOTICE_BLOCK];
}
?>
<div class="flex-columns-wrapper justify-between py-8 gap-4">
    <form class="form contact lg:w-1/2 md:w-2/3"
          action="<?= $escaper->escapeUrl($block->getFormAction()) ?>"
          id="<?= $escaper->escapeHtmlAttr($formId) ?>"
          method="post"
          x-data="initContactForm()"
          @submit.prevent="submitForm()"
    >
        <fieldset class="">
            <div class="flex flex-wrap -m-2">
                <div class="field name required p-2 w-1/2 text-left">
                    <label class="label text-gray-700" for="name"><span><?= $escaper->escapeHtml(
                        __('Name')
                    ) ?></span></label>
                    <input name="name" id="name" required title="<?= $escaper->escapeHtmlAttr(__('Name')) ?>"
                           value="<?= $escaper->escapeHtmlAttr(
                               $contactHelper->getPostValue('name')
                                   ?: $contactHelper->getUserName()
                           ) ?>"
                           class="mt-2 input input-light w-full"
                           type="text"
                           placeholder="<?= $escaper->escapeHtml(__('Name')) ?>"
                    />
                </div>
                <div class="field email required p-2 w-1/2 text-left">
                    <label class="label text-gray-700" for="email"><span><?= $escaper->escapeHtml(
                        __('Email')
                    ) ?></span></label>
                    <input name="email" id="email" required title="<?= $escaper->escapeHtmlAttr(__('Email')) ?>"
                           value="<?= $escaper->escapeHtmlAttr(
                               $contactHelper->getPostValue('email')
                                   ?: $contactHelper->getUserEmail()
                           ) ?>"
                           class="mt-2 input input-light w-full"
                           placeholder="<?= $escaper->escapeHtmlAttr(__('Email')) ?>"
                           type="email"/>
                </div>
                <div class="field telephone p-2 w-1/2 text-left">
                    <label class="label text-gray-700" for="telephone"><span><?= $escaper->escapeHtml(
                        __('Phone Number')
                    ) ?></span></label>
                    <input name="telephone" id="telephone"
                           title="<?= $escaper->escapeHtmlAttr(__('Phone Number')) ?>"
                           value="<?= $escaper->escapeHtmlAttr(
                               $contactHelper->getPostValue('telephone')
                           ) ?>"
                           class="mt-2 input input-light w-full"
                           placeholder="<?= $escaper->escapeHtmlAttr(__('Phone Number')) ?>"
                           type="text"/>
                </div>
                <div class="field comment required p-2 w-full text-left">
                    <label class="label text-gray-700" for="comment"><span><?= $escaper->escapeHtml(
                        __('What’s on your mind?')
                    ) ?></span></label>
                    <textarea name="comment" id="comment" required
                              title="<?= $escaper->escapeHtmlAttr(__('What’s on your mind?')) ?>"
                              class="mt-2 input input-light w-full h-48" cols="5" rows="3"><?= $escaper->escapeHtml(
                                  $contactHelper->getPostValue('comment')
                              ) ?></textarea>
                </div>
                <?= $block->getChildHtml('form.additional.info') ?>
                <?= $block->getBlockHtml($recaptchaInputFieldBlock) ?>
            </div>
        </fieldset>
        <div class="w-full">
            <?= $block->getBlockHtml('formkey') ?>
            <button type="submit" title="<?= $escaper->escapeHtmlAttr(__('Submit')) ?>" class="btn btn-primary">
                <span><?= $escaper->escapeHtml(__('Submit')) ?></span>
            </button>
        </div>
        <div class="w-full">
            <?= $block->getChildHtml('form.additional.after') ?>
            <?= $block->getBlockHtml($recaptchaLegalNoticeBlock) ?>
        </div>
    </form>
    <script>
        function initContactForm() {
            return {
                errors: 0,
                hasCaptchaToken: 0,
                submitForm() {
                    // Do not rename $form, it is expected to be declared in the child block output
                    const $form = document.querySelector('#<?= $escaper->escapeJs($formId) ?>');
                    <?= $block->getChildHtml('recaptcha_validation'); ?>

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