<?php
/**
 * Hyvä Themes - https://hyva.io
 * Copyright © Hyvä Themes. All rights reserved.
 * See COPYING.txt for license details.
 */

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.FoundThis
// phpcs:disable Magento2.Templates.ThisInTemplate.FoundHelper

/** @var ContactForm $block */
/** @var Escaper $escaper */
/** @var ReCaptcha $recaptcha|null */

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

// Do not replace this with $viewModels->require(ReCaptcha::class); that would break the dependency
// on the Magento_ReCaptchaContact module
$recaptcha = $block->getData('viewModelRecaptcha');
?>
<div class="flex flex-col md:flex-row justify-between py-8 gap-4">
    <form class="form contact card 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-col text-center w-full mb-12">
                <h2 class="sm:text-2xl text-xl font-medium title-font mb-4 text-gray-900">
                    <span><?= $escaper->escapeHtml(__('Write Us')) ?></span>
                </h2>
                <p class="w-full mx-auto leading-relaxed text-base"><?= $escaper->escapeHtml(
                    __('Jot us a note and we’ll get back to you as quickly as possible.')
                ) ?></p>
            </div>
            <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="form-input mt-2 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="form-input mt-2 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="form-input mt-2 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="form-input mt-2 w-full h-48" cols="5" rows="3"><?= $escaper->escapeHtml(
                                  $contactHelper->getPostValue('comment')
                              ) ?></textarea>
                </div>
                <?= $block->getChildHtml('form.additional.info') ?>
                <?= $recaptcha ? $recaptcha->getInputHtml(ReCaptcha::RECAPTCHA_FORM_ID_CONTACT) : '' ?>
            </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') ?>
            <?= $recaptcha ? $recaptcha->getLegalNoticeHtml(ReCaptcha::RECAPTCHA_FORM_ID_CONTACT) : '' ?>
        </div>
    </form>
    <script>
        function initContactForm() {
            return {
                errors: 0,
                hasCaptchaToken: 0,
                submitForm() {
                    // Do not rename $form, the variable is expected to be declared in the recaptcha output
                    const $form = document.querySelector('#<?= $escaper->escapeJs($formId) ?>');
                    <?= $recaptcha ? $recaptcha->getValidationJsHtml(ReCaptcha::RECAPTCHA_FORM_ID_CONTACT) : '' ?>

                    if (this.errors === 0) {
                        $form.submit();
                    }
                }
            }
        }
    </script>
    <div class="card lg:w-1/2 md:w-1/3">
        <?= $block->getChildHtml('contact.details') ?>
    </div>
</div>
