@extends('layouts.app')

@section('title', '사용자 생성')

@section('content')
<div class="container mx-auto max-w-4xl">
    <!-- 페이지 헤더 -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">👥 사용자 생성</h1>
        <a href="{{ route('users.index') }}" class="text-gray-600 hover:text-gray-800">
            ← 목록으로
        </a>
    </div>

    <!-- 폼 영역 -->
    <div class="bg-white rounded-lg shadow-sm p-6">
        <form id="userForm"
              hx-post="/api/admin/users"
              hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
              hx-swap="none">

            <!-- 기본 정보 -->
            <div class="mb-8">
                <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">기본 정보</h2>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            사용자 ID
                        </label>
                        <input type="text" name="user_id" maxlength="50"
                               placeholder="선택사항"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <p class="text-xs text-gray-500 mt-1">비워두면 자동 생성됩니다.</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            이름 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="name" required maxlength="100"
                               placeholder="홍길동"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
            </div>

            <!-- 계정 정보 -->
            <div class="mb-8">
                <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">계정 정보</h2>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            이메일 <span class="text-red-500">*</span>
                        </label>
                        <input type="email" name="email" required maxlength="255"
                               placeholder="user@example.com"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            연락처
                        </label>
                        <input type="text" name="phone" maxlength="20"
                               placeholder="010-1234-5678"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
            </div>

            <!-- 직급/직책 -->
            <div class="mb-8">
                <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">직급/직책</h2>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="flex items-center gap-1 text-sm font-medium text-gray-700 mb-1">
                            직급
                            <span style="position:relative; display:inline-flex;"
                                  onmouseenter="this.querySelector('.pos-tip').style.display='block'"
                                  onmouseleave="this.querySelector('.pos-tip').style.display='none'">
                                <svg class="w-4 h-4 text-gray-400 cursor-help" style="transition:color .15s" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                <span class="pos-tip text-xs font-normal text-white bg-gray-800 rounded-lg shadow-lg" style="display:none; position:absolute; z-index:10; left:50%; transform:translateX(-50%); top:1.5rem; width:14rem; padding:0.5rem 0.75rem; white-space:normal; line-height:1.5;">
                                    <b>직급</b>은 조직 내 서열을 나타냅니다.<br>예: 사원, 대리, 과장, 차장, 부장
                                </span>
                            </span>
                        </label>
                        <div class="flex gap-2">
                            <select name="position_key" id="position_key"
                                    class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="">선택하세요</option>
                                @foreach($ranks as $rank)
                                    <option value="{{ $rank->key }}">{{ $rank->name }}</option>
                                @endforeach
                            </select>
                            <button type="button" onclick="openPositionModal('rank')"
                                    class="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-lg transition text-sm font-bold"
                                    title="직급 추가">+</button>
                        </div>
                    </div>
                    <div>
                        <label class="flex items-center gap-1 text-sm font-medium text-gray-700 mb-1">
                            직책
                            <span style="position:relative; display:inline-flex;"
                                  onmouseenter="this.querySelector('.pos-tip').style.display='block'"
                                  onmouseleave="this.querySelector('.pos-tip').style.display='none'">
                                <svg class="w-4 h-4 text-gray-400 cursor-help" style="transition:color .15s" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                <span class="pos-tip text-xs font-normal text-white bg-gray-800 rounded-lg shadow-lg" style="display:none; position:absolute; z-index:10; left:50%; transform:translateX(-50%); top:1.5rem; width:14rem; padding:0.5rem 0.75rem; white-space:normal; line-height:1.5;">
                                    <b>직책</b>은 맡은 역할/책임을 나타냅니다.<br>예: 팀장, 실장, 본부장, 대표이사
                                </span>
                            </span>
                        </label>
                        <div class="flex gap-2">
                            <select name="job_title_key" id="job_title_key"
                                    class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="">선택하세요</option>
                                @foreach($titles as $title)
                                    <option value="{{ $title->key }}">{{ $title->name }}</option>
                                @endforeach
                            </select>
                            <button type="button" onclick="openPositionModal('title')"
                                    class="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-lg transition text-sm font-bold"
                                    title="직책 추가">+</button>
                        </div>
                    </div>
                </div>
            </div>

            @include('hr.employees.partials.position-add-modal')

            <!-- 비밀번호 -->
            <div class="mb-8">
                <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">비밀번호</h2>
                @if($isHQ)
                    {{-- 본사: 임시 비밀번호 자동 생성 + 이메일 발송 --}}
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <div class="flex items-start">
                            <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <div>
                                <p class="text-sm text-blue-800 font-medium">임시 비밀번호가 자동 생성됩니다</p>
                                <p class="text-sm text-blue-700 mt-1">사용자 생성 시 임시 비밀번호가 생성되어 입력한 이메일 주소로 발송됩니다.</p>
                            </div>
                        </div>
                    </div>
                @else
                    {{-- 비본사: 비밀번호 직접 입력 --}}
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                비밀번호 <span class="text-red-500">*</span>
                            </label>
                            <input type="password" name="password" required minlength="8" maxlength="100"
                                   placeholder="최소 8자 이상"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <p class="text-xs text-gray-500 mt-1">영문, 숫자를 포함하여 8자 이상 입력하세요.</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                비밀번호 확인 <span class="text-red-500">*</span>
                            </label>
                            <input type="password" name="password_confirmation" required minlength="8" maxlength="100"
                                   placeholder="비밀번호 재입력"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                    </div>
                @endif
            </div>

            <!-- 역할 설정 -->
            <div class="mb-8">
                <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">역할 설정</h2>
                @if($roles->isNotEmpty())
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                        @foreach($roles as $role)
                            <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" name="role_ids[]" value="{{ $role->id }}"
                                       {{ in_array($role->id, old('role_ids', [])) ? 'checked' : '' }}
                                       class="h-4 w-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500">
                                <span class="ml-2 text-sm text-gray-700">{{ $role->name }}</span>
                                <span class="ml-1 px-1.5 py-0.5 text-xs rounded {{ $role->guard_name === 'web' ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600' }}">{{ $role->guard_name }}</span>
                            </label>
                        @endforeach
                    </div>
                @else
                    <p class="text-sm text-gray-500">선택 가능한 역할이 없습니다.</p>
                @endif
            </div>

            <!-- 부서 설정 -->
            <div class="mb-8">
                <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">부서 설정</h2>
                @if($departments->isNotEmpty())
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                        @foreach($departments as $department)
                            <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" name="department_ids[]" value="{{ $department->id }}"
                                       {{ in_array($department->id, old('department_ids', [])) ? 'checked' : '' }}
                                       class="h-4 w-4 text-green-600 rounded focus:ring-2 focus:ring-green-500">
                                <span class="ml-2 text-sm text-gray-700">{{ $department->name }}</span>
                            </label>
                        @endforeach
                    </div>
                    <p class="text-xs text-gray-500 mt-2">첫 번째로 선택한 부서가 주 부서로 설정됩니다.</p>
                @else
                    <p class="text-sm text-gray-500">선택 가능한 부서가 없습니다.</p>
                @endif
            </div>

            <!-- 계정 상태 -->
            <div class="mb-8">
                <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">계정 상태</h2>
                <div class="flex items-center gap-6">
                    <label class="flex items-center">
                        {{-- 체크박스 해제 시에도 값이 전송되도록 hidden 필드 추가 --}}
                        <input type="hidden" name="is_active" value="0">
                        <input type="checkbox" name="is_active" value="1" checked
                               class="h-4 w-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500">
                        <span class="ml-2 text-sm text-gray-700">활성 상태</span>
                    </label>
                    @if(auth()->user()?->is_super_admin)
                    <label class="flex items-center">
                        {{-- 체크박스 해제 시에도 값이 전송되도록 hidden 필드 추가 --}}
                        <input type="hidden" name="is_super_admin" value="0">
                        <input type="checkbox" name="is_super_admin" value="1"
                               class="h-4 w-4 text-red-600 rounded focus:ring-2 focus:ring-red-500">
                        <span class="ml-2 text-sm text-gray-700">슈퍼 관리자</span>
                    </label>
                    @endif
                </div>
            </div>

            <!-- 버튼 영역 -->
            <div class="flex justify-end gap-3">
                <a href="{{ route('users.index') }}"
                   class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
                    취소
                </a>
                <button type="submit"
                        class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                    생성
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<script>
    // HTMX 응답 처리
    document.body.addEventListener('htmx:afterRequest', function(event) {
        if (event.detail.target.id === 'userForm') {
            const response = JSON.parse(event.detail.xhr.response);
            if (response.success) {
                showToast(response.message, 'success');
                window.location.href = response.redirect;
            } else {
                showToast(response.message || '사용자 생성에 실패했습니다.', 'error');
            }
        }
    });

    // 에러 처리
    document.body.addEventListener('htmx:responseError', function(event) {
        if (event.detail.xhr.status === 422) {
            const errors = JSON.parse(event.detail.xhr.response).errors;
            let errorMsg = '입력 오류: ';
            for (let field in errors) {
                errorMsg += errors[field].join(', ') + ' ';
            }
            showToast(errorMsg, 'error');
        } else {
            showToast('서버 오류가 발생했습니다.', 'error');
        }
    });
</script>
@endpush