<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	lang="es">

<head th:replace="~{layouts/common.html :: head}"></head>

<style>
	svg[id^="mermaid-"] { min-width: 100%; font-size: 10px;}
	polygon.label-container {
		max-height: 50px !important;
	}
	g.node{
		max-height: 50px !important;
	}

	svg[aria-roledescription="flowchart-v2"]{
		-moz-transform: scale(0.75);
		-webkit-transform: scale(0.75);
		transform: scale(0.75);
		transform-origin: top center;
		top:0;
		margin-top:0px;
		margin-bottom:0px;
	}

	div.mermaid {
		margin-left: 0 !important;
		text-align: center;
		resize:both;
		overflow:auto;
		margin-bottom: 2px;
		position:relative;
		max-height: 600px;
		max-width: 100%;
	}
</style>

<body id="page-top">

	<!-- Navigation -->
	<nav th:replace="~{layouts/common.html :: navbar}"></nav>
 
 	<!-- Content -->
	<div class="content uv-content d-flex" id="uv-wrapper">
		<div class="bg-light border-right" id="uv-sidebar-wrapper" th:replace="~{layouts/sidebar.html :: sidebar}"></div>
		
		<div class="container uv-home-section navVisible" id="uv-content-wrapper">
			<div class="uv-loading-spinner" th:text="#{global.loading}"></div>
			<div class="col-sm-12"></div>
			<div class="uv-container">
				<div class="uv-table-group-procedure-info">
					<div class="uv-table-title">
						<span>
							<strong id="procedure_code" th:text="${instance.nomProces}"></strong>
							<strong th:text="${#locale.language} == 'es' ? ${instance.titolCas}:${instance.titolVal}"></strong>
						</span>
						<br>
						<span><strong th:text="#{procedures.center}"></strong>: <span th:text="${#locale.language} == 'es' ? ${instance.centreCas}:${instance.centreVal}"></span></span>
						<br>
						<span th:if="${instance.ruct != null}"><strong th:text="#{procedures.titulation}"></strong>: <a th:href="${'/dashboard/'+instance.ruct}"><span th:text="${#locale.language} == 'es' ? ${instance.titulacioCas}:${instance.titulacioVal}"></span></a></span>
						<span th:if="${instance.ruct == null}"><strong th:text="#{procedures.titulation}"></strong>: <span th:text="${#locale.language} == 'es' ? ${instance.titulacioCas}:${instance.titulacioVal}"></span></span>
						<br>
						<span><strong th:text="#{procedures.year.eval}"></strong>: <span><span th:text="${instance.cursAvaluat-1}"></span> - <span th:text="${instance.cursAvaluat}"></span></span></span>
						(<span th:text="#{procedures.year.act}"></span> <span th:text="${instance.cursActivacio-1}"></span> - <span th:text="${instance.cursActivacio}"></span>)
						<br>
						<p th:text="${#locale.language} == 'es' ? ${instance.descripcioCas}:${instance.descripcioVal}"></p>
					</div>
					<hr class="uv-procedure-hr">
					<div class="uv-table-group" th:if="${#authentication.principal.isAdmin() or #authentication.principal.isGranted()}" style="text-align: right;">
						<div class="btn-toolbar" role="toolbar" style="margin-bottom:-30px;">
							<div class="btn-group mr-2 w-auto ml-auto" role="group" aria-label="First group">
								<button form="formInstanceClear" class="btn btn-secondary pointer" style="width:38px; height:38px;" th:title="#{admin.action.reloadInstance}"><i class="fas fa-redo"></i></button>
								<button form="formInstanceClose" class="btn btn-secondary pointer" style="width:38px; height:38px;" th:title="#{admin.action.closeInstance}"><i class="fas fa-lock"></i></button>
								<button form="formInstanceDelete" class="btn btn-danger pointer" style="width:38px; height:38px;" th:title="#{admin.action.deleteInstance}"><i class="fas fa-trash"></i></button>
							</div>
						</div>
						<form enctype='multipart/form-data' id="formInstanceClear" method="POST" action="/admin/instance/clear" style="display: inline;">
							<input type="hidden" name="idInstancia" th:value="${instance.idInstancia}">
						</form>
						<form enctype='multipart/form-data' id="formInstanceClose" method="POST" action="/admin/instance/close" style="display: inline;">
							<input type="hidden" name="idInstancia" th:value="${instance.idInstancia}">
						</form>
						<form enctype='multipart/form-data' id="formInstanceDelete" method="POST" action="/admin/instance/delete" style="display: inline;" th:if="${#authentication.principal.isAdmin()}">
							<input type="hidden" name="idInstancia" th:value="${instance.idInstancia}">
						</form>
					</div>
				</div>
				<div class="uv-table-group">
					<div class="col-sm-12 uv-table-section">
						<div class="uv-table-header">
							<h6 class="uv-table-header-h6"><span th:text="#{procedures.title.tasks}"></span>&nbsp;&nbsp;&nbsp;(<a href="javascript:void(0)" th:text="#{procedures.title.flow}" onclick="showFlowDiagram();">ver flujo</a>)</h6>
							<hr class="uv-table-header-hr">
							<div class="col">
								<span class="legend-active"><span th:text="#{procedures.legend.active}">Activa</span></span>
								<span class="legend-active-other"><span th:text="#{procedures.legend.other}">No corresponde</span></span>
								<span class="legend-expired"><span th:text="#{procedures.legend.expired}">Atrasada</span></span>
								<span class="legend-blocked"><span th:text="#{procedures.legend.blocked}">No procede</span></span>
								<span class="legend-done"><span th:text="#{procedures.legend.done}">Realizada</span></span>
							</div>
						</div>
					</div>
					<div id="flowDiagramContainer" class="flowDiagramContainer" style="display: none;">
						<button type="button" class="close" onclick="hideFlowDiagram();" style="margin-top:-50px;">
							<span aria-hidden="true" style="font-size:125%;"><i class="fas fa-window-close"></i></span>
						</button>
						<div class="btn-toolbar mermaid-tools" role="toolbar" style="float:left;">
							<div class="btn-group w-auto ml-auto pointer" role="group" aria-label="downloadDiagram">
								<span class="btn btn-secondary pointer" style="width:38px; height:38px; padding:6px" onclick="downloadFlowDiagram();"><i class="fas fa-download"></i></span>
							</div>
						</div>
						<div class="mermaid" th:text="${flow}"></div>
					</div>
				</div>
				<div class="uv-accordion" style="margin-top:20px;text-align:center;">
					<div id="accordion">
						<div class="card" th:each="item,i : ${tasks}">
							<input type="hidden" id="activeOptions" th:if="${item.estat == 'A'}" th:value="${item.opcions}">
							<div class="card-header pointer" 
								th:classappend="${(item.estat == 'A' and item.isAssignedToUser?'card-header-active ':'') + (item.estat == 'A' and not item.isAssignedToUser?'card-header-active-other ':'') + (item.isExpired and item.estatInstancia == 'A' and item.estat == 'A'?'card-header-expired ':'') + (item.estat == null?'card-header-blocked ':'')}" 
								th:attr="id='heading'+${i.index},data-target='#collapse'+${i.index},aria-controls='#collapse'+${i.index}, data-toggle=${item.estat != null or #authentication.principal.isAdmin() or #authentication.principal.isGranted() ? 'collapse' : ''}" 
								aria-expanded="true" onclick="showComments();">
								<span style="float:left;font-size: 21px; margin-left:-10px;margin-top:-10px;" th:if="${item.estat != null or #authentication.principal.isAdmin() or #authentication.principal.isGranted()}"><i class="fas fa-caret-down"></i></span>
								<h6 style="text-align:left; margin-left:15px;">
									<strong th:text="${i.index+1}+'/'+${#lists.size(tasks)}"></strong><strong> - </strong>
									<span th:text="${#locale.language} == 'es' ? ${item.titolCas}:${item.titolVal}"></span>
									<br>
									<span th:text="#{procedures.status}"></span>: 
									<span th:if="${item.estat == 'A'}" th:text="#{procedures.status.a}"></span>
									<span th:if="${item.estat == 'S'}" th:text="#{procedures.status.s}"></span>
									<span th:if="${item.estat == 'N'}" th:text="#{procedures.status.n}"></span>
									<span th:if="${item.estat == 'E'}" th:text="#{procedures.status.e}"></span>
									<span th:if="${item.estat == 'F'}" th:text="#{procedures.status.f}"></span>
									<span th:if="${item.estat == null}" th:text="#{procedures.status.i}"></span>
									<span>
										<br>
										<span th:text="#{procedures.assignedTo}"></span>: 
										<span th:text="${#locale.language} == 'es' ? ${item.descripcioRolCas}:${item.descripcioRolVal}"></span>
									</span>
									<br>
									
									<span th:if="${item.estat == 'A' or item.estat == null}"><span th:text="#{procedures.dateLimit}"></span>: <span th:text="${item.dataLim}"></span></span>
									<span style="float: right; margin-top:-5px;" th:if="${item.estat == 'A' and item.isAssignedToUser}" th:attr="title=#{procedures.status.title.a}"><i class="fa fa-play-circle"></i></span>
									<span style="float: right; margin-top:-5px;" th:if="${item.estat == 'A' and not item.isAssignedToUser}" th:attr="title=#{procedures.status.title.o}"><i class="fa fa-exclamation-triangle"></i></span>
									<span style="float: right; margin-top:-5px;" th:if="${item.estat == null}"><i class="fa fa-lock" th:attr="title=#{procedures.status.title.p}"></i></span>
									<span style="float: right; margin-top:-5px;" th:if="${item.estat != null and item.estat != 'A'}" th:attr="title=#{procedures.status.title.r}"><i class="fa fa-check"></i></span>
									<span style="float: right; margin-top:-5px; margin-right:10px;" th:if="${(item.estat != 'A' and item.estat != null and #lists.contains({1, 11, 12, 13, 14, 15, 21, 22}, item.tipus)) or (item.estat == 'A' and item.evidencia != null)}">
										<a th:href="${'/download/'+item.idInstanciaTasca}" target="_blank"><i class="fas fa-file-pdf" style="font-size:200%;margin-top:-10px;"></i></a>
									</span>
								</h6>
							</div>
							<div th:attr="id='collapse'+${i.index},aria-labelledby='heading'+${i.index}" class="collapse" data-parent="#accordion">
								<div class="card-body uv-card-body">
									<div id="taskAdminActions" th:if="${#authentication.principal.isAdmin() or #authentication.principal.isGranted()}" style="margin-bottom: 20px;">
										<div class="btn-toolbar" role="toolbar" style="margin-top:-15px; margin-bottom:-15px;">
											<div class="btn-group mr-2 w-auto ml-auto" role="group" aria-label="First group">
												<button type="submit" th:attr="form=${'formTaskReload'+item.idInstanciaTasca}" class="btn btn-secondary pointer" style="width:38px; height:38px;" th:title="#{admin.action.reloadTask}"><i class="fas fa-redo"></i></button>
												<button type="submit" th:attr="form=${'formTaskReactivate'+item.idInstanciaTasca}" class="btn btn-secondary pointer" style="width:38px; height:38px;" th:title="#{admin.action.reactivate}" th:if="${item.estat != 'A' and item.estat != null}"><i class="fas fa-lock-open"></i></button>
												<button type="submit" th:attr="form=${'formTaskEdit'+item.idInstanciaTasca}" class="btn btn-secondary pointer" style="width:38px; height:38px;" th:title="#{admin.action.edit}" th:if="${item.estat != 'A' and item.estat != null and #lists.contains({11, 15}, item.tipus)}"><i class="fas fa-edit"></i></button>
												<button type="submit" th:attr="form=${'formShowDrafts'+item.idInstanciaTasca}" class="btn btn-secondary pointer" style="width:38px; height:38px;" th:title="'Ver borradores'" th:if="${item.estat != null and #authentication.principal.isAdmin() and #lists.contains({11, 15}, item.tipus)}"><i class="fas fa-code-branch"></i></button>
												<button th:attr="id=${'filepicker-creator'+item.idInstanciaTasca}" class="btn btn-secondary pointer" style="width:38px; height:38px;" th:title=#{admin.action.attach} th:onclick="'createFilepicker(\''+${instance.idInstancia}+'\', \''+${item.idInstanciaTasca}+'\')'" th:if="${item.estat != 'A' and item.estat != null and #lists.contains({1, 11, 12, 13, 14, 15}, item.tipus)}"><i class="fas fa-file-upload"></i></button>
											</div>
										</div>				
										<form th:id="${'formTaskReload'+item.idInstanciaTasca}" enctype='multipart/form-data' method="POST" action="/admin/instance/task/reload" style="display: inline;">
											<input type="hidden" name="idInstanciaTasca" th:value="${item.idInstanciaTasca}">
										</form>
										<form th:id="${'formTaskReactivate'+item.idInstanciaTasca}" enctype='multipart/form-data' method="POST" action="/admin/instance/task/reactivate" style="display: inline;" th:if="${item.estat != 'A'}">
											<input type="hidden" name="idInstanciaTasca" th:value="${item.idInstanciaTasca}">
										</form>
										<form th:id="${'formTaskEdit'+item.idInstanciaTasca}" enctype='multipart/form-data' method="POST" action="/admin/instance/task/edit" style="display: inline;" th:if="${item.estat != 'A' and #lists.contains({11, 15}, item.tipus)}">
											<input type="hidden" name="idInstanciaTasca" th:value="${item.idInstanciaTasca}">
										</form>
										<form th:id="${'formShowDrafts'+item.idInstanciaTasca}" enctype='multipart/form-data' method="GET" onsubmit="target_popup(this);" th:action="${'/procedure/drafts/'+item.idInstanciaTasca}" target="_blank" style="display: inline;" th:if="${#authentication.principal.isAdmin() and #lists.contains({11, 15}, item.tipus)}">
										</form>
									</div>					
									<div class="row" style="margin-bottom:20px;text-align: left;width: 90%;">
										<span th:text="${#locale.language} == 'es' ? ${item.descripcioCas}:${item.descripcioVal}"></span>
									</div>
									<div class="row" th:if="${item.estat == 'A'}">
										<script>
											var typeActive = "[[${item.tipus}]]";
											var idInstanciaTasca = "[[${item.idInstanciaTasca}]]";
										</script>
										<div class="card-body-inner-action" th:if="${item.isAssignedToUser or #authentication.principal.isAdmin() or #authentication.principal.isGranted()}">
											<form enctype='multipart/form-data' method="POST" th:action="${'/procedure/'+instance.idInstancia}">
												<input class="active-task" type="hidden" name="taskid" th:value="${item.idInstanciaTasca}">
												<input class="active-task" type="hidden" name="procid" th:value="${instance.idInstancia}">
												
												<div class="card-body-inner-action" th:if="${item.tipus == 4}"> </div>
												
												<div class="card-body-inner-action" th:if="${item.tipus == 2}">
													<span id="action_y" class="btn btn-y pointer" th:text="#{procedures.btn.yes}" onclick="click_y();"></span> <span style="margin-left:10px;margin-right:10px;"></span>
													<span id="action_n" class="btn btn-n pointer" th:text="#{procedures.btn.no}" onclick="click_n();"></span>
													<input id="response" name="response" value="" required style="opacity: 0;">
												</div>
												
												<div class="card-body-inner-action" th:if="${item.tipus == 11 or item.tipus == 15}">
													<textarea id="editor" name="evidencia_text" th:text="${item.text}"></textarea>
													<div style="text-align: left;">
														<small style="text-align: left;font-weight: bold;"><span th:text="#{procedures.autosave.lastdate}">Última modificación</span>: <span th:if="${item.dataMod != null}" id="lastmoddate" th:text="${item.dataMod}"></span><span th:if="${item.dataMod == null}" id="lastmoddate" th:text="#{procedures.autosave.none}"></span></small>
													</div>
												</div>
												
												<div class="card-body-inner-action" th:if="${#lists.contains({1, 12, 13, 14}, item.tipus)}">
													<div class="row">
														<div class="col" style="text-align: left;margin-bottom:20px;" th:if="${!#strings.equals(item.codiEvidencia, '0')}">
															<span th:text="#{procedures.template}"></span>: 
															<a th:href="${'/download/template/'+item.idInstanciaTasca}" target="_blank">
																<strong th:text="${item.codiEvidencia}"></strong> <span th:text="${#locale.language} == 'es' ? ${item.nomEvidenciaCas}:${item.nomEvidenciaVal}"></span>
																<i class="fas fa-file-pdf"></i>
															</a>
														</div>
													</div> 
													<div class="file-loading">
													    <input id="filepicker" multiple type="file" name="evidencias">
													</div>
													<br>
													<div class="row card-body-up-btn" th:if="${item.oldEvidences != null}">
														<a data-toggle="collapse" th:attr="href='#collapseEvidences'+${item.idInstanciaTasca}, aria-controls='#collapseEvidences'+${item.idInstanciaTasca}" 
															role="button" aria-expanded="false" th:text="#{procedures.olderEvidences}">
														    Evidencias generadas en el proceso anteriormente
														</a>
														<div class="collapse" th:attr="id='collapseEvidences'+${item.idInstanciaTasca}" style="width:95%;">
															<div class="card card-body" th:each="ev : ${item.oldEvidences}">
																<a th:href="${'/download/'+ev.idTascai}" target="_blank"><span></span> <span th:text="${ev.codiEvidencia}"></span> <span th:text="${#locale.language} == 'es' ? ${ev.nomEvidenciaCas}:${ev.nomEvidenciaVal}"></span> [<span th:text="${#locale.language} == 'es' ? 'Curso evaluado ':'Curs avaluat '"></span><span th:text="${ev.curs-1}"></span> - <span th:text="${ev.curs}"></span>]</a>
															</div>
														</div>
													</div>
												</div>
												<div class="card-body-inner-action" th:if="${item.tipus == 3}">
													<div id="pamSplitContainer" class="split-view-conttainer">

													</div>
													<div class="table-responsive">
														<table class="table table-bordered uv-table-pam-modern" id="pamTable">
															<thead>
																<tr>
																	<th colspan="3">ORIGEN DE LA ACCIÓN</th>
																	<th colspan="5">ACCIÓN PLANIFICADA</th>
																	<th colspan="3">SEGUIMIENTO</th>
																</tr>
																<tr class="subheader">
																	<th class="col-id">ID</th>
																	<th>Objetivo de mejora</th>
																	<th>Origen</th>
																	<th>Actividades a desarrollar</th>
																	<th>Responsable</th>
																	<th class="col-prioridad">Prioridad</th>
																	<th class="col-curso">Curso Inicio</th>
																	<th class="col-curso">Curso Fin</th>
																	<th>Indicadores de seguimiento</th>
																	<th class="col-seguimiento">Grado de ejecución de las acciones</th>
																	<th>Justificación</th>
																</tr>
															</thead>
															<tbody>
															</tbody>
														</table>
													</div>

													<div class="text-left mt-3 mb-4">
														<button type="button" class="btn btn-outline-primary btn-sm" onclick="addNewRowPAM()">
															<i class="fas fa-plus"></i> Añadir otra fila al Plan de Acción
														</button>
													</div>
													<div id="pdfWidget" class="pdf-widget">
														<div id="pdfWidgetHeader" class="pdf-widget-header">
															<i class="fas fa-file-pdf"></i> 
															<span>Informe</span>
														</div>
													</div>

													<div id="pdfPreviewContainer" class="pdf-preview-side">
														<div class="pdf-preview-header">
															<span><i class="fas fa-info-circle mr-2"></i> Documentación de apoyo</span>
															<button type="button" class="btn-close-pdf" onclick="closePdfPreview(event)">
																&times;
															</button>
														</div>
														<div style="flex-grow: 1; background: #525659;">
															<iframe th:src="@{/E_PG1_1.pdf}" frameborder="0" style="width:100%; height:100%;"></iframe>
														</div>
													</div>
												</div>
												<div class="row card-body-up-btn">
													<span class="btn btn-primary pointer" th:if="${#lists.contains({11, 15}, item.tipus)}" style="margin-right:10px;" onclick="saveEditorWithConfirmation();"><i class="fas fa-save"></i> <span th:text="#{procedures.btn.draft}">Guardar borrador</span></span>
													<span class="btn btn-primary pointer" th:if="${item.tipus == 3}" 
														style="margin-right:10px;" onclick="processPAMTable('draft');">
														<i class="fas fa-save"></i> <span th:text="#{procedures.btn.draft}">Guardar borrador</span>
													</span>
													<button class="btn btn-success" th:if="${not #lists.contains({1, 3, 11, 12, 13, 14, 15}, item.tipus)}">Confirmar</button>
													<button class="btn btn-success" th:if="${#lists.contains({11, 15}, item.tipus)}" data-toggle="confirmation" th:attr="data-title=#{procedures.editor.confirm}"><i class="fas fa-file-import"></i> Enviar</button>
													<span class="btn btn-success pointer" th:if="${#lists.contains({1, 12, 13, 14}, item.tipus)}" onclick="$('#filepicker').fileinput('upload');">Confirmar</span>
													<button type="button" class="btn btn-success" th:if="${item.tipus == 3}" 
															onclick="processPAMTable('submit');">
														<i class="fas fa-check-circle"></i> Confirmar
													</button>
												</div>
											</form>
										</div>
									</div>
									<div class="row" th:if="${item.estat != 'A' and item.estat != null and (#lists.contains({1, 12, 13, 14, 22}, item.tipus)) and (#authentication.principal.isGranted() or #authentication.principal.isAdmin())}">
									    <!-- Añadir más evidencias (solo uq y admin) -->
										<form class="col" enctype='multipart/form-data' method="POST" th:action="${'/procedure/'+instance.idInstancia}">
											<input type="hidden" name="taskid" th:value="${item.idInstanciaTasca}">
											<input type="hidden" name="procid" th:value="${instance.idInstancia}">
											<div class="additional-file-container" th:attr="id='additionalFileContainer'+${item.idInstanciaTasca}"></div>
										</form>
									</div>
									<div class="row" th:unless="${item.estat == 'A'}">
										<form enctype='multipart/form-data' method="POST" action="/admin/instance/task/clear" style="display:inline; margin-right:20px;" th:if="${item.estat != null and (#authentication.principal.isAdmin())}">
											<input type="hidden" name="idInstanciaTasca" th:value="${item.idInstanciaTasca}">
											<div class="btn-toolbar" role="toolbar" style="margin-top:20px;">
												<div class="btn-group w-auto ml-auto" role="group" aria-label="First group" style="margin-left:0px;">
													<button class="btn btn-danger pointer" style="width:30px; height:30px; padding:0;" th:title="#{admin.action.deleteTask}"><i class="fas fa-trash"></i></button>
												</div>
											</div>											
										</form>
										<span style="text-align:left;" th:if="${item.estat != null}">
											<span th:if="${item.tipus == 4}"> <!-- avanzar -->
												<span th:text="#{procedures.done.response}"></span>: <span th:text="#{procedures.status.f}"></span>
											</span>
											<span th:if="${item.tipus == 2 and item.estat == 'S'}"> <!-- pregunta resp si -->
												<span th:text="#{procedures.done.response}"></span>: <span th:text="#{procedures.done.response.s}"></span>
											</span>
											<span th:if="${item.tipus == 2 and item.estat == 'N'}"> <!-- pregunta resp no -->
												<span th:text="#{procedures.done.response}"></span>: <span th:text="#{procedures.done.response.n}"></span>
											</span>
											<span th:if="${#lists.contains({1, 11, 12, 13, 14, 15, 21, 22}, item.tipus)}"> <!-- evidencia -->
												<span th:text="#{procedures.done.evidence}"></span>: 
												<a th:href="${'/download/'+item.idInstanciaTasca}" target="_blank">
													<strong th:text="${item.codiEvidencia}"></strong> <span th:text="${#locale.language} == 'es' ? ${item.nomEvidenciaCas}:${item.nomEvidenciaVal}"></span>
													<i class="fas fa-file-pdf"></i>
												</a>
											</span>
											<br>
											<span><span th:text="#{procedures.done.user}"></span>: <span th:text="${item.usuariFet}"></span></span>
											<br>
											<span><span th:text="#{procedures.done.date}"></span>: <span th:text="${item.dataFet}"></span></span>
										</span>
									</div>
									<div class="container" th:if="${item.versions != null}" style="margin-top:25px;text-align:left;margin-left: 0px;">
										<strong th:if="${#lists.size(item.versions) > 0}" th:text="#{procedures.otherActions}">Acciones realizadas anteriormente</strong>
										<br>
										<div class="row" style="text-align:left;" th:if="${#lists.size(item.versions) > 0}" th:each="version,i : ${item.versions}">
											<hr class="uv-procedure-hr" style="width:100%;text-align:left;margin-left: 0px;">
											<div class="col-1" th:if="${#authentication.principal.isAdmin() or #authentication.principal.isGranted()}" style="flex:0 0 0;width:50px !important;padding:0;">
												<form enctype='multipart/form-data' method="POST" action="/admin/instance/task/remove" style="display: inline;">
													<input type="hidden" name="idInstanciaTasca" th:value="${version.idInstanciaTasca}">
													<div class="btn-toolbar" role="toolbar" style="margin-top:20px;">
														<div class="btn-group w-auto ml-auto" role="group" aria-label="First group" style="margin-left:0px;">
															<button class="btn btn-danger pointer" style="width:30px; height:30px; padding:0;" th:title="#{admin.action.deleteTask}"><i class="fas fa-trash"></i></button>
														</div>
													</div>
												</form>
											</div>
											<div class="col-11">
												<span th:if="${version.tipus == 4}"> <!-- avanzar -->
													<span th:text="#{procedures.done.response}"></span>: <span th:text="#{procedures.status.f}"></span>
												</span>
												<span th:if="${version.tipus == 2 and version.estat == 'S'}"> <!-- pregunta resp si -->
													<span th:text="#{procedures.done.response}"></span>: <span th:text="#{procedures.done.response.s}"></span>
												</span>
												<span th:if="${version.tipus == 2 and version.estat == 'N'}"> <!-- pregunta resp no -->
													<span th:text="#{procedures.done.response}"></span>: <span th:text="#{procedures.done.response.n}"></span>
												</span>
												<span th:if="${version.tipus == 1 or version.tipus == 11 or version.tipus == 15}"> <!-- evidencia -->
													<span th:text="#{procedures.done.evidence}"></span>: 
													<a th:href="${'/download/'+version.idInstanciaTasca}" target="_blank">
														<strong th:text="${version.codiEvidencia}"></strong> <span th:text="${#locale.language} == 'es' ? ${version.nomEvidenciaCas}:${version.nomEvidenciaVal}"></span>
														<i class="fas fa-file-pdf"></i>
													</a>
												</span>
												<br>
												<span><span th:text="#{procedures.done.user}"></span>: <span th:text="${version.usuariFet}"></span></span>
												<br>
												<span><span th:text="#{procedures.done.date}"></span>: <span th:text="${version.dataFet}"></span></span>
											</div>
											<br>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div> 
				<div class="uv-table-group procedure-status" th:if="${instance.estat == 'F'}">
					<strong th:text="#{procedures.closed}"></strong>
				</div>
				<div class="uv-table-group procedure-status" th:if="${instance.estat == 'C'}">
					<strong th:text="#{procedures.cancelled}"></strong>
				</div>
				<div class="uv-table-group procedure-status" th:if="${location == 'supervision'}">
					<a href="/supervision/search" class="btn btn-primary pointer" th:text="#{procedures.back}">Volver</a>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="flowDiagramModal" tabindex="-1" role="dialog" aria-labelledby="flowDiagramModal" aria-hidden="true">
		<div class="modal-dialog modal-xl" >
		  <div class="modal-content">
			  <div class="modal-header">
				  <h5 class="modal-title">Flujo del procedimiento</h5>
				  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					  <span aria-hidden="true">&times;</span>
				  </button>
			  </div>
			  <div class="modal-body">
				<div class="mermaid-def" th:text="${flow}" style="display:none;"></div>
				<div id="flowDiagram" class="mermaid"></div>
			  </div>
			  <div class="modal-footer">
				  <button type="button" class="btn btn-secondary" data-dismiss="modal" th:text="#{global.cancel}">Cerrar</button>
			  </div>
		  </div>
		</div>
	  </div>
	
	<!-- contactModal -->
	<div th:replace="~{layouts/common.html :: contactModal}"></div>
	
	<!-- Footer -->
	<footer class="uv-footer uv-footer-text" th:replace="~{layouts/common.html :: footer}"></footer>
	
	<script th:src="@{/js/jquery/jquery.min.js}"></script>
	<script th:src="@{/js/bootstrap/bootstrap.min.js}"></script>
	<script th:src="@{/js/fa/all.js}"></script>
	<script th:src="@{/js/jquery/jquery.dataTables.min.js}"></script>
	<script th:src="@{/js/jquery/jquery.dataTables.responsive.min.js}"></script>
	<script th:src="@{/js/jquery/jquery.dataTables.rowReorder.min.js}"></script>
	<script th:src="@{/js/bootstrap/dataTables.bootstrap4.min.js}"></script>
	<script th:src="@{/js/jquery-easing/jquery.easing.min.js}"></script>
	<script th:src="@{/js/saic.js}"></script>
	<script th:src="@{/js/datepicker/bootstrap-datepicker.min.js}"></script>
	<script th:src="@{/js/fileinput/js/fileinput.min.js}"></script>
	<script th:src="@{/js/fileinput/themes/fas/theme.js}"></script>
	<script th:src="@{/js/fileinput/js/locales/es.js}" th:if="${#locale.language == 'es'}"></script>
	<script th:src="@{/js/fileinput/js/locales/ca.js}" th:if="${#locale.language != 'es'}"></script>	
	<script th:src="@{/js/confirmation/bootstrap-confirmation.js}"></script>
	<script src="https://cdn.jsdelivr.net/npm/mermaid@11.3.0/dist/mermaid.min.js"></script>
	<script src="https://unpkg.com/@popperjs/core@2"></script>
	<script src="https://unpkg.com/tippy.js@6"></script>
	<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
	<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/themes/light.css" />

  
  	<script th:inline="javascript" th:if="${#authentication.principal.isAdmin()}">
  		var tinyobjectresizing = true;
  	</script>
    
  	<script th:inline="javascript" th:if="${#authentication.principal.isAdmin() or #authentication.principal.isGranted()}">
	  	if (!window.Worker) {
	  		alert(/*[[#{procedures.nosupported}]]*/);
			window.location = '/';
		}
  		var aliveWorker; 
  		var saveWorker;
	    function confirmDelete(){ }
	    function confirmClear(){ }
	    function setSaveInterval(){ console.log('Autosave disabled'); }
	    function setAliveInterval(){
	    	console.log('KeepAlive enabled');
	    	aliveWorker = new Worker(/*[[@{/js/workers/alive_worker.js}]]*/);
	    	aliveWorker.onmessage = keepalive;
	    }
	    var tinyplugins = 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists charmap quickbars checklist tinycomments codeeditor paste';
	    var tinytoolbar = 'save | undo redo | bold italic underline strikethrough forecolor backcolor removeformat | fontfamily fontsize | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist checklist | showcomments | btn-editable btn-noneditable insert-data | codeeditor | topdf fullscreen ';
    	var tinymenu = 'file edit view insert format tools table help';
    	var tinytable = 'table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol';
    	var tinycontextmenu = 'link table useBrowserSpellcheck';
    	var tinytableappearance = true;
    	var tinytableclass = [
    		{title: 'Normal', value: ''},
		    {title: 'Editable', value: 'mceEditable'},
		    {title: 'No editable', value: 'mceNonEditable'},
		    {title: 'Ignorar en el PDF', value: 'mceNonEditable pdfignore'}
		];
    	var tinytableresizebars = true;
    	var tinyadvtab = true;
    	var tinyobjectresizing = false;
		var tinypasteplain = false;
		var tinypasteremovestyles = true;
		const widget = document.getElementById("pdfWidget");
		const preview = document.getElementById("pdfPreviewContainer");
    	
    	function tinyconfigure(editor){
			
			editor.on('keydown', function(e) {
				if (e.keyCode == 8 || e.keyCode == 46) { //backspace and delete keycodes
                    try {
                        var elem = tinymce.activeEditor.selection.getNode(); //current caret node
                        if (elem.classList.contains("mceNonEditable")) {
                        	e.preventDefault();
                            return false;
                        }
                    } catch (e) {console.log(e);}
                }
			});
			
			editor.on('TableModified', function(e) {
				editor.setContent(editor.getContent());	      
			});
			
			editor.ui.registry.addIcon('save', '<i style="font-size:125%;" class="fas fa-save"></i>')
				
			editor.ui.registry.addButton('topdf', {
				icon: 'print',
				tooltip: 'Imprimir a PDF',
		      	onAction: function(_){ 
		      		print_to_pdf(editor.getContent());
		      	}
		    });	
			
			editor.on('FullscreenStateChanged', function () {
				if(tinymce.activeEditor.plugins.fullscreen.isFullscreen()){
					var e = '<span id="exitFullScreen" class="btn btn-primary pointer" style="position:absolute;display:none;float:right;right:15px;top:25px;color:white;background-color:#007bff;padding:8px;cursor:pointer;" onclick="tinymce.activeEditor.execCommand('+"'mceFullScreen'"+');">Volver a SAIC <i class="fas fa-compress-arrows-alt"></i></span>';
					$(e).appendTo($($('.tox-editor-container').get(0)));
					$('#exitFullScreen').show();
				}
				else{
					$('#exitFullScreen').remove();	
				}
			});	
			
			editor.ui.registry.addButton('btn-editable', {
				icon: 'unlock',
				tooltip: 'Desbloquear contenido',
		      	onAction: function(_){ 
		      		var ns = $(editor.selection.getSelectedBlocks()).each(function(b){
		      			$(this).removeClass('mceEditable').removeClass('mceNonEditable').addClass('mceEditable')
		      		});
		      		editor.setContent(editor.getContent());	      		
		      	}
		    });
			
			editor.ui.registry.addButton('btn-noneditable', {
				icon: 'lock',
				tooltip: 'Bloquear contenido',
		      	onAction: function(_){ 
		      		var ns = $(editor.selection.getSelectedBlocks()).each(function(b){
		      			$(this).removeClass('mceEditable').removeClass('mceNonEditable').addClass('mceNonEditable')
		      		});
		      		editor.setContent(editor.getContent());
		      	}
		    });
			
			editor.ui.registry.addMenuItem("useBrowserSpellcheck", {
				text: "Use `Ctrl + Click derecho` para acceder al corrector",
				onAction: function () {
					editor.notificationManager.open({
						text:"Para usar el corrector, mantenga pulsada la tecla Control (Ctrl) y haga click derecho sobre la palabra.",
						type: "info",
						timeout: 5000,
						closeButton: true
					});
				}
			});
			
			editor.ui.registry.addContextMenu("useBrowserSpellcheck", {
				update: function (node) {
					return editor.selection.isCollapsed() ? ["useBrowserSpellcheck"] : [];
				}
			});
			
    	}
    </script>
    
    <script th:inline="javascript" th:unless="${#authentication.principal.isAdmin() or #authentication.principal.isGranted()}">
	    if (!window.Worker) {
	    	alert(/*[[#{procedures.nosupported}]]*/);
			window.location = '/';
    	}
    	var aliveWorker; 
		var saveWorker;
    	function confirmDelete(){ }
	    function confirmClear(){ }
	    function setSaveInterval(){
	    	console.log('AutoSave enabled');
	    	saveWorker = new Worker(/*[[@{/js/workers/autosave_worker.js}]]*/);
	    	saveWorker.onmessage = triggerSave;
	    }
	    function setAliveInterval(){
	    	console.log('KeepAlive enabled');
	    	aliveWorker = new Worker(/*[[@{/js/workers/alive_worker.js}]]*/);
	    	aliveWorker.onmessage = keepalive;
	    }
	    var tinyplugins = 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists charmap quickbars checklist tinycomments paste';
	    var tinytoolbar = 'save | undo redo | bold italic underline strikethrough removeformat | forecolor backcolor | fontfamily fontsize | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | showcomments | charmap | topdf | fullscreen ';
    	var tinymenu = 'file edit';
    	var tinytable = 'tableinsertrowbefore tableinsertrowafter tabledeleterow';
    	var tinycontextmenu = '';
    	var tinytableappearance = false;
    	var tinytableclass = [];
    	var tinytableresizebars = false;
    	var tinyadvtab = false;
    	var tinyobjectresizing = false;
		var tinypasteplain = false;
		var tinypasteremovestyles = true;

    	function tinyconfigure(editor){
    		editor.on('keydown', function(e) {
				if (e.keyCode == 8 || e.keyCode == 46) { //backspace and delete keycodes
                    try {
                        var elem = tinymce.activeEditor.selection.getNode(); //current caret node
                        console.log(elem);
                        if (elem.classList.contains("mceNonEditable")) {
                        	e.preventDefault();
                            return false;
                        }
                    } catch (e) {console.log(e);}
                }
			});		
			
			editor.ui.registry.addIcon('save', '<i style="font-size:125%;" class="fas fa-save"></i>')
				
			editor.ui.registry.addButton('topdf', {
				icon: 'print',
				tooltip: 'Imprimir a PDF',
		      	onAction: function(_){ 
		      		print_to_pdf(editor.getContent());
		      	}
		    });	
			
			editor.on('FullscreenStateChanged', function () {
				if(tinymce.activeEditor.plugins.fullscreen.isFullscreen()){
					var e = '<span id="exitFullScreen" class="btn btn-primary pointer" style="position:absolute;display:none;float:right;right:15px;top:25px;color:white;background-color:#007bff;padding:8px;cursor:pointer;" onclick="tinymce.activeEditor.execCommand('+"'mceFullScreen'"+');">Volver a SAIC <i class="fas fa-compress-arrows-alt"></i></span>';
					$(e).appendTo($($('.tox-editor-container').get(0)));
					$('#exitFullScreen').show();
				}
				else{
					$('#exitFullScreen').remove();	
					
				}
			});	
    	}
	</script>
  
	<script type="text/javascript">
		
	var locale = "[[${#locale.language}]]";
	var fileInvalid = "[[#{procedures.extensionAlert}]]";
	var fullname = "[[${#authentication.principal.nom + ' ' + #authentication.principal.cognoms}]]";
	var username = "[[${#authentication.principal.usuari}]]";
	var msgsave = "[[#{procedures.editor.msgsave}]]";
	var expiredTxt = "[[#{procedures.session.expired}]]";
	var layout;
	var lastActiveTime = new Date().getTime();
	var autosaveTriggered = false;

	mermaid.initialize({ startOnLoad: false, theme: "default", flowchart: { diagramPadding: 5, useMaxWidth:false, htmlLabels:true, wrap: true, wrappingWidth: 750 } });
	
	$(document).ready(function(){ 
		
		setAliveInterval();
		setSaveInterval();
		
		layout = new Layout("");
		layout.initTableLayout({paging:false});
		layout.closeLoadingSpinner(".uv-loading-spinner");
		$('#extensionAlert').hide();
				
		var extensions = ($('#activeOptions').val().replace('.','') === '') ? [] : $('#activeOptions').val().replace('.','').split(';');
		if(extensions.length < 1){
			extensions = ['pdf'];
			if (typeof typeActive !== 'undefined') {
				if(typeActive == 12 | typeActive == 14){
			    	extensions = ['pdf', 'doc', 'docx', 'odt'];
				}
			}
		}
		
		$("#filepicker").fileinput({
			uploadUrl: "/procedure/files/"+$('input[name=procid].active-task').val(),
			uploadExtraData: {taskid:$('input[name=taskid].active-task').val()},
		    uploadAsync: true,
			maxAjaxThreads: 1,
		    showUpload: false,
		    required: true,
		    browseOnZoneClick: true,
		    language: locale,
		    allowedFileExtensions: extensions,
		    previewFileIcon: '<i class="fas fa-file"></i>',
		    theme: 'fas',
		    allowedPreviewTypes: null,
		    removeFromPreviewOnError: true,
		    initialPreviewShowDelete: true,
		    msgFileRequired: locale == 'es'?'Debe seleccionar la evidencia':'Ha de seleccionar l\'evidència',
		    previewFileIconSettings: {
		        'pdf': '<i class="fas fa-file-pdf text-danger"></i>',
		    },
		    fileActionSettings: {
		    	showRemove: true,
		    	showZoom: false,
		    	showUpload: false,
		    	showDrag: false,
		    	removeIcon: '<i class="fas fa-trash"></i>'
		    }
		});
		
		$('#filepicker').on('filebatchuploadcomplete', function(event, data, previewId, index) {
            location.reload(); 
        });
		
		tinymce.init({ 
			selector: '#editor',
			language: locale,
			browser_spellcheck: true,
			plugins: tinyplugins,
			menubar: tinymenu,
			toolbar: tinytoolbar,
			table_toolbar: tinytable,
			tinycomments_author: username,
			tinycomments_author_name: fullname,
			tinycomments_mode: 'embedded',
			tinycomments_can_delete: function(req, done, fail){ done({canDelete: true}); },
			table_advtab: tinyadvtab,
			table_row_advtab: tinyadvtab,
			table_cell_advtab: tinyadvtab,
			table_sizing_mode: 'fixed',
			table_default_styles: {
			    width: '297mm'
			},
			content_style: "body { width: 297mm; max-width: 297mm; font-size: 10pt; font-family: Verdana, Geneva, sans-serif; font-style: normal; font-variant: normal;}",
			font_formats: "Arial=arial,helvetica,sans-serif; Verdana=verdana,geneva;", 
			font_size_formats: '8pt 10pt 12pt 14pt 16pt 18pt 24pt',
			setup: tinyconfigure,
			save_onsavecallback: function(){
				if(autosaveTriggered){
					save_content(false);
					autosaveTriggered = false;
				}
				else{
					save_content(true);
				}
			},
			content_langs: [
			    {title: 'Español', code: 'es'},
			    {title: 'Valencià', code: 'ca'}],   
			image_advtab: true,
			importcss_append: true,
			height: 700,
			image_caption: true,
			quickbars_selection_toolbar: '',
			toolbar_mode: 'sliding',
			contextmenu: tinycontextmenu,
			table_appearance_options: tinytableappearance,
			table_class_list: tinytableclass,
			table_resize_bars: tinytableresizebars,
			verify_html: false,
			cleanup: false,
			valid_elements: '+*[*]',
			paste_as_text: tinypasteplain,
			paste_remove_styles: tinypasteremovestyles,
			paste_strip_class_attributes: true
		});
		
		$('[data-toggle=confirmation]').confirmation({
		    rootSelector: '[data-toggle=confirmation]',
		    container: 'body',
		    btnOkClass: 'btn btn-sm btn-success',
		    btnOkLabel: 'Sí',
		    btnCancelClass: 'btn btn-sm btn-danger',
		    btnCancelLabel: 'No',
		  });	
		  
		if ($.fn.DataTable.isDataTable('#pamTable')) {
			$('#pamTable').DataTable().destroy();
		}

		$('#pamTable').DataTable({
			"searching": false,  
			"ordering": false, 
			"paging": false,    
			"info": false,       
			"responsive": true,
			"autoWidth": false
		});


		var jsonPrueba = [
			{"id":"RH2-1", "objetivo":"Implantar el Manual para la Evaluación de la actividad docente del profesorado(Programa DOCENTIA)", "origen":"SAIC / Informe Externo", "actividades":"Fases 1 a 6 de certificación", "responsable":"Unidad de Calidad / RRHH", "prioridad":"Alta", "cursoInicio":"Curso Inicio:2022", "cursoFin":"Curso fin: 2024", "indicadores":"Profesorado evaluado"," gradoEjecucion":"En desarrollo", "justificacion":"Faltan los trámites de la Fase 6."},
			{"id":"RH2-2","objetivo":null, "origen":null,"actividades":null,"responsable":null,"prioridad":"Alta","cursoInicio":null,"cursoFin":"27/28","indicadores":null,"gradoEjecucion":"En desarrollo","justificacion":null}];

		rebuildPAMTable(jsonPrueba);
		
		$('#pamTable').on('input', 'textarea', function() {
			autoResize(this);
		});
		
		if(widget) {
			dragElement(widget);
			
			widget.ondblclick = function() {
				togglePdfPreview();
			};
		}

		$('#pamTable tbody tr').each(function() {
			$('.curso-select-dinamico').html(generarOpcionesCursos());
		});

		$('#pamTable').on('dblclick', 'td textarea', function() {
			const target = this;
			const currentVal = $(target).val();

			const editorHtml = `
				<div class="p-2" style="width: 400px;">
					<label class="small font-weight-bold">Editor rápido</label>
					<textarea id="popoverEditor" class="form-control mb-2" rows="6">${currentVal}</textarea>
					<div class="text-right">
						<button type="button" id="cancelPop" class="btn btn-xs btn-light">Cancelar</button>
						<button type="button" id="savePop" class="btn btn-xs btn-primary">Guardar</button>
					</div>
				</div>
			`;

			const instance = tippy(target, {
				content: editorHtml,
				allowHTML: true,
				interactive: true,
				trigger: 'manual',
				placement: 'top',
				theme: 'light',
				maxWidth: 'none',
				onShown(instance) {
					$('#popoverEditor').focus();
					
					$('#savePop').on('click', (e) => {
						e.preventDefault();
						e.stopPropagation();
						const newVal = $('#popoverEditor').val();
						$(target).val(newVal);
						autoResize(target);
						instance.hide();
					});


					$('#cancelPop').on('click', (e) => {
						e.preventDefault();
						e.stopPropagation();
						instance.hide();
					});
				},
				onHidden(instance) {
					instance.destroy(); 
				}
			});

			instance.show();
		});
	});
	
	$('#customFile').on("change", function() {
		var fileName = $(this).val().split("\\").pop();
		$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
		if (fileName.split('.').pop().toLowerCase() == "pdf"){
		    $('#custom-file-label').removeClass('file-invalid');
		}
		else{
			$('#custom-file-label').text(fileInvalid)
			$('#custom-file-label').addClass('file-invalid');
			$('#customFile').val("");
		}

	});
	
	function openProcedure(id){
		window.location.replace('/procedure/'+id);
	}
	
	function click_y(){
		$('#action_n').removeClass('btn-n-active');
		$('#action_y').addClass('btn-y-active');
		$('#response').val(1);
	}
	function click_n(){
		$('#action_y').removeClass('btn-y-active');
		$('#action_n').addClass('btn-n-active');
		$('#response').val(0);
	}
	
	function triggerSave(){
		autosaveTriggered = true;
		tinymce.activeEditor.execCommand('mceSave');
		console.log('Autosave triggered');
	}
	
	function keepalive(){
		$.get("/keepalive")
			.done(function(data){
				if(data != 'alive'){
					alert(expiredTxt.replaceAll("&#39;", "'"));
					saveWorker.terminate();
					aliveWorker.terminate();
					window.location.reload();
				}
			})
			.fail(function() {
				alert(expiredTxt.replaceAll("&#39;", "'"));
				saveWorker.terminate();
				aliveWorker.terminate();
				window.location.reload();
			});
	}
	
	function saveEditorWithConfirmation(){
		tinymce.activeEditor.setDirty(true);
		tinymce.activeEditor.execCommand('mceSave');
		alert(msgsave);
	}
	
	function createFilepicker(procId, taskId){
		$('.additional-file-container').empty();
		$('#additionalFileContainer'+taskId).html('<input class="additional-file-input" id="filepicker'+taskId+'" multiple type="file" name="evidencias">'
			+'<br><span class="btn btn-success pointer" onclick="$(\'#filepicker'+taskId+'\').fileinput(\'upload\');">Confirmar</span><br><br><br>');
		$("#filepicker"+taskId).fileinput({
			uploadUrl: "/procedure/files/"+procId,
			uploadExtraData: {taskid:taskId},
		    uploadAsync: true,
		    showUpload: true,
		    required: true,
		    browseOnZoneClick: true,
		    language: locale,
		    allowedFileExtensions: ['pdf'],
		    previewFileIcon: '<i class="fas fa-file"></i>',
		    theme: 'fas',
		    allowedPreviewTypes: null,
		    removeFromPreviewOnError: true,
		    initialPreviewShowDelete: true,
		    msgFileRequired: locale == 'es'?'Debe seleccionar la evidencia':'Ha de seleccionar l\'evidència',
		    previewFileIconSettings: {
		        'pdf': '<i class="fas fa-file-pdf text-danger"></i>',
		    },
		    fileActionSettings: {
		    	showRemove: true,
		    	showZoom: false,
		    	showUpload: false,
		    	showDrag: false,
		    	removeIcon: '<i class="fas fa-trash"></i>'
		    }
		});
		
		$('#filepicker'+taskId).on('filebatchuploadsuccess', function(event, data) {
		    var form = data.form, files = data.files, extra = data.extra,
		        response = data.response, reader = data.reader;
		    window.location.href = window.location.href;
		});
		
	}
		
	
	function save_content(manualDraftSave){
		$.post("/procedure/save/"+idInstanciaTasca, 
			   {text:tinymce.activeEditor.getContent(),
				manual: manualDraftSave
			})
			.done(function(d){
				$('#lastmoddate').text(d);
				console.log('content saved at'+d);
			});	
	}
	
	function print_to_pdf(content){
		$('<form id="tmpDownloadForm" method="post" action="/download/pdf/preview" target="_blank">' +
			'<input type="text" name="idtascai" value="'+$('input[name="taskid"]').val()+'" />' +
		  	'<textarea id="tmpDownloadContent" type="hidden" name="content">' +
		  		tinymce.activeEditor.getContent() +
		  	'</textarea>' +
		  '</form>')
		.appendTo('body')
		.submit()
		.remove();	
	}
	
	function showComments(){
		setTimeout(function(){
			if(typeActive == 15){
				tinymce.activeEditor.execCommand("ToggleSidebar", false, "showcomments");
			}
		}, 700);	
	}

	function target_popup(form) {
		//window.open('', 'formpopup', 'width=1350,height=800,resizeable,scrollbars');
		window.open('', 'formpopup', 'width=1350,height=800,resizeable');
		form.target = 'formpopup';
	}

	function showFlowDiagram(){
		if($('#flowDiagramContainer').is(":visible")){
			hideFlowDiagram();
		}
		else{
			$('#flowDiagramContainer').show();
			mermaid.run({querySelector:'.mermaid'});
		}
	}

	function hideFlowDiagram(){
		$('#flowDiagramContainer').hide();
	}

	function downloadFlowDiagram() {
		const svgElement = document.querySelector('svg[aria-roledescription="flowchart-v2"]');
		const filename = 'flujo_procedimiento_'+$('#procedure_code').text();

		if(!svgElement) {
			console.error('No se encontró ningún SVG.');
			return;
		}

		const clonedSvg = svgElement.cloneNode(true);
		const width = parseInt(clonedSvg.getAttribute('width') || 800);
		const height = parseInt(clonedSvg.getAttribute('height') || 600);

		// Embebemos los estilos de Mermaid en el SVG
		const style = document.createElement('style');
		style.textContent = Array.from(document.styleSheets)
			.filter(s => !s.href || s.href.startsWith(window.location.origin))
			.map(sheet => {
				try {
					return Array.from(sheet.cssRules).map(rule => rule.cssText).join('\n');
				} catch (e) {
					return '';
				}
			})
			.join('\n');
		clonedSvg.insertBefore(style, clonedSvg.firstChild);
		const svgData = new XMLSerializer().serializeToString(clonedSvg);
		const svgBase64 = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));

		const img = new Image();
		img.onload = function () {
			const canvas = document.createElement('canvas');
			canvas.width = width;
			canvas.height = height;
			const ctx = canvas.getContext('2d');
			ctx.fillStyle = '#ffffff';
			ctx.fillRect(0, 0, canvas.width, canvas.height);

			ctx.drawImage(img, 0, 0);

			const pngUrl = canvas.toDataURL('image/png');
			const link = document.createElement('a');
			link.href = pngUrl;
			link.download = filename;
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		};
		img.src = svgBase64;
	}

	function addNewRowPAM() {
		const tableBody = document.querySelector('#pamTable tbody');
		const filas = tableBody.querySelectorAll('tr');
		let nuevoId ="RH-1";

		if (filas.length > 0) {}{
			const ultimaFila = filas[filas.length - 1];
			const ultimoIdTexto = ultimaFila.querySelector('td').innerText.trim();
			const partes = ultimoIdTexto.match(/^(.*-)(\d+)$/);
			
			if (partes) {
				const prefijo = partes[1];
				const numero = parseInt(partes[2]) + 1; 
				nuevoId = prefijo + numero.toString().padStart(2, '0');
			}
		}
		const newRow = document.createElement('tr');
		const opcionesDinamicas = generarOpcionesCursos();

		newRow.innerHTML = `
						<td><small>${nuevoId}</small></td>
						<td><textarea class="form-control form-control-sm" rows="3" placeholder="Objetivo..."></textarea></td>
						<td>
							<select class="form-control form-control-sm">
								<option>SAIC</option>
								<option>Autoinforme</option>
								<option>Informe Externo</option>
							</select>
						</td>
						<td><textarea class="form-control form-control-sm" rows="3" placeholder="Actividades..."></textarea></td>
						<td><textarea class="form-control form-control-sm" rows="2" placeholder="Responsable..."></textarea></td>
						<td>
							<select class="form-control form-control-sm">
								<option>Alta</option>
								<option>Media</option>
								<option>Baja</option>
							</select>
						</td>
						<td><select class="form-control form-control-sm">${opcionesDinamicas}</select></td>
        				<td><select class="form-control form-control-sm">${opcionesDinamicas}</select></td>
						<td><textarea class="form-control form-control-sm" rows="2" placeholder="Indicadores"></textarea></td>
						<td>
							<select class="form-control form-control-sm">
								<option>Planificación</option>
								<option>En desarrollo</option>
								<option>Finalizado</option>
								<option>Cancelada</option>
							</select>
						</td>
						<td><textarea class="form-control form-control-sm" rows="2" placeholder="Justificación"></textarea></td>
	`;

		tableBody.appendChild(newRow);

		newRow.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
	}

	function autoResize(textarea) {
		textarea.style.height = 'auto';
		textarea.style.height = textarea.scrollHeight + 'px';
	}

	function dragElement(elmnt) {
		let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
		elmnt.onmousedown = dragMouseDown;

		function dragMouseDown(e) {
			e = e || window.event;
			pos3 = e.clientX;
			pos4 = e.clientY;
			document.onmouseup = closeDragElement;
			document.onmousemove = elementDrag;
		}

		function elementDrag(e) {
			e = e || window.event;
			e.preventDefault();
			pos1 = pos3 - e.clientX;
			pos2 = pos4 - e.clientY;
			pos3 = e.clientX;
			pos4 = e.clientY;
			elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
			elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
			elmnt.style.right = 'auto'; 
		}

		function closeDragElement() {
			document.onmouseup = null;
			document.onmousemove = null;
		}
	}

	function togglePdfPreview() {
		const $preview = $("#pdfPreviewContainer");
		const $widget = $("#pdfWidget");
		const $tableContainer = $('.table-responsive'); 
		const $table = $('#pamTable');

		if ($preview.is(":hidden")) {
			const isRight = $widget.offset().left > (window.innerWidth / 2);

			$widget.fadeOut(200);

			$preview.addClass('active-split');
			
			if (isRight) {
				$preview.css({ left: 'auto', right: '0' });
				$tableContainer.addClass('table-split-right').removeClass('table-split-left');
			} else {
				$preview.css({ left: '0', right: 'auto' });
				$tableContainer.addClass('table-split-left').removeClass('table-split-right');
			}

			$table.addClass('compact-mode');
			
			$preview.fadeIn(300).css("display", "flex");

			setTimeout(function() {
				if ($.fn.DataTable.isDataTable('#pamTable')) {
					$('#pamTable').DataTable().columns.adjust();
				}
			}, 310);
		} else {
			closePdfPreview();
		}
	}
	
	function closePdfPreview(event) {
		if(event) {
			event.preventDefault(); 
			event.stopPropagation();
		}
		const $preview = $("#pdfPreviewContainer");
		const $widget = $("#pdfWidget");
		const $tableContainer = $('.table-responsive');
		const $table = $('#pamTable');

		$tableContainer.removeClass('table-split-right table-split-left');
		$table.removeClass('compact-mode');
		$preview.removeClass('active-split');

		$preview.fadeOut(200, function() {
			$widget.fadeIn(300);
		});
	}

	function generarOpcionesCursos() {
		const fechaActual = new Date();
		const añoActual = fechaActual.getFullYear();
		const mesActual = fechaActual.getMonth();

		let cursoActual = (mesActual >= 7) ? añoActual : añoActual - 1;

		let html = '<option value="">Seleccionar...</option>';

		for (let i = -3; i <= 3; i++) {
			let inicio = cursoActual + i;
			let fin = inicio + 1;
			let texto = `${inicio.toString().slice(-2)}/${fin.toString().slice(-2)}`;
			html += `<option value="${texto}">${texto}</option>`;
		}

		return html;
	}

	function rebuildPAMTable(data) {
		const tableBody = $('#pamTable tbody');
		tableBody.empty();

		if (!data || data.length === 0) return;

		const renderInputOrStatic = function(value, placeholder, rows = 2) {
			if (value === null || value === undefined || value === "" || value === "null") {
				return `<textarea class="form-control form-control-sm" rows="${rows}" placeholder="${placeholder}"></textarea>`;
			} else {
				return `<small class="text-dark">${value}</small>`;
			}
		};

		data.forEach(item => {
			const row = $('<tr></tr>');

			row.html(`
				<td>
					<small>${item.id || ''}</small>
				</td>
				<td>${renderInputOrStatic(item.objetivo, "Objetivo...", 3)}</td>
				<td>
					<select class="form-control form-control-sm">
						<option value="SAIC" ${item.origen === 'SAIC' ? 'selected' : ''}>SAIC</option>
						<option value="Autoinforme" ${item.origen === 'Autoinforme' ? 'selected' : ''}>Autoinforme</option>
						<option value="Informe Externo" ${item.origen === 'Informe Externo' ? 'selected' : ''}>Informe Externo</option>
					</select>
				</td>
				<td>${renderInputOrStatic(item.actividades, "Actividades...", 3)}</td>
            	<td>${renderInputOrStatic(item.responsable, "Responsable...")}</td>
				<td>
					<select class="form-control form-control-sm">
						<option value="Alta" ${item.prioridad === 'Alta' ? 'selected' : ''}>Alta</option>
						<option value="Media" ${item.prioridad === 'Media' ? 'selected' : ''}>Media</option>
						<option value="Baja" ${item.prioridad === 'Baja' ? 'selected' : ''}>Baja</option>
					</select>
				</td>
				<td><select class="form-control form-control-sm curso-inicio-val">${generarOpcionesCursos()}</select></td>
            	<td><select class="form-control form-control-sm curso-fin-val">${generarOpcionesCursos()}</select></td>
				<td>${renderInputOrStatic(item.indicadores, "Indicadores...")}</td>
				<td>
					<select class="form-control form-control-sm">
						<option value="Planificación" ${item.gradoEjecucion === 'Planificación' ? 'selected' : ''}>Planificación</option>
						<option value="En desarrollo" ${item.gradoEjecucion === 'En desarrollo' ? 'selected' : ''}>En desarrollo</option>
						<option value="Finalizado" ${item.gradoEjecucion === 'Finalizado' ? 'selected' : ''}>Finalizado</option>
						<option value="Cancelada" ${item.gradoEjecucion === 'Cancelada' ? 'selected' : ''}>Cancelada</option>
					</select>
				</td>
				<td>${renderInputOrStatic(item.justificacion, "Justificación...")}</td>
			`);
			tableBody.append(row);
		});

		tableBody.find('textarea').each(function() {
			if (typeof autoResize === 'function') autoResize(this);
		});
	}

	function processPAMTable(actionType) {
		var data = [];
		var rows = $('#pamTable tbody tr');

		rows.each(function() {
			var row = $(this);
			
		var getVal = function(cellIndex) {
            var cell = row.find('td').eq(cellIndex);
            var input = cell.find('textarea, select, input');
            
            if (input.length > 0) {
                return input.val(); 
            } else {
                return cell.text().trim(); 
            }
        };
			var rowData = {
				"id":             getVal(0),
				"objetivo":       getVal(1),
				"origen":         getVal(2),
				"actividades":    getVal(3),
				"responsable":    getVal(4),
				"prioridad":      getVal(5),
				"cursoInicio":    getVal(6),
				"cursoFin":       getVal(7),
				"indicadores":    getVal(8),
				"gradoEjecucion": getVal(9),
				"justificacion":  getVal(10)
			};

			if (rowData.id !== "") {
				data.push(rowData);
			}
		});

		var jsonResult = JSON.stringify(data);
		$('#pam_json_data').val(jsonResult);

		if (actionType === 'draft') {
			console.log("Generando Borrador JSON:", jsonResult);
			alert("Borrador de la tabla generado correctamente en el sistema.");
		} else {
			if (data.length === 0) {
				alert("La tabla está vacía. Por favor, añade al menos una acción.");
				return false;
			}
			console.log("Enviando JSON definitivo:", jsonResult);
		}
	}
				
	</script>

</body>

</html>
