{{-- 수당 정산 필터 --}}
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
    <form id="filter-form" method="GET" action="{{ route('finance.settlement') }}">
        <input type="hidden" name="tab" value="commission">
        <div class="flex flex-wrap items-end gap-3">
            {{-- 기간설정 체크박스 --}}
            <div class="flex items-center self-end pb-2">
                <label class="flex items-center gap-1.5 cursor-pointer select-none">
                    <input type="checkbox" name="date_range" value="1"
                           {{ !empty($filters['date_range']) ? 'checked' : '' }}
                           onchange="toggleDateRange(this.checked)"
                           class="rounded border-gray-300 text-emerald-600 focus:ring-emerald-500">
                    <span class="text-xs font-medium text-gray-600 whitespace-nowrap">기간설정</span>
                </label>
            </div>

            {{-- 단일 년/월 (기본) --}}
            <div id="single-date" class="{{ !empty($filters['date_range']) ? 'hidden' : '' }} flex items-end gap-3">
                <div class="w-[calc(50%-6px)] sm:w-auto sm:min-w-[100px]">
                    <label class="block text-xs font-medium text-gray-500 mb-1">년도</label>
                    <select name="year" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
                        @for ($y = now()->year - 2; $y <= now()->year + 1; $y++)
                            <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}년</option>
                        @endfor
                    </select>
                </div>
                <div class="w-[calc(50%-6px)] sm:w-auto sm:min-w-[80px]">
                    <label class="block text-xs font-medium text-gray-500 mb-1">월</label>
                    <select name="month" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
                        @for ($m = 1; $m <= 12; $m++)
                            <option value="{{ $m }}" {{ $month == $m ? 'selected' : '' }}>{{ $m }}월</option>
                        @endfor
                    </select>
                </div>
            </div>

            {{-- 기간 범위 (체크 시 표시) --}}
            <div id="range-date" class="{{ !empty($filters['date_range']) ? '' : 'hidden' }} flex items-end gap-2">
                <div class="sm:min-w-[100px]">
                    <label class="block text-xs font-medium text-gray-500 mb-1">시작</label>
                    <select name="start_year" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
                        @for ($y = now()->year - 2; $y <= now()->year + 1; $y++)
                            <option value="{{ $y }}" {{ ($filters['start_year'] ?? $year) == $y ? 'selected' : '' }}>{{ $y }}년</option>
                        @endfor
                    </select>
                </div>
                <div class="sm:min-w-[70px]">
                    <label class="block text-xs font-medium text-gray-500 mb-1">&nbsp;</label>
                    <select name="start_month" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
                        @for ($m = 1; $m <= 12; $m++)
                            <option value="{{ $m }}" {{ ($filters['start_month'] ?? $month) == $m ? 'selected' : '' }}>{{ $m }}월</option>
                        @endfor
                    </select>
                </div>
                <span class="text-gray-400 pb-2">~</span>
                <div class="sm:min-w-[100px]">
                    <label class="block text-xs font-medium text-gray-500 mb-1">종료</label>
                    <select name="end_year" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
                        @for ($y = now()->year - 2; $y <= now()->year + 1; $y++)
                            <option value="{{ $y }}" {{ ($filters['end_year'] ?? $year) == $y ? 'selected' : '' }}>{{ $y }}년</option>
                        @endfor
                    </select>
                </div>
                <div class="sm:min-w-[70px]">
                    <label class="block text-xs font-medium text-gray-500 mb-1">&nbsp;</label>
                    <select name="end_month" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
                        @for ($m = 1; $m <= 12; $m++)
                            <option value="{{ $m }}" {{ ($filters['end_month'] ?? $month) == $m ? 'selected' : '' }}>{{ $m }}월</option>
                        @endfor
                    </select>
                </div>
            </div>

            <div class="w-[calc(50%-6px)] sm:w-auto sm:min-w-[100px]">
                <label class="block text-xs font-medium text-gray-500 mb-1">상태</label>
                <select name="status" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
                    <option value="">전체</option>
                    <option value="pending" {{ ($filters['status'] ?? '') == 'pending' ? 'selected' : '' }}>대기</option>
                    <option value="approved" {{ ($filters['status'] ?? '') == 'approved' ? 'selected' : '' }}>승인</option>
                    <option value="paid" {{ ($filters['status'] ?? '') == 'paid' ? 'selected' : '' }}>지급완료</option>
                    <option value="cancelled" {{ ($filters['status'] ?? '') == 'cancelled' ? 'selected' : '' }}>취소</option>
                </select>
            </div>

            <div class="w-[calc(50%-6px)] sm:w-auto sm:min-w-[100px]">
                <label class="block text-xs font-medium text-gray-500 mb-1">입금구분</label>
                <select name="payment_type" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
                    <option value="">전체</option>
                    <option value="deposit" {{ ($filters['payment_type'] ?? '') == 'deposit' ? 'selected' : '' }}>1차</option>
                    <option value="balance" {{ ($filters['payment_type'] ?? '') == 'balance' ? 'selected' : '' }}>2차</option>
                </select>
            </div>

            <div class="w-[calc(50%-6px)] sm:w-auto sm:min-w-[120px]">
                <label class="block text-xs font-medium text-gray-500 mb-1">영업파트너</label>
                <select name="partner_id" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
                    <option value="">전체</option>
                    @foreach ($partners as $partner)
                        <option value="{{ $partner->id }}" {{ ($filters['partner_id'] ?? '') == $partner->id ? 'selected' : '' }}>
                            {{ $partner->user->name ?? $partner->partner_code }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="flex items-end gap-1 w-full sm:w-auto">
                <button type="submit"
                        class="flex-1 sm:flex-none px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm rounded-lg transition-colors">
                    조회
                </button>
                <a href="{{ route('finance.settlement') }}"
                   class="px-3 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 text-sm rounded-lg transition-colors">
                    초기화
                </a>
            </div>
        </div>
    </form>
</div>

<script>
function toggleDateRange(checked) {
    document.getElementById('single-date').classList.toggle('hidden', checked);
    document.getElementById('range-date').classList.toggle('hidden', !checked);
    document.querySelectorAll('#single-date select').forEach(s => s.disabled = checked);
    document.querySelectorAll('#range-date select').forEach(s => s.disabled = !checked);
}
document.addEventListener('DOMContentLoaded', function() {
    const checked = document.querySelector('input[name="date_range"]')?.checked || false;
    document.querySelectorAll('#single-date select').forEach(s => s.disabled = checked);
    document.querySelectorAll('#range-date select').forEach(s => s.disabled = !checked);
});
</script>
