@props(['id' => 'filterForm', 'defaultOpen' => false])

{{-- 모바일 필터 접기/펼치기 컴포넌트 --}}
<div class="bg-white rounded-lg shadow-sm mb-6">
    {{-- 모바일 필터 토글 버튼 (sm 미만에서만 표시) --}}
    <button type="button"
            onclick="toggleFilter('{{ $id }}')"
            class="sm:hidden w-full flex items-center justify-between p-4 text-left">
        <span class="flex items-center gap-2 text-gray-700 font-medium">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
            </svg>
            필터
        </span>
        <svg id="{{ $id }}-chevron" class="w-5 h-5 text-gray-500 transition-transform duration-200 {{ $defaultOpen ? 'rotate-180' : '' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
    </button>

    {{-- 필터 내용 영역 --}}
    <div id="{{ $id }}-content"
         class="p-4 pt-0 sm:pt-4 {{ $defaultOpen ? '' : 'hidden' }} sm:block">
        {{ $slot }}
    </div>
</div>

@once
@push('scripts')
<script>
    // 필터 토글 함수
    function toggleFilter(formId) {
        const content = document.getElementById(formId + '-content');
        const chevron = document.getElementById(formId + '-chevron');

        if (content && chevron) {
            content.classList.toggle('hidden');
            chevron.classList.toggle('rotate-180');

            // 상태 저장 (선택적)
            const isOpen = !content.classList.contains('hidden');
            try {
                localStorage.setItem('filter_' + formId + '_open', isOpen);
            } catch (e) {
                // localStorage 사용 불가 시 무시
            }
        }
    }

    // 페이지 로드 시 저장된 상태 복원 (선택적)
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('[id$="-content"]').forEach(function(content) {
            const formId = content.id.replace('-content', '');
            try {
                const savedState = localStorage.getItem('filter_' + formId + '_open');
                if (savedState === 'true') {
                    content.classList.remove('hidden');
                    const chevron = document.getElementById(formId + '-chevron');
                    if (chevron) chevron.classList.add('rotate-180');
                }
            } catch (e) {
                // localStorage 사용 불가 시 무시
            }
        });
    });
</script>
@endpush
@endonce
