@extends('layouts.app')

@section('title', '휴가관리')

@section('content')
<div class="px-4 py-6">
    {{-- 페이지 헤더 --}}
    <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">휴가관리</h1>
            <p class="text-sm text-gray-500 mt-1">휴가 신청 시 결재가 자동 생성되며, 결재 승인/반려에 따라 휴가가 처리됩니다.</p>
        </div>
        <div class="flex flex-wrap items-center gap-2 sm:gap-3">
            <button type="button" onclick="openLeaveModal()"
                    class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors">
                <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="M12 4v16m8-8H4"/>
                </svg>
                휴가 신청
            </button>
            <button type="button" onclick="exportLeaves()"
                    class="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium rounded-lg transition-colors">
                <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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                엑셀 다운로드
            </button>
        </div>
    </div>

    {{-- 탭 네비게이션 --}}
    <div class="flex items-center gap-1 mb-4 border-b border-gray-200">
        <button type="button" onclick="switchTab('list')" id="tab-list"
                class="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-blue-600 text-blue-600">
            휴가신청
        </button>
        <button type="button" onclick="switchTab('balance')" id="tab-balance"
                class="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-transparent text-gray-500 hover:text-gray-700">
            잔여연차
        </button>
        <button type="button" onclick="switchTab('stats')" id="tab-stats"
                class="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-transparent text-gray-500 hover:text-gray-700">
            사용현황
        </button>
    </div>

    {{-- 탭 콘텐츠 영역 --}}
    <div id="leaves-content">
        {{-- 휴가신청 탭 --}}
        <div id="content-list">
            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                {{-- 필터 --}}
                <div class="px-6 py-4 border-b border-gray-200">
                    <x-filter-collapsible id="leaveFilter">
                        <form id="leaveFilterForm" class="flex flex-wrap gap-3 items-end">
                            <div style="flex: 1 1 180px; max-width: 260px;">
                                <label class="block text-xs text-gray-500 mb-1">검색</label>
                                <input type="text" name="q" placeholder="사원 이름..."
                                       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 style="flex: 0 1 160px;">
                                <label class="block text-xs text-gray-500 mb-1">부서</label>
                                <select name="department_id"
                                        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">
                                    <option value="">전체 부서</option>
                                    @foreach($departments as $dept)
                                        <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div style="flex: 0 1 130px;">
                                <label class="block text-xs text-gray-500 mb-1">유형</label>
                                <select name="leave_type"
                                        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">
                                    <option value="">전체 유형</option>
                                    @foreach($typeMap as $key => $label)
                                        <option value="{{ $key }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div style="flex: 0 1 120px;">
                                <label class="block text-xs text-gray-500 mb-1">상태</label>
                                <select name="status"
                                        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">
                                    <option value="">전체 상태</option>
                                    @foreach($statusMap as $key => $label)
                                        <option value="{{ $key }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div style="flex: 0 1 150px;">
                                <label class="block text-xs text-gray-500 mb-1">시작일</label>
                                <input type="date" name="date_from"
                                       value="{{ now()->startOfYear()->toDateString() }}"
                                       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 style="flex: 0 1 150px;">
                                <label class="block text-xs text-gray-500 mb-1">종료일</label>
                                <input type="date" name="date_to"
                                       value="{{ now()->toDateString() }}"
                                       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="shrink-0">
                                <button type="submit"
                                        class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white text-sm rounded-lg transition-colors">
                                    검색
                                </button>
                            </div>
                        </form>
                    </x-filter-collapsible>
                </div>

                {{-- HTMX 테이블 영역 --}}
                <div id="leaves-table"
                     hx-get="{{ route('api.admin.hr.leaves.index') }}"
                     hx-vals='{"date_from": "{{ now()->startOfYear()->toDateString() }}", "date_to": "{{ now()->toDateString() }}"}'
                     hx-trigger="load"
                     hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
                     class="min-h-[200px]">
                    <div class="flex justify-center items-center p-12">
                        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- 잔여연차 탭 --}}
        <div id="content-balance" class="hidden">
            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 flex items-center gap-3">
                    <label class="text-sm text-gray-600 font-medium">연도:</label>
                    <select id="balanceYear" onchange="loadBalance()"
                            class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        @for($y = now()->year; $y >= now()->year - 2; $y--)
                            <option value="{{ $y }}">{{ $y }}년</option>
                        @endfor
                    </select>

                    {{-- 도움말 버튼 --}}
                    <button type="button"
                            hx-get="{{ route('hr.leaves.help') }}"
                            hx-target="#leave-help-modal-container"
                            hx-swap="innerHTML"
                            class="ml-auto inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 transition-colors"
                            title="휴가관리 도움말">
                        <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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </button>
                </div>
                <div id="balance-container">
                    <div class="flex justify-center items-center p-12">
                        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- 사용현황 탭 --}}
        <div id="content-stats" class="hidden">
            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 flex items-center gap-3">
                    <label class="text-sm text-gray-600 font-medium">연도:</label>
                    <select id="statsYear" onchange="loadStats()"
                            class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        @for($y = now()->year; $y >= now()->year - 2; $y--)
                            <option value="{{ $y }}">{{ $y }}년</option>
                        @endfor
                    </select>
                </div>
                <div id="stats-container">
                    <div class="flex justify-center items-center p-12">
                        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- 휴가 신청 모달 --}}
<div id="leaveModal" class="fixed inset-0 z-50 hidden">
    <div class="fixed inset-0 bg-black/40" onclick="closeLeaveModal()"></div>
    <div class="fixed inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-lg relative">
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800">휴가 신청</h3>
                <button type="button" onclick="closeLeaveModal()" class="text-gray-400 hover:text-gray-600">
                    <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="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <form id="leaveForm" onsubmit="submitLeave(event)">
                <div class="px-6 py-4 space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">사원 <span class="text-red-500">*</span></label>
                        <select name="user_id" id="leaveUserId" required onchange="loadUserBalance()"
                                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">
                            <option value="">선택하세요</option>
                            @foreach($employees as $emp)
                                <option value="{{ $emp->user_id }}">{{ $emp->display_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">유형 <span class="text-red-500">*</span></label>
                        <select name="leave_type" id="leaveType" required onchange="onTypeChange()"
                                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">
                            @foreach($typeMap as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex gap-3">
                        <div class="flex-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">시작일 <span class="text-red-500">*</span></label>
                            <input type="date" name="start_date" id="leaveStartDate" required
                                   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-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">종료일 <span class="text-red-500">*</span></label>
                            <input type="date" name="end_date" id="leaveEndDate" required
                                   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 id="balanceInfo" class="hidden p-3 bg-blue-50 rounded-lg text-sm">
                        <div class="flex items-center justify-between">
                            <span class="text-blue-700">잔여 연차:</span>
                            <span id="balanceDisplay" class="font-semibold text-blue-800">-</span>
                        </div>
                    </div>
                    {{-- 결재선 선택 --}}
                    <div id="approvalLineSection">
                        <label class="block text-sm font-medium text-gray-700 mb-1">결재선 <span class="text-red-500">*</span></label>
                        @if($approvalLines->isEmpty())
                            {{-- 결재선 없음 경고 + 바로 생성 버튼 --}}
                            <div id="noLineWarning" class="p-3 bg-amber-50 border border-amber-200 rounded-lg">
                                <p class="text-sm text-amber-700 mb-2">등록된 결재선이 없습니다. 결재선을 먼저 생성해주세요.</p>
                                <button type="button" onclick="openQuickLineModal()"
                                        class="px-3 py-1.5 bg-amber-600 hover:bg-amber-700 text-white text-xs font-medium rounded-lg transition-colors">
                                    + 결재선 바로 생성
                                </button>
                            </div>
                            <input type="hidden" name="approval_line_id" id="leaveApprovalLine" value="">
                            <div id="approvalStepsPreview" class="mt-2 flex items-center gap-1 overflow-x-auto py-1"></div>
                        @else
                            <select name="approval_line_id" id="leaveApprovalLine" required
                                    onchange="previewApprovalSteps()"
                                    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">
                                @foreach($approvalLines as $line)
                                    <option value="{{ $line->id }}" {{ $line->is_default ? 'selected' : '' }}
                                            data-steps='@json($line->steps)'>
                                        {{ $line->name }}{{ $line->is_default ? ' (기본)' : '' }} — {{ count($line->steps ?? []) }}단계
                                    </option>
                                @endforeach
                            </select>
                            <div id="approvalStepsPreview" class="mt-2 flex items-center gap-1 overflow-x-auto py-1"></div>
                            <button type="button" onclick="openQuickLineModal()"
                                    class="text-xs text-blue-600 hover:underline mt-1">
                                + 새 결재선 추가
                            </button>
                        @endif
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">사유</label>
                        <textarea name="reason" rows="3" maxlength="1000" placeholder="휴가 사유를 입력하세요..."
                                  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"></textarea>
                    </div>
                </div>
                <div class="flex items-center justify-end gap-2 px-6 py-4 border-t border-gray-200">
                    <button type="button" onclick="closeLeaveModal()"
                            class="px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                        취소
                    </button>
                    <button type="submit" id="leaveSubmitBtn"
                            class="px-4 py-2 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
                        신청
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- 도움말 모달 컨테이너 --}}
<div id="leave-help-modal-container"></div>

{{-- 반려 사유 모달 --}}
<div id="rejectModal" class="fixed inset-0 z-50 hidden">
    <div class="fixed inset-0 bg-black/40" onclick="closeRejectModal()"></div>
    <div class="fixed inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-sm relative">
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800">반려 사유</h3>
                <button type="button" onclick="closeRejectModal()" class="text-gray-400 hover:text-gray-600">
                    <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="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <form onsubmit="submitReject(event)">
                <div class="px-6 py-4">
                    <input type="hidden" id="rejectLeaveId">
                    <textarea id="rejectReason" rows="3" maxlength="1000" placeholder="반려 사유를 입력하세요..."
                              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"></textarea>
                </div>
                <div class="flex items-center justify-end gap-2 px-6 py-4 border-t border-gray-200">
                    <button type="button" onclick="closeRejectModal()"
                            class="px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                        취소
                    </button>
                    <button type="submit"
                            class="px-4 py-2 text-sm text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors">
                        반려
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{{-- 빠른 결재선 생성 모달 --}}
<div id="quickLineModal" class="fixed inset-0 z-[60] hidden">
    <div class="fixed inset-0 bg-black/50" onclick="closeQuickLineModal()"></div>
    <div class="fixed inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl relative max-h-[90vh] flex flex-col" x-data="quickLineEditor()" x-init="init()">
            {{-- 헤더 --}}
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 shrink-0">
                <h3 class="text-lg font-semibold text-gray-800">빠른 결재선 생성</h3>
                <button type="button" onclick="closeQuickLineModal()" class="text-gray-400 hover:text-gray-600">
                    <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="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            {{-- 본문 --}}
            <div class="px-6 py-4 overflow-y-auto flex-1 min-h-0">
                {{-- 결재선 이름 --}}
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">결재선 이름 <span class="text-red-500">*</span></label>
                    <input type="text" x-model="lineName" placeholder="예: 휴가 결재선"
                           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>

                {{-- 2단 레이아웃: 인원 목록 | 결재선 편집 --}}
                <div class="flex gap-4" style="min-height: 300px;">
                    {{-- 왼쪽: 인원 목록 --}}
                    <div class="border border-gray-200 rounded-lg overflow-hidden flex flex-col" style="flex: 0 0 240px;">
                        <div class="px-3 py-2 bg-gray-50 border-b border-gray-200 shrink-0">
                            <input type="text" x-model="searchQuery" placeholder="이름/부서 검색..."
                                   class="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div class="overflow-y-auto flex-1" style="max-height: 280px;">
                            <template x-if="loading">
                                <div class="flex justify-center items-center p-6">
                                    <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
                                </div>
                            </template>
                            <template x-if="!loading && filteredDepartments.length === 0">
                                <p class="text-xs text-gray-400 p-3">인원이 없습니다.</p>
                            </template>
                            <template x-for="dept in filteredDepartments" :key="dept.department_id ?? 'none'">
                                <div>
                                    <button type="button" @click="toggleDept(dept.department_id ?? 'none')"
                                            class="w-full flex items-center justify-between px-3 py-2 text-xs font-medium text-gray-700 bg-gray-50 hover:bg-gray-100 border-b border-gray-100">
                                        <span x-text="dept.department_name + ' (' + dept.users.length + '명)'"></span>
                                        <svg class="w-3 h-3 transition-transform" :class="isDeptExpanded(dept.department_id ?? 'none') ? '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>
                                    <template x-if="isDeptExpanded(dept.department_id ?? 'none')">
                                        <div>
                                            <template x-for="user in dept.users" :key="user.id">
                                                <div class="flex items-center justify-between px-3 py-1.5 hover:bg-blue-50 border-b border-gray-50">
                                                    <div class="min-w-0">
                                                        <span class="text-xs text-gray-800 font-medium" x-text="user.name"></span>
                                                        <span class="text-[10px] text-gray-400 ml-1" x-text="user.position || user.job_title || ''"></span>
                                                    </div>
                                                    <button type="button" @click="addStep(user, dept.department_name)"
                                                            class="shrink-0 text-[10px] px-1.5 py-0.5 rounded"
                                                            :class="isAdded(user.id) ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-blue-100 text-blue-600 hover:bg-blue-200'"
                                                            :disabled="isAdded(user.id)"
                                                            x-text="isAdded(user.id) ? '추가됨' : '+ 추가'">
                                                    </button>
                                                </div>
                                            </template>
                                        </div>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </div>

                    {{-- 오른쪽: 결재선 편집 --}}
                    <div class="flex-1 border border-gray-200 rounded-lg overflow-hidden flex flex-col">
                        <div class="px-3 py-2 bg-gray-50 border-b border-gray-200 shrink-0">
                            <span class="text-xs font-medium text-gray-600">결재선 구성</span>
                            <span class="text-[10px] text-gray-400 ml-1">(드래그로 순서 변경)</span>
                        </div>
                        <div class="overflow-y-auto flex-1 p-2" style="max-height: 280px;">
                            <template x-if="steps.length === 0">
                                <p class="text-xs text-gray-400 text-center py-8">왼쪽에서 결재자를 추가하세요.</p>
                            </template>
                            <div x-ref="sortableList" class="space-y-1.5">
                                <template x-for="(step, index) in steps" :key="step._key">
                                    <div class="flex items-center gap-2 px-2 py-2 bg-white border border-gray-200 rounded-lg hover:border-blue-200 transition-colors" :data-index="index">
                                        {{-- 드래그 핸들 --}}
                                        <span class="drag-handle cursor-grab text-gray-300 hover:text-gray-500 shrink-0" title="드래그하여 순서 변경">
                                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M7 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM13 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM13 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM13 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
                                            </svg>
                                        </span>
                                        {{-- 순번 --}}
                                        <span class="text-[10px] text-gray-400 shrink-0 w-4 text-center" x-text="index + 1"></span>
                                        {{-- 이름/부서 --}}
                                        <div class="min-w-0 flex-1">
                                            <span class="text-xs font-medium text-gray-800" x-text="step.user_name"></span>
                                            <span class="text-[10px] text-gray-400 ml-1" x-text="step.department ? '(' + step.department + ')' : ''"></span>
                                        </div>
                                        {{-- 유형 선택 --}}
                                        <select x-model="step.step_type"
                                                class="shrink-0 text-[11px] px-1.5 py-1 border border-gray-200 rounded focus:ring-1 focus:ring-blue-500"
                                                style="width: 62px;">
                                            <option value="approval">결재</option>
                                            <option value="agreement">합의</option>
                                            <option value="reference">참조</option>
                                        </select>
                                        {{-- 삭제 --}}
                                        <button type="button" @click="removeStep(index)"
                                                class="shrink-0 text-gray-300 hover:text-red-500 transition-colors" title="삭제">
                                            <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="M6 18L18 6M6 6l12 12"/>
                                            </svg>
                                        </button>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 푸터 --}}
            <div class="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-gray-50 shrink-0">
                <div class="flex items-center gap-3 text-[11px] text-gray-500">
                    <span>결재: <strong class="text-blue-600" x-text="countByType('approval')"></strong></span>
                    <span>합의: <strong class="text-amber-600" x-text="countByType('agreement')"></strong></span>
                    <span>참조: <strong class="text-gray-600" x-text="countByType('reference')"></strong></span>
                </div>
                <div class="flex items-center gap-2">
                    <button type="button" onclick="closeQuickLineModal()"
                            class="px-3 py-1.5 text-xs text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                        취소
                    </button>
                    <button type="button" @click="save()"
                            :disabled="saving"
                            class="px-4 py-1.5 text-xs text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors disabled:opacity-50">
                        <span x-show="!saving">저장</span>
                        <span x-show="saving">저장 중...</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    // ===== 탭 관리 =====
    let currentTab = 'list';
    const tabLoaded = { list: true, balance: false, stats: false };

    function switchTab(tab) {
        document.getElementById('tab-' + currentTab).className = 'px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-transparent text-gray-500 hover:text-gray-700';
        document.getElementById('content-' + currentTab).classList.add('hidden');

        currentTab = tab;
        document.getElementById('tab-' + tab).className = 'px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-blue-600 text-blue-600';
        document.getElementById('content-' + tab).classList.remove('hidden');

        if (!tabLoaded[tab]) {
            tabLoaded[tab] = true;
            if (tab === 'balance') loadBalance();
            if (tab === 'stats') loadStats();
        }
    }

    let balanceSort = 'hire_date';
    let balanceDirection = 'asc';

    function loadBalance(sort, direction) {
        if (sort) balanceSort = sort;
        if (direction) balanceDirection = direction;
        const year = document.getElementById('balanceYear').value;
        htmx.ajax('GET', '{{ route("api.admin.hr.leaves.balance") }}', {
            target: '#balance-container',
            swap: 'innerHTML',
            values: { year: year, sort: balanceSort, direction: balanceDirection },
        });
    }

    function loadStats() {
        const year = document.getElementById('statsYear').value;
        htmx.ajax('GET', '{{ route("api.admin.hr.leaves.stats") }}', {
            target: '#stats-container',
            swap: 'innerHTML',
            values: { year: year },
        });
    }

    // ===== 필터 =====
    document.getElementById('leaveFilterForm')?.addEventListener('submit', function(e) {
        e.preventDefault();
        refreshTable();
    });

    function refreshTable() {
        htmx.ajax('GET', '{{ route("api.admin.hr.leaves.index") }}', {
            target: '#leaves-table',
            swap: 'innerHTML',
            values: getFilterValues(),
        });
    }

    function getFilterValues() {
        const form = document.getElementById('leaveFilterForm');
        const formData = new FormData(form);
        const values = {};
        for (const [key, value] of formData.entries()) {
            if (value) values[key] = value;
        }
        return values;
    }

    // ===== 엑셀 다운로드 =====
    function exportLeaves() {
        const params = new URLSearchParams(getFilterValues());
        window.location.href = '{{ route("api.admin.hr.leaves.export") }}?' + params.toString();
    }

    // ===== 결재선 미리보기 =====
    function previewApprovalSteps() {
        const select = document.getElementById('leaveApprovalLine');
        const preview = document.getElementById('approvalStepsPreview');
        if (!select || !preview) return;

        const option = select.options[select.selectedIndex];
        if (!option || !option.dataset.steps) {
            preview.innerHTML = '';
            return;
        }

        let steps;
        try { steps = JSON.parse(option.dataset.steps); } catch { steps = []; }
        if (!steps.length) {
            preview.innerHTML = '<span class="text-xs text-gray-400">결재 단계가 없습니다.</span>';
            return;
        }

        const typeLabels = { approval: '결재', agreement: '합의', reference: '참조' };
        const typeColors = { approval: '#2563EB', agreement: '#D97706', reference: '#6B7280' };
        const typeBgs = { approval: '#EFF6FF', agreement: '#FFFBEB', reference: '#F9FAFB' };

        preview.innerHTML = steps.map((s, i) => {
            const type = s.step_type || s.type || 'approval';
            const color = typeColors[type] || '#6B7280';
            const bg = typeBgs[type] || '#F9FAFB';
            const name = s.user_name || '사용자 ' + s.user_id;
            const arrow = i > 0 ? '<span style="color:#D1D5DB;margin:0 2px;">→</span>' : '';
            return arrow + '<span style="display:inline-flex;align-items:center;gap:2px;padding:2px 8px;border-radius:9999px;font-size:12px;white-space:nowrap;background:' + bg + ';color:' + color + ';">'
                + name + ' <span style="color:' + color + ';opacity:0.7;">(' + (typeLabels[type] || type) + ')</span></span>';
        }).join('');
    }

    // ===== 휴가 신청 모달 =====
    function openLeaveModal() {
        document.getElementById('leaveForm').reset();
        document.getElementById('balanceInfo').classList.add('hidden');
        document.getElementById('leaveModal').classList.remove('hidden');
        previewApprovalSteps();
    }

    function closeLeaveModal() {
        document.getElementById('leaveModal').classList.add('hidden');
    }

    const deductibleTypes = ['annual', 'half_am', 'half_pm'];

    function onTypeChange() {
        const type = document.getElementById('leaveType').value;
        const startDate = document.getElementById('leaveStartDate');
        const endDate = document.getElementById('leaveEndDate');

        if (type === 'half_am' || type === 'half_pm') {
            endDate.value = startDate.value;
            endDate.setAttribute('readonly', true);
        } else {
            endDate.removeAttribute('readonly');
        }

        loadUserBalance();
    }

    function loadUserBalance() {
        const userId = document.getElementById('leaveUserId').value;
        const type = document.getElementById('leaveType').value;

        if (!userId || !deductibleTypes.includes(type)) {
            document.getElementById('balanceInfo').classList.add('hidden');
            return;
        }

        fetch('{{ url("/api/admin/hr/leaves/balance") }}/' + userId, {
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        })
        .then(r => r.json())
        .then(res => {
            if (res.success && res.data) {
                document.getElementById('balanceDisplay').textContent =
                    res.data.remaining_days + '일 (부여: ' + res.data.total_days + ' / 사용: ' + res.data.used_days + ')';
                document.getElementById('balanceInfo').classList.remove('hidden');
            } else {
                document.getElementById('balanceDisplay').textContent = '연차 정보 없음';
                document.getElementById('balanceInfo').classList.remove('hidden');
            }
        })
        .catch(() => {
            document.getElementById('balanceInfo').classList.add('hidden');
        });
    }

    function submitLeave(e) {
        e.preventDefault();
        const form = document.getElementById('leaveForm');
        const formData = new FormData(form);
        const data = Object.fromEntries(formData.entries());

        const btn = document.getElementById('leaveSubmitBtn');
        btn.disabled = true;
        btn.textContent = '처리 중...';

        fetch('{{ route("api.admin.hr.leaves.store") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify(data)
        })
        .then(r => r.json().then(json => ({ ok: r.ok, json })))
        .then(({ ok, json }) => {
            if (ok && json.success) {
                closeLeaveModal();
                refreshTable();
                showToast(json.message, 'success');
            } else {
                // Laravel 422 validation errors
                const msg = json.message || (json.errors ? Object.values(json.errors).flat().join('\n') : '등록에 실패했습니다.');
                showToast(msg, 'error');
            }
        })
        .catch(() => showToast('네트워크 오류가 발생했습니다.', 'error'))
        .finally(() => {
            btn.disabled = false;
            btn.textContent = '신청';
        });
    }

    // ===== 승인/반려/취소 =====
    function approveLeave(id) {
        if (!confirm('승인하시겠습니까?')) return;

        fetch('{{ url("/api/admin/hr/leaves") }}/' + id + '/approve', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(r => r.json())
        .then(res => {
            if (res.success) {
                refreshTable();
                showToast(res.message, 'success');
            } else {
                showToast(res.message || '승인 처리에 실패했습니다.', 'error');
            }
        })
        .catch(() => showToast('네트워크 오류가 발생했습니다.', 'error'));
    }

    function openRejectModal(id) {
        document.getElementById('rejectLeaveId').value = id;
        document.getElementById('rejectReason').value = '';
        document.getElementById('rejectModal').classList.remove('hidden');
    }

    function closeRejectModal() {
        document.getElementById('rejectModal').classList.add('hidden');
    }

    function submitReject(e) {
        e.preventDefault();
        const id = document.getElementById('rejectLeaveId').value;
        const reason = document.getElementById('rejectReason').value;

        fetch('{{ url("/api/admin/hr/leaves") }}/' + id + '/reject', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ reject_reason: reason })
        })
        .then(r => r.json())
        .then(res => {
            if (res.success) {
                closeRejectModal();
                refreshTable();
                showToast(res.message, 'success');
            } else {
                showToast(res.message || '반려 처리에 실패했습니다.', 'error');
            }
        })
        .catch(() => showToast('네트워크 오류가 발생했습니다.', 'error'));
    }

    function cancelLeave(id) {
        if (!confirm('취소하시겠습니까? 연차가 복원됩니다.')) return;

        fetch('{{ url("/api/admin/hr/leaves") }}/' + id + '/cancel', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(r => r.json())
        .then(res => {
            if (res.success) {
                refreshTable();
                showToast(res.message, 'success');
            } else {
                showToast(res.message || '취소 처리에 실패했습니다.', 'error');
            }
        })
        .catch(() => showToast('네트워크 오류가 발생했습니다.', 'error'));
    }

    function deleteLeave(id) {
        if (!confirm('삭제하시겠습니까?')) return;

        fetch('{{ url("/api/admin/hr/leaves") }}/' + id, {
            method: 'DELETE',
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(r => r.json())
        .then(res => {
            if (res.success) {
                refreshTable();
                showToast(res.message, 'success');
            } else {
                showToast(res.message || '삭제 실패', 'error');
            }
        })
        .catch(() => showToast('네트워크 오류가 발생했습니다.', 'error'));
    }

    function forceDeleteLeave(id) {
        if (!confirm('영구 삭제하시겠습니까?\n이 작업은 되돌릴 수 없으며, 연결된 결재 기록도 함께 삭제됩니다.')) return;

        fetch('{{ url("/api/admin/hr/leaves") }}/' + id + '?force=1', {
            method: 'DELETE',
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(r => r.json())
        .then(res => {
            if (res.success) {
                refreshTable();
                showToast(res.message, 'success');
            } else {
                showToast(res.message || '영구 삭제 실패', 'error');
            }
        })
        .catch(() => showToast('네트워크 오류가 발생했습니다.', 'error'));
    }

    // ===== 토스트 =====
    function showToast(message, type) {
        if (typeof window.showToastNotification === 'function') {
            window.showToastNotification(message, type);
            return;
        }
        const colors = { success: 'bg-emerald-500', error: 'bg-red-500', info: 'bg-blue-500' };
        const toast = document.createElement('div');
        toast.className = `fixed top-4 right-4 z-[70] px-4 py-3 rounded-lg text-white text-sm shadow-lg ${colors[type] || colors.info}`;
        toast.textContent = message;
        document.body.appendChild(toast);
        setTimeout(() => toast.remove(), 3000);
    }

    // ===== 반차 시작일 변경 시 종료일 동기화 =====
    document.getElementById('leaveStartDate')?.addEventListener('change', function() {
        const type = document.getElementById('leaveType').value;
        if (type === 'half_am' || type === 'half_pm') {
            document.getElementById('leaveEndDate').value = this.value;
        }
    });

    // ===== 빠른 결재선 생성 모달 =====
    function openQuickLineModal() {
        document.getElementById('quickLineModal').classList.remove('hidden');
    }

    function closeQuickLineModal() {
        document.getElementById('quickLineModal').classList.add('hidden');
    }

    function quickLineEditor() {
        let keyCounter = 0;

        return {
            departments: [],
            steps: [],
            lineName: '',
            searchQuery: '',
            expandedDepts: {},
            loading: true,
            saving: false,
            sortableInstance: null,

            async init() {
                try {
                    const res = await fetch('/api/admin/tenant-users/list', {
                        headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                    });
                    const data = await res.json();
                    if (data.success) {
                        this.departments = data.data;
                        this.departments.forEach(d => {
                            this.expandedDepts[d.department_id ?? 'none'] = true;
                        });
                    }
                } catch (e) {
                    console.error('인원 목록 로딩 실패:', e);
                }
                this.loading = false;
            },

            get filteredDepartments() {
                if (!this.searchQuery.trim()) return this.departments;
                const q = this.searchQuery.trim().toLowerCase();
                return this.departments
                    .map(dept => {
                        const deptMatch = dept.department_name.toLowerCase().includes(q);
                        const matchedUsers = dept.users.filter(u =>
                            u.name.toLowerCase().includes(q) ||
                            (u.position || '').toLowerCase().includes(q) ||
                            (u.job_title || '').toLowerCase().includes(q)
                        );
                        if (deptMatch) return dept;
                        if (matchedUsers.length > 0) return { ...dept, users: matchedUsers };
                        return null;
                    })
                    .filter(Boolean);
            },

            toggleDept(deptId) {
                this.expandedDepts[deptId] = !this.expandedDepts[deptId];
            },

            isDeptExpanded(deptId) {
                return !!this.expandedDepts[deptId];
            },

            isAdded(userId) {
                return this.steps.some(s => s.user_id === userId);
            },

            addStep(user, deptName) {
                if (this.isAdded(user.id)) return;
                this.steps.push({
                    _key: ++keyCounter,
                    user_id: user.id,
                    user_name: user.name,
                    department: deptName || '',
                    position: user.position || user.job_title || '',
                    step_type: 'approval',
                });
                this.$nextTick(() => this.initSortable());
            },

            removeStep(index) {
                this.steps.splice(index, 1);
                this.$nextTick(() => this.initSortable());
            },

            initSortable() {
                if (this.sortableInstance) {
                    this.sortableInstance.destroy();
                    this.sortableInstance = null;
                }
                const el = this.$refs.sortableList;
                if (!el || typeof Sortable === 'undefined') return;

                this.sortableInstance = Sortable.create(el, {
                    handle: '.drag-handle',
                    animation: 150,
                    ghostClass: 'opacity-30',
                    onEnd: (evt) => {
                        const item = this.steps.splice(evt.oldIndex, 1)[0];
                        this.steps.splice(evt.newIndex, 0, item);
                    },
                });
            },

            countByType(type) {
                return this.steps.filter(s => s.step_type === type).length;
            },

            async save() {
                if (!this.lineName.trim()) {
                    showToast('결재선 이름을 입력해주세요.', 'error');
                    return;
                }
                const nonRefSteps = this.steps.filter(s => s.step_type !== 'reference');
                if (nonRefSteps.length === 0) {
                    showToast('결재자를 1명 이상 추가해주세요.', 'error');
                    return;
                }

                this.saving = true;
                try {
                    const payload = {
                        name: this.lineName.trim(),
                        steps: this.steps.map(s => ({
                            user_id: s.user_id,
                            step_type: s.step_type,
                        })),
                        is_default: false,
                    };

                    const res = await fetch('/api/admin/approvals/lines', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                        body: JSON.stringify(payload),
                    });

                    const data = await res.json();
                    if (res.ok && data.success) {
                        showToast('결재선이 생성되었습니다.', 'success');
                        closeQuickLineModal();
                        refreshApprovalLines(data.data?.id || null);
                        // 상태 초기화
                        this.lineName = '';
                        this.steps = [];
                    } else {
                        const msg = data.message || (data.errors ? Object.values(data.errors).flat().join('\n') : '결재선 생성에 실패했습니다.');
                        showToast(msg, 'error');
                    }
                } catch (e) {
                    console.error('결재선 생성 실패:', e);
                    showToast('네트워크 오류가 발생했습니다.', 'error');
                }
                this.saving = false;
            },
        };
    }

    // ===== 결재선 드롭다운 갱신 =====
    async function refreshApprovalLines(selectedLineId) {
        try {
            const res = await fetch('/api/admin/approvals/lines', {
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            });
            const data = await res.json();
            if (!data.success || !data.data) return;

            const lines = data.data;
            const section = document.getElementById('approvalLineSection');
            if (!section) return;

            // 경고 영역 제거 (있으면)
            const warning = document.getElementById('noLineWarning');
            if (warning) warning.remove();

            // 기존 hidden input 제거 (결재선 없음 상태에서 만들어진 것)
            const hiddenInput = section.querySelector('input[type="hidden"][name="approval_line_id"]');
            if (hiddenInput) hiddenInput.remove();

            // 기존 select가 있으면 재사용, 없으면 새로 생성
            let select = document.getElementById('leaveApprovalLine');
            let isNewSelect = false;

            if (!select || select.tagName !== 'SELECT') {
                // hidden input이었던 경우 제거
                if (select) select.remove();

                select = document.createElement('select');
                select.name = 'approval_line_id';
                select.id = 'leaveApprovalLine';
                select.required = true;
                select.setAttribute('onchange', 'previewApprovalSteps()');
                select.className = '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';
                isNewSelect = true;
            }

            // option 목록 재구성
            select.innerHTML = '';
            lines.forEach(line => {
                const opt = document.createElement('option');
                opt.value = line.id;
                opt.dataset.steps = JSON.stringify(line.steps || []);
                opt.textContent = line.name + (line.is_default ? ' (기본)' : '') + ' — ' + (line.steps?.length || 0) + '단계';
                if (selectedLineId && line.id == selectedLineId) {
                    opt.selected = true;
                } else if (!selectedLineId && line.is_default) {
                    opt.selected = true;
                }
                select.appendChild(opt);
            });

            if (isNewSelect) {
                // label 다음에 삽입
                const label = section.querySelector('label');
                if (label) {
                    label.after(select);
                } else {
                    section.prepend(select);
                }
            }

            // 미리보기 영역 확보
            let preview = document.getElementById('approvalStepsPreview');
            if (!preview) {
                preview = document.createElement('div');
                preview.id = 'approvalStepsPreview';
                preview.className = 'mt-2 flex items-center gap-1 overflow-x-auto py-1';
                select.after(preview);
            }

            // "새 결재선 추가" 링크 확보
            if (!section.querySelector('.quick-line-link')) {
                const link = document.createElement('button');
                link.type = 'button';
                link.className = 'quick-line-link text-xs text-blue-600 hover:underline mt-1';
                link.textContent = '+ 새 결재선 추가';
                link.onclick = openQuickLineModal;
                preview.after(link);
            }

            // 미리보기 갱신
            previewApprovalSteps();

        } catch (e) {
            console.error('결재선 목록 갱신 실패:', e);
        }
    }
</script>
@endpush
