<script src="<?php echo ADMIN_URL;?>/assets/js/jquery.dataTables.min.js"></script>
<script src="<?php echo ADMIN_URL;?>/assets/js/dataTables.bootstrap4.min.js"></script>
	
<div id="divGenerales"> 
	<div class="row">
		<div class="col-xl-12">
			<div class="breadcrumb-holder" style="padding-bottom: 10px;">
				<h1 class="main-title float-left"><i class="fa fa-folder"></i> Servicios <span class="etiquetaVerde" id="spanTitulo">Historico<span></span></span></h1>
					<ol class="breadcrumb float-right">
					<a id="btnFiltrar" role="button" href="#" class="btn btn-secondary" style="margin-right: 10px;"><span class="btn-label"><i class="fa fa-filter"></i></span>Filtros</a>
                    </ol>
                <div class="clearfix"></div>
            </div>
		</div>
	</div>
	
	<div class="row">	
		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">						
			<div class="card mb-12">				
				<div class="card-body">
					<table id="tablaServiciosProgramados" class="table table-bordered table-hover display" cellspacing="0" width="100%">
						<thead>
							<tr>
								<th>Folio</th>
								<th>Fecha registro</th>
								<th>Tipo carga</th>
								<th>Contenedor</th>
								<th>Cantidad</th>
								<th>Imo</th>
								<th>Estado</th>
								<th></th>
							</tr>							
						</thead>
						<tbody>
							
						</tbody>
					</table>
				</div>
			</div>
		</div>			
	</div>	
</div>	

<div id="divDetalle" style="display:none">
	<input type="hidden" id="hfNidServicio">
	
	<div class="row">
		<div class="col-xl-12">
			<div class="breadcrumb-holder">
				<h1 class="main-title float-left"> Folio: MOV<span class="etiquetaVerde" id="spanFolio"> - - - <span></h1>
									<ol class="breadcrumb float-right">
					<a id="btnRegresar" role="button" href="#" class="btn btn-secondary" style="margin-right: 10px;"><span class="btn-label"><i class="fa fa-mail-reply"></i></span>Regresar</a>
					<a id="btnImprimir" role="button" href="#" class="btn btn-secondary" style="margin-right: 10px;"><span class="btn-label"><i class="fa fa-print"></i></span>Imprimir</a>
				<!--	<a id="btnResetear" role="button" href="#" class="btn btn-secondary" style="margin-right: 10px;"><span class="btn-label"><i class="fa fa-retweet"></i></span>Resetear</a>
					<a id="btnCobrar" role="button" href="#" class="btn btn-danger" style="margin-right: 10px;"><span class="btn-label"><i class="fa fa-dollar"></i></span>Genera cobro</a> -->
				</ol>
                <div class="clearfix"></div>
            </div>
		</div>
	</div>
	
    <!-- end row -->
	<div class="row">

			
		<div class="col-xs-12 col-sm-12 col-lg-12" style="margin-top: 1rem;margin-bottom: 1rem;border: 0;border-bottom: 1px solid rgba(0,0,0,.1);">
			<strong><h6><i class="fa fa-file-o" style="padding-right: 10px;padding-left: 5px;"></i>Servicio <span class="etiquetaVerde" id="spanFolio">Generales<span></h6></strong>
		</div>

		<div class="col-xs-12 col-sm-6 col-lg-6">
			<table class="table tablaInformativa">
				<tbody>										
					<tr>
						<td class="tablaEtiqueta"><strong>Agencia:</strong></td>
						<td class="tablaDato"><span id="spanAgencia"> - - - </span></td>
					</tr>					
					<tr>
						<td class="tablaEtiqueta"><strong>Dependiente:</strong></td>
						<td class="tablaDato"><span id="spanDependiente"> - - - </span></td>
					</tr>
					<tr>
						<td class="tablaEtiqueta"><strong>Tipo carga:</strong></td>
						<td class="tablaDato"><span id="spanTipoCarga"> - - - </span></td>
					</tr>
					<tr>
						<td class="tablaEtiqueta"><strong>Tipo servicio:</strong></td>
						<td class="tablaDato"><span id="spanTipoServicio"> - - - </span></td>
					</tr>
					<tr>
						<td class="tablaEtiqueta"><strong>Importador:</strong></td>
						<td class="tablaDato"><span id="spanImportador"> - - - </span></td>
					</tr>
					<tr>
						<td class="tablaEtiqueta"><strong>Cantidad:</strong></td>
						<td class="tablaDato"><span id="spanCantidad"> - - - </span></td>
					</tr>					
				</tbody>
			</table>
		</div>
		<div class="col-xs-12 col-sm-6 col-lg-6">
			<table class="table tablaInformativa">
				<tbody>										
					<tr>
						<td class="tablaEtiqueta"><strong>Patente:</strong></td>
						<td class="tablaDato"><span id="spanPatente"> - - - </span></td>
					</tr>					
					<tr>
						<td class="tablaEtiqueta"><strong>Vista/Fiscal:</strong></td>
						<td class="tablaDato"><span id="spanFiscal"> - - - </span></td>
					</tr>
					<tr>
						<td class="tablaEtiqueta"><strong>Imo:</strong></td>
						<td class="tablaDato"><span id="spanImo"> - - - </span></td>
					</tr>
					<tr>
						<td class="tablaEtiqueta"><strong>Cant. Desconsolidar:</strong></td>
						<td class="tablaDato"><span id="spanCantidadDesconsolidar"> - - - </span></td>
					</tr>
					<tr>
						<td class="tablaEtiqueta"><strong>Binomio canino:</strong></td>
						<td class="tablaDato"><span id="spanCanino"> - - - </span></td>
					</tr>
					<tr>
						<td class="tablaEtiqueta"><strong>Peso:</strong></td>
						<td class="tablaDato"><span id="spanPeso"> - - - </span></td>
					</tr>					
				</tbody>
			</table>
		</div>
		
		<div class="col-xs-12 col-sm-12 col-lg-12">
			<table class="table tablaInformativa">
				<tbody>										
					<tr>
						<td class="tablaEtiqueta" style="width: 150px;"><strong>Facturar:</strong></td>
						<td class="tablaDato"><span id="spanFacturar"> - - - </span></td>
					</tr>
					<tr>
					    <td class="tablaEtiqueta" style="width: 150px;"><strong>Observaciones Carga:</strong></td>
						<td class="tablaDato"><span id="spanObservacionesCarga"> - - - </span></td>
					</tr>
					<tr>
					    <td class="tablaEtiqueta" style="width: 150px;"><strong>Observaciones Desconsolidacion:</strong></td>
						<td class="tablaDato"><span id="spanObservacionesDesc"> - - - </span></td>
					</tr>
					<tr>
					    <td class="tablaEtiqueta" style="width: 150px;"><strong>Observaciones Muestreo:</strong></td>
						<td class="tablaDato"><span id="spanObservacionesMuestreo"> - - - </span></td>
					</tr>					
				</tbody>
			</table>
		</div>
		
		<div class="col-xs-12 col-sm-12 col-lg-12" style="margin-top: 1rem;margin-bottom: 1rem;border: 0;border-bottom: 1px solid rgba(0,0,0,.1);">
			<strong><h6><i class="fa fa-file-text-o" style="padding-right: 10px;padding-left: 5px;"></i>Servicio <span class="etiquetaVerde" id="spanFolio">Pedimentos<span></h6></strong>
		</div>

		<div class="col-xs-12 col-sm-12 col-lg-12">
			<table id="tablaPedimentos" class="table tablaInformativa">
				<thead>
					<tr>
						<th>
							Pedimento
						</th>
						<th>
							Referencia
						</th>
					</tr>
				</thead>
			</table>
		</div>
		
		<div id="divEncabezadoContenedor" class="col-xs-12 col-sm-12 col-lg-12" style="margin-top: 1rem;margin-bottom: 1rem;border: 0;border-bottom: 1px solid rgba(0,0,0,.1);">
			<strong><h6><i class="fa fa-cubes" style="padding-right: 10px;padding-left: 5px;"></i>Servicio <span class="etiquetaVerde" id="spanFolio">Contenedores<span></h6></strong>
		</div>

		<div id="divTablaContenedor" class="col-xs-12 col-sm-12 col-lg-12">
			<table id="tablaContenedor" class="table tablaInformativa">
				<thead>
					<tr>
						<th>
							Dimension
						</th>
						<th>
							Contenedor
						</th>
						<th>
							Sello original
						</th>
						<th>
							Sello nuevo
						</th>
					</tr>
				</thead>
			</table>
		</div>
		
		<div class="col-xs-12 col-sm-12 col-lg-12" style="margin-top: 1rem;margin-bottom: 1rem;border: 0;border-bottom: 1px solid rgba(0,0,0,.1);">
			<strong><h6><i class="fa fa-wrench" style="padding-right: 10px;padding-left: 5px;"></i>Servicio <span class="etiquetaVerde" id="spanFolio">Material utilizado<span></h6></strong>
		</div>

		<div class="col-xs-12 col-sm-12 col-lg-12">
			<table id="tablaMateriales" class="table tablaInformativa">
				<thead>
					<tr>
						<th>
							Descripcion
						</th>
						<th>
							Cantidad
						</th>
						<th>
							UM
						</th>
					</tr>
				</thead>
			</table>
		</div>
		
		<div class="col-xs-12 col-sm-12 col-lg-12" style="margin-top: 1rem;margin-bottom: 1rem;border: 0;border-bottom: 1px solid rgba(0,0,0,.1);">
			<strong><h6><i class="fa fa-users" style="padding-right: 10px;padding-left: 5px;"></i>Servicio <span class="etiquetaVerde" id="spanFolio">Pesonal moversa<span></h6></strong>
		</div>

		<div class="col-xs-12 col-sm-12 col-lg-12">
			<table id="tablaPersonal" class="table tablaInformativa">
				<thead>
					<tr>
						<th>
							Nombre
						</th>
					</tr>
				</thead>
			</table>
		</div>
		
		<div class="col-xs-12 col-sm-12 col-lg-12" style="margin-top: 1rem;margin-bottom: 1rem;border: 0;border-bottom: 1px solid rgba(0,0,0,.1);">
			<strong><h6><i class="fa fa-gear" style="padding-right: 10px;padding-left: 5px;"></i>Servicio <span class="etiquetaVerde" id="spanFolio">Bitacora<span></h6></strong>
		</div>

		<div class="col-xs-12 col-sm-12 col-lg-12">
			<table id="tablaBitacora" class="table tablaInformativa">
				<thead>
					<tr>
						<th>
							Descripcion
						</th>
						<th>
							Fecha-Hora
						</th>
					</tr>
				</thead>

			</table>
		</div>
		<div class="col-xs-12 col-sm-12 col-lg-12" style="margin-top: 1rem;margin-bottom: 1rem;border: 0;border-bottom: 1px solid rgba(0,0,0,.1);">
			<strong><h6><i class="fa fa-dollar" style="padding-right: 10px;padding-left: 5px;"></i>Servicio <span class="etiquetaVerde" id="spanFolio">Totales<span></h6></strong>
		</div>

		<div class="col-xs-12 col-sm-12 col-lg-12">
			<table class="table">
				<thead>
					<tr>
						<th>
							Monto servicio
						</th>
						<th>
							Monto Material
						</th>
						<th>
							Total
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="tablaDato"><span id="spanMontoServicio"> - - - </span></td>
						<td class="tablaDato"><span id="spanMontoMaterial"> - - - </span></td>
						<td class="tablaDato"><span id="spanTotal"> - - - </span></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

	<!-- Proforma -->
	<div class="modal fade" id="popupFiltros" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Filtros para la busqueda</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="col-xs-6">
				<div class="form-group">
					<label>Desde</label>
					<div class="input-group mb-2 mr-sm-2">
						<div class="input-group-prepend">
							<div class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></div>
						</div>
						<input id="txtFechaInicio" type="text" class="form-control" >
					</div>                                 
				</div>
			</div>
			<div class="col-xs-6">
				<div class="form-group">
					<label>Hasta</label>
					<div class="input-group mb-2 mr-sm-2">
						<div class="input-group-prepend">
							<div class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></div>
						</div>
						<input id="txtFechaFinal" type="text" class="form-control">
					</div>                                 
				</div>
			</div>
			<div class="col-xs-6">
				<div class="form-group">
					<label>Folio</label>
					<div class="input-group mb-2 mr-sm-2">
						<div class="input-group-prepend">
							<div class="input-group-text"><i class="fa fa-gear" aria-hidden="true"></i></div>
						</div>
						<input type="txtFolio" class="form-control">
					</div>                                 
				</div>
			</div>			
		  </div>
		  <div class="modal-footer">
		    <button id="btnConsultar" type="button" class="btn btn-secondary"><i class="iconoBoton fa fa-search"></i> Consultar</button>
			<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="iconoBoton fa fa-close"></i>Cancelar</button>			
		  </div>
		</div>
	  </div>
	</div>
	<script src="<?php echo ADMIN_URL;?>/Scripts/reporteServicio.js"></script>
	<script src="<?php echo ADMIN_URL;?>/Scripts/serviciosHistorico.js"></script>
