<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="templates/validar.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<!--Estilos plantilla-->
<%@include file="templates/header.jsp" %>
<!--Estilos plantilla-->
<!--Estilos propios-->
<link href="../css/pages/index.css" rel="stylesheet" type="text/css"/>
<!--<link href="../js/lib/jquery-confirm-master/jquery-confirm.min.css" rel="stylesheet" type="text/css"/>-->
<!--Estilos propios-->
<link href="../css/pages/colors.css" rel="stylesheet" type="text/css"/>
<link href="../css/pages/general.css" rel="stylesheet" type="text/css"/>
<style>
/* .tp-sin-asignar{
width: 150px;
}*/
</style>
</head>
<body onload="cargar();">
<input id="codTitulo" type="hidden" value="<%= menu != null ? menu.getCodigoTitulo() : 0%>">
<input id="codModulo" type="hidden" value="<%= menu != null ? menu.getCodigoModulo() : 0%>">
<input id="codCategoria" type="hidden" value="<%= menu != null ? menu.getCodigoCategoria() : 0%>">
<input id="codSubCategoria" type="hidden" value="<%= menu != null ? menu.getCodigoSubcategoria() : 0%>">
<!--navbar - sidebar-->
<%@include file="templates/header-body.jsp" %>
<!--navbar - sidebar-->
<%@include file="templates/page-header.jsp" %>
<!--contenido-->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel so-card-2">
<div class="panel-heading bg-primary">
<h6 class="panel-title text-semibold">
<i class="fa fa-search fa-lg"></i> Busqueda de vacantes
</h6>
<div class="heading-elements">
</div>
</div>
<div class="panel-body">
<form action="#" method="post" id="formBusquedaFichaPendiente" name="formBusquedaFichaPendiente">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="cboSede" class="text-semibold">Sede </label>
<select class="bootstrap-select" data-width="100%" id="cboSede" name="cboSede">
<option value="0">[ TODOS ]</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="cboArea" class="text-semibold">Área </label>
<select class="bootstrap-select" data-width="100%" id="cboArea" name="cboArea">
<option value="0">[ TODOS ]</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="cboCargo" class="text-semibold">Cargo </label>
<select class="bootstrap-select" data-width="100%" id="cboCargo" name="cboCargo">
<option value="0">[ TODOS ]</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-danger text-right text-semibold">
(*) Campos obligatorios
</div>
</div>
</form>
</div>
<div class="panel-footer panel-footer-transparent">
<div class="row">
<div class="col-md-12 text-center">
<button type="button" class="btn bg-primary text-center" id="btnBusquedaFichaPendiente"><i class="fa fa-search fa-lg position-left"></i> Buscar</button>
<button type="button" class="btn bg-orange btn-ladda btn-ladda-progress" data-style="expand-right" data-spinner-size="20" id="btnLimpiarFiltro">
<span class="ladda-label"><i class="fa fa-refresh fa-lg"></i> Limpiar</span>
<span class="ladda-spinner"></span>
<div class="ladda-progress" style="width: 158px;"></div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel so-card-2">
<div class="panel-heading bg-primary">
<h6 class="panel-title text-semibold">
<i class="fa fa-file fa-lg"></i> Listado de vacantes
<!--<a class="heading-elements-toggle"><i class="icon-more"></i></a>-->
</h6>
<div class="heading-elements">
<!-- <button type="button" class="btn btn-success btn-sm" id="btnAbrirModalRegistrarNuevaFicha">
<i class="fa fa-plus fa-lg position-left"></i> Nueva ficha
</button>-->
</div>
</div>
<!--<div class="table-responsive">-->
<table class="table table-xxs table-bordered" id="tblVacantes">
<thead >
<tr>
<th>#</th>
<th class="text-center">SEDE</th>
<th class="text-center">AREA</th>
<th class="text-center">CARGO</th>
<th>VACANTES</th>
<th>OCUPADOS</th>
<th>ESTADO</th>
<th>ACCIONES</th>
</tr>
</thead>
</table>
</div>
<!--</div>-->
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<!-- List of latest updates -->
<div class="panel so-card-2">
<div class="panel-heading bg-primary">
<h6 class="panel-title text-semibold">
<i class="fa fa-bookmark fa-lg"></i> Leyenda
</h6>
<div class="heading-elements">
<ul class="icons-list">
<li><a data-action="collapse"></a></li>
</ul>
</div>
</div>
<div class="panel-body">
<ul class="media-list" id="leyenda">
</ul>
</div>
</div>
</div>
</div>
<div id="modalAsignarDisponibilidad" class="modal fade">
<div class="modal-dialog modal-lg" id="app">
<div class="modal-content">
<div class="modal-header bg-primary">
<h6 class="modal-title"><i class="fa fa-user fa-lg"></i> Asignación de disponibilidad</h6>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="display-block text-uppercase text-semibold">SEDE: </label>
<span id="lblSede" class="label border-left-primary label-striped text-light fix-label"> </span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="display-block text-uppercase text-semibold">ÁREA: </label>
<span id="lblArea" class="label border-left-primary label-striped text-light fix-label"> </span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="display-block text-uppercase text-semibold">CARGO: </label>
<span id="lblCargo" class="label border-left-primary label-striped text-light fix-label"> </span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="display-block text-uppercase text-semibold">VACANTES TOTALES: </label>
<div class="row">
<div class="col-md-4">
<input v-model="vacante" @keyup="helperVacante(event)" maxlength="3" type="text" class="form-control vacanteNumber" style="font-weight: 500; font-size: 16px; ">
</div>
<div class="col-md-8">
<ul class="icons-list" style="padding-top:8px;">
<li style="margin-right:12px;margin-left:12px;">
<a href="#" onclick="return false" @click="sumarVacante"><i style="font-size:22px;" class="fa fa-user-plus fa-lg"></i></a>
</li>
<li>
<a href="#" onclick="return false" @click="restarVacante"><i style="font-size:22px;" class="fa fa-user-times fa-lg"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="display-block text-uppercase text-semibold">VACANTES OCUPADAS: </label>
<span v-text="vacanteOcupada" style="font-size:16px; width: 40px;" class="label bg-primary"> </span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="display-block text-uppercase text-semibold">VACANTES DISPONIBLES: </label>
<span v-text="vacanteDisponible" style="font-size:16px; width: 40px;" class="label bg-success"> </span>
</div>
</div>
</div>
</div>
<div class="modal-footer text-center">
<button type="button" class="btn bg-primary" v-on:click="asignarVacante"><i class="fa fa-pencil fa-lg"></i> Asignar</button>
<button type="button" class="btn bg-danger" id="btnCerrarModalAsignarDisponibilidad"><i class="fa fa-close fa-lg"></i> Cerrar</button>
</div>
</div>
</div>
</div>
<!--contenido-->
<!--javascript plantilla-->
<%@include file="templates/footer-body.jsp" %>
<!--boostrap select-->
<script type="text/javascript" src="../plantilla/assets/js/plugins/forms/selects/bootstrap_select.min.js"></script>
<!--boostrap select-->
<!--datatable-->
<script type="text/javascript" src="../plantilla/assets/js/plugins/tables/datatables/datatables.min.js"></script>
<!--datatable-->
<!--select 2-->
<script type="text/javascript" src="../plantilla/assets/js/plugins/forms/selects/select2.min.js"></script>
<!--select 2-->
<!--jquery confirm-->
<script src="../js/lib/jquery-confirm-master/jquery-confirm.min.js" type="text/javascript"></script>
<!--jquery confirm-->
<!--spinner ladda-->
<script type="text/javascript" src="../plantilla/assets/js/plugins/buttons/spin.min.js"></script>
<script type="text/javascript" src="../plantilla/assets/js/plugins/buttons/ladda.min.js"></script>
<!--spinner ladda-->
<script src="../js/lib/axios.min.js" type="text/javascript"></script>
<!--javascript general-->
<script src="../js/pages/general.js" type="text/javascript"></script>
<!--javascript general-->
<!--vuejs-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--vuejs-->
<script src="../js/lib/simple-input-validate.js" type="text/javascript"></script>
<!--javascript propios-->
<script src="../js/pages/menu.js" type="text/javascript"></script>
<script src="../js/pages/vacantes.js" type="text/javascript"></script>
<!--javascript propios-->
</body>
</html>
<% }
%>