<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="alert alert-warning alert-dismissible" role="alert">
  <p><i class="fa fa-exclamation-circle" aria-hidden="true"></i> <strong>Nota: </strong>El cumplimiento de los requisitos aplicables se encuentra supeditado a los preceptos normativos de la resolución de convocatoria y demás actos administrativos que la modifiquen.
</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>Experiencia en investigación</strong>
  </div>

  <form name="registro" id="registro" method="post" action="<?php echo e(env('APP_URL')); ?>experiencia_investigativa" class="form-horizontal" style="margin:20px 0" enctype="multipart/form-data">
    <?php echo csrf_field(); ?>


    <div class="panel-body">
      <div class="form-group">
        <label for="nombre_proyecto" class="col-sm-12 col-md-3 control-label">Nombre del proyecto</label>
        <div class="col-sm-12 col-md-9">
          <input type="text" class="form-control" id="nombre_proyecto"  maxlength="200" name="nombre_proyecto" placeholder="Nombre del proyecto" required>
        </div>
      </div>
      <div class="form-group">
        <label for="institucion" class="col-sm-12 col-md-3 control-label">Nombre de la institución</label>
        <div class="col-sm-12 col-md-9">
          <input type="text" class="form-control typeahead" id="institucion"  maxlength="256" name="institucion" placeholder="Nombre de la institución" data-provide="typeahead"  autocomplete="off" value="" required>
        </div>
      </div>
      <div class="form-group">
        <label for="area_proyecto" class="col-sm-12 col-md-3 control-label">Área del proyecto</label>
        <div class="col-sm-12 col-md-9">
          <input type="text" class="form-control" id="area_proyecto"  maxlength="100" name="area_proyecto" placeholder="Área del proyecto" required>
        </div>
      </div>
      <div class="form-group">
        <label for="funcion_principal" class="col-sm-12 col-md-2 control-label">Funciones principales</label>
        <div class="col-sm-12 col-md-9">
          <textarea name="funcion_principal" id="funcion_principal"  maxlength="200" class="form-control obligatorio" placehoder="Funciones principales" required></textarea>
        </div>
      </div>

      <div class="form-group">
        <label for="en_curso" class="col-sm-12 col-md-2 control-label">¿Vinculación vigente?</label>
        <div class="col-md-2">
          <label class="radio-inline">
            <input type="radio" name="en_curso" data-id="fecha_finalizacion" value="1" required>Si
          </label>
          <label class="radio-inline">
            <input type="radio" name="en_curso" data-id="fecha_finalizacion" value="0" >No
          </label>
        </div>
      </div>
      <div class="form-group">
      <div class="col-md-8">
        <div class="row">
        <label for="fecha_inicio" class="col-sm-12 col-md-6 control-label">Fecha de inicio de vinculación</label>
        <div class="col-sm-12 col-md-6" id="fecha">
          <div>
              <div class="input-group">
                  <input type="date" placeholder="dd/mm/aaaa" class="form-control start-date" id="fecha_inicio" name="fecha_inicio" max="<?php echo e(\Carbon\Carbon::now()->format('Y-m-d')); ?>" aria-describedby="fecha_inicio-help" required/>
              </div>
          </div>
        </div>
      </div>
        <div class="row" id="fecha_finalizacion">
            <label for="fecha_finalizacion" class="col-sm-12 col-md-6 control-label">Fecha de finalización de vinculación</label>
            <div class="col-sm-12 col-md-6" >
              <div>
                  <div class="input-group">
                      <input type="date" placeholder="dd/mm/aaaa" class="form-control end-date" id="fecha_finalizacion" name="fecha_finalizacion" max="<?php echo e(\Carbon\Carbon::now()->format('Y-m-d')); ?>" aria-describedby="fecha_finalizacion-help"/>
                  </div>
              </div>
            </div>
        </div>
      </div>

      <div class="form-group">
        <label for="paises_id" class="col-sm-12 col-md-3 control-label">País</label>
        <div class="col-sm-3">
          <div>
              <div class="input-group">
                  <select class="form-select" id="paises_id" name="paises_id">
                      <option value="">Seleccione</option>
                      <?php foreach($paises as $pais): ?>
                      <option value="<?php echo e($pais->id); ?>" data-label="<?php echo e($pais->nombre); ?>"><?php echo e($pais->nombre); ?></option>
                      <?php endforeach; ?>
                  </select>
              </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="adjunto" class="col-sm-12 col-md-3 control-label">Documento de soporte: </label>
        <div class="col-sm-12 col-md-9" style="max-width: 650px; margin: right 5px;">
          <input id="adjunto" type="file" class="form-control" name="adjunto" accept=".pdf,application/pdf" required />
          <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 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-list-ul" aria-hidden="true"></i>
            <i class="fa fa-plus" aria-hidden="true"></i>
            Agregar experiencia investigativa
          </button>
        </div>
      </div>
    </div>

  </form>

  <div class="panel-heading">
    <strong>Resumen de experiencia</strong>
  </div>
  <div class="panel-body">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Nombre del proyecto</th>
          <th>Área del proyecto</th>
          <th>Fecha de inicio</th>
          <th>Fecha de finalización</th>
          <th>Total meses</th>
          <th>Documento adjunto</th>
          <th>Opciones</th>
        </tr>
      </thead>
      <?php $__empty_1 = true; foreach($experiencias_investigativa as $experiencia_investigativa): $__empty_1 = false; ?>
      <tr>
        <td>
          <?php echo e($experiencia_investigativa->nombre_proyecto); ?>

        </td>
        <td>
          <?php echo e($experiencia_investigativa->area_proyecto); ?>

        </td>
        <td>
          <?php echo e($experiencia_investigativa->fecha_inicio); ?>

        </td>
        <td>
          <?php if(!$experiencia_investigativa->fecha_finalizacion==null): ?>
          <?php echo e($experiencia_investigativa->fecha_finalizacion); ?>

          <?php else: ?>
          Vinculación vigente
          <?php endif; ?>
        </td>
        <td>
          <?php echo e($experiencia_investigativa->tiempo_meses_texto ?? ($experiencia_investigativa->tiempo_meses . ' meses')); ?>

        </td>
        <td>
          <?php if(!$experiencia_investigativa->ruta_adjunto==null): ?>
          <a style="color:#428bca;" href="<?php echo e(env('APP_URL').$experiencia_investigativa->ruta_adjunto); ?>" download>Documento adjunto</a>
          <?php else: ?>
          No requerido
          <?php endif; ?>
        </td>
        <td>
          <form method="post" onsubmit="return confirm('¿Está seguro que desea eliminar la información de la experiencia investigativa seleccionada?');" action="<?php echo e(env('APP_URL')); ?>experiencia_investigativa/delete" style="margin:20px 0">
            <?php echo csrf_field(); ?>

            <input type="hidden" name="id" value="<?php echo e($experiencia_investigativa->id); ?>"/>
            <button type="submit" data-id="<?php echo e($experiencia_investigativa->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="5">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);
    }

    // Autocompletado básico para institucion
    var institucionInput = document.getElementById('institucion');
    var unal_places = [
        'Universidad Nacional de Colombia - Sede Bogotá',
    ];
    var unal_selected = false;
    var datalistId = 'instituciones-list';
    
    if (institucionInput) {
        // Crear datalist para autocompletado
        var datalist = document.createElement('datalist');
        datalist.id = datalistId;
        unal_places.forEach(function(place) {
            var option = document.createElement('option');
            option.value = place;
            datalist.appendChild(option);
        });
        document.body.appendChild(datalist);
        institucionInput.setAttribute('list', datalistId);
        
        // Detectar cuando se selecciona una opción del datalist
        institucionInput.addEventListener('input', function() {
            var value = this.value;
            if (unal_places.indexOf(value) !== -1) {
                unal_selected = true;
            }
        });
    }

    // Manejar cambios en en_curso (vinculación vigente)
    var enCursoInputs = document.querySelectorAll("input[name='en_curso']");
    enCursoInputs.forEach(function(radio) {
        radio.addEventListener('change', function() {
            var enCursoValue = this.value;
            var fechaFinalizacionGroup = document.getElementById(this.getAttribute("data-id"));
            var fechaFinalizacionInput = fechaFinalizacionGroup ? fechaFinalizacionGroup.querySelector("input[name='fecha_finalizacion']") : null;
            
            if (enCursoValue == 0) {
                // No es vigente: mostrar fecha de finalización
                if (fechaFinalizacionGroup) {
                    fechaFinalizacionGroup.style.display = '';
                }
                if (fechaFinalizacionInput) {
                    fechaFinalizacionInput.removeAttribute("disabled");
                    fechaFinalizacionInput.setAttribute("required", "required");
                }
            } else {
                // Es vigente: ocultar fecha de finalización
                if (fechaFinalizacionGroup) {
                    fechaFinalizacionGroup.style.display = 'none';
                }
                if (fechaFinalizacionInput) {
                    fechaFinalizacionInput.setAttribute("disabled", "disabled");
                    fechaFinalizacionInput.removeAttribute("required");
                    fechaFinalizacionInput.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(); ?>