{{-- 급여 설정 폼 (HTMX로 로드) --}}
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-semibold text-gray-800">급여 설정</h3>
        <p class="text-sm text-gray-500 mt-1">4대보험 요율 및 급여 지급일 설정</p>
    </div>

    <form id="payrollSettingsForm" class="px-6 py-6 space-y-6">
        {{-- 4대보험 요율 --}}
        <div>
            <h4 class="text-sm font-medium text-gray-700 mb-3">4대보험 요율 (%)</h4>
            <div class="grid gap-4" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
                <div>
                    <label class="block text-xs text-gray-500 mb-1">건강보험료율</label>
                    <input type="number" name="health_insurance_rate" step="0.001" min="0" max="100"
                           value="{{ $settings->health_insurance_rate }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">장기요양보험료율 (건강보험의 %)</label>
                    <input type="number" name="long_term_care_rate" step="0.0001" min="0" max="100"
                           value="{{ $settings->long_term_care_rate }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">국민연금 요율</label>
                    <input type="number" name="pension_rate" step="0.001" min="0" max="100"
                           value="{{ $settings->pension_rate }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">고용보험 요율</label>
                    <input type="number" name="employment_insurance_rate" step="0.001" min="0" max="100"
                           value="{{ $settings->employment_insurance_rate }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
            </div>
        </div>

        {{-- 국민연금 기준금액 --}}
        <div>
            <h4 class="text-sm font-medium text-gray-700 mb-3">국민연금 기준소득월액</h4>
            <div class="grid gap-4" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
                <div>
                    <label class="block text-xs text-gray-500 mb-1">상한액 (원)</label>
                    <input type="text" name="pension_max_salary" inputmode="numeric"
                           value="{{ number_format((int) $settings->pension_max_salary) }}"
                           oninput="formatMoneyInput(this)" onfocus="moneyFocus(this)" onblur="moneyBlur(this)"
                           class="money-input w-full px-3 py-2 border border-gray-300 rounded-lg text-sm text-right focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">하한액 (원)</label>
                    <input type="text" name="pension_min_salary" inputmode="numeric"
                           value="{{ number_format((int) $settings->pension_min_salary) }}"
                           oninput="formatMoneyInput(this)" onfocus="moneyFocus(this)" onblur="moneyBlur(this)"
                           class="money-input w-full px-3 py-2 border border-gray-300 rounded-lg text-sm text-right focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
            </div>
        </div>

        {{-- 기타 설정 --}}
        <div>
            <h4 class="text-sm font-medium text-gray-700 mb-3">기타 설정</h4>
            <div class="grid gap-4" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
                <div>
                    <label class="block text-xs text-gray-500 mb-1">급여 지급일</label>
                    <input type="number" name="pay_day" min="1" max="31"
                           value="{{ $settings->pay_day }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div class="flex items-end">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="auto_calculate" value="1"
                               {{ $settings->auto_calculate ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-sm text-gray-700">급여 등록 시 자동 계산</span>
                    </label>
                </div>
            </div>
        </div>

        {{-- 저장 버튼 --}}
        <div class="flex justify-end pt-4 border-t border-gray-200">
            <button type="button" onclick="savePayrollSettings()"
                    class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors">
                설정 저장
            </button>
        </div>
    </form>
</div>