<?php
/**
 * Template for adding typeahead functionality to admin order edit address form
 */
?>

<!-- Add typeahead container to the admin order edit address form -->
<div class="afd-typeahead-container field admin__field" id="edit-address-typeahead" style="display: none;">
    <label class="admin__field-label">
            <span><?= $block->escapeHtml(__('Address Search')) ?></span>
    </label>
    <div class="afd-typeahead-field admin__field-control">
        <div class="afd-typeahead-query">
            <input 
                class="admin__control-text" 
                placeholder="<?php echo $block->getConfig('afd_typeahead/fields/placeholder') ?>" 
                type="search" 
                autocomplete="password-new" 
                id="afd-typeahead"
                name="afd-search-<?php echo rand(); ?>"
            >
        </div>
    </div>
</div>

<?php if ($block->getConfig('afd_typeahead/fields/enableManualEntryButton') == 1): ?>
    <div class="afd-manual-input-button" id="edit-address-manual-input" style="display:none"><?php echo $block->getConfig('afd_typeahead/fields/manualEntryMarkup') ?></div>
    <div class="afd-manual-input-search-button" id="edit-address-manual-input-search" style="display:none"><?php echo $block->getConfig('afd_typeahead/fields/manualEntrySearchMarkup') ?></div>
<?php endif ?>

<?php if ($block->getConfig('afd_typeahead/fields/enableSearchAgainButton') == 1): ?>
    <div class="afd-search-again" id="edit-address-search-again" style="display:none"><?php echo $block->getConfig('afd_typeahead/fields/searchAgainMarkup') ?></div>
<?php endif ?>

<script>
require(['jquery', 'afdPce', 'Afd_Pce/js/order/address/country', 'domReady!'], function($, afdPce, initCountryControl) {
    const $form = jQuery('#edit_form');

    // Initialize advanced country control
    if (typeof initCountryControl === 'function') {
        initCountryControl();
    }

    // Wait for the form to be loaded
    const initTypeahead = () => {

        const $afdTypeahead = jQuery('#afd-typeahead');

        if (!$afdTypeahead || !$afdTypeahead.typeahead) {
            window.setTimeout(initTypeahead, 100);
            return
        }

        // Move the typeahead container into the form after the company field
        const $companyField = $form.find('.field-company');
        if ($companyField.length) {
            jQuery('#edit-address-typeahead').insertAfter($companyField).show();
            jQuery('#edit-address-manual-input').insertAfter('#edit-address-typeahead');
            jQuery('#edit-address-manual-input-search').insertAfter('#edit-address-typeahead');
            jQuery('#edit-address-search-again').insertAfter('#edit-address-typeahead');
        }

        // Set data-afd-result attributes on address fields
        if (typeof afdOptions !== 'undefined' && typeof afdOptions.typeahead !== 'undefined') {
            const combineFirstLine = afdOptions.typeahead.combineFirstLine;
            const afdCounty = afdOptions.typeahead.afdCounty || 'PostalCounty';
            
            $form.find('[name="company"]').attr('data-afd-result', 'Organisation');
            $form.find('[name="street[0]"]').attr('data-afd-result', combineFirstLine ? 'Property,Street' : 'Property');
            $form.find('[name="street[1]"]').attr('data-afd-result', combineFirstLine ? 'Locality' : 'Street');
            !combineFirstLine && $form.find('[name="street[2]"]').attr('data-afd-result', 'Locality');
            $form.find('[name="city"]').attr('data-afd-result', 'Town');
            $form.find('[name="postcode"]').attr('data-afd-result', 'Postcode');
            $form.find('[name="region"]').attr('data-afd-result', afdCounty);
            $form.find('[name="region_id"]').attr('data-afd-result', afdCounty);
        }

        $afdTypeahead.afd('typeahead');
        $(document).on('afd:populateResultsComplete', function(e){
            showHideRegion(e, null, $form)
        });
    }

    // Initialize typeahead when the page is loaded
    initTypeahead();
    
});
</script>

<style>
.afd-manual-input-button,
.afd-manual-input-search-button,
.afd-search-again {
    padding-top: 8px;
    cursor: pointer;
    color: #1979c3;
    margin-bottom: 15px;
}
</style>
