{{-- 기간 필터 컴포넌트 --}}
<form id="usageFilterForm" class="flex flex-wrap gap-2 sm:gap-4 items-center">
    <!-- 전체 테넌트 보기 토글 -->
    <label class="flex items-center gap-2 px-3 py-2 bg-purple-50 border border-purple-200 rounded-lg cursor-pointer hover:bg-purple-100 transition-colors">
        <input type="checkbox"
               name="all_tenants"
               value="1"
               id="allTenantsToggle"
               class="w-4 h-4 rounded border-purple-300 text-purple-600 focus:ring-purple-500">
        <span class="text-sm font-medium text-purple-700">전체 테넌트</span>
    </label>

    <!-- 시작일 -->
    <div class="flex items-center gap-2">
        <label for="startDate" class="text-sm font-medium text-gray-700">시작일</label>
        <input type="date"
               name="start_date"
               id="startDate"
               value="{{ $startDate ?? now()->startOfMonth()->format('Y-m-d') }}"
               class="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
    </div>

    <span class="text-gray-400">~</span>

    <!-- 종료일 -->
    <div class="flex items-center gap-2">
        <label for="endDate" class="text-sm font-medium text-gray-700">종료일</label>
        <input type="date"
               name="end_date"
               id="endDate"
               value="{{ $endDate ?? now()->format('Y-m-d') }}"
               class="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
    </div>

    <!-- 빠른 선택 버튼들 -->
    <div class="flex gap-1">
        <button type="button" onclick="setQuickPeriod('thisMonth')" class="px-3 py-2 text-xs font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
            이번달
        </button>
        <button type="button" onclick="setQuickPeriod('lastMonth')" class="px-3 py-2 text-xs font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
            지난달
        </button>
        <button type="button" onclick="setQuickPeriod('last3Months')" class="px-3 py-2 text-xs font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
            최근 3개월
        </button>
    </div>

    <!-- 조회 버튼 -->
    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition flex items-center gap-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
        조회
    </button>
</form>
