@extends('layouts.app')

@section('title', '영업담당자 등록')

@section('content')
<div class="max-w-2xl mx-auto">
    <!-- 페이지 헤더 -->
    <div class="mb-6">
        <a href="{{ route('sales.managers.index') }}" class="text-gray-500 hover:text-gray-700 text-sm mb-2 inline-flex items-center">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
            목록으로
        </a>
        <div class="flex items-center gap-3">
            <h1 class="text-2xl font-bold text-gray-800">영업담당자 등록</h1>
            <button type="button" id="fillTestDataBtn"
                    class="p-2 bg-amber-50 text-amber-600 rounded-lg hover:bg-amber-100 transition-all border border-amber-200 group relative"
                    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="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
                <span class="absolute -top-10 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
                    랜덤 데이터 채우기
                </span>
            </button>
        </div>
    </div>

    <!-- 폼 -->
    <form action="{{ route('sales.managers.store') }}" method="POST" id="managerForm" class="bg-white rounded-lg shadow-sm p-6 space-y-6">
        @csrf

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">로그인 ID <span class="text-red-500">*</span></label>
                <input type="text" name="member_id" id="member_id" value="{{ old('member_id') }}" required
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('member_id') border-red-500 @enderror">
                @error('member_id')
                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">비밀번호 <span class="text-red-500">*</span></label>
                <input type="text" name="password" id="password" required
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('password') border-red-500 @enderror">
                @error('password')
                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">이름 <span class="text-red-500">*</span></label>
                <input type="text" name="name" id="name" value="{{ old('name') }}" required
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('name') border-red-500 @enderror">
                @error('name')
                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">역할 <span class="text-red-500">*</span></label>
                <select name="role" id="role" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('role') border-red-500 @enderror">
                    <option value="manager" {{ old('role') === 'manager' ? 'selected' : '' }}>매니저</option>
                    <option value="sales_admin" {{ old('role') === 'sales_admin' ? 'selected' : '' }}>영업관리</option>
                    <option value="operator" {{ old('role') === 'operator' ? 'selected' : '' }}>운영자</option>
                </select>
                @error('role')
                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">전화번호</label>
                <input type="text" name="phone" id="phone" value="{{ old('phone') }}"
                       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-2">이메일</label>
                <input type="email" name="email" id="email" value="{{ old('email') }}"
                       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>
            <label class="block text-sm font-medium text-gray-700 mb-2">상위 관리자</label>
            <select name="parent_id"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">선택 안함</option>
                @foreach($parents as $parent)
                <option value="{{ $parent->id }}" {{ old('parent_id') == $parent->id ? 'selected' : '' }}>
                    {{ $parent->name }} ({{ $parent->role_label }})
                </option>
                @endforeach
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">비고</label>
            <textarea name="remarks" id="remarks" rows="3"
                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">{{ old('remarks') }}</textarea>
        </div>

        <div class="flex justify-end gap-3 pt-4 border-t">
            <a href="{{ route('sales.managers.index') }}"
               class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
                취소
            </a>
            <button type="submit"
                    class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                등록
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('fillTestDataBtn').addEventListener('click', function() {
    const sampleNames = ['한효주', '공유', '이동욱', '김고은', '신세경', '박서준', '김수현', '수지', '남주혁', '성시경', '아이유', '조세호'];
    const sampleIds = ['sales_pro', 'mkt_king', 'deal_maker', 'win_win', 'growth_lab', 'biz_hero', 'ace_mgr', 'top_tier'];

    const randomItem = (arr) => arr[Math.floor(Math.random() * arr.length)];
    const randomNum = (len) => Array.from({length: len}, () => Math.floor(Math.random() * 10)).join('');

    const formatPhone = (val) => {
        const clean = val.replace(/[^0-9]/g, '');
        if (clean.length === 11) {
            return clean.slice(0, 3) + '-' + clean.slice(3, 7) + '-' + clean.slice(7);
        }
        return val;
    };

    const name = randomItem(sampleNames);
    const idSuffix = randomNum(3);

    document.getElementById('member_id').value = randomItem(sampleIds) + idSuffix;
    document.getElementById('password').value = 'password123';
    document.getElementById('name').value = name;
    document.getElementById('phone').value = formatPhone('010' + randomNum(8));
    document.getElementById('email').value = 'manager_' + randomNum(4) + '@example.com';
    document.getElementById('remarks').value = 'MNG 시스템 생성 샘플 데이터';
});
</script>
@endpush