<!-- Add Portfolio Item -->
<div class="bg-white shadow rounded-lg">
    <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
        <h3 class="text-lg leading-6 font-medium text-gray-900">
            <i class="fas fa-plus mr-2"></i>
            Добавить проект
        </h3>
    </div>
    
    <form id="portfolioForm" class="p-6 space-y-6">
        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
            <!-- Title -->
            <div class="sm:col-span-2">
                <label for="title" class="block text-sm font-medium text-gray-700">Название проекта</label>
                <input type="text" name="title" id="title" required 
                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
            </div>
            
            <!-- Short Description -->
            <div class="sm:col-span-2">
                <label for="shortDescription" class="block text-sm font-medium text-gray-700">Краткое описание</label>
                <input type="text" name="shortDescription" id="shortDescription" 
                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
            </div>
            
            <!-- Category -->
            <div>
                <label for="category" class="block text-sm font-medium text-gray-700">Категория</label>
                <select name="category" id="category" required
                        class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    <option value="">Выберите категорию</option>
                    <option value="web-development">Веб-разработка</option>
                    <option value="mobile-app">Мобильные приложения</option>
                    <option value="ui-ux-design">UI/UX дизайн</option>
                    <option value="branding">Брендинг</option>
                    <option value="marketing">Цифровой маркетинг</option>
                </select>
            </div>
            
            <!-- Client Name -->
            <div>
                <label for="clientName" class="block text-sm font-medium text-gray-700">Клиент</label>
                <input type="text" name="clientName" id="clientName" 
                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
            </div>
            
            <!-- Project URL -->
            <div>
                <label for="projectUrl" class="block text-sm font-medium text-gray-700">URL проекта</label>
                <input type="url" name="projectUrl" id="projectUrl" 
                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
            </div>
            
            <!-- GitHub URL -->
            <div>
                <label for="githubUrl" class="block text-sm font-medium text-gray-700">GitHub URL</label>
                <input type="url" name="githubUrl" id="githubUrl" 
                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
            </div>
        </div>
        
        <!-- Description -->
        <div>
            <label for="description" class="block text-sm font-medium text-gray-700">Подробное описание</label>
            <textarea name="description" id="description" rows="4" required
                      class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"></textarea>
        </div>
        
        <!-- Technologies -->
        <div>
            <label for="technologies" class="block text-sm font-medium text-gray-700">Технологии (через запятую)</label>
            <input type="text" name="technologies" id="technologies" 
                   placeholder="React, Node.js, PostgreSQL"
                   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
        </div>
        
        <!-- Images -->
        <div>
            <label class="block text-sm font-medium text-gray-700">Изображения проекта</label>
            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
                <div class="space-y-1 text-center">
                    <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <div class="flex text-sm text-gray-600">
                        <label for="images" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500">
                            <span>Загрузить файлы</span>
                            <input id="images" name="images" type="file" class="sr-only" multiple accept="image/*">
                        </label>
                        <p class="pl-1">или перетащите сюда</p>
                    </div>
                    <p class="text-xs text-gray-500">PNG, JPG, WEBP до 10MB</p>
                </div>
            </div>
            <div id="imagePreview" class="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4"></div>
        </div>
        
        <!-- Options -->
        <div class="flex items-center space-x-6">
            <div class="flex items-center">
                <input id="featured" name="featured" type="checkbox" 
                       class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                <label for="featured" class="ml-2 block text-sm text-gray-900">
                    Рекомендуемый проект
                </label>
            </div>
            
            <div class="flex items-center">
                <input id="isPublished" name="isPublished" type="checkbox" checked
                       class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                <label for="isPublished" class="ml-2 block text-sm text-gray-900">
                    Опубликовать
                </label>
            </div>
        </div>
        
        <!-- Submit Buttons -->
        <div class="flex justify-end space-x-3">
            <a href="/admin/portfolio" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
                Отмена
            </a>
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                <i class="fas fa-save mr-1"></i>
                Сохранить
            </button>
        </div>
    </form>
</div>

<script>
document.getElementById('portfolioForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    // Convert technologies string to array
    const technologies = formData.get('technologies');
    if (technologies) {
        formData.set('technologies', JSON.stringify(technologies.split(',').map(t => t.trim())));
    }
    
    try {
        const response = await fetch('/api/admin/portfolio', {
            method: 'POST',
            body: formData
        });
        
        const data = await response.json();
        
        if (data.success) {
            window.location.href = '/admin/portfolio';
        } else {
            alert('Ошибка при создании проекта: ' + data.message);
        }
    } catch (error) {
        console.error('Error:', error);
        alert('Ошибка при создании проекта');
    }
});

// Image preview
document.getElementById('images').addEventListener('change', function(e) {
    const preview = document.getElementById('imagePreview');
    preview.innerHTML = '';
    
    for (let i = 0; i < e.target.files.length; i++) {
        const file = e.target.files[i];
        const reader = new FileReader();
        
        reader.onload = function(e) {
            const div = document.createElement('div');
            div.className = 'relative';
            div.innerHTML = `
                <img src="${e.target.result}" class="h-24 w-full object-cover rounded-md">
                <button type="button" onclick="this.parentElement.remove()" 
                        class="absolute top-0 right-0 -mt-2 -mr-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs">
                    ×
                </button>
            `;
            preview.appendChild(div);
        };
        
        reader.readAsDataURL(file);
    }
});
</script>