<?php
/**
 * @package SJ HikaShop Search
 * @version 1.0.0
 * @license GNU/GPL
 */
defined('_JEXEC') or die;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
HTMLHelper::stylesheet('modules/mod_sj_hikashop_search/assets/css/style.css');
$placeholder = htmlspecialchars($params->get('search_placeholder', Text::_('Search products...')), ENT_QUOTES, 'UTF-8');
$buttonText = htmlspecialchars($params->get('button_text', Text::_('Search')), ENT_QUOTES, 'UTF-8');
$showCategory = (int)$params->get('show_category', 1);
$categoryLabel = htmlspecialchars($params->get('category_label', Text::_('All Category')), ENT_QUOTES, 'UTF-8');
?>
<div class="sjhikashop-search-module <?php echo $moduleclass_sfx; ?>">	<div class="icon-search d-lg-none"></div>	<div class="overlay"></div>

    <form id="sjhikashop_search_form_<?php echo $module->id; ?>" action="<?php echo $searchUrl; ?>" method="get" class="sjhikashop-search-form mod-shop-search" role="search">
        <?php if ($showCategory && !empty($categories)): ?>
            <div class="sjhikashop-search-group sjhikashop-search-category">
                <label for="sjhikashop_search_category_<?php echo $module->id; ?>" class="sr-only"><?php echo $categoryLabel; ?></label>
                <select id="sjhikashop_search_category_<?php echo $module->id; ?>" name="cid" aria-label="<?php echo $categoryLabel; ?>">
                    <option value=""><?php echo $categoryLabel; ?></option>
                    <?php foreach ($categories as $category): ?>
                        <option value="<?php echo (int)$category->category_id; ?>"><?php echo htmlspecialchars($category->category_name, ENT_QUOTES, 'UTF-8'); ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
        <?php endif; ?>

        <div class="sjhikashop-search-group sjhikashop-search-keyword">
            <label for="sjhikashop_search_input_<?php echo $module->id; ?>" class="sr-only"><?php echo $placeholder; ?></label>
            <input id="sjhikashop_search_input_<?php echo $module->id; ?>" class="inputbox input-small" type="search" name="q" value="" placeholder="<?php echo $placeholder; ?>" autocomplete="off" />
        </div>

        <button type="submit" class="sjhikashop-search-button button btn btn-primary"><i class="fa fa-search"></i><span><?php echo $buttonText; ?></span></button>
    </form>    
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var form = document.getElementById('sjhikashop_search_form_<?php echo $module->id; ?>');
        if (!form) {
            return;
        }

        form.addEventListener('submit', function() {
            var categoryField = form.querySelector('select[name="cid"]');
            if (categoryField && categoryField.value === '') {
                categoryField.disabled = true;
            }

            var searchInput = form.querySelector('#sjhikashop_search_input_<?php echo $module->id; ?>');
            var filterInput = form.querySelector('#sjhikashop_search_filter_input_<?php echo $module->id; ?>');
            if (searchInput && filterInput) {
                filterInput.value = searchInput.value;
            }
        });
    });
</script>
