@props(['shape' => 'btn-main btn-primary'])
@php
    $text = "検索";
    $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) => {
            // Enter (検索フォーム内のみ)
            if (event.key === 'Enter') {
                // 検索フォーム内かチェック
                const searchForm = document.querySelector('[x-data*="search"]');
                if (!searchForm || !searchForm.contains(event.target)) {
                    return; // 検索フォーム外では何もしない
                }

                // テキストエリア内では改行を許可
                if (event.target.tagName === 'TEXTAREA') {
                    return;
                }

                event.preventDefault();

                // 1. まずIDで検索ボタンを探す
                let searchButton = document.getElementById('btn_search');

                // 2. 検索ボタンが見つかった場合、クリック
                if (searchButton) {
                    searchButton.click();
                    return;
                }

                // 3. Alpine.jsのsearch()メソッドを実行
                if (typeof Alpine !== 'undefined') {
                    const alpineData = Alpine.$data(searchForm);
                    if (alpineData && typeof alpineData.search === 'function') {
                        alpineData.search();
                        return;
                    }
                }

                // 4. フォールバック: type="submit"のボタンをクリック
                const submitButton = searchForm.querySelector('button[type="submit"]');
                if (submitButton) {
                    submitButton.click();
                }
            }
        });
    });
})();
</script>