<?php
/**
 * Sección de información básica optimizada
 * - Reducido el consumo de recursos
 * - Mejor posicionamiento del botón de navegación
 */
?>
<!-- Sección 1: Información básica -->
<section class="form-section active" data-section="1">
    <div class="section-header">
        <h2 class="section-title"><i class="fas fa-info-circle"></i> <?php echo $text['basicInfo'] ?? 'Información Básica'; ?></h2>
        <p class="section-description"><?php echo $text['basicInfoDesc'] ?? 'Complete la información básica sobre su resumen científico.'; ?></p>
    </div>
    
    <div class="deadline" style="margin-bottom: 25px;">
        <i class="fas fa-calendar-alt"></i>
        <div>
            <p><strong><?php echo $text['deadline'] ?? 'Fecha límite de recepción'; ?>:</strong> <?php echo $text['deadlineDate'] ?? '30 de Enero, 2025 (11:59 pm EST)'; ?></p>
            <p><?php echo $text['deadlineWarning'] ?? 'Sin excepción no habrá extensión de la fecha límite.'; ?></p>
        </div>
    </div>
    
    <div class="form-content">
        <!-- Idioma del Resumen -->
        <div class="form-group">
            <label for="language" class="required"><?php echo $text['abstractLanguage'] ?? 'Idioma del Resumen'; ?></label>
            <div class="radio-group">
                <label class="radio-option">
                    <input type="radio" id="lang-english" name="language" value="english" required>
                    <span><?php echo $text['english'] ?? 'Inglés'; ?></span>
                </label>
                <label class="radio-option">
                    <input type="radio" id="lang-spanish" name="language" value="spanish">
                    <span><?php echo $text['spanish'] ?? 'Español'; ?></span>
                </label>
                <label class="radio-option">
                    <input type="radio" id="lang-portuguese" name="language" value="portuguese">
                    <span><?php echo $text['portuguese'] ?? 'Portugués'; ?></span>
                </label>
            </div>
            <span class="help-text"><i class="fas fa-info-circle"></i> <?php echo $text['languageHelpText'] ?? 'Nota: La presentación debe ser en el mismo idioma del resumen enviado.'; ?></span>
        </div>
        
        <!-- Título -->
        <div class="form-group">
            <label for="title" class="required"><?php echo $text['title'] ?? 'Título'; ?></label>
            <textarea id="title" name="title" maxlength="300" required placeholder="<?php echo $text['titlePlaceholder'] ?? 'Ingrese el título de su trabajo'; ?>" rows="3"></textarea>
            <div class="word-count" id="title-word-count">
                <span>0/30 <?php echo $text['words'] ?? 'palabras'; ?></span>
                <div class="progress-bar"><div class="progress" style="width: 0%"></div></div>
            </div>
            <span class="help-text"><i class="fas fa-info-circle"></i> <?php echo $text['titleHelpText'] ?? 'Ingrese el título en MAYÚSCULAS (máximo 30 palabras)'; ?></span>
        </div>
        
        <!-- Categoría y Tipo de Presentación -->
        <div class="form-row">
            <div class="form-col">
                <div class="form-group">
                    <label for="category" class="required"><?php echo $text['category'] ?? 'Categoría'; ?></label>
                    <select id="category" name="category" required>
                        <option value="" selected disabled><?php echo $text['selectCategory'] ?? 'Seleccione una categoría'; ?></option>
                        <option value="clinical"><?php echo $text['clinicalCategory'] ?? 'Medicina Clínica'; ?></option>
                        <option value="surgical"><?php echo $text['surgicalCategory'] ?? 'Cirugía'; ?></option>
                        <option value="research"><?php echo $text['researchCategory'] ?? 'Investigación'; ?></option>
                        <option value="education"><?php echo $text['educationCategory'] ?? 'Educación'; ?></option>
                        <option value="technology"><?php echo $text['technologyCategory'] ?? 'Tecnología e Innovación'; ?></option>
                    </select>
                </div>
            </div>
            <div class="form-col">
                <div class="form-group">
                    <label for="presentation-type" class="required"><?php echo $text['presentationType'] ?? 'Tipo de Presentación'; ?></label>
                    <select id="presentation-type" name="presentation_type" required>
                        <option value="" selected disabled><?php echo $text['selectPresentationType'] ?? 'Seleccione un tipo de presentación'; ?></option>
                        <option value="oral"><?php echo $text['oralPresentation'] ?? 'Presentación Oral'; ?></option>
                        <option value="poster"><?php echo $text['posterPresentation'] ?? 'Póster'; ?></option>
                        <option value="workshop"><?php echo $text['workshopPresentation'] ?? 'Taller'; ?></option>
                    </select>
                </div>
            </div>
        </div>
        
        <!-- Archivos adjuntos -->
        <div class="form-group">
            <label for="file-upload" class="required"><?php echo $text['attachFiles'] ?? 'Adjuntar Archivos'; ?></label>
            <div style="display: flex; gap: 15px; align-items: center;">
                <label for="file-upload" class="file-upload-btn">
                    <i class="fas fa-cloud-upload-alt"></i> <?php echo $text['selectFile'] ?? 'Seleccionar Archivo'; ?>
                </label>
                <input type="file" id="file-upload" name="file-upload" style="display: none;" required>
                <div class="file-name" id="file-name" style="flex: 1;">
                    <i class="fas fa-file-alt"></i> <?php echo $text['noFileSelected'] ?? 'Ningún archivo seleccionado'; ?>
                </div>
            </div>
            <span class="help-text"><i class="fas fa-info-circle"></i> <?php echo $text['fileHelpText'] ?? 'Formatos permitidos: PDF, DOC, DOCX, XLS, XLSX, CSV, TXT, RTF, HTML, ZIP, JPG, JPEG, PNG, GIF (máximo: 10MB)'; ?></span>
        </div>
    </div>
    
    <div class="form-navigation" style="margin-top: 20px;">
        <div></div> <!-- Espaciador para alinear a la derecha -->
        <button type="button" class="btn btn-next" data-next="2"><?php echo $text['next'] ?? 'Siguiente'; ?> <i class="fas fa-arrow-right"></i></button>
    </div>
</section>

<script>
// Script específico para esta sección - optimizado para rendimiento
document.addEventListener('DOMContentLoaded', function() {
    // Manejar subida de archivos de forma más eficiente
    const fileUpload = document.getElementById('file-upload');
    const fileName = document.getElementById('file-name');
    
    if (fileUpload && fileName) {
        fileUpload.addEventListener('change', function() {
            if (this.files.length > 0) {
                const file = this.files[0];
                // Reducir el trabajo de procesamiento
                fileName.innerHTML = `<i class="fas fa-file"></i> ${file.name.substring(0, 40)}${file.name.length > 40 ? '...' : ''}`;
            } else {
                fileName.innerHTML = `<i class="fas fa-file-alt"></i> <?php echo $text['noFileSelected'] ?? 'Ningún archivo seleccionado'; ?>`;
            }
        });
    }
    
    // Optimizar el contador de palabras
    const titleTextarea = document.getElementById('title');
    const titleWordCount = document.getElementById('title-word-count');
    
    if (titleTextarea && titleWordCount) {
        titleTextarea.addEventListener('input', function() {
            // Usar setTimeout para no sobrecargar el navegador con cada pulsación
            clearTimeout(titleTextarea.debounceTimer);
            titleTextarea.debounceTimer = setTimeout(function() {
                // Contar palabras de forma eficiente
                const words = titleTextarea.value.trim().split(/\s+/).filter(word => word.length > 0).length;
                const countSpan = titleWordCount.querySelector('span');
                const progressBar = titleWordCount.querySelector('.progress');
                
                if (countSpan) countSpan.textContent = `${words}/30 <?php echo $text['words'] ?? 'palabras'; ?>`;
                if (progressBar) progressBar.style.width = `${Math.min((words / 30) * 100, 100)}%`;
            }, 300); // Retrasar 300ms para mejor rendimiento
        });
        
        // Manejar mayúsculas eficientemente
        titleTextarea.addEventListener('blur', function() {
            this.value = this.value.toUpperCase();
        });
    }
});
</script>