@extends('layouts.app')

@section('title', '새 프로젝트')

@section('content')
<!-- 페이지 헤더 -->
<div class="flex items-center gap-4 mb-6">
    <a href="{{ route('pm.projects.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-2xl">
    <form id="projectForm" method="POST" action="{{ route('api.admin.pm.projects.store') }}">
        @csrf

        <!-- 프로젝트명 -->
        <div class="mb-6">
            <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                프로젝트명 <span class="text-red-500">*</span>
            </label>
            <input type="text"
                   id="name"
                   name="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"
                   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="4"
                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="프로젝트 설명을 입력하세요"></textarea>
        </div>

        <!-- 상태 -->
        <div class="mb-6">
            <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-blue-500">
                @foreach($statuses as $value => $label)
                <option value="{{ $value }}" {{ $value === 'active' ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
        </div>

        <!-- 기간 -->
        <div class="grid grid-cols-2 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-blue-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-blue-500">
            </div>
        </div>

        <!-- 버튼 -->
        <div class="flex gap-4">
            <button type="submit"
                    class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition">
                저장
            </button>
            <a href="{{ route('pm.projects.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('projectForm').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/pm/projects', {
                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('pm.projects.index') }}';
            } else {
                showToast(result.message || '저장에 실패했습니다.', 'error');
            }
        } catch (error) {
            console.error('Error:', error);
            showToast('저장 중 오류가 발생했습니다.', 'error');
        }
    });
</script>
@endpush