@extends('main')
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
@section('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">
  @if($msg)
  <div id="msg" class="alert alert-success" role="alert" style="cursor: pointer;">
      {{$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;">
          {{$msg}}
        </div>
      </div>
    </div>
  </div>

  @endif
    <div class="panel-heading">
        <strong>Experiencia docente</strong>
    </div>

    <form name="registro" id="registro" method="post" action="{{ env('APP_URL') }}experiencia_docente" class="form-horizontal" style="margin:20px 0" enctype="multipart/form-data">
        {!! csrf_field() !!}

        <div class="panel-body">
            <div class="form-group">
                <label for="nombre_institucion" class="col-sm-12 col-md-2 control-label">Nombre de la institución</label>
                <div class="col-sm-12 col-md-5">
                    <input type="text" class="form-control" id="nombre_institucion"  maxlength="200" name="nombre_institucion" placeholder="Nombre de la institución" required>
                </div>

                <label for="dedicacion" class="col-sm-12 col-md-2 control-label">Dedicación</label>
                <div class="col-sm-12 col-md-3">
                    <div>
                        <div class="input-group">
                            <select class="form-select" id="dedicacion" name="dedicacion" required>
                                <option value="">Seleccione</option>
                                @foreach($tipos_vinculacion_docente as $tvd)
                                <option value="{{$tvd->id}}" data-label="{{$tvd->nombre}}">{{$tvd->nombre}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
              <label for="en_curso" class="col-sm-12 col-md-1 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>
                <label for="fecha_inicio" class="col-sm-12 col-md-2 control-label">Fecha de inicio de vinculación</label>
                <div class="col-sm-12 col-md-2">
                    <div>
                        <div class="input-group">
                            <input type="date" placeholder="dd/mm/aaaa" class="form-control start-date" id="fecha_inicio" name="fecha_inicio" max="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" aria-describedby="fecha_inicio-help" required/>
                        </div>
                    </div>
                </div>
				<div class="col-md-4">
                    <div 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="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" aria-describedby="fecha_finalizacion-help"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="form-group">
                <label for="area_trabajo" class="col-sm-12 col-md-2 control-label">Áreas de desempeño</label>
                <div class="col-sm-12 col-md-10">
                    <textarea name="area_trabajo" id="area_trabajo" maxlength="500" class="form-control"></textarea>
                </div>
            </div>

            <!---->
            <div class="form-group" id="dynamic-form">
                <label for="area_trabajo" class="col-sm-12 col-md-2 control-label">Información de asignaturas impartidas</label>
                <div class="col-sm-12 col-md-10">
                    <table id="asignaturas_form" data-rowname="asignaturas" class="dynaform table table-hover">
                        <thead>
                            <tr class="header">
                                <th>Nombre de la asignatura</th>
                                <th>Intensidad de horas por semana</th>
                                <th style="width:10px">
                                    <button class="addBtn btn btn-default" data-id="asignaturas_form" data-name="asignaturas"><span class="glyphicon glyphicon-plus"></span></button>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="tr" data-index="0">
                                <td>
                                    <input class="form-control" type="text" name="info_asignaturas[nombre][]" value="" required>
                                </td>
                                <td>
                                    <input class="form-control intensidad-horas" type="number" name="info_asignaturas[intensidad][]" value="" min="0" step="1" required>
                                </td>
                                <td>
                                    <button class="addBtnRemove btn btn-default"><span class="glyphicon glyphicon-minus"></span></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-12 col-md-2">
                    <label for="adjunto" class="col-sm-12 col-md-2 control-label">Documento de soporte: </label>
                </div>
                <div class="col-sm-12 col-md-10" 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>
                        Guardar experiencia docente
                    </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 de la institución/empresa</th>
                    <th>Fecha de inicio</th>
                    <th>Fecha de finalización</th>
                    <th>Total meses</th>
                    <th>Información de asignaturas impartidas</th>
                    <th>Documento de soporte adjunto</th>
                    <th>Opciones</th>
                </tr>
            </thead>
            @forelse($experiencias_docente as $experiencia_docente)
            <tr>
                <td>
                    {{$experiencia_docente->nombre_institucion}}
                </td>
                <td>
                    {{$experiencia_docente->fecha_inicio}}
                </td>
                <td>
                    @if(!$experiencia_docente->fecha_finalizacion==null)
						{{$experiencia_docente->fecha_finalizacion}}
                    @else
						Vinculación vigente
                    @endif
                </td>
                <td>
                  {{$experiencia_docente->tiempo_meses_texto ?? ($experiencia_docente->tiempo_meses . ' meses')}}
                </td>
                <td>
                    <table class="toJSONTable" data-json="{{$experiencia_docente->info_asignaturas}}">

                    </table>
                </td>
				<td>
                    @if($experiencia_docente->ruta_adjunto==null)
						<em>No requerido</em>
                    @else
						<a style="color:#428bca;" href="{{env('APP_URL').$experiencia_docente->ruta_adjunto}}" download>Documento adjunto</a>
                    @endif

                </td>
                <td>
                    <form method="post" onsubmit="return confirm('¿Está seguro que desea eliminar la información de la experiencia docente seleccionada?');" action="{{ env('APP_URL') }}experiencia_docente/delete" style="margin:20px 0">
                        {!! csrf_field() !!}
                        <input type="hidden" name="id" value="{{$experiencia_docente->id}}"/>
                        <button type="submit" data-id="{{$experiencia_docente->id}}" class="btn btn-danger btn-sm">
                            <i class="fa fa-trash" aria-hidden="true"></i>
                        </button>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5">No se ha ingresado información de experiencia todavia.</td>
            </tr>
            @endforelse
        </table>
    </div>



</div>

<script>
function addTableRow(button) {
    var name = button.getAttribute("data-name");
    var id = button.getAttribute("data-id");
    var table = document.getElementById(id);
    if (!table) return;
    
    var tbody = table.querySelector("tbody");
    if (!tbody) return;
    
    var lastRow = tbody.querySelector("tr:last-child");
    if (!lastRow) return;
    
    var lastRowIndex = parseInt(lastRow.getAttribute("data-index")) || 0;
    var nextRowIndex = lastRowIndex + 1;
    var newRow = lastRow.cloneNode(true);
    
    newRow.setAttribute("id", name + "-" + nextRowIndex);
    newRow.setAttribute("data-index", nextRowIndex);
    
    var removeBtn = newRow.querySelector(".addBtnRemove");
    if (removeBtn) {
        removeBtn.setAttribute("data-selector", name + "-" + nextRowIndex);
    }
    
    var inputs = newRow.querySelectorAll("input");
    inputs.forEach(function(input) {
        input.value = "";
    });
    
    tbody.appendChild(newRow);
}

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

function addAllColumnHeaders(myList, selector) {
    var columnSet = [];
    var headerTr = document.createElement("tr");
    
    for (var i = 0; i < myList.length; i++) {
        var rowHash = myList[i];
        for (var key in rowHash) {
            if (columnSet.indexOf(key) === -1) {
                columnSet.push(key);
                var th = document.createElement("th");
                th.textContent = capitalizeFirstLetter(key);
                headerTr.appendChild(th);
            }
        }
    }
    selector.appendChild(headerTr);
    return columnSet;
}

function buildHtmlTable(selector) {
    var jsonData = selector.getAttribute("data-json");
    if (!jsonData) return;
    
    try {
        var myList = JSON.parse(jsonData);
    } catch (e) {
        console.error("Error parsing JSON:", e);
        return;
    }
    
    if (!Array.isArray(myList) || myList.length === 0) return;
    
    var columns = addAllColumnHeaders(myList, selector);
    
    for (var i = 0; i < myList.length; i++) {
        var row = document.createElement("tr");
        for (var colIndex = 0; colIndex < columns.length; colIndex++) {
            var cellValue = myList[i][columns[colIndex]];
            if (cellValue == null) {
                cellValue = "";
            }
            var td = document.createElement("td");
            td.textContent = cellValue;
            row.appendChild(td);
        }
        selector.appendChild(row);
    }
}

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 nombre_institucion
    var nombreInstitucionInput = document.getElementById('nombre_institucion');
    var unal_places = [
        'Universidad Nacional de Colombia - Sede Bogotá',
    ];
    var unal_selected = false;
    var datalistId = 'instituciones-list';
    
    if (nombreInstitucionInput) {
        // 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);
        nombreInstitucionInput.setAttribute('list', datalistId);
        
        // Detectar cuando se selecciona una opción del datalist
        nombreInstitucionInput.addEventListener('input', function() {
            var value = this.value;
            if (unal_places.indexOf(value) !== -1) {
                unal_selected = true;
            }
        });
    }

    // Manejar clicks en botones de agregar fila
    var dynamicForm = document.getElementById("dynamic-form");
    if (dynamicForm) {
        dynamicForm.addEventListener('click', function(e) {
            if (e.target.closest('.addBtn')) {
                e.preventDefault();
                addTableRow(e.target.closest('.addBtn'));
            } else if (e.target.closest('.addBtnRemove')) {
                e.preventDefault();
                var selector = e.target.closest('.addBtnRemove').getAttribute("data-selector");
                if (selector) {
                    var rowToRemove = document.getElementById(selector);
                    if (rowToRemove) {
                        rowToRemove.remove();
                    }
                }
            }
        });

        // No permitir números negativos en intensidad de horas por semana
        dynamicForm.addEventListener('input', function(e) {
            if (e.target.classList.contains('intensidad-horas')) {
                var val = parseFloat(e.target.value);
                if (!isNaN(val) && val < 0) {
                    e.target.value = '0';
                }
            }
        });
        dynamicForm.addEventListener('change', function(e) {
            if (e.target.classList.contains('intensidad-horas')) {
                var val = parseFloat(e.target.value);
                if (!isNaN(val) && val < 0) {
                    e.target.value = '0';
                }
            }
        });
    }

    // Construir tablas desde JSON
    var jsonTables = document.querySelectorAll(".toJSONTable");
    jsonTables.forEach(function(table) {
        buildHtmlTable(table);
    });

    // 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>
@stop