<?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 Hyva\Theme\ViewModel\ReCaptcha;
use Magento\Contact\Block\ContactForm;
use Magento\Contact\Helper\Data as ContactHelper;
use Magento\Framework\Escaper;

// 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=" pt-6 my-4 max-w-[1000px] mx-auto">

    <div class="text-center mb-10">
        <div class="text-2xl lg:text-3xl font-sen font-semibold"> How can we help?</div>

    </div>
    <div class="bg-white">

        <div class="flex flex-col py-2 px-4 md:p-4 lg:p-10">
            <div class="text-base text-black p-0 font-sen">
                Nexus we believe in putting customers first and will try our very best to assist you with making your
                purchase or simply to giving your good advise. Please feel free to contact us without obligation.
                If you have been unable to find your answers to your questions in our FAQs then feel free to contact us
                by one of the following ways:
            </div>
            <form class="form contact card shadow-none p-0"
                  action="<?= $escaper->escapeUrl($block->getFormAction()) ?>"
                  id="<?= $escaper->escapeHtmlAttr($formId) ?>"
                  method="post"
                  x-data="initContactForm()"
                  @submit.prevent="submitForm()"
            >
                <fieldset class="">
                    <div class="flex flex-wrap ">
                        <div class="field name p-3 md:p-2 w-full md:w-1/2 text-left">
                            <label class="label text-black text-base font-sen" for="reason">
                                <span><?= $escaper->escapeHtml(__('Select Your Reason')) ?></span><span class="text-red">*</span>
                            </label>
                            <select class="form-input mt-2 w-full font-sen" name="reason" required id="reason" data-validate="{required:true}">
                                <option value="">Select Your Reason</option>
                                <option value="where is my order?">Where's My Order?</option>
                                <option value="want to request a return">I need to return an item</option>
                                <option value="need a quote">I have a large order / bulk quotation</option>
                                <option value="technical problem with the website">I want to report a technical
                                    problem with the website
                                </option>
                                <option value="question">I have a question about one of the products you sell
                                </option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="field name p-3 md:p-2 w-full md:w-1/2 text-left">
                            <label class="label text-black text-base font-sen" for="name">
                                <span><?= $escaper->escapeHtml(__('Name')) ?></span><span class="text-red">*</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 p-3 md:p-2 w-full md:w-1/2 text-left">
                            <label class="label text-black text-base font-sen" for="email">
                                <span><?= $escaper->escapeHtml(__('Email')) ?></span><span class="text-red">*</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-3 md:p-2 w-full md:w-1/2 text-left">
                            <label class="label text-black text-base font-sen" 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 p-3 md:p-2 w-full text-left">
                            <label class="label text-black text-base font-sen" for="comment">
                                <span><?= $escaper->escapeHtml(__('Describe your issue')) ?></span><span class="text-red">*</span>
                            </label>
                            <textarea name="comment" id="comment"
                                      title="<?= $escaper->escapeHtmlAttr(__('Describe your issue')) ?>"
                                      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 md:p-2">
                    <?= $block->getBlockHtml('formkey') ?>
                    <button type="submit" title="<?= $escaper->escapeHtmlAttr(__('Submit')) ?>"
                            class="btn btn-primary rounded font-sen">
                        <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 shadow-none p-0 mt-4">
                <?= $block->getChildHtml('contact.details') ?>
            </div>

        </div>
        <div class="text-sm md:text-base font-sen px-4 py-0 md:px-10 md:py-4">
            <strong>Please note:</strong> There is no facility to make a purchase at our premises, the counter is strictly for the collection of orders already placed.
        </div>
        <div class="rounded-lg shadow-md overflow-hidden max-w-5xl mx-auto p-4 lg:p-10">
            <iframe
                src="https://www.google.com/maps?q=64+St+Barnabas+Rd,+Leicester+LE5+4BD,+United+Kingdom&output=embed"
                width="100%"
                height="400"
                style="border:0;"
                allowfullscreen=""
                loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"
                class="w-full h-[400px] border-0">
            </iframe>

        </div>

    </div>



</div>
