<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://kwonnam.pe.kr/jsp/template-inheritance" prefix="layout"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<layout:extends name="layouts/base.jsp">
<layout:put block="contents" type="REPLACE">
<div id="element-to-print">
<h2 class="mb-3" style="text-align: center;">
Detalle Postulante ${postulante.nombre} ${postulante.apellido}
</h2>
<div class="row gy-3 container">
<div class="col-md-6">
<div class="card mb-3">
<div class="card-body">
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Nombre</h6>
</div>
<div class="col-sm-9 text-secondary">
${postulante.nombre} ${postulante.apellido}
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Email</h6>
</div>
<div class="col-sm-9 text-secondary">
${postulante.correo}
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Vive en</h6>
</div>
<div class="col-sm-9 text-secondary">
${postulante.getCiudad().getNombre()}, ${postulante.getCiudad().getDepartamento().getNombre()}
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Nro de documento</h6>
</div>
<div class="col-sm-9 text-secondary">
${postulante.tipoDocumento}: ${postulante.nroDocument}
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Teléfono</h6>
</div>
<div class="col-sm-9 text-secondary">
${postulante.telefono}
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Edad</h6>
</div>
<div id="edad" class="col-sm-9 text-secondary"></div>
<input style="display: none;" id="dob" value="${postulante.fechaNacimiento}">
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Dirección</h6>
</div>
<div class="col-sm-9 text-secondary">
${postulante.direccion}
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Nivel de inglés</h6>
</div>
<div class="col-sm-9 text-secondary">
${postulante.nivelIngles}
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Estado civil</h6>
</div>
<div class="col-sm-9 text-secondary">
${postulante.estadoCivil.getDescripcion()}
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Nacionalidad</h6>
</div>
<div class="col-sm-9 text-secondary">
${postulante.nacionalidad.getDescripcion()}
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Estado</h6>
</div>
<div class="col-sm-9 text-secondary">
${postulante.estadoPostulante.getEstado()}
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<h6 class="mb-0">Observación</h6>
</div>
<div class="col-sm-9 text-secondary">
${postulante.getComentarioRRHH()}
</div>
</div>
<hr>
<div id="buttonRow" style="display: block">
<div class="row">
<div class="col-4">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#estadoModalLong">Agregar observación</button>
</div>
<div class="col-4">
<div class="dropdown">
<button class="dropdown-toggle btn btn-light" role="button" data-bs-toggle="dropdown" aria-expanded="false">
PDF
</button>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a id="pdf" type="button" class="dropdown-item">Imagen</a></li>
<li><a class="dropdown-item" target="__blank" href="/postulantes/${postulante.id}/pdf">Info</a></li>
</ul>
</div>
</div>
<c:choose>
<c:when test = "${cvId != null}">
<div class="col-4">
<a class="btn btn-link" target="__blank" href="/postulantes/cvFile/${cvId}">Descargar CV</a>
</div>
</c:when>
</c:choose>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row gy-3">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<div id="carouselExampleIndicators" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-inner">
<h6 class="d-flex justify-content-between fw-bold px-1">
<c:choose>
<c:when test="${postulante.experiencias.size() > 1}">
<i class="bi bi-arrow-left-circle-fill" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"></i>
Experiencia(s)
<i class="bi bi-arrow-right-circle-fill" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"></i>
</c:when>
<c:otherwise>
Experiencia(s)
</c:otherwise>
</c:choose>
</h6>
<c:forEach items="${postulante.experiencias}" var="detalle_experiencia" varStatus="status">
<div class="pdf-carousel carousel-item ${status.first ? 'active' : ''}" data-bs-interval="false">
<ul class="list-group list-group-flush ">
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<h6 class="mb-0">Institución</h6>
<span class="text-secondary">${detalle_experiencia.getInstitucion()}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<h6 class="mb-0">Fecha inicio</h6>
<span class="text-secondary"><fmt:formatDate value="${detalle_experiencia.getFechaDesde()}" pattern="dd-MM-yyyy" /></span>
<!-- <input style="display:none;" id="fechaInicioExp" value="${detalle_experiencia.getFechaDesde()}">
<span style="display: none;" class="text-secondary" id="fechaInicioExp2">${detalle_experiencia.getFechaDesde()}</span>-->
</li>
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<h6 class="mb-0">Fecha fin</h6>
<span class="text-secondary"><fmt:formatDate value="${detalle_experiencia.getFechaHasta()}" pattern="dd-MM-yyyy" /></span>
<!-- <input style="display:none;" id="fechaFinExp" value="${detalle_experiencia.getFechaHasta()}">
<span style="display: none;" class="text-secondary" id="fechaFinExp2">${detalle_experiencia.getFechaHasta()}</span>-->
</li>
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<h6 class="mb-0">Referencia</h6>
<span class="text-secondary">${detalle_experiencia.getNombreReferencia()}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<h6 class="mb-0">Teléfono de la referencia</h6>
<span class="text-secondary">${detalle_experiencia.getTelefonoReferencia()}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<h6 class="mb-0">Cargo</h6>
<span class="text-secondary">${detalle_experiencia.getCargo()}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<h6 class="mb-0">Motivo de salida</h6>
<span class="text-secondary">${detalle_experiencia.getMotivoSalida()}</span>
</li>
<hr class="lineas-pdf" style="display: none"/>
</ul>
</div>
</c:forEach>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<div id="carouselExampleIndicators1" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-inner">
<h6 class="d-flex justify-content-between fw-bold px-1">
<c:choose>
<c:when test="${postulante.estudios.size() > 1}">
<i class="bi bi-arrow-left-circle-fill" data-bs-target="#carouselExampleIndicators1" data-bs-slide="prev"></i>
Estudio(s)
<i class="bi bi-arrow-right-circle-fill" data-bs-target="#carouselExampleIndicators1" data-bs-slide="next"></i>
</c:when>
<c:otherwise>
Estudio(s)
</c:otherwise>
</c:choose>
</h6>
<c:forEach items="${postulante.estudios}" var="detalle_estudios" varStatus="status">
<div class="pdf-carousel carousel-item ${status.first ? 'active' : ''}" data-bs-interval="false">
<ul class="list-group list-group-flush ">
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<h6 class="mb-0">Institución</h6>
<span class="text-secondary">${detalle_estudios.getInstitucion().getNombre()}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<h6 class="mb-0">Fecha inicio</h6>
<span class="text-secondary"><fmt:formatDate value="${detalle_estudios.getFechaDesde()}" pattern="dd-MM-yyyy" /></span>
<!-- <input style="display:none;" id="fechaInicioEst" value="${detalle_estudios.getFechaDesde()}">-->
</li>
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<h6 class="mb-0">Fecha fin</h6>
<span class="text-secondary"><fmt:formatDate value="${detalle_estudios.getFechaHasta()}" pattern="dd-MM-yyyy" /></span>
<!-- <input style="display:none;" id="fechaFinEst" value="${detalle_estudios.getFechaHasta()}">-->
</li>
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<h6 class="mb-0">Tipo de estudio</h6>
<span class="text-secondary">${detalle_estudios.getTipoDeEstudio()}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<h6 class="mb-0">Tema de estudio</h6>
<span class="text-secondary">${detalle_estudios.getTemaDeEstudio()}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<h6 class="mb-0">Estado</h6>
<span class="text-secondary">${detalle_estudios.getEstado()}</span>
</li>
<hr class="lineas-pdf" style="display: none"/>
</ul>
</div>
</c:forEach>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">
<h6 class="text-start fw-bold">Tecnología(s)</h6>
<c:forEach items="${postulante.tecnologias}" var="detalle_tecnologia">
<small>${detalle_tecnologia.getTecnologia().getNombre()}</small>
<div class="progress mb-3" style="height: 5px">
<div class="progress-bar bg-primary" role="progressbar" style="width: ${(detalle_tecnologia.getNivel() / 5) * 100}%" aria-valuenow="${detalle_tecnologia.getNivel()}" aria-valuemin="1" aria-valuemax="5"></div>
</div>
</c:forEach>
<hr>
<h6 class="text-start fw-bold">Cargo(s) al que postula</h6>
<ul class="list-group list-group-flush">
<c:forEach items="${postulante.postulaciones}" var="convocatoria">
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<div class="ms-2 me-auto">
<div class="fw-bold">${convocatoria.getCargo().getNombre()}</div>
Inició en: <fmt:formatDate value="${convocatoria.getFechaInicio()}" pattern="dd/MM/yyyy" />
<c:if test="${convocatoria.getFechaFin() != null}">
<br>
Finalizó el: <fmt:formatDate value="${convocatoria.getFechaFin()}" pattern="dd/MM/yyyy" />
</c:if>
</div>
</li>
</c:forEach>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h6 class="text-start fw-bold">Referencias personales</h6>
<ul class="list-group list-group-flush">
<c:forEach items="${postulante.referencias}" var="referencia">
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
<h6 class="mb-0">${referencia.nombre}, ${referencia.relacion}, ${referencia.telefono}</h6>
<span class="text-secondary"></span>
</li>
</c:forEach>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="estadoModalLong" tabindex="-1" role="dialog" aria-labelledby="estadorrhhModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form:form class="needs-validation" method="post" modelAttribute="postulante">
<div class="modal-header">
<h5 class="modal-title" id="estadorrhhModal">Estado</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form:label path="estadoPostulante" class="form-label">Estado</form:label>
<div class="inputs">
<form:select class="form-select" path="estadoPostulante" aria-label="Default select example">
<c:forEach items="${estadoP}" var="estadoPostulante">
<c:choose>
<c:when test="${estadoPostulante.getEstado()=='Nuevo' }">
</c:when>
<c:otherwise>
<form:option value="${estadoPostulante}">${estadoPostulante.getEstado()}</form:option>
</c:otherwise>
</c:choose>
</c:forEach>
</form:select>
</div>
<div class="inputs">
<form:label path="comentarioRRHH" class="form-label">ObservaciónRRHH</form:label>
<form:textarea class="form-control" path="comentarioRRHH" id="comentarioRRHH"></form:textarea>
</div><br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
<button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Agregar</button>
</div>
</form:form>
</div>
</div>
</div>
</div>
</layout:put>
<layout:put block="scripts" type="APPEND">
<script src="/js/valEdad.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
document.querySelector('#pdf').addEventListener("click", async ()=>{
var buttonsRow = document.querySelector('#buttonRow');
var element = document.getElementById('element-to-print');
var carousels = document.querySelectorAll(".pdf-carousel");
var hrs = document.querySelectorAll(".lineas-pdf");
var opt = {
margin: [1, 1, 1, 1],
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 1, height: 1400, width: 1300 },
jsPDF: { unit: 'in', format: 'a2', orientation: 'portrait' }
};
buttonsRow.style.display = "none";
carousels.forEach((element)=>{
element.classList.remove('carousel-item')
});
hrs.forEach((element)=>{
element.style.display = "block"
});
await html2pdf().set(opt).from(element).toPdf().save();
buttonsRow.style.display = "block";
carousels.forEach((element)=>{
element.classList.add('carousel-item')
});
hrs.forEach((element)=>{
element.style.display = "none"
});
})
<%--location.replace("/postulantes/${postulante.id}/")--%>
</script>
</layout:put>
</layout:extends>