<?php
/**
 * MenuX — Search Settings Panel
 * Admin UI for the in-page search feature.
 * @package MenuX
 */

if ( ! defined( 'ABSPATH' ) ) exit;

function menux_render_search_panel( $style = array() ) {
    $s = wp_parse_args( (array) $style, menux_style_defaults() );
    $enabled    = $s['search_enabled']    === '1';
    $icon_color = $s['search_icon_color'] ?? '';
    $position   = $s['search_position']   ?? 'right';
    ?>
    <style>
    .mx-srch-master{
        display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
        background:linear-gradient(135deg,#f0f9ff,#e0f2fe);
        border:2px solid #7dd3fc;border-radius:12px;padding:18px 22px;margin-bottom:6px;
    }
    .mx-srch-master-text h3{margin:0 0 4px;font-size:15px;font-weight:700;color:#0c4a6e;}
    .mx-srch-master-text p{margin:0;font-size:12px;color:#075985;line-height:1.5;}
    .mx-srch-disabled-notice{
        background:#fafafa;border:1px solid #e5e7eb;border-radius:10px;
        padding:20px 24px;text-align:center;color:#9ca3af;font-size:13px;margin-bottom:6px;
    }
    .mx-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;}
    .mx-toggle input{position:absolute;opacity:0;width:0;height:0;}
    .mx-toggle-track{
        position:relative;width:44px;height:24px;
        background:#d1d5db;border-radius:12px;transition:background .2s;flex-shrink:0;
    }
    .mx-toggle input:checked + .mx-toggle-track{background:#0ea5e9;}
    .mx-toggle input:focus-visible + .mx-toggle-track{outline:2px solid #0ea5e9;outline-offset:3px;}
    .mx-toggle-thumb{
        position:absolute;top:3px;left:3px;width:18px;height:18px;
        background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s;
    }
    .mx-toggle input:checked + .mx-toggle-track .mx-toggle-thumb{transform:translateX(20px);}
    .mx-toggle-label{font-size:13px;color:#374151;font-weight:500;}

    .mx-section{
        font-size:10px;font-weight:700;color:#9ca3af;text-transform:uppercase;
        letter-spacing:.8px;padding:16px 0 8px;border-top:1px solid #f3f4f6;margin-top:4px;
    }
    .mx-section:first-child{border-top:none;padding-top:0;}
    .mx-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f9fafb;}
    .mx-row:last-child{border-bottom:none;}
    .mx-row-label{font-size:13px;color:#374151;font-weight:500;}
    .mx-row-sub{font-size:11px;color:#9ca3af;margin-top:2px;}
    .mx-color-row{display:flex;align-items:center;gap:10px;}
    .mx-color-swatch{width:32px;height:32px;border-radius:8px;border:2px solid #e5e7eb;cursor:pointer;padding:0;overflow:hidden;}
    .mx-color-swatch input[type=color]{width:100%;height:100%;border:none;padding:0;cursor:pointer;background:none;}
    .mx-color-hex{font-size:12px;color:#6b7280;font-family:monospace;}
    .mx-radio-group{display:flex;gap:8px;flex-wrap:wrap;}
    .mx-radio-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1.5px solid #e5e7eb;border-radius:20px;cursor:pointer;font-size:12px;font-weight:500;color:#374151;transition:all .15s;}
    .mx-radio-pill input{position:absolute;opacity:0;width:0;height:0;}
    .mx-radio-pill:has(input:checked){border-color:#0ea5e9;background:#f0f9ff;color:#0369a1;}
    .mx-text-input{width:100%;max-width:240px;border:1px solid #d1d5db;border-radius:8px;padding:7px 11px;font-size:13px;color:#374151;outline:none;}
    .mx-text-input:focus{border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.15);}
    </style>

    <div class="bm-card">
        <div class="bm-card-header">
            <span class="bm-card-icon">🔍</span>
            <div class="bm-card-titles">
                <h2 class="bm-card-title"><?php esc_html_e( 'Search', 'giuliomax-menu-builder' ); ?></h2>
                <p class="bm-card-subtitle"><?php esc_html_e( 'Show a search icon in the nav — lets visitors search menu links or find text on the current page', 'giuliomax-menu-builder' ); ?></p>
            </div>
        </div>
        <div class="bm-card-body">

            <!-- Master toggle -->
            <div class="mx-srch-master">
                <div class="mx-srch-master-text">
                    <h3><?php esc_html_e( 'Enable search icon', 'giuliomax-menu-builder' ); ?></h3>
                    <p><?php esc_html_e( 'Adds a magnifying-glass icon to the navigation bar. When clicked, a search modal opens.', 'giuliomax-menu-builder' ); ?></p>
                </div>
                <label class="mx-toggle">
                    <input type="checkbox" name="menux_style[search_enabled]" value="1" id="mx-search-master-toggle" <?php checked( $enabled ); ?> onchange="if(typeof menux_updatePreview==='function')menux_updatePreview()">
                    <span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
                    <span class="mx-toggle-label"><?php echo $enabled ? esc_html__( 'On', 'giuliomax-menu-builder' ) : esc_html__( 'Off', 'giuliomax-menu-builder' ); ?></span>
                </label>
            </div>

            <!-- Settings (hidden when disabled) -->
            <div id="mx-search-settings" style="<?php echo $enabled ? '' : 'opacity:.45;pointer-events:none;'; ?>">

                <div class="mx-section"><?php esc_html_e( 'Appearance', 'giuliomax-menu-builder' ); ?></div>

                <!-- Icon color -->
                <div class="mx-row">
                    <div>
                        <div class="mx-row-label"><?php esc_html_e( 'Icon color', 'giuliomax-menu-builder' ); ?></div>
                        <div class="mx-row-sub"><?php esc_html_e( 'Color of the magnifying-glass icon in the nav bar', 'giuliomax-menu-builder' ); ?></div>
                    </div>
                    <div class="mx-color-row">
                        <div style="display:flex;align-items:center;gap:6px;">
                            <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#6b7280;cursor:pointer;">
                                <input type="checkbox" name="menux_style_use[search_icon_color]" value="1" id="mx-search-color-use" <?php checked( ! empty( $icon_color ) ); ?> onchange="document.getElementById('mx-search-icon-color').disabled=!this.checked;document.getElementById('mx-search-color-swatch').style.opacity=this.checked?'1':'.4';if(typeof menux_updatePreview==='function')menux_updatePreview()">
                                <?php esc_html_e( 'Custom', 'giuliomax-menu-builder' ); ?>
                            </label>
                            <div class="mx-color-swatch" id="mx-search-color-swatch" style="opacity:<?php echo ! empty( $icon_color ) ? '1' : '.4'; ?>;">
                                <input type="color" id="mx-search-icon-color" name="menux_style[search_icon_color]"
                                    value="<?php echo esc_attr( $icon_color ?: '#374151' ); ?>"
                                    <?php echo empty( $icon_color ) ? 'disabled' : ''; ?> oninput="if(typeof menux_updatePreview==='function')menux_updatePreview()">
                            </div>
                            <span class="mx-color-hex" id="mx-search-color-hex"><?php echo ! empty( $icon_color ) ? esc_html( $icon_color ) : 'inherit'; ?></span>
                        </div>
                    </div>
                </div>

                <!-- Position -->
                <div class="mx-row">
                    <div>
                        <div class="mx-row-label"><?php esc_html_e( 'Position', 'giuliomax-menu-builder' ); ?></div>
                        <div class="mx-row-sub"><?php esc_html_e( 'Where the icon appears relative to the menu items', 'giuliomax-menu-builder' ); ?></div>
                    </div>
                    <div class="mx-radio-group">
                        <label class="mx-radio-pill">
                            <input type="radio" name="menux_style[search_position]" value="left" <?php checked( $position, 'left' ); ?> onchange="if(typeof menux_updatePreview==='function')menux_updatePreview()">
                            ⬅ <?php esc_html_e( 'Left', 'giuliomax-menu-builder' ); ?>
                        </label>
                        <label class="mx-radio-pill">
                            <input type="radio" name="menux_style[search_position]" value="right" <?php checked( $position, 'right' ); ?> onchange="if(typeof menux_updatePreview==='function')menux_updatePreview()">
                            ➡ <?php esc_html_e( 'Right', 'giuliomax-menu-builder' ); ?>
                        </label>
                    </div>
                </div>

            </div><!-- /mx-search-settings -->

        </div>
    </div>

    <script>
    (function(){
        var toggle = document.getElementById('mx-search-master-toggle');
        var settings = document.getElementById('mx-search-settings');
        var label = toggle ? toggle.closest('label').querySelector('.mx-toggle-label') : null;
        if (toggle && settings) {
            toggle.addEventListener('change', function() {
                settings.style.opacity = this.checked ? '' : '.45';
                settings.style.pointerEvents = this.checked ? '' : 'none';
                if (label) label.textContent = this.checked ? 'On' : 'Off';
            });
        }
        var colorInput = document.getElementById('mx-search-icon-color');
        var colorHex   = document.getElementById('mx-search-color-hex');
        if (colorInput && colorHex) {
            colorInput.addEventListener('input', function() { colorHex.textContent = this.value; });
        }
    })();
    </script>
    <?php
}
