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

use Magento\Framework\Escaper;
use Magento\Framework\View\Helper\SecureHtmlRenderer;
use Magento\Sales\Block\Widget\Guest\Form as GuestFormWidget;

/** @var GuestFormWidget $block */
/** @var Escaper $escaper */
/** @var SecureHtmlRenderer $secureRenderer */
?>
<div class="card">
    <form class="form form-orders-search"
          id="oar-widget-orders-and-returns-form"
          action="<?= $escaper->escapeUrl($block->getActionUrl()) ?>"
          method="post" name="guest_post"
          x-data="initForm()">
        <fieldset class="fieldset">
            <?= $block->getBlockHtml('formkey') ?>
            <legend class="legend"><span><?= $escaper->escapeHtml(__('Order Information')) ?></span></legend>
            <div class="md:grid grid-cols-2 gap-4">
                <div class="field">
                    <label class="label" for="oar-order-id"><span><?= $escaper->escapeHtml(
                        __('Order ID')
                    ) ?></span></label>
                    <div class="control">
                        <input type="text" class="form-input w-full" id="oar-order-id" name="oar_order_id"
                               required>
                    </div>
                </div>
                <div class="field">
                    <label class="label" for="quick-search-type-id">
                        <span><?= $escaper->escapeHtml(__('Find Order By')) ?></span>
                    </label>
                    <div class="control">
                        <select name="oar_type" id="quick-search-type-id" class="form-select w-full"
                                @change="authenticateBy = event.target.value">
                            <option value="email"><?= $escaper->escapeHtml(__('Email')) ?></option>
                            <option value="zip"><?= $escaper->escapeHtml(__('ZIP Code')) ?></option>
                        </select>
                    </div>
                </div>
                <div class="field">
                    <label class="label" for="oar-billing-lastname">
                        <span><?= $escaper->escapeHtml(__('Billing Last Name')) ?></span>
                    </label>
                    <div class="control">
                        <input type="text" class="form-input w-full" id="oar-billing-lastname"
                               name="oar_billing_lastname"
                               required>
                    </div>
                </div>
                <div class="field" x-show="authenticateBy !== 'zip'">
                    <label class="label" for="oar_email"><span><?= $escaper->escapeHtml(
                        __('Email')
                    ) ?></span></label>
                    <div class="control">
                        <input type="email" class="form-input w-full"
                               id="oar_email" name="oar_email" :required="authenticateBy !== 'zip'"
                        >
                    </div>
                </div>
                <div class="field" x-show="authenticateBy === 'zip'">
                    <label class="label" for="oar_zip"><span><?= $escaper->escapeHtml(
                        __('Billing ZIP Code')
                    ) ?></span></label>
                    <div class="control">
                        <input type="text" class="form-input w-full"
                               id="oar_zip" name="oar_zip" :required="authenticateBy === 'zip'"
                        >
                    </div>
                </div>
            </div>
        </fieldset>
        <div class="actions-toolbar">
            <div class="primary">
                <button type="submit" title="<?= $escaper->escapeHtml(__('Continue')) ?>"
                        class="action submit primary">
                    <span><?= $escaper->escapeHtml(__('Continue')) ?></span>
                </button>
            </div>
        </div>
    </form>
    <script>
        function initForm() {
            return {
                authenticateBy: 'email'
            }
        }
    </script>
</div>
