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

ob_start();
?>

<div class="max-w-4xl mx-auto">
    <!-- Mensajes de éxito/error -->
    <?php if (isset($_GET['success'])): ?>
    <div class="mb-4 p-4 bg-green-50 border border-green-200 text-green-800 rounded-lg">
        <i class="fas fa-check-circle mr-2"></i><?= htmlspecialchars($_GET['success']) ?>
    </div>
    <?php endif; ?>
    
    <?php if (isset($_GET['error'])): ?>
    <div class="mb-4 p-4 bg-red-50 border border-red-200 text-red-800 rounded-lg">
        <i class="fas fa-exclamation-circle mr-2"></i><?= htmlspecialchars($_GET['error']) ?>
    </div>
    <?php endif; ?>

    <!-- Header -->
    <div class="mb-6">
        <a href="/requirements" class="text-blue-600 hover:text-blue-800 text-sm mb-2 inline-flex items-center">
            <i class="fas fa-arrow-left mr-2"></i>Volver a Requerimientos
        </a>
        <h2 class="text-2xl font-bold text-gray-900 mt-2">Nuevo Requerimiento</h2>
        <p class="text-gray-600 mt-1">Complete el formulario para registrar un nuevo requerimiento</p>
    </div>

    <!-- Formulario -->
    <form action="/requirements/create" method="POST" enctype="multipart/form-data" class="bg-white shadow-lg rounded-lg overflow-hidden">
        <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
        
        <div class="p-6 space-y-6">
            <!-- Título -->
            <div>
                <label for="title" class="block text-sm font-medium text-gray-700 mb-1">
                    Título del Requerimiento <span class="text-red-500">*</span>
                </label>
                <input type="text" id="title" name="title" required
                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                       placeholder="Ej: Error en sistema de matrículas">
            </div>

            <!-- Tipo y Prioridad -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="type" class="block text-sm font-medium text-gray-700 mb-1">
                        Tipo <span class="text-red-500">*</span>
                    </label>
                    <select id="type" name="type" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Seleccione un tipo</option>
                        <option value="incident">Incidente (Sistema caído, error crítico)</option>
                        <option value="support">Soporte (Consulta, ayuda funcional)</option>
                        <option value="improvement">Mejora (Pequeño ajuste, reporte)</option>
                        <option value="project_minor">Proyecto Menor (Automatización de proceso)</option>
                        <option value="project_major">Proyecto Mayor (Módulo ERP, integración)</option>
                    </select>
                    <p class="mt-1 text-xs text-gray-500">
                        <i class="fas fa-info-circle"></i> El equipo y SLA se asignarán automáticamente
                    </p>
                </div>

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

            <!-- Descripción -->
            <div>
                <label for="description" class="block text-sm font-medium text-gray-700 mb-1">
                    Descripción <span class="text-red-500">*</span>
                </label>
                <textarea id="description" name="description" required rows="6"
                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                          placeholder="Describa detalladamente el problema, necesidad o mejora solicitada..."></textarea>
                <p class="mt-1 text-xs text-gray-500">Sea lo más específico posible para agilizar el análisis</p>
            </div>

            <!-- Área y Usuario Afectado -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="department" class="block text-sm font-medium text-gray-700 mb-1">
                        Área Solicitante
                    </label>
                    <input type="text" id="department" name="department"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                           placeholder="Ej: Registros Académicos">
                </div>

                <div>
                    <label for="affected_users" class="block text-sm font-medium text-gray-700 mb-1">
                        Usuarios Afectados
                    </label>
                    <input type="number" id="affected_users" name="affected_users" min="0"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                           placeholder="Cantidad estimada">
                </div>
            </div>

            <!-- Impacto Esperado -->
            <div>
                <label for="expected_impact" class="block text-sm font-medium text-gray-700 mb-1">
                    Impacto Esperado
                </label>
                <textarea id="expected_impact" name="expected_impact" rows="3"
                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                          placeholder="Describa cómo esta solución mejorará el proceso o resolverá el problema..."></textarea>
            </div>

            <!-- Archivos Adjuntos -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Archivos Adjuntos
                </label>
                <div class="border-2 border-dashed border-gray-300 rounded-md p-6 text-center hover:border-blue-400 transition-colors">
                    <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
                    <p class="text-sm text-gray-600 mb-2">Arrastre archivos aquí o haga clic para seleccionar</p>
                    <input type="file" id="attachments" name="attachments[]" multiple
                           class="hidden"
                           accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif">
                    <button type="button" onclick="document.getElementById('attachments').click()"
                            class="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700">
                        Seleccionar Archivos
                    </button>
                    <p class="mt-2 text-xs text-gray-500">PDF, Word, Excel, Imágenes (máx. 10MB por archivo)</p>
                </div>
                <div id="fileList" class="mt-3 space-y-2"></div>
            </div>

            <!-- Información Automática -->
            <div class="bg-blue-50 border border-blue-200 rounded-md p-4">
                <div class="flex items-start">
                    <i class="fas fa-info-circle text-blue-600 mt-1 mr-3"></i>
                    <div class="text-sm text-blue-800">
                        <p class="font-medium mb-1">Información Automática</p>
                        <ul class="list-disc list-inside space-y-1 text-blue-700">
                            <li>Se generará un código único automáticamente (REQ-YYYYMM-NNNN)</li>
                            <li>El requerimiento se clasificará y asignará al equipo correspondiente</li>
                            <li>Se calculará el SLA según el tipo de requerimiento</li>
                            <li>Recibirá notificaciones sobre el progreso de su solicitud</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer con botones -->
        <div class="bg-gray-50 px-6 py-4 flex items-center justify-between border-t border-gray-200">
            <a href="/requirements" class="text-gray-700 hover:text-gray-900">
                Cancelar
            </a>
            <button type="submit" class="inline-flex items-center px-6 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                <i class="fas fa-paper-plane mr-2"></i>
                Enviar Requerimiento
            </button>
        </div>
    </form>
</div>

<script>
// Mostrar archivos seleccionados
document.getElementById('attachments').addEventListener('change', function(e) {
    const fileList = document.getElementById('fileList');
    fileList.innerHTML = '';
    
    if (this.files.length > 0) {
        Array.from(this.files).forEach((file, index) => {
            const fileSize = (file.size / 1024 / 1024).toFixed(2);
            const fileItem = document.createElement('div');
            fileItem.className = 'flex items-center justify-between bg-gray-50 p-2 rounded';
            fileItem.innerHTML = `
                <div class="flex items-center">
                    <i class="fas fa-file text-gray-400 mr-2"></i>
                    <span class="text-sm text-gray-700">${file.name}</span>
                    <span class="text-xs text-gray-500 ml-2">(${fileSize} MB)</span>
                </div>
                <button type="button" onclick="removeFile(${index})" class="text-red-600 hover:text-red-800">
                    <i class="fas fa-times"></i>
                </button>
            `;
            fileList.appendChild(fileItem);
        });
    }
});

function removeFile(index) {
    const input = document.getElementById('attachments');
    const dt = new DataTransfer();
    const files = input.files;
    
    for (let i = 0; i < files.length; i++) {
        if (i !== index) {
            dt.items.add(files[i]);
        }
    }
    
    input.files = dt.files;
    input.dispatchEvent(new Event('change'));
}

// Validación del formulario
document.querySelector('form').addEventListener('submit', function(e) {
    const title = document.getElementById('title').value.trim();
    const description = document.getElementById('description').value.trim();
    const type = document.getElementById('type').value;
    
    if (!title || !description || !type) {
        e.preventDefault();
        alert('Por favor complete todos los campos obligatorios');
        return false;
    }
    
    if (title.length < 10) {
        e.preventDefault();
        alert('El título debe tener al menos 10 caracteres');
        return false;
    }
    
    if (description.length < 20) {
        e.preventDefault();
        alert('La descripción debe tener al menos 20 caracteres');
        return false;
    }
});
</script>

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