<?php
$title = 'Crear Proyecto - Sistema de Gestión de Proyectos';
$page_title = 'Crear Nuevo Proyecto';
$current_page = 'projects';
$showSidebar = true;
$csrf_token = csrf_token();

ob_start();
?>

<div class="container mx-auto px-4 py-6">
    <!-- Header -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <div class="flex items-center gap-4">
            <a href="/projects" class="text-gray-600 hover:text-gray-900">
                <svg class="w-6 h-6" 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>
                <h1 class="text-2xl font-bold text-gray-900">Crear Nuevo Proyecto</h1>
                <p class="text-gray-600 mt-1">Complete la información del proyecto</p>
            </div>
        </div>
    </div>

    <!-- Formulario -->
    <form id="createProjectForm" class="bg-white rounded-lg shadow-sm p-6">
        <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?? '' ?>">

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Nombre del Proyecto -->
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Nombre del Proyecto <span class="text-red-500">*</span>
                </label>
                <input type="text" name="name" required
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       placeholder="Ej: Sistema de Matrículas en Línea">
            </div>

            <!-- Descripción -->
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Descripción
                </label>
                <textarea name="description" rows="4"
                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                          placeholder="Descripción detallada del proyecto y sus objetivos..."></textarea>
            </div>

            <!-- Departamento Solicitante -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Departamento Solicitante
                </label>
                <input type="text" name="requesting_department"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       placeholder="Ej: Registros Académicos">
            </div>

            <!-- Equipo Responsable -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Equipo Responsable
                </label>
                <select name="responsible_team_id"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <option value="">Sin asignar</option>
                    <?php foreach ($teams as $team): ?>
                        <option value="<?= $team['id'] ?>"><?= htmlspecialchars($team['name']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <!-- Prioridad -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Prioridad <span class="text-red-500">*</span>
                </label>
                <select name="priority" required
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <option value="low">Baja</option>
                    <option value="medium" selected>Media</option>
                    <option value="high">Alta</option>
                    <option value="critical">Crítica</option>
                </select>
            </div>

            <!-- Presupuesto -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Presupuesto (S/)
                </label>
                <input type="number" name="budget" step="0.01" min="0"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       placeholder="0.00">
            </div>

            <!-- Fecha de Inicio -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Fecha de Inicio
                </label>
                <input type="date" name="start_date"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            </div>

            <!-- Fecha Meta -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Fecha Meta
                </label>
                <input type="date" name="target_date"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            </div>
        </div>

        <!-- Botones -->
        <div class="flex items-center justify-end gap-4 mt-6 pt-6 border-t border-gray-200">
            <a href="/projects" class="px-6 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                Cancelar
            </a>
            <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                Crear Proyecto
            </button>
        </div>
    </form>
</div>

<script>
document.getElementById('createProjectForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData(e.target);
    const submitButton = e.target.querySelector('button[type="submit"]');
    submitButton.disabled = true;
    submitButton.textContent = 'Creando...';
    
    try {
        const response = await fetch('/projects/store', {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        if (result.success) {
            window.location.href = '/projects/' + result.project_id;
        } else {
            alert(result.message || 'Error al crear el proyecto');
            submitButton.disabled = false;
            submitButton.textContent = 'Crear Proyecto';
        }
    } catch (error) {
        console.error('Error:', error);
        alert('Error al crear el proyecto');
        submitButton.disabled = false;
        submitButton.textContent = 'Crear Proyecto';
    }
});
</script>

<?php
$content = ob_get_clean();
include __DIR__ . '/../layouts/app.php';
?>
