@props(['shape' => 'btn-main btn-primary-outline'])
@php
    $text = "検索条件のクリア(R)";
    $params = [
        'icon' => null, 'text' => $text, 'shape' => $shape
    ];
@endphp
@include('components.button', $params)

<script>
(function() {
    let shortcutInitialized = false;

    document.addEventListener('DOMContentLoaded', function() {
        if (shortcutInitialized) return;
        shortcutInitialized = true;

        window.addEventListener('keydown', (event) => {
            // Alt+R (Windows/Linux/Mac)
            if (event.altKey && event.key === 'r') {
                event.preventDefault();

                // 1. まずIDでリセットボタンを探す
                let resetButton = document.getElementById('btn_reset');

                // 2. IDで見つからない場合、属性から探す
                if (!resetButton) {
                    const resetButtons = document.querySelectorAll('button');
                    resetButton = Array.from(resetButtons).find(btn => {
                        const clickAttr = btn.getAttribute('@click') || btn.getAttribute('x-on:click');
                        return clickAttr && clickAttr.includes('reset()');
                    });
                }

                // 3. リセットボタンが見つかった場合、クリック
                if (resetButton) {
                    resetButton.click();
                    return;
                }

                // 4. フォールバック: Alpine.jsのreset()メソッドを直接実行
                const searchForm = document.querySelector('[x-data*="search"]');
                if (searchForm && typeof Alpine !== 'undefined') {
                    const alpineData = Alpine.$data(searchForm);
                    if (alpineData && typeof alpineData.reset === 'function') {
                        alpineData.reset();
                    }
                }
            }
        });
    });
})();
</script>