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

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

    <div class="panel panel-default">


        <div class="panel-heading">
            <strong>Producción intelectual</strong>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <label for="tipos_produccion_intelectual_id" class="col-sm-12 col-md-2 control-label">Tipo de producción intelectual</label>
                <div class="col-sm-12 col-md-3">
                    <div>
                        <label class="form-label required">Tipo de producción intelectual</label>
                        <div class="input-group">
                            <select class="form-select" id="tipos_publicacion" name="tipos_produccion_intelectual_id">
                                <option value="">Seleccione</option>
                                @foreach($tipos_produccion_intelectual as $tipo_produccion_intelectual)
                                <option value="{{$tipo_produccion_intelectual->id}}" data-label="{{$tipo_produccion_intelectual->nombre}}">{{$tipo_produccion_intelectual->nombre}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel-heading">
            <div style="font-weight: bold">Datos de la producción: <span id="tipo_produccion_lbl"></span></div>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <div class="col-md-8 col-md-offset-2">
                    <div id="msg_form" style="text-align: center">
                        Por favor, seleccione un tipo de publicación para ver el formulario asociado.
                    </div>
                    <!--revistas indexadas-->
                    <div id="1" class="publication_form">
                        <div class="form-group">
                            <label for="tipo" class="control-label col-sm-12 col-md-2">Tipo de publicacion</label>
                            <div class="col-sm-3">
                                <select id="tipo" name="tipo" data-form="2" class="form-control">
                                    <option value="INTERNACIONAL">Internacional</option>
                                    <option value="NACIONAL">Nacional</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="nombre" class="col-sm-12 col-md-2 control-label">Título de la revista</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="text" class="form-control" id="publicacion_titulo" maxlength="200" name="publicacion_titulo" >
                            </div>
                        </div>
						<div class="form-group">
                            <label for="nombre" class="col-sm-12 col-md-2 control-label">Nombre del artículo</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="text" class="form-control" maxlength="250" id="nombre" name="nombre">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="publicacion_autor" class="col-sm-12 col-md-2 control-label">Autor(es) como aparece en el artículo</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="text" class="form-control" id="publicacion_autor" maxlength="250" name="publicacion_autor">
                            </div>
                        </div>
                        <div class="form-group">
                             <label for="clasificacion_revista" class="col-sm-12 col-md-2 control-label">Clasificación de la revista (según Colciencias)</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="text" class="form-control" id="clasificacion_revista" maxlength="250" name="clasificacion_revista">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="volumen" class="col-sm-12 col-md-2 control-label">Volumen</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="text" class="form-control" maxlength="45" id="volumen" name="volumen">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="paginas" class="col-sm-12 col-md-2 control-label">Número de páginas</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="text" class="form-control" id="paginas" maxlength="20" name="paginas">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="paginas" class="col-sm-12 col-md-2 control-label">Año</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="number" class="form-control" min="1950" max="2050" id="año" name="año">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="issn" class="col-sm-12 col-md-2 control-label">ISSN</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" maxlength="45"  id="issn" name="issn">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="doi" class="col-sm-12 col-md-2 control-label">DOI</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" maxlength="900"  id="doi" name="doi">
                            </div>
                        </div>
                        <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">
                                <select id="idiomas_id" name="idiomas_id" class="form-control">
                                    @foreach($idiomas as $idioma)
                                    <option value="{{$idioma->id}}">{{$idioma->nombre}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <!--Libro-->
                    <div id="2" class="publication_form">
                        <div class="form-group">
                            <label for="nombre" class="col-sm-12 col-md-2 control-label">Título del libro</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" maxlength="250" id="nombre" name="nombre">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="año" class="col-sm-12 col-md-2 control-label">Año</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="number" class="form-control" min="1950" max="2050" id="año" name="año">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="paginas" class="col-sm-12 col-md-2 control-label">Número de páginas</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="text" class="form-control" maxlength="20" id="paginas" name="paginas">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="nombre_editorial" class="col-sm-12 col-md-2 control-label">Nombre de la editorial</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="text" class="form-control" maxlength="250" id="nombre_editorial" name="nombre_editorial">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="publicacion_autor" class="col-sm-12 col-md-2 control-label">Autor(es) como aparece en el libro</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="text" class="form-control" maxlength="250" id="publicacion_autor" name="publicacion_autor">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="isbn" class="col-sm-12 col-md-2 control-label">ISBN</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="text" class="form-control" maxlength="45" id="isbn" name="isbn">
                            </div>
                        </div>
                        <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">
                                <select id="idiomas_id" name="idiomas_id" class="form-control">
                                    @foreach($idiomas as $idioma)
                                    <option value="{{$idioma->id}}">{{$idioma->nombre}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <br><em>  **Solamente deberá adjuntar las páginas del libro que sean evidencia de su participación como autor</em>

                    </div>
                    <!--Capitulo-->
                    <div id="3" class="publication_form">
                        <div class="form-group">
                            <label for="nombre" class="col-sm-12 col-md-2 control-label">Título del capítulo</label>
                            <div class="col-md-10 col-sm-12">
                                <input type="text" class="form-control" id="nombre" maxlength="250" name="nombre">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="nombre_libro" class="col-sm-12 col-md-2 control-label">Nombre del libro</label>
                            <div class="col-md-10 col-sm-12">
                                <input type="text" class="form-control" id="nombre_libro" maxlength="250" name="nombre_libro">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="año" class="col-sm-12 col-md-2 control-label">Año</label>
                            <div class="col-md-10 col-sm-10">
                                <input type="number" class="form-control" min="1950" max="2050" id="año" name="año">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="paginas" class="col-sm-12 col-md-2 control-label">Número de páginas</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="text" class="form-control" maxlength="20" id="paginas" name="paginas">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="nombre_editorial" class="col-sm-12 col-md-2 control-label">Nombre de la editorial</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="text" class="form-control" maxlength="250" id="nombre_editorial" name="nombre_editorial">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="isbn" class="col-sm-12 col-md-2 control-label">ISBN</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="text" class="form-control" maxlength="45" id="isbn2" name="isbn">
                            </div>
                        </div>
                        <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">
                                <select id="idiomas_id" name="idiomas_id" class="form-control">
                                    @foreach($idiomas as $idioma)
                                    <option value="{{$idioma->id}}">{{$idioma->nombre}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <!--Patente-->
                    <div id="4" class="publication_form">
                        <div class="form-group">
                            <label for="tipo_patente" class="col-sm-12 col-md-2 control-label">Tipo de patente</label>
                            <div class="col-sm-10 col-md-4">
                                <select id="tipo_patente" name="tipo_patente" class="form-control">
                                    <option value="PATENTE">Patente</option>
                                    <option value="SOFTWARE">Software</option>
									<option value="MODELO DE UTILIDAD">Modelo de utilidad</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="nombre" class="col-sm-12 col-md-2 control-label">Nombre de la patente</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="text" class="form-control" maxlength="250" id="nombre" name="nombre">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="nombre_libro" class="col-sm-12 col-md-2 control-label">Descripción</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" id="descripcion" maxlength="500" name="descripcion"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="numero_patente" class="col-sm-12 col-md-2 control-label">Número de patente</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="text" class="form-control" maxlength="45" id="numero_patente" name="numero_patente">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="nombre_editorial" class="col-sm-12 col-md-2 control-label">Entidad que la registra</label>
                            <div class="col-sm-12 col-md-9">
                                <input type="text" class="form-control" maxlength="100" id="entidad_patente" name="entidad_patente">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="año" class="col-sm-12 col-md-2 control-label">Año</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" min="1950" max="2050" id="año" name="año">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="paises_id" class="col-sm-12 col-md-2 control-label">País</label>
                            <div class="col-sm-12 col-md-7">
                                <select id="paises_id" name="paises_id" class="form-control">
                                    @foreach($paises as $pais)
                                    <option value="{{$pais->id}}">{{$pais->nombre}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <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">
                                <select id="idiomas_id" name="idiomas_id" class="form-control">
                                    @foreach($idiomas as $idioma)
                                    <option value="{{$idioma->id}}">{{$idioma->nombre}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                <div id="additional_fields">
                    <div class="row">
                        <label for="adjunto" class="col-sm-12 col-md-2 control-label">Documento de soporte: </label>
                        <div class="col-sm-12 col-md-9">
                            <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="row">
                        <div class="col-md-5 col-md-offset-4">
                            <button id="submitBtn" type="submit" class="btn btn-success form-control">
                                <i class="fa fa-list-ul" aria-hidden="true"></i>
                                <i class="fa fa-lightbulb-o" aria-hidden="true"></i>
                                Guardar producción intelectual
                            </button>
                        </div>
                    </div>

                </div>


            </div>
        </div>

    </div>
</form>

<div class="panel panel-default">
    <div class="panel-heading">
        <strong>Resumen de productos intelectuales</strong>
    </div>
    <div class="panel-body">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Tipo de producción</th>
                    <th>Nombre</th>
                    <th>Documento de soporte</th>
                    <th>Opciones</th>
                </tr>
            </thead>
            @forelse($producciones_intelectual as $produccion_intelectual)
            <tr>
                <td>
                    {{$tipos_produccion_intelectual[$produccion_intelectual->tipos_produccion_intelectual_id]->nombre}}
                </td>
                <td>
                    {{$produccion_intelectual->nombre}}
					@if ($produccion_intelectual->tipos_produccion_intelectual_id == 1 || $produccion_intelectual->tipos_produccion_intelectual_id == 2)
						- {{$produccion_intelectual->publicacion_autor}}
					@endif
                </td>
                <td>
                    <a style="color:#428bca;" href="{{env('APP_URL').$produccion_intelectual->ruta_adjunto}}" download>Documento adjunto</a>
                </td>
                <td>
                    <form method="post" onsubmit="return confirm('¿Está seguro que desea eliminar la información de la producción intelectual seleccionada?');"  action="{{ env('APP_URL') }}produccion_intelectual/delete" style="margin:20px 0">
                        {!! csrf_field() !!}
                        <input type="hidden" name="id" value="{{$produccion_intelectual->id}}"/>
                        <button  type="submit" data-id="{{$produccion_intelectual->id}}" class="btn btn-danger btn-sm">
                            <i class="fa fa-trash" aria-hidden="true"></i>
                        </button>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="4">No se han ingresado información asociada.</td>
            </tr>
            @endforelse
        </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);
    }

    // Ocultar formularios de publicación al inicio
    var publicationForms = document.querySelectorAll(".publication_form");
    var additionalFields = document.getElementById("additional_fields");
    var msgForm = document.getElementById("msg_form");
    
    publicationForms.forEach(function(form) {
        form.style.display = 'none';
    });
    
    if (additionalFields) {
        additionalFields.style.display = 'none';
    }

    // Manejar cambios en tipos_publicacion
    var tiposPublicacion = document.getElementById("tipos_publicacion");
    if (tiposPublicacion) {
        tiposPublicacion.addEventListener('change', function() {
            var id = this.value;
            var selectedOption = this.options[this.selectedIndex];
            var selectedText = selectedOption ? selectedOption.text : '';
            
            // Ocultar todos los formularios y deshabilitar campos
            publicationForms.forEach(function(form) {
                form.style.display = 'none';
                var inputs = form.querySelectorAll("input, select, textarea");
                inputs.forEach(function(input) {
                    input.setAttribute("disabled", "disabled");
                    input.setAttribute("readonly", "readonly");
                    input.removeAttribute("required");
                });
            });
            
            // Mostrar el formulario seleccionado y habilitar campos
            if (id && id !== '') {
                var selectedForm = document.getElementById(id);
                if (selectedForm) {
                    selectedForm.style.display = '';
                    var inputs = selectedForm.querySelectorAll("input, select, textarea");
                    inputs.forEach(function(input) {
                        input.removeAttribute("disabled");
                        input.removeAttribute("readonly");
                        input.setAttribute("required", "required");
                    });
                }
                
                // Hacer adjunto requerido
                var adjunto = document.getElementById("adjunto");
                if (adjunto) {
                    adjunto.setAttribute("required", "required");
                }
                
                // Actualizar label de tipo de producción
                var tipoProduccionLbl = document.getElementById("tipo_produccion_lbl");
                if (tipoProduccionLbl) {
                    tipoProduccionLbl.textContent = selectedText;
                }
                
                // Manejar campos opcionales según el tipo
                switch(id) {
                    case '1':
                        var volumen = document.getElementById("volumen");
                        var clasificacionRevista = document.getElementById("clasificacion_revista");
                        if (volumen) volumen.removeAttribute("required");
                        if (clasificacionRevista) clasificacionRevista.removeAttribute("required");
                        break;
                    case '2':
                        var isbn = document.getElementById("isbn");
                        if (isbn) isbn.removeAttribute("required");
                        break;
                    case '3':
                        var isbn2 = document.getElementById("isbn2");
                        if (isbn2) isbn2.removeAttribute("required");
                        break;
                }
                
                // Mostrar campos adicionales
                if (msgForm) msgForm.style.display = 'none';
                if (additionalFields) additionalFields.style.display = '';
            } else {
                // Ocultar campos adicionales si no hay selección
                if (msgForm) msgForm.style.display = '';
                if (additionalFields) additionalFields.style.display = 'none';
            }
        });
    }

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