<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>
<script src="<?php echo ADMIN_URL;?>/assets/js/bootstrap-select.min.js"></script>
<script src="<?php echo ADMIN_URL;?>/assets/js/bootstable.js"></script>
<script src="<?php echo ADMIN_URL;?>/assets/js/bootstrap-autocomplete.min.js"></script>
	
	<!-- Botones Buques y Guardar -->
	<div class="row">
		<div class="col-xl-12">
			<div class="breadcrumb-holder">
				<h1 class="main-title float-left"><i class="fa fa-calendar"></i> Programar Servicio</h1>
					<ol class="breadcrumb float-right">						
						<a id="btnGuardar" role="button" href="#" class="btn btn-warning"><span class="btn-label"><i class="fa fa-save"></i></span>Guardar</a>
                    </ol>
                <div class="clearfix"></div>
            </div>
		</div>
	</div>

	<!-- Información del servicio -->
	<div class="row">
		<!-- <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
			<h6> Codigo de trazabilidad </h6>
			<input id="txtCodigoTrazabilidad" type="text" style="color: #28a745; font-weight: bolder; font-size: 16pt;" class="form-control" maxlength="10">
		</div> -->
		<!-- <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 offset-md-2 offset-lg-2"> -->
		<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
			<h5> Patente / Agencia </h5>
			<select id="idAgenciaPatente" class="form-control selectpicker" data-live-search="true">
				<!-- Listado clientes -->
			</select>
		</div>
		
		<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
			<h5> Dependiente Agencia </h5>
			<select id="idDependienteAA" class="form-control selectpicker">
				<!-- Listado personal de cliente seleccionado -->
				<option value="-1"> Seleccione una agencia o patente primero.</option>
			</select>
		</div>
		
	</div>

	<!-- Información de la mercancia -->
	<hr>

	<div class="row" style="padding-top:1%;">
		<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
			<h6> Relaci&oacute;n de Pedimentos </h6>
			<div id="tablaRelPedimentos" style="background-color: white; text-align: center; ">
				<table class="table">
					<thead>
						<tr style="background-color: #528933; font-weight: bold; color: white;">
							<th>Pedimento</th>
							<th>Referencia</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td contenteditable="true">0</td>
							<td contenteditable="true">0</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" style="vertical-alignment: center;">
			<br/>
			<button class="btn btn-success text-center" id="btnAgregarPedimento" style="background-color: #528933; border-color: #528933;">
				<i class="fa fa-plus" style="color: white"></i>
			</button>
		</div>
	</div>


	<div class="row" style="padding-top:1%; width: 100%;">
		<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
			<h6> Importador </h6>
			<select id="ddlImportador" class="form-control selectpicker" data-live-search="true">
				<!-- Listado personal de cliente seleccionado -->
				<option value="-1">-- Seleccione --</option>
			</select>
		</div>
	</div>

	<div class="row" style="padding-top:1%;">
		<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
			<h6> Tipo de Carga </h6>
			<select id="selectTipoCarga" class="form-control">
				<!-- Tipos de carga -->
			</select>
		</div>
		<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
			<br/>
			<div class="form-check align-middle">
				<input class="form-check-input" type="checkbox" value="1" id="checkIMO">
				<label class="form-check-label" for="checkIMO">
					IMO
				</label>
			</div>
		</div>
		
	</div>

	<hr/>

	<div class="row" style="padding-top:1%; display: none;" id="divDetalleCarga">
		<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
			<h6> Detalle de la Carga </h6>
			<div id="tablaDetalleCarga" style="background-color: white; text-align: center; ">
				<table class="table">
					<thead>
						<tr style="background-color: #528933; font-weight: bold; color: white;">
							<th>Dimensi&oacute;n</th>
							<th>Contenedor</th>
							<!--<th>C&oacute;digo de Trazabilidad</th>-->
						</tr>
					</thead>
					<tbody>
						<tr>
							<td contenteditable="true">
								<select class="select form-control selectTipoCarga">
									<option value="-1">Selecione una Opci&oacute;n</option>
									<option value="1">Contenedor de 20"</option>
									<option value="2">Contenedor de 40"</option>
								</select>
							</td>
							<td contenteditable="true">0</td>
							<!--<td contenteditable="true">0</td>-->
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" style="vertical-alignment: center;">
			<br/>
			<button class="btn btn-success text-center" id="btnAgregarCarga" style="background-color: #528933; border-color: #528933;">
				<i class="fa fa-plus" style="color: white"></i>
			</button>
		</div>
	</div>

	<div class="row" style="padding-top:1%; display: none;" id="divDetalleCargaSuelta">
		<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
			<h6> Detalle de la Carga </h6>
			<div id="tablaDetalleCargaSuelta" style="background-color: white; text-align: center; ">
				<table class="table">
					<thead>
						<tr style="background-color: #528933; font-weight: bold; color: white;">
							<th>Cantidad</th>
							<th>Peso</th>
							<!--<th>C&oacute;digo Trazabilidad</th>-->
						</tr>
					</thead>
					<tbody>
						<tr>
							<td contenteditable="true">0</td>
							<td contenteditable="true">0</td>
							<!--<td contenteditable="true">0</td>-->
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	
	<!-- ? -->
<input type="hidden" id="hdImo">
<script src="<?php echo ADMIN_URL;?>/Scripts/serviciosProgramar.js"></script>
