<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<?php $__env->startSection('form'); ?>

<div class="alert alert-warning alert-dismissible" role="alert">
  <p><i class="fa fa-exclamation-circle" aria-hidden="true"></i> <strong>Nota: </strong>Por favor, tenga en cuenta que toda la información que digite en el formulario, debe registrarse únicamente en español</p>
</div>

<div class="panel panel-default">
  <?php if($msg): ?>
  <div id="msg" class="alert alert-success" role="alert" style="cursor: pointer;">
      <?php echo e($msg); ?>

  </div>
  <div class="modal fade" id="ss" tabindex="-1" role="dialog" aria-labelledby="ss" style="display: none;">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body" style="background: #dff0d8; border-radius: 8px; text-align: center; font-size: 16pt;color: #3c763d;">
          <?php echo e($msg); ?>

        </div>
      </div>
    </div>
  </div>

  <?php endif; ?>

    <div class="panel-heading">
        <strong>Idiomas</strong>
    </div>
    <form method="post" action="<?php echo e(env('APP_URL')); ?>idiomas" class="form-horizontal" style="margin:20px 0" enctype="multipart/form-data">
        <?php echo csrf_field(); ?>


        <div class="form-group">
            <label for="idiomas_id" class="col-sm-12 col-md-2 control-label">Idioma </label>
            <div class="col-sm-12 col-md-5">
                <div>
                    <label class="form-label required">Idioma</label>
                    <div class="input-group">
                        <select class="form-select" id="idiomas_id" name="idiomas_id">
                            <option value="">Seleccione</option>
                            <?php foreach($idiomas as $idioma): ?>
                            <option value="<?php echo e($idioma->id); ?>" data-label="<?php echo e($idioma->nombre); ?>"><?php echo e($idioma->nombre); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
            </div>

			<label for="nativo" class="col-sm-12 col-md-2 control-label">¿Es su idioma nativo?</label>
                <label class="radio-inline">
                    <input type="radio" name="nativo" value="1" required>Si
                </label>
                <label class="radio-inline">
                    <input type="radio" name="nativo" value="0">No
                </label>
        </div>

        <div class="form-group">
			<div id="nombre_certificado">
			  <label for="nombre_certificado" class="col-sm-12 col-md-2 control-label">Nombre del certificado</label>
			  <div class="col-sm-12 col-md-9">
			    <div>
                    <label class="form-label required">Nombre del certificado</label>
                    <div class="input-group">
                        <select class="form-select" id="nombre_certificado_input" name="nombre_certificado">
                            <option value="">Seleccione</option>
                            <?php foreach($certificados_idiomas as $certificado_idioma): ?>
                            <option value="<?php echo e($certificado_idioma->nombre); ?>" data-label="<?php echo e($certificado_idioma->nombre); ?>"><?php echo e($certificado_idioma->nombre); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
    </div>
    </div>
    </div>

    <div class="form-group">
        <div class="col-sm-12 col-md-9 col-md-offset-2">
            <div class="alert alert-info" style="margin-bottom: 0;">
                Para lenguas distintas del Inglés, Francés, Alemán, Italiano y Portugués, puede usar como soporte:
                certificado de conocimiento de la lengua extranjera, diploma de lengua extranjera, certificado de colegios colombianos bilingües (cuya segunda lengua sea la lengua extranjera que se desea certificar), o pregrado/posgrado/postdoctorado desarrollado en la lengua que se desea certificar.
            </div>
        </div>
    </div>

    <div class="form-group">
    <div id="puntaje">
    <label for="" class="col-sm-12 col-md-2 control-label">Puntaje</label>
    <div class="col-sm-12 col-md-9">
    <input type="text" id="puntaje_input" class="form-control"  name="puntaje" maxlength="100" placeholder="">
    </div>
    </div>
    </div>

    <div class="form-group">
    <div id="adjunto">
    <label for="adjunto" class="col-sm-12 col-md-2 control-label">Documento de soporte:</label>
				<div class="col-sm-12 col-md-5">
					<input type="file" id="adjunto_input" class="form-control" name="adjunto" accept=".pdf,application/pdf">
					<br><em>Por favor, tenga en cuenta que el archivo adjunto debe estar en formato PDF y no tener un tamaño superior a 9MB</em>
				</div>
			</div>
        </div>

        <div class="form-group">
            <div class="col-md-4 col-md-offset-4">
                <button type="submit" class="btn btn-success form-control">
                    <i class="fa fa-language" aria-hidden="true"></i>
                    <i class="fa fa-plus" aria-hidden="true"></i>
                    Guardar información de idioma
                </button>
            </div>
        </div>

    </form>

    <div class="panel-heading">
        <strong>Resumen de idiomas dominados</strong>
    </div>
    <div class="panel-body">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Idioma</th>
					<th>Nativo</th>
                    <th>Tipo de certificación</th>
                    <th>Documento de soporte</th>
                    <th>Opciones</th>
                </tr>
            </thead>
            <?php $__empty_1 = true; foreach($idiomas_certificados as $idioma_certificado): $__empty_1 = false; ?>
            <tr>
                <td>
                    <?php echo e($idiomas[$idioma_certificado->idiomas_id]->nombre); ?>

                </td>
				<td>
					<?php if($idioma_certificado->nativo == 1): ?>
						Si
					<?php else: ?>
						No
					<?php endif; ?>
                </td>
                <td>
					<?php if($idioma_certificado->nativo == 1): ?>
						No requerido
					<?php else: ?>
						<?php echo e($idioma_certificado->nombre_certificado); ?>

					<?php endif; ?>
                </td>
                <td>
					<?php if($idioma_certificado->nativo == 1): ?>
						No requerido
					<?php else: ?>
						<a href="<?php echo e(env('APP_URL').$idioma_certificado->ruta_adjunto); ?>" download>Documento adjunto</a>
					<?php endif; ?>
                </td>
                <td>
                    <form method="post" action="<?php echo e(env('APP_URL')); ?>idiomas/delete" onsubmit="return confirm('¿Está seguro que desea eliminar el idioma seleccionado?');" style="margin:20px 0">
                        <?php echo csrf_field(); ?>

                        <input type="hidden" name="id" value="<?php echo e($idioma_certificado->id); ?>"/>
                        <button type="submit" data-id="<?php echo e($idioma_certificado->id); ?>" class="btn btn-danger btn-sm">
                            <i class="fa fa-trash" aria-hidden="true"></i>
                        </button>
                    </form>
                </td>
            </tr>
            <?php endforeach; if ($__empty_1): ?>
            <tr>
                <td colspan="4">No se han ingresado información asociada.</td>
            </tr>
            <?php endif; ?>
        </table>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Manejar el mensaje de éxito y mostrar modal
    var msgElement = document.getElementById("msg");
    var modalElement = document.getElementById("ss");
    
    if (msgElement && modalElement) {
        msgElement.addEventListener('click', function() {
            modalElement.style.display = 'block';
            modalElement.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
            
            // Cerrar modal al hacer click fuera de él
            modalElement.addEventListener('click', function(e) {
                if (e.target === modalElement) {
                    modalElement.style.display = 'none';
                }
            });
            
            // Cerrar modal con Escape
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && modalElement.style.display === 'block') {
                    modalElement.style.display = 'none';
                }
            });
        });
        
        // Auto-disparar el click del mensaje
        setTimeout(function() {
            msgElement.click();
        }, 100);
    }

    // Manejar cambios en nativo (idioma nativo)
    var nativoInputs = document.querySelectorAll("input[name='nativo']");
    nativoInputs.forEach(function(radio) {
        radio.addEventListener('change', function() {
            var nativoValue = this.value;
            var nombreCertificado = document.getElementById("nombre_certificado");
            var puntaje = document.getElementById("puntaje");
            var adjunto = document.getElementById("adjunto");
            var nombreCertificadoInput = document.getElementById("nombre_certificado_input");
            var adjuntoInput = document.getElementById("adjunto_input");
            
            if (nativoValue == 0) {
                // No es nativo: mostrar campos y hacerlos requeridos
                if (nombreCertificado) nombreCertificado.style.display = '';
                if (puntaje) puntaje.style.display = '';
                if (adjunto) adjunto.style.display = '';
                if (nombreCertificadoInput) {
                    nombreCertificadoInput.setAttribute("required", "required");
                }
                if (adjuntoInput) {
                    adjuntoInput.setAttribute("required", "required");
                }
            } else {
                // Es nativo: ocultar campos y remover requerido
                if (nombreCertificado) nombreCertificado.style.display = 'none';
                if (puntaje) puntaje.style.display = 'none';
                if (adjunto) adjunto.style.display = 'none';
                if (nombreCertificadoInput) {
                    nombreCertificadoInput.removeAttribute("required");
                    nombreCertificadoInput.value = '';
                }
                if (adjuntoInput) {
                    adjuntoInput.removeAttribute("required");
                    adjuntoInput.value = '';
                }
            }
        });
    });

    // Validación de archivos PDF
    var fileInputs = document.querySelectorAll("input[type='file']");
    var MAX_FILE_SIZE = 9 * 1024 * 1024; // 9MB en bytes
    
    fileInputs.forEach(function(input) {
        input.addEventListener('change', function() {
            var file = this.files[0];
            if (!file) {
                return;
            }
            
            // Validar extensión
            var fileName = file.name.toLowerCase();
            var isValidExtension = fileName.endsWith('.pdf');
            
            // Validar tamaño
            var isValidSize = file.size <= MAX_FILE_SIZE;
            
            // Crear o actualizar mensaje de error
            var errorDiv = this.parentElement.querySelector('.file-error-message');
            if (!errorDiv) {
                errorDiv = document.createElement('div');
                errorDiv.className = 'file-error-message alert alert-danger';
                errorDiv.style.marginTop = '5px';
                this.parentElement.appendChild(errorDiv);
            }
            
            if (!isValidExtension) {
                errorDiv.textContent = 'El archivo debe ser PDF';
                errorDiv.style.display = 'block';
                this.setCustomValidity('El archivo debe ser PDF');
                return;
            }
            
            if (!isValidSize) {
                var fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);
                errorDiv.textContent = 'El archivo es demasiado grande (' + fileSizeMB + 'MB). El tamaño máximo permitido es 9MB';
                errorDiv.style.display = 'block';
                this.setCustomValidity('El archivo es demasiado grande');
                return;
            }
            
            // Archivo válido
            errorDiv.style.display = 'none';
            this.setCustomValidity('');
        });
    });
});
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('main', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>