<?php
   if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

   // Load saved search style options from the database
    $doosearchas_search_options = get_option('doosearchas_search_style_options');

    // Extract and sanitize individual style options with fallback defaults
    $width = isset($doosearchas_search_options['doosearchas_search_bar_width']) ? intval($doosearchas_search_options['doosearchas_search_bar_width']) : 100;
    $hight = isset($doosearchas_search_options['doosearchas_search_bar_hight']) ? intval($doosearchas_search_options['doosearchas_search_bar_hight']) : 12;
    $searchBarStyle = isset($doosearchas_search_options['doosearchas_search_bar_shape']) ? esc_attr($doosearchas_search_options['doosearchas_search_bar_shape']) : 'round';
    $searchBarAlginment = isset($doosearchas_search_options['doosearchas_search_bar_alignment']) ? esc_attr($doosearchas_search_options['doosearchas_search_bar_alignment']) : 'center';
    $placeholder = isset($doosearchas_search_options['doosearchas_search_bar_placeholder']) ? esc_attr($doosearchas_search_options['doosearchas_search_bar_placeholder']) : esc_attr__('Search for products...', 'doosearch-ajax-search-for-woo');
    $searchBarBoxShadow = isset($doosearchas_search_options['doosearchas_search_bar_shadow']) ? esc_attr($doosearchas_search_options['doosearchas_search_bar_shadow']) : 'on';
    $showButton = isset($doosearchas_search_options['doosearchas_search_bar_button_show']) ? $doosearchas_search_options['doosearchas_search_bar_button_show'] : '1';
    $buttonStyle = isset($doosearchas_search_options['doosearchas_search_bar_button_style']) ? esc_attr($doosearchas_search_options['doosearchas_search_bar_button_style']) : 'default';
    $searchIcon = isset($doosearchas_search_options['doosearchas_search_bar_button_icon']) ? esc_attr($doosearchas_search_options['doosearchas_search_bar_button_icon']) : 'fas fa-search';
    $searchIconColor = isset($doosearchas_search_options['doosearchas_search_bar_icon_color']) ? esc_attr($doosearchas_search_options['doosearchas_search_bar_icon_color']) : '#ffffff';
    $buttonBgColor = isset($doosearchas_search_options['doosearchas_search_bar_button_bg_color']) ? esc_attr($doosearchas_search_options['doosearchas_search_bar_button_bg_color']) : '#0073e6';
    $searchBarColor = isset($doosearchas_search_options['doosearchas_search_bar_bg_color']) ? esc_attr($doosearchas_search_options['doosearchas_search_bar_bg_color']) : '#ffffff';
    $searchBarTextColor = isset($doosearchas_search_options['doosearchas_search_bar_text_color']) ? esc_attr($doosearchas_search_options['doosearchas_search_bar_text_color']) : '#aaaaaa';
    $searchBarBorderColor = isset($doosearchas_search_options['doosearchas_search_bar_border_color']) ? esc_attr($doosearchas_search_options['doosearchas_search_bar_border_color']) : '#dddddd';
?>

<!-- === Main Search Bar Wrapper === -->
<div id="doosearchas_s-wrapper">
    <div style="
            display: flex;
            <?php echo $searchBarAlginment === 'left' ? 'justify-content: left;' : ''; ?>
            <?php echo $searchBarAlginment === 'center' ? 'justify-content: center;' : ''; ?>
            <?php echo $searchBarAlginment === 'right' ? 'justify-content: right;' : ''; ?>
        ">

        <!-- === Search Bar Container === -->
        <div style="
            display: flex; 
            align-items: center; 
            position: relative; 
            width: <?php echo esc_attr($width); ?>%;
            border: 1px solid <?php echo esc_attr($searchBarBorderColor);?>;
            <?php echo $searchBarStyle === 'round' ? 'border-radius: 30px;' : ''; ?>
            <?php echo $searchBarStyle === 'square' ? 'border-radius: 5px;' : ''; ?>
            <?php echo $searchBarBoxShadow === 'on' ? 'box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);' : ''; ?>
            <?php echo $searchBarBoxShadow === 'off' ? 'box-shadow: none;' : ''; ?>
            transition: border-color 0.3s;
            padding: 5px;
            box-sizing: border-box;
            background-color: <?php echo esc_attr($searchBarColor); ?>;
        ">

            <!-- === Primary Text Input === -->
            <input 
                id="doosearchas_s-primary-input"
                type="text" 
                placeholder="<?php echo esc_attr($placeholder); ?>" 
                aria-label="<?php esc_attr_e('Search Products', 'doosearch-ajax-search-for-woo'); ?>"
                style="
                    all:unset;
                    flex: 1; 
                    border: none !important; 
                    outline: none; 
                    font-size: 16px; 
                    background-color: <?php echo esc_attr($searchBarColor); ?>; 
                    color: <?php echo esc_attr($searchBarTextColor); ?>; 
                    padding-top: <?php echo esc_attr($hight); ?>px;
                    padding-bottom: <?php echo esc_attr($hight); ?>px;
                    padding-left: 15px;
                    padding-right: 40px; 
                    margin-left: 10px;
                    margin-right: 10px;
                ">

            <!-- === Search Submit Button === -->    
            <button 
                type="submit"
                aria-label="<?php esc_attr_e('Submit Search', 'doosearch-ajax-search-for-woo'); ?>" 
                role="button"
                style="
                    position: absolute; 
                    top: 50%; 
                    transform: translateY(-50%); 
                    display: <?php echo $showButton ? 'flex' : 'none'; ?>; 
                    justify-content: center; 
                    align-items: center; 
                    cursor: pointer; 
                    outline: none;
                    padding:0px;
                    <?php echo $buttonStyle === 'icon-only' ? 'background: none; border: none; color: ' . esc_attr($buttonBgColor) . '; font-size: 16px; right: 10px;width: auto; height: auto;' : ''; ?>
                    <?php echo $buttonStyle === 'icon-square' ? 'background: ' . esc_attr($buttonBgColor) . ';  border: none; border-radius:0px 5px 5px 0px; width: 9%; height: 100%; color: white; right: -1px;' : ''; ?>
                    <?php echo $buttonStyle === 'default' ? 'background: ' . esc_attr($buttonBgColor) . '; border: none; border-radius: 50%; width: 35px; height: 35px; color: white; right: 10px;' : ''; ?>
                ">
                <i class="<?php echo esc_attr($searchIcon); ?>" 
                style="
                    display: inline-flex;
                    color:<?php echo esc_attr($searchIconColor); ?>;
                    <?php echo $buttonStyle === 'default' ? 'font-size: 16px;' : 'font-size: 20px;'; ?>
                    line-height: 0;
                    transform: translateX(1px);
                "
                aria-hidden="true"></i>
            </button>
        </div>

        <!-- === Popup UI with Filters, Suggestions, History, and Results === -->
        <div id="doosearchas_s-popup"  >
            <div id="doosearchas_s-popup-content">
                <span id="doosearchas_s-popup-close">&times;</span>
                <div id="doosearchas_s-top">
                    <button id="doosearchas_s-filter-popup-open-btn" class="doosearchas_s-filter-open">
                        <span>
                            <svg fill="none" aria-hidden="true" height="20" viewBox="0 0 28 28" width="20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M4.40675 7.25H3C2.44772 7.25 2 6.80228 2 6.25C2 5.69772 2.44772 5.25 3 5.25H4.40675C4.82853 3.94437 6.05398 3 7.5 3C8.94602 3 10.1715 3.94437 10.5933 5.25H25C25.5523 5.25 26 5.69772 26 6.25C26 6.80228 25.5523 7.25 25 7.25H10.5933C10.1715 8.55563 8.94602 9.5 7.5 9.5C6.05398 9.5 4.82853 8.55563 4.40675 7.25ZM5.75 6.25C5.75 5.2835 6.5335 4.5 7.5 4.5C8.4665 4.5 9.25 5.2835 9.25 6.25C9.25 7.2165 8.4665 8 7.5 8C6.5335 8 5.75 7.2165 5.75 6.25Z" fill="white" fill-rule="evenodd"/><path clip-rule="evenodd" d="M3 15.25H17.4458C17.8676 16.5556 19.093 17.5 20.5391 17.5C21.9851 17.5 23.2105 16.5556 23.6323 15.25H25C25.5523 15.25 26 14.8023 26 14.25C26 13.6977 25.5523 13.25 25 13.25H23.6323C23.2105 11.9444 21.9851 11 20.5391 11C19.093 11 17.8676 11.9444 17.4458 13.25H3C2.44772 13.25 2 13.6977 2 14.25C2 14.8023 2.44772 15.25 3 15.25ZM20.5391 12.5C19.5726 12.5 18.7891 13.2835 18.7891 14.25C18.7891 15.2165 19.5726 16 20.5391 16C21.5056 16 22.2891 15.2165 22.2891 14.25C22.2891 13.2835 21.5056 12.5 20.5391 12.5Z" fill="white" fill-rule="evenodd"/><path clip-rule="evenodd" d="M10.4067 23.25H3C2.44772 23.25 2 22.8023 2 22.25C2 21.6977 2.44772 21.25 3 21.25H10.4067C10.8285 19.9444 12.054 19 13.5 19C14.946 19 16.1715 19.9444 16.5933 21.25H25C25.5523 21.25 26 21.6977 26 22.25C26 22.8023 25.5523 23.25 25 23.25H16.5933C16.1715 24.5556 14.946 25.5 13.5 25.5C12.054 25.5 10.8285 24.5556 10.4067 23.25ZM11.75 22.25C11.75 21.2835 12.5335 20.5 13.5 20.5C14.4665 20.5 15.25 21.2835 15.25 22.25C15.25 23.2165 14.4665 24 13.5 24C12.5335 24 11.75 23.2165 11.75 22.25Z" fill="white" fill-rule="evenodd"/></svg>
                        </span>
                        <span id="doosearchas_s-filter-popup-open-btn-text"><?php esc_html_e('Filters', 'doosearch-ajax-search-for-woo'); ?></span>
                    </button>
                    <div class="doosearchas_s-relative">
                        <input id="doosearchas_s-secondary-input" type="search" placeholder="Search products...">
                        <span class="doosearchas_s-spinnerSpan"></span>
                        <div id="doosearchas_s-suggestions" class="doosearchas_s-suggestions-wrapper"></div>
                    </div>
                    <?php echo do_shortcode('[doosearchas-cart-icon-ui]'); ?>
                </div>
                 <?php echo do_shortcode('[doosearchas-cart-info-ui]'); ?>

                <div id="doosearchas_s-info">
                    <div id="doosearchas_s-history-wrapper">
                        <div class="doosearchas_s-history">
                            <h4><?php esc_html_e('History', 'doosearch-ajax-search-for-woo'); ?></h4>
                        </div>
                        <div class="doosearchas_s-history-list">
                            <ul class="doosearchas_s-history-ul"></ul>
                            <p class="doosearchas_s-clear-all"><?php esc_html_e('Clear Search History', 'doosearch-ajax-search-for-woo'); ?></p>
                        </div>
                    </div>
                    <?php
                        $options = get_option('doosearchas_search_additional_options', []);
                        $recommended_ids = isset($options['doosearchas_search_recommended_products_priority_db']) ? $options['doosearchas_search_recommended_products_priority_db'] : '';
                    ?>
                    <div id="doosearchas_s-recent-items" style="display: block;">
                        <?php
                        $product_count = wp_count_posts( 'product' )->publish;
                        if ( $product_count > 0 ) {
                            echo do_shortcode('[doosearchas_recent_slider type="product" limit="10" per_slide="3" priority_ids="' . esc_attr($recommended_ids) . '"]');
                        } else {
                            echo '<p>No products publish yet.</p>';
                        }
                        ?>
                    </div>
                </div>

                <!-- Search Results with Filter Sidebar -->
                <div id="doosearchas_s-result">
                    <div id="doosearchas_s-result-filter" class="doosearchas_s-result-filter">
                        <button id="doosearchas_s-filter-popup-close-btn" class="doosearchas_s-filter-close">
                            <span>
                                <svg fill="none" role="img" aria-label="<?php esc_attr_e('Close popup icon', 'doosearch-ajax-search-for-woo'); ?>"  height="20" viewBox="0 0 28 28" width="20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M4.40675 7.25H3C2.44772 7.25 2 6.80228 2 6.25C2 5.69772 2.44772 5.25 3 5.25H4.40675C4.82853 3.94437 6.05398 3 7.5 3C8.94602 3 10.1715 3.94437 10.5933 5.25H25C25.5523 5.25 26 5.69772 26 6.25C26 6.80228 25.5523 7.25 25 7.25H10.5933C10.1715 8.55563 8.94602 9.5 7.5 9.5C6.05398 9.5 4.82853 8.55563 4.40675 7.25ZM5.75 6.25C5.75 5.2835 6.5335 4.5 7.5 4.5C8.4665 4.5 9.25 5.2835 9.25 6.25C9.25 7.2165 8.4665 8 7.5 8C6.5335 8 5.75 7.2165 5.75 6.25Z" fill="white" fill-rule="evenodd"/><path clip-rule="evenodd" d="M3 15.25H17.4458C17.8676 16.5556 19.093 17.5 20.5391 17.5C21.9851 17.5 23.2105 16.5556 23.6323 15.25H25C25.5523 15.25 26 14.8023 26 14.25C26 13.6977 25.5523 13.25 25 13.25H23.6323C23.2105 11.9444 21.9851 11 20.5391 11C19.093 11 17.8676 11.9444 17.4458 13.25H3C2.44772 13.25 2 13.6977 2 14.25C2 14.8023 2.44772 15.25 3 15.25ZM20.5391 12.5C19.5726 12.5 18.7891 13.2835 18.7891 14.25C18.7891 15.2165 19.5726 16 20.5391 16C21.5056 16 22.2891 15.2165 22.2891 14.25C22.2891 13.2835 21.5056 12.5 20.5391 12.5Z" fill="white" fill-rule="evenodd"/><path clip-rule="evenodd" d="M10.4067 23.25H3C2.44772 23.25 2 22.8023 2 22.25C2 21.6977 2.44772 21.25 3 21.25H10.4067C10.8285 19.9444 12.054 19 13.5 19C14.946 19 16.1715 19.9444 16.5933 21.25H25C25.5523 21.25 26 21.6977 26 22.25C26 22.8023 25.5523 23.25 25 23.25H16.5933C16.1715 24.5556 14.946 25.5 13.5 25.5C12.054 25.5 10.8285 24.5556 10.4067 23.25ZM11.75 22.25C11.75 21.2835 12.5335 20.5 13.5 20.5C14.4665 20.5 15.25 21.2835 15.25 22.25C15.25 23.2165 14.4665 24 13.5 24C12.5335 24 11.75 23.2165 11.75 22.25Z" fill="white" fill-rule="evenodd"/></svg>
                            </span>
                            <span>Close</span>
                        </button>
                        <div class="doosearchas_s-price-filter">
                            <p><?php esc_html_e('Filter by price', 'doosearch-ajax-search-for-woo'); ?></p>
                            <div class ="doosearchas_s-slider-wrap">
                                <div class="doosearchas_s-slider-container">
                                    <input type="range" min="0" max="1000" value="0" id="doosearchas_s-minRange" name="price" step="1" />
                                    <input type="range" min="0" max="1000" value="1000" id="doosearchas_s-maxRange" name="price" step="1" />
                                    <div class="doosearchas_s-slider-track"></div>
                                </div>
                                <div class="doosearchas_s-price-display">
                                    <input type="text" id="doosearchas_s-minPriceText"  value="" disabled />
                                    <input type="text" id="doosearchas_s-maxPriceText" value="" disabled />
                                </div>
                            </div>
                            <div class ="doosearchas_s-slider-wrap2">
                                <div class="doosearchas_s-slider-container2">
                                    <input type="range" min="0" max="1000" value="0" id="doosearchas_s-minRange2" name="price2" step="1" />
                                    <input type="range" min="0" max="1000" value="1000" id="doosearchas_s-maxRange2" name="price2" step="1" />
                                    <div class="doosearchas_s-slider-track2"></div>
                                </div>
                                <div class="doosearchas_s-price-display2">
                                    <input type="text" id="doosearchas_s-minPriceText2"  value="" disabled />
                                    <input type="text" id="doosearchas_s-maxPriceText2" value="" disabled />
                                </div>
                            </div>
                        </div>
                        <div class ="doosearchas_s-brand-filter"></div>
                        <div class="doosearchas_s-category-filter"></div>
                        <div class="doosearchas_s-attribute-filter"></div>
                    </div>

                    <!-- === Product Results Section === -->
                    <div id="doosearchas_s-result-item-wrapper">
                        <div id="doosearchas_s-result-item-cs">
                            <span id="doosearchas_s-result-item-count"></span>
                            <span class="doosearchas_s-spinnerSpan2"><div class="spinner-4"></div></span>
                            <span id="doosearchas_s-result-item-sort"></span>
                        </div>
                        <div id="doosearchas_s-result-item-list"></div>
                        <div id="doosearchas_s-pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>