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

/**
 * Render the Search Bar Style Settings panel content.
 *
 * This function outputs the HTML UI for customizing the style of the search bar,
 * including size, shape, colors, icon, button, and alignment.
 */
function doosearchas_search_search_bar_style_callback_content($options) {
    // Retrieve all saved options with fallback defaults
    $searchBarStyle = isset($options['doosearchas_search_bar_shape']) ? esc_attr($options['doosearchas_search_bar_shape']) : 'round';
    $placeholder = isset($options['doosearchas_search_bar_placeholder']) ? esc_attr($options['doosearchas_search_bar_placeholder']) : 'Search for products...';
    $width = isset($options['doosearchas_search_bar_width']) ? intval($options['doosearchas_search_bar_width']) : 100;
    $hight = isset($options['doosearchas_search_bar_hight']) ? intval($options['doosearchas_search_bar_hight']) : 12;
    $buttonStyle = isset($options['doosearchas_search_bar_button_style']) ? esc_attr($options['doosearchas_search_bar_button_style']) : 'default';
    $searchIcon = isset($options['doosearchas_search_bar_button_icon']) ? esc_attr($options['doosearchas_search_bar_button_icon']) : 'fas fa-search';
    $buttonBgColor = isset($options['doosearchas_search_bar_button_bg_color']) ? esc_attr($options['doosearchas_search_bar_button_bg_color']) : '#0073e6';
    $searchIconColor = isset($options['doosearchas_search_bar_icon_color']) ? esc_attr($options['doosearchas_search_bar_icon_color']) : '#ffffff';
    $searchBarColor = isset($options['doosearchas_search_bar_bg_color']) ? esc_attr($options['doosearchas_search_bar_bg_color']) : '#ffffff';
    $searchBarTextColor = isset($options['doosearchas_search_bar_text_color']) ? esc_attr($options['doosearchas_search_bar_text_color']) : '#aaaaaa';
    $searchBarBorderColor = isset($options['doosearchas_search_bar_border_color']) ? esc_attr($options['doosearchas_search_bar_border_color']) : '#dddddd';
    $searchBarBoxShadow = isset($options['doosearchas_search_bar_shadow']) ? esc_attr($options['doosearchas_search_bar_shadow']) : 'on';
    $searchBarAlginment = isset($options['doosearchas_search_bar_alignment']) ? esc_attr($options['doosearchas_search_bar_alignment']) : 'center';
    $showButton = isset($options['doosearchas_search_bar_button_show']) ? $options['doosearchas_search_bar_button_show'] : '1';

    ?>

    <!-- Search bar customization interface -->
    <div class="searchBarDiv">
        <div class="searchBarLeft">
            <h3><?php esc_html_e('Search Bar Customization', 'doosearch-ajax-search-for-woo'); ?></h3>
            <table style="width: 100%; ">
                <tr>
                    <td style="width: 40%;"><label for="doosearchas_search_bar_width"><?php esc_html_e('Search Bar Width (%):', 'doosearch-ajax-search-for-woo'); ?></label></td>
                    <td>
                        <input 
                            type="range" 
                            name="doosearchas_search_style_options[doosearchas_search_bar_width]" 
                            id="doosearchas_search_bar_width" 
                            min="50" 
                            max="100" 
                            value="<?php echo esc_attr($width); ?>" 
                            oninput="document.getElementById('width-value').innerText = this.value + '%';">
                        <span id="width-value"><?php echo esc_html($width); ?>%</span>
                    </td>
                </tr>
                <tr>
                    <td style="width: 40%;"><label for="doosearchas_search_bar_hight"><?php esc_html_e('Search Bar Hight (px):', 'doosearch-ajax-search-for-woo'); ?></label></td>
                    <td>
                        <input 
                            type="range" 
                            name="doosearchas_search_style_options[doosearchas_search_bar_hight]" 
                            id="doosearchas_search_bar_hight" 
                            min="5" 
                            max="17"
                            value="<?php echo esc_attr($hight); ?>" 
                            oninput="document.getElementById('hight-value').innerText = this.value + 'px';">
                        <span id="hight-value"><?php echo esc_html($hight); ?>px</span>
                    </td>
                </tr>
                <tr>
                    <td><label for="doosearchas_search_bar_shape"><?php esc_html_e('Search Bar Shape:', 'doosearch-ajax-search-for-woo'); ?></label></td>
                    <td>
                        <select 
                            name="doosearchas_search_style_options[doosearchas_search_bar_shape]" 
                            id="doosearchas_search_bar_shape">
                            <option value="round" <?php selected($searchBarStyle, 'round'); ?>><?php esc_html_e('Default (Round)', 'doosearch-ajax-search-for-woo'); ?></option>
                            <option value="square" <?php selected($searchBarStyle, 'square'); ?>><?php esc_html_e('Square', 'doosearch-ajax-search-for-woo'); ?></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label for="doosearchas_search_bar_alignment"><?php esc_html_e('Search Bar Alignment:', 'doosearch-ajax-search-for-woo'); ?></label></td>
                    <td>
                        <div id="doosearchas_search_bar_alignment" style="display: inline-block;">
                            <label style="cursor: pointer;">
                                <input 
                                    type="radio" 
                                    name="doosearchas_search_style_options[doosearchas_search_bar_alignment]" 
                                    value="left" 
                                    <?php checked($searchBarAlginment, 'left'); ?> 
                                    style="display: none;">
                                <i class="fas fa-align-left" style="font-size: 20px; padding: 5px; border: 1px solid #ddd; border-radius: 4px; <?php echo $searchBarAlginment === 'left' ? 'background-color: #0073e6; color: white;' : ''; ?>"></i>
                            </label>
                            <label style="cursor: pointer;">
                                <input 
                                    type="radio" 
                                    name="doosearchas_search_style_options[doosearchas_search_bar_alignment]" 
                                    value="center" 
                                    <?php checked($searchBarAlginment, 'center'); ?> 
                                    style="display: none;">
                                <i class="fas fa-align-center" style="font-size: 20px; padding: 5px; border: 1px solid #ddd; border-radius: 4px; <?php echo $searchBarAlginment === 'center' ? 'background-color: #0073e6; color: white;' : ''; ?>"></i>
                            </label>
                            <label style="cursor: pointer;">
                                <input 
                                    type="radio" 
                                    name="doosearchas_search_style_options[doosearchas_search_bar_alignment]" 
                                    value="right" 
                                    <?php checked($searchBarAlginment, 'right'); ?> 
                                    style="display: none;">
                                <i class="fas fa-align-right" style="font-size: 20px; padding: 5px; border: 1px solid #ddd; border-radius: 4px; <?php echo $searchBarAlginment === 'right' ? 'background-color: #0073e6; color: white;' : ''; ?>"></i>
                            </label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td><label for="doosearchas_search_bar_placeholder"><?php esc_html_e('Search Bar Placeholder:', 'doosearch-ajax-search-for-woo'); ?></label></td>
                    <td>
                        <input 
                            type="text" 
                            name="doosearchas_search_style_options[doosearchas_search_bar_placeholder]" 
                            id="doosearchas_search_bar_placeholder" 
                            value="<?php echo esc_attr($placeholder); ?>" 
                            class="regular-text">
                    </td>
                </tr>
                <tr>
                    <td><label for="doosearchas_search_bar_shadow"><?php esc_html_e('Enable Box Shadow:', 'doosearch-ajax-search-for-woo'); ?></label></td>
                    <td>
                        <select 
                            name="doosearchas_search_style_options[doosearchas_search_bar_shadow]" 
                            id="doosearchas_search_bar_shadow">
                            <option value="on" <?php selected($searchBarBoxShadow, 'on'); ?>><?php esc_html_e('On', 'doosearch-ajax-search-for-woo'); ?></option>
                            <option value="off" <?php selected($searchBarBoxShadow, 'off'); ?>><?php esc_html_e('Off', 'doosearch-ajax-search-for-woo'); ?></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label for="doosearchas_search_bar_button_show"><?php esc_html_e('Show Submit Button:', 'doosearch-ajax-search-for-woo'); ?></label></td>
                    <td>
                        <input type="hidden" name="doosearchas_search_style_options[doosearchas_search_bar_button_show]" value="0">
                        <input 
                            type="checkbox" 
                            name="doosearchas_search_style_options[doosearchas_search_bar_button_show]" 
                            id="doosearchas_search_bar_button_show" 
                            value="1" 
                            <?php checked($showButton); ?>
                            >
                    </td>
                </tr>
                <tr>
                    <td><label for="doosearchas_search_bar_button_style"><?php esc_html_e('Submit Button Style:', 'doosearch-ajax-search-for-woo'); ?></label></td>
                    <td>
                        <select 
                            name="doosearchas_search_style_options[doosearchas_search_bar_button_style]" 
                            id="doosearchas_search_bar_button_style">
                            <option value="default" <?php selected($buttonStyle, 'default'); ?>><?php esc_html_e('Default (Round Button)', 'doosearch-ajax-search-for-woo'); ?></option>
                            <option value="icon-only" <?php selected($buttonStyle, 'icon-only'); ?>><?php esc_html_e('Just Icon', 'doosearch-ajax-search-for-woo'); ?></option>
                            <option value="icon-square" <?php selected($buttonStyle, 'icon-square'); ?>><?php esc_html_e('Icon with Square Background', 'doosearch-ajax-search-for-woo'); ?></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label for="doosearchas_search_bar_button_icon"><?php esc_html_e('Search Icon:', 'doosearch-ajax-search-for-woo'); ?></label></td>
                    <td>
                        <input 
                            type="text" 
                            name="doosearchas_search_style_options[doosearchas_search_bar_button_icon]" 
                            id="doosearchas_search_bar_button_icon" 
                            value="<?php echo esc_attr($searchIcon); ?>" 
                            placeholder="Enter FontAwesome class (e.g., fas fa-search)" 
                            class="regular-text">
                        <small><?php esc_html_e('Default:', 'doosearch-ajax-search-for-woo'); ?> <code>fas fa-search</code></small>
                    </td>
                </tr>
                <tr>
                    <td><label for="doosearchas_search_bar_icon_color"><?php esc_html_e('Search Icon Color:', 'doosearch-ajax-search-for-woo'); ?></label></td>
                    <td>
                        <input 
                            type="color" 
                            name="doosearchas_search_style_options[doosearchas_search_bar_icon_color]" 
                            id="doosearchas_search_bar_icon_color" 
                            value="<?php echo esc_attr($searchIconColor); ?>">
                    </td>
                </tr>
                <tr>
                    <td><label for="doosearchas_search_bar_button_bg_color"><?php esc_html_e('Button Background Color:', 'doosearch-ajax-search-for-woo'); ?></label></td>
                    <td>
                        <input 
                            type="color" 
                            name="doosearchas_search_style_options[doosearchas_search_bar_button_bg_color]" 
                            id="doosearchas_search_bar_button_bg_color" 
                            value="<?php echo esc_attr($buttonBgColor); ?>">
                    </td>
                </tr>
                <tr>
                    <td><label for="doosearchas_search_bar_bg_color"><?php esc_html_e('Search Bar Background Color:', 'doosearch-ajax-search-for-woo'); ?></label></td>
                    <td>
                        <input 
                            type="color" 
                            name="doosearchas_search_style_options[doosearchas_search_bar_bg_color]" 
                            id="doosearchas_search_bar_bg_color" 
                            value="<?php echo esc_attr($searchBarColor); ?>">
                    </td>
                </tr>
                <tr>
                    <td><label for="doosearchas_search_bar_text_color"><?php esc_html_e('Search Bar Text Color:', 'doosearch-ajax-search-for-woo'); ?></label></td>
                    <td>
                        <input 
                            type="color" 
                            name="doosearchas_search_style_options[doosearchas_search_bar_text_color]" 
                            id="doosearchas_search_bar_text_color" 
                            value="<?php echo esc_attr($searchBarTextColor); ?>">
                    </td>
                </tr>
                <tr>
                    <td><label for="doosearchas_search_bar_border_color"><?php esc_html_e('Search Bar Border Color:', 'doosearch-ajax-search-for-woo'); ?></label></td>
                    <td>
                        <input 
                            type="color" 
                            name="doosearchas_search_style_options[doosearchas_search_bar_border_color]" 
                            id="doosearchas_search_bar_border_color" 
                            value="<?php echo esc_attr($searchBarBorderColor); ?>">
                    </td>
                </tr>
            </table>
        </div>

        <!-- Search bar live Preview section -->
        <div class="searchBarPreview">
            <div class="searchBarPreview-text">
                <span class="preview"><?php esc_html_e('Preview', 'doosearch-ajax-search-for-woo'); ?></span>
                <span class="bar"><?php esc_html_e('Search Bar', 'doosearch-ajax-search-for-woo'); ?></span>
            </div>
            <div id="doosearchas-search-preview" style="margin-top: 20px;">
                <div id="searchBarWrapper" 
                style="
                display: flex; 
                width:100%;
                <?php echo $searchBarAlginment === 'left' ? 'justify-content: left;' : ''; ?>
                <?php echo $searchBarAlginment === 'center' ? 'justify-content: center;' : ''; ?>
                <?php echo $searchBarAlginment === 'right' ? 'justify-content: right;' : ''; ?>
                ">
                    <div id="doosearchas-preview-bar-wrapper" style="position: relative; width: <?php echo esc_attr($width); ?>%; max-width: 90%;">
                        <input 
                            type="text"  
                            placeholder="<?php echo esc_attr($placeholder); ?>" 
                            id="doosearchas-search-preview-bar"
                            style="
                                background-color: <?php echo esc_attr($searchBarColor); ?>;
                                color: <?php echo esc_attr($searchBarTextColor); ?>;
                                width: 100%; 
                                padding-top: <?php echo esc_attr($hight); ?>px;
                                padding-bottom: <?php echo esc_attr($hight); ?>px;
                                padding-left: 15px;
                                padding-right: 40px;
                                font-size: 16px; 
                                border: 1px solid <?php echo esc_attr($searchBarBorderColor);?>;  
                                <?php echo $searchBarBoxShadow === 'on' ? 'box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);' : ''; ?>
                                <?php echo $searchBarBoxShadow === 'off' ? 'box-shadow: none;' : ''; ?>
                                outline: none; 
                                transition: border-color 0.3s;
                                <?php echo $searchBarStyle === 'round' ? 'border-radius: 30px;' : ''; ?>
                                <?php echo $searchBarStyle === 'square' ? 'border-radius: 5px;' : ''; ?>
                            ">                      
                        <button 
                            type="submit" 
                            id="doosearchas-preview-bar-btn" 
                            style="
                                position: absolute; 
                                top: 50%;  
                                transform: translateY(-50%);
                                display: <?php echo $showButton ? 'flex' : 'none'; ?>;
                                justify-content: center; 
                                align-items: center; 
                                cursor: pointer; 
                                outline: none;
                                <?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: 98%; 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 id="doosearchas-preview-search-icon" class="<?php echo esc_attr($searchIcon); ?>" style="color:<?php echo esc_attr($searchIconColor) ?>;<?php echo $buttonStyle === 'default' ? 'font-size: 16px;' : 'font-size: 20px;'; ?>"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php
}


