<!DOCTYPE html>
<style> 
	 table.pago tbody td, table.pago thead th 
	 {
	     border    : 1px solid black;
	     text-align: center;              
	     font-size : 10px;
	     min-width : 90px;
	     padding: 0px 0px 0px 0px;
	 }  
	 
	 table.pago input{
	      padding: 0px 0px 0px 0px;
	      border:0px solid #000; 
	      margin:0; 
	      background:transparent;
	      width:100%;     
	      font-size : 10px;      
	      text-align: left;
	 } 
</style>

<%@include file="/jsp/common/defaultTopLogin.jsp"%>
<script src="${contextPath}/js/dda/contrato/terminos/terminos.js?v=${versionJS}"></script>
<script src="${contextPath}/js/dda/contrato/terminos/Termino.js?v=${versionJS}"></script>
<script src="${contextPath}/js/dda/contrato/terminos/TituloTermino.js?v=${versionJS}"></script> 
<script src="${contextPath}/js/dda/contrato/terminos/PagoTermino.js?v=${versionJS}"></script>
<script src="${contextPath}/js/dda/contrato/terminos/TerminoService.js?v=${versionJS}"></script>
<script src="${contextPath}/js/common/perfil/perfilController.js?v=${versionJS}"></script>
<script src="${contextPath}/js/common/perfil/perfilService.js?v=${versionJS}"></script>

<form name="myform" id="formaId" enctype="multipart/form-data"> 	  
    <input type="hidden" id="pmn" name="pmn" value="${request.pmn}" />
    <input type="hidden" id="tipoCto"/>
    <input type="hidden" id="fechaInicioCto"/>

	<div class="form-inline">    					
	   <div class="form-group col-xs-4">
		    <label for="costoContrato">Costo del Contrato</label>
		    <input type="text" class="form-control" id="costoContrato" readOnly >		    
	   </div>
  
  	   <div class="form-group col-xs-4"></div>
  	   
  	   <div class="form-group col-xs-4">
		   	<label for="costoMateriales"><span style="padding-left:30px">Materiales</span></label>
		   	<input type="text" class="form-control" id="costoMateriales" readOnly>		   	
	   </div>
	   	   	   	   
	   <div class="form-group col-xs-4">
			<br>	   
		    <label for="montoProgramado">Monto Programado</label>
		    <input type="text" class="form-control" id="montoProgramado" readOnly>
	   </div>
  
  	   <div class="form-group col-xs-4"></div>
  	   
  	   <div class="form-group col-xs-4">
  	   		<br>
		   	<label for="montoPendiente">Monto Pendiente</label>
		   	<input type="text" class="form-control" id="montoPendiente" readOnly>
	   </div>
	   <br><br>   
	</div>

	<br><br><br><br>

	<div class="form-group">
		<br>
		<div class="checkbox col-xs-7">
	  		  <label><input id="cbanticipo" type="checkbox" onclick="mostrarAnticipo()"> Anticipo</label>
	  		  <div id="divAnticipo" class="container col-xs-12" style="display:none;">
	  		      <br>
				  <table id="tAnticipado" class="table pago">
				    <thead>
				      <tr class="encabezado">
				        <th>Monto</th>
				        <th>Fecha</th>
				        <th>Comentario</th>
				      </tr>
				    </thead>
				    <tbody>
				      <tr>
				        <td width="20%"><input type="text" id="antMonto"/></td>
				        <td width="10%"><input type="text" id="antFecha"/></td>
				        <td width="70%"><input type="text" id="antComentario"/></td>
				      </tr>			    
				    </tbody>
				  </table>
			</div>				  		 
	    </div>
	    
	    <br>
	    <div class="radio col-xs-7">
	  		<label><input id="rbPagoMensual" type="radio" name="optradio" onclick="mostrarPagoDefinido();">Pagos Mensuales</label>
		</div>
		<br>
		<div class="radio col-xs-7">
	  		<label><input id="rbPagoDefinido" type="radio" name="optradio" onclick="mostrarPagoDefinido();">Pagos Predefinidos</label>
		</div>
		<div id="divPredefinido" class="container" style="display:none;">
			<div class="radio col-xs-7">		  		  
		  		  <label><input id="rbPagoInicio" type="radio" name="optradio2" onclick="mostrarPagoPeriodico();">Pago al inicio de la exhibición</label>		  		  
		    </div>
		    <br>
		    <div class="radio col-xs-7">
		  		<label><input id="rbPeriodico" type="radio" name="optradio2" onclick="mostrarPagoPeriodico();">Pagos Periódicos</label>
			</div>
			<div id="divPeriodico" class="container col-xs-7" style="display:none;">
			    <br>
				<table id="tPeriodicos" class="table pago">
				    <thead>
				      <tr class="encabezado">
				        <th width="25%">Monto</th>
				        <th width="15%">Fecha</th>
				        <th width="55%">Comentario</th>
				        <th width="5%">				        	
				        	<span data-toggle='tooltip' title='Agregar Pago' onclick="agregarFilaPago();" style="color:white;"><i class="fa fa-plus" aria-hidden="true"></i></span>
						</th>
				      </tr>
				    </thead>
				    <tbody>				      			    
				    </tbody>
				  </table>
			</div>
			<div id="divBtnConfig" class="container col-xs-2">
			    <br>
			    <button id="btnConfig" type="button" class="btn btn-primary btn-lg " data-toggle="modal" data-target="#divConfig" style="display:none;">Configurar</button>			    
			</div>
			
		</div>
	</div>
			
	<br>
    <div class="form-group col-xs-9">
	     <label for="comment">Comentarios General:</label>
	     <textarea class="form-control" rows="3" id="comment"></textarea>
	</div>
	
	<br>
	<div class="form-group col-xs-7">
		<label>Sección Títulos</label>
	</div>	
	
	<div class="row col-xs-7">	    
		<div class="form-group col-xs-4">			
			<label for="totalTitulos" style="padding-left:30%;">Total de Títulos:</label>
		</div>
		<div class="form-group col-xs-4">
	    	<input class="form-control" type="text" id="totalTitulos" onchange="ajustarTablaServicios();" readOnly/>
	    </div>
	</div>
	
	<div class="container col-xs-7">	      	     
		  <table class="table pago" id="tTitulos">
		    <thead>
		      <tr>
			    <th>Servicio</th>
			    <th>Porcentaje</th>
			    <th>Titulos</th>
			    <th>Monto</th>
			  </tr>
		    </thead>
			<tbody>			  			    
			</tbody>
		  </table>
	</div>
	
	<div class="row col-xs-7">	    
		<div class="form-group col-xs-4">			
			<label for="promedio" style="padding-left:30%;">Promedio:</label>
		</div>
		<div class="form-group col-xs-4">
	    	<input class="form-control" type="text" id="promedio" readonly/>
	    </div>
	</div>		
               
     <br>
     <br> 
     <div id="divJustificacion" class="form-group">
     		<div  class="col-md-8" >
	    		<label for="justificacion" class="control-label">Justificacion:</label>
	    	</div>
		    <div  class="col-md-10" >
		       <jsp:include page="/jsp/dda/contrato/common/justificacion.jsp" />
			   <textarea class="form-control" rows="3" id="justificacion" name="justificacion" maxlength="150">${justificacion}</textarea>					   
			</div>
	</div>
	
	<div class="form-group">
             <div class="col-xs-6">
                   <a href="../../contrato/listado/irListado?pmn=<%=pmnReturn%>&tipoContrato=${tipoContrato}" class="btn btn-default col-xs-4" roll="button" >Regresar</a> 
                    <div class="col-xs-2"></div>         
 		           <button id="subirDoc" class="btn btn-info col-xs-4" type="button" data-toggle="modal" data-target="#modalDocum">Subir documento</button>	           
             </div>
             <div class="col-xs-2"></div>
             <div class="col-xs-4">
        	       <button class="btn btn-success" type="button" onclick="guardarTermino();">Guardar cambios</button>
             </div>
     </div>     
	
</form>

<div id="divConfig" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Configuración de Pagos Periódicos</h4>
      </div>
      <div class="modal-body">                	        	
				<label id="labErrAddPer" style="color:red;"></label>
				<div class='row'>
					<div class="col-xs-2">					    
						<label>Periodo</label>
					</div>						
					<div class="col-xs-5">
						 <select class="form-control" id="selPeriodo">
						    <option value="1">Mensual</option>
						    <option value="2">Bimestral</option>
						    <option value="3">Trimestral</option>
						    <option value="6">Semestral</option>
						    <option value="12">Anual</option>
						 </select>
					</div>
				</div>
				<br>
				<div class='row'>
					<div class="col-xs-2">						
						<label for="txtPago">Número Pagos</label>
					</div>						
					<div class="col-xs-5">
						<input type="text" class="form-control" id="txtPago">
					</div>
				</div>
				<br>
				<div class='row'>
					<div class="col-xs-2">
						<label for="txtFechaInicio">Fecha Inicio:</label>
					</div>						
					<div class="col-xs-5">
						  <input type="text" class="form-control datepicker" id="txtFechaInicio">
					</div>
				</div>
			</div>
				
			<div class='modal-footer'>									
			   	<button type='button' id="aceptarPerFlat" class='btn btn-default' onclick="generarPeriodos();" >Generar Períodos</button>				    						
			</div>
		</div>
	  </div>
	</div>	
			
<jsp:include page="/jsp/dda/contrato/common/uploadDocument.jsp" />
<%@include file="/jsp/common/defaultBottomLogin.jsp"%>