{{-- 통계 카드 --}}
<div id="attendance-stats-container" class="mb-4">
    @include('hr.attendance-integrated.partials.stats')
</div>

{{-- 필터 --}}
<div class="bg-white rounded-lg border border-gray-200 p-4 mb-4">
    <div class="flex flex-wrap items-end gap-3">
        <div style="flex: 1 1 180px; max-width: 220px;">
            <label class="block text-xs font-medium text-gray-600 mb-1">이름검색</label>
            <input type="text" id="att-search" placeholder="이름 검색..."
                   class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                   onkeydown="if(event.key==='Enter') loadAttendances()">
        </div>
        <div style="flex: 0 0 150px;">
            <label class="block text-xs font-medium text-gray-600 mb-1">부서</label>
            <select id="att-department" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg" onchange="loadAttendances()">
                <option value="">전체</option>
                @foreach($departments as $dept)
                <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                @endforeach
            </select>
        </div>
        <div style="flex: 0 0 130px;">
            <label class="block text-xs font-medium text-gray-600 mb-1">상태</label>
            <select id="att-status" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg" onchange="loadAttendances()">
                <option value="">전체</option>
                @foreach($statusMap as $code => $label)
                <option value="{{ $code }}">{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div style="flex: 0 0 150px;">
            <label class="block text-xs font-medium text-gray-600 mb-1">시작일</label>
            <input type="date" id="att-date-from" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg" onchange="loadAttendances()">
        </div>
        <div style="flex: 0 0 150px;">
            <label class="block text-xs font-medium text-gray-600 mb-1">종료일</label>
            <input type="date" id="att-date-to" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg" onchange="loadAttendances()">
        </div>
        <div class="shrink-0">
            <button onclick="loadAttendances()" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors">
                검색
            </button>
        </div>
    </div>
</div>

{{-- 근태 목록 --}}
<div id="attendance-table-container">
    <div class="flex items-center justify-center py-12 text-gray-400">
        <svg class="w-5 h-5 animate-spin mr-2" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
        불러오는 중...
    </div>
</div>
