<style type="text/css">
    .info{
        margin: 0px;
    }
</style>
<?php if ($block->getHelper()->isEnabledExtension()): ?>
<form id="ordertracking" x-data="{...hyva.formValidation($el), ...initMyForm()}" @submit="sendRequest($event)" class="ordertracking" action="#" >    
        <?= $block->getBlockHtml('formkey') ?>
        <fieldset class="fieldset create info">
            <legend class="legend"><span>Order Information</span></legend>
            <div class="field required">
                <label for="order_id" class="label"><span><?= $block->escapeHtml(__('Order Id')) ?></span></label>
                <div class="control">
                    <input type="text" name="order_id" id="order_id" required class="input-text" />
                </div>
            </div>
            <div class="field required">
                <label for="email" class="label"><?= $block->escapeHtml(__('Email Address')) ?></label>
                <div class="control">
                    <input type="email" name="email" id="email" required class="input-text" />
                </div>
            </div>
            <div class="buttons-set actions-toolbar">
                <button type="submit" class="inline-flex shrink-0 ml-auto xl:mt-0 btn btn-primary" id="track">
                    <span><?= $block->escapeHtml(__('Track Order')) ?></span>
                </button>
            </div>
        </fieldset>
    </form>
    <div id="orderinfo" class="order-info-message p-6 shadow-md rounded-lg"></div>
<?php endif; ?>

<script>
function initMyForm() {
   return {
      sendRequest(event) {
            var dataForm = document.querySelector('#ordertracking');
            event.preventDefault();   
            const url = '<?= $block->getUrl('hyva_ordertracking/ordertracking/track') ?>';
            this.validate()
           .then(() => {
                fetch(url, {
                       method: 'POST',
                       body: new FormData(dataForm),
                       headers: {
                          'X-Requested-With': 'XMLHttpRequest'
                       }
                    })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.text(); // Parse the response as text (HTML)
                })
                .then(html => {
                    dataForm.reset(); // Reset the form
                    console.log(html); // Log the HTML response
                    document.getElementById('orderinfo').innerHTML = html; // Insert the HTML response
                    document.body.classList.remove('loading'); // Remove loading class from body
                })
                    .catch(error => console.error('Error:', error));
            })
            .catch((invalid) => {
              if (invalid.length > 0) {
                 invalid[0].focus();
              }
            });




      }
}
}
</script>
