@extends('layouts.app')

@section('title', '새 계획')

@section('content')
<!-- 페이지 헤더 -->
<div class="flex items-center gap-4 mb-6">
    <a href="{{ route('roadmap.plans.index') }}" class="text-gray-500 hover:text-gray-700">
        ← 계획 목록
    </a>
    <h1 class="text-2xl font-bold text-gray-800">새 계획</h1>
</div>

<!-- 폼 -->
<div class="bg-white rounded-lg shadow-sm p-6 max-w-3xl">
    <form id="planForm">
        <!-- 제목 -->
        <div class="mb-6">
            <label for="title" class="block text-sm font-medium text-gray-700 mb-2">
                계획 제목 <span class="text-red-500">*</span>
            </label>
            <input type="text" id="title" name="title" required
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                   placeholder="계획 제목을 입력하세요">
        </div>

        <!-- 설명 -->
        <div class="mb-6">
            <label for="description" class="block text-sm font-medium text-gray-700 mb-2">설명</label>
            <textarea id="description" name="description" rows="3"
                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                      placeholder="짧은 설명을 입력하세요"></textarea>
        </div>

        <!-- 상세 내용 -->
        <div class="mb-6">
            <label for="content" class="block text-sm font-medium text-gray-700 mb-2">상세 내용</label>
            <textarea id="content" name="content" rows="8"
                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                      placeholder="상세 계획 내용을 입력하세요"></textarea>
        </div>

        <!-- 2열 레이아웃 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
            <!-- 카테고리 -->
            <div>
                <label for="category" class="block text-sm font-medium text-gray-700 mb-2">카테고리</label>
                <select id="category" name="category"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    @foreach($categories as $value => $label)
                    <option value="{{ $value }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <!-- 상태 -->
            <div>
                <label for="status" class="block text-sm font-medium text-gray-700 mb-2">상태</label>
                <select id="status" name="status"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    @foreach($statuses as $value => $label)
                    <option value="{{ $value }}" {{ $value === 'planned' ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <!-- 우선순위 -->
            <div>
                <label for="priority" class="block text-sm font-medium text-gray-700 mb-2">우선순위</label>
                <select id="priority" name="priority"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    @foreach($priorities as $value => $label)
                    <option value="{{ $value }}" {{ $value === 'medium' ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Phase -->
            <div>
                <label for="phase" class="block text-sm font-medium text-gray-700 mb-2">Phase</label>
                <select id="phase" name="phase"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    @foreach($phases as $value => $label)
                    <option value="{{ $value }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <!-- 기간 + 색상 -->
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
            <div>
                <label for="start_date" class="block text-sm font-medium text-gray-700 mb-2">시작일</label>
                <input type="date" id="start_date" name="start_date"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>
            <div>
                <label for="end_date" class="block text-sm font-medium text-gray-700 mb-2">종료일</label>
                <input type="date" id="end_date" name="end_date"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>
            <div>
                <label for="color" class="block text-sm font-medium text-gray-700 mb-2">타임라인 색상</label>
                <div class="flex items-center gap-2">
                    <input type="color" id="color" name="color" value="#3B82F6"
                           class="w-10 h-10 border border-gray-300 rounded cursor-pointer">
                    <span id="colorHex" class="text-sm text-gray-500">#3B82F6</span>
                </div>
            </div>
        </div>

        <!-- 버튼 -->
        <div class="flex gap-4">
            <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg transition">
                저장
            </button>
            <a href="{{ route('roadmap.plans.index') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-700 px-6 py-2 rounded-lg transition">
                취소
            </a>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    document.getElementById('color').addEventListener('input', function() {
        document.getElementById('colorHex').textContent = this.value;
    });

    document.getElementById('planForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const formData = new FormData(this);
        const data = Object.fromEntries(formData.entries());

        try {
            const response = await fetch('/api/admin/roadmap/plans', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();

            if (result.success) {
                showToast(result.message, 'success');
                window.location.href = '{{ route('roadmap.plans.index') }}';
            } else {
                showToast(result.message || '저장에 실패했습니다.', 'error');
            }
        } catch (error) {
            console.error('Error:', error);
            showToast('저장 중 오류가 발생했습니다.', 'error');
        }
    });
</script>
@endpush