<?php
/**
 * Template: search form.
 *
 * Receives the $atts variable (shortcode attributes).
 *
 * @var array $atts
 */

if ( ! defined( 'ABSPATH' ) ) { exit; }
?>
<?php
/*
 * The shortcode always passes $atts, but this template is part of the public
 * surface: a theme can copy it into its own folder and include it by hand. A
 * missing key would then warn on every page carrying a search bar.
 */
$glse_placeholder = isset( $atts['placeholder'] ) ? (string) $atts['placeholder'] : '';

$glse_results_id  = wp_unique_id( 'glse-results-' );
$glse_input_id    = wp_unique_id( 'glse-input-' );
$glse_form_id     = wp_unique_id( 'glse-form-' );
$glse_has_btn     = (bool) glse_get_option( 'search_button' );
$glse_btn_outside = $glse_has_btn && 'outside' === glse_get_option( 'button_position' );
$glse_btn_mode    = glse_get_option( 'search_button_mode' );
$glse_btn_class   = 'glse-search-btn' . ( 'text' === $glse_btn_mode ? ' glse-search-btn--text' : '' );
?>
<div class="glse-search-wrapper<?php echo $glse_btn_outside ? ' glse-search-wrapper--btn-outside' : ''; ?> glse-search-wrapper--focus-ring" role="search">

    <div class="glse-search-inner">
    <form<?php echo $glse_btn_outside ? ' id="' . esc_attr( $glse_form_id ) . '"' : ''; ?> class="glse-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
        <input type="hidden" name="post_type" value="product">

        <?php  ?>

        <div class="glse-input-group">
            <?php
            /*
             * The accessible name is a real label, not the placeholder. It used
             * to reuse the placeholder, so a merchant writing "e.g. red shoes"
             * made screen readers announce the field as an example rather than
             * naming it. The placeholder is a visual hint again.
             */
            ?>
            <label for="<?php echo esc_attr( $glse_input_id ); ?>" class="glse-sr-only">
                <?php esc_html_e( 'Search products', 'glance-live-search' ); ?>
            </label>
            <input
                id="<?php echo esc_attr( $glse_input_id ); ?>"
                type="text"
                class="glse-search-input"
                name="s"
                placeholder="<?php echo esc_attr( apply_filters( 'glse/form/placeholder', $glse_placeholder ) ); ?>"
                autocomplete="off"
                autocorrect="off"
                autocapitalize="off"
                spellcheck="false"
                inputmode="search"
                role="combobox"
                aria-autocomplete="list"
                aria-haspopup="listbox"
                aria-expanded="false"
                aria-controls="<?php echo esc_attr( $glse_results_id ); ?>"
            >
            <div class="glse-search-spinner" aria-hidden="true"></div>
            <?php if ( $glse_has_btn && ! $glse_btn_outside ) : ?>
            <button type="submit" class="<?php echo esc_attr( $glse_btn_class ); ?>" aria-label="<?php esc_attr_e( 'Search', 'glance-live-search' ); ?>">
                <?php if ( 'text' === $glse_btn_mode ) : ?>
                    <span class="glse-btn-label"><?php esc_html_e( 'Search', 'glance-live-search' ); ?></span>
                <?php endif; ?>
                <svg class="glse-btn-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            </button>
            <?php endif; ?>
        </div>

    </form>


    <?php
    /*
     * Price ranges live outside the results list on purpose: a listbox may only
     * contain options, so putting buttons inside it would break the combobox
     * the same way the section headings did. They are a toolbar next to it.
     */
    $glse_brackets = [];
    

    if ( $glse_brackets ) :
        $glse_money = static function ( $amount ) {
            return function_exists( 'wc_price' )
                ? trim( wp_strip_all_tags( wc_price( $amount, [ 'decimals' => 0 ] ) ) )
                : (string) $amount;
        };
    ?>
    <div class="glse-price-filter" role="group" aria-label="<?php esc_attr_e( 'Filter by price', 'glance-live-search' ); ?>">
        <button type="button" class="glse-price-chip glse-price-chip--active" data-glse-min="" data-glse-max="" aria-pressed="true">
            <?php esc_html_e( 'All prices', 'glance-live-search' ); ?>
        </button>
        <?php foreach ( $glse_brackets as $glse_b ) : ?>
            <button type="button" class="glse-price-chip"
                    data-glse-min="<?php echo esc_attr( (string) ( $glse_b['min'] ?? '' ) ); ?>"
                    data-glse-max="<?php echo esc_attr( (string) ( $glse_b['max'] ?? '' ) ); ?>"
                    aria-pressed="false">
                <?php
                if ( null === $glse_b['min'] ) {
                    /* translators: %s: formatted price */
                    printf( esc_html__( 'Under %s', 'glance-live-search' ), esc_html( $glse_money( $glse_b['max'] ) ) );
                } elseif ( null === $glse_b['max'] ) {
                    /* translators: %s: formatted price */
                    printf( esc_html__( '%s and up', 'glance-live-search' ), esc_html( $glse_money( $glse_b['min'] ) ) );
                } else {
                    /* translators: 1: lower price, 2: upper price */
                    printf( esc_html__( '%1$s – %2$s', 'glance-live-search' ), esc_html( $glse_money( $glse_b['min'] ) ), esc_html( $glse_money( $glse_b['max'] ) ) );
                }
                ?>
            </button>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>

    <div id="<?php echo esc_attr( $glse_results_id ); ?>" class="glse-results-container" role="listbox" aria-label="<?php esc_attr_e( 'Search results', 'glance-live-search' ); ?>"></div>

    <?php
    /*
     * Result counts are announced here, not by making the listbox itself a live
     * region. A live listbox re-read its whole contents on every keystroke, on
     * top of the active option - exactly the noise the combobox pattern avoids.
     */
    ?>
    <div class="glse-sr-only glse-sr-status" role="status" aria-live="polite" aria-atomic="true"></div>
    </div>

    <?php if ( $glse_btn_outside ) : ?>
    <button type="submit" form="<?php echo esc_attr( $glse_form_id ); ?>" class="<?php echo esc_attr( $glse_btn_class ); ?> glse-search-btn--outside" aria-label="<?php esc_attr_e( 'Search', 'glance-live-search' ); ?>">
        <?php if ( 'text' === $glse_btn_mode ) : ?>
            <span class="glse-btn-label"><?php esc_html_e( 'Search', 'glance-live-search' ); ?></span>
        <?php endif; ?>
        <svg class="glse-btn-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
    </button>
    <?php endif; ?>

</div>
