<!DOCTYPE html>
<html>
	<?php $this->load->view("template/header"); ?>
	<?php $this->load->view("template/nav"); ?>

	<style>
		.autocomplete {
  			position: relative;
		}
		
		.autocomplete-items {
  			position: absolute;
  			border: 1px solid #d4d4d4;
  			border-bottom: none;
  			border-top: none;
  			z-index: 99;
  			/*position the autocomplete items to be the same width as the container:*/
  			top: 100%;
  			left: 0;
  			right: 0;
		}

		.autocomplete-items div {
  			padding: 10px;
  			cursor: pointer;
  			background-color: #fff; 
  			border-bottom: 1px solid #d4d4d4; 
		}

		/*when hovering an item:*/
		.autocomplete-items div:hover {
  			background-color: #e9e9e9; 
		}

		/*when navigating through the items using the arrow keys:*/
		.autocomplete-active {
  			background-color: DodgerBlue !important; 
  			color: #ffffff; 
		}

        .form-control, 
        #btn_buscar, 
        #btn_buscar_color,
        #btn_buscar_marca, 
        #btn_nuevo_color,
        #btn_nuevo_marca {
            height: calc(1.5em + 0.75rem + 2px); /* Altura uniforme */
            padding: 0.375rem 0.75rem; /* Padding uniforme */
            font-size: 16px;
            line-height: 1.5;
        }

        #btn_buscar, 
        #btn_buscar_color,
        #btn_buscar_marca {
            width: 150px;
        }

        #btn_nuevo_color,
        #btn_nuevo_marca {
            min-width: 150px; /* Ancho mínimo para el botón */
            width: auto; /* Ajusta el ancho según el contenido */
            max-width: 200px; /* Ancho máximo */
            margin-left: 10px; /* Elimina el margen izquierdo */
            margin-top: 10px; /* Margen superior para separación */
            display: inline-block; /* Asegura que el botón no se expanda más allá de su contenido */
        }

        .form-group {
            margin-bottom: 0; /* Ajusta el espacio entre los campos */
        }

        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .table {
            width: 100%;
            margin-bottom: 1rem;
            background-color: transparent;
        }

        .card-footer {
            padding: 10px; /* Elimina padding para evitar el desalineamiento */
            display: flex; /* Usa flex para alinear el contenido */
            align-items: center; /* Centra verticalmente los elementos en el contenedor */    
        }

        .required {
            color: red;
            margin-left: 5px;
        }

        .dataTables_length select {
            min-width: 60px; /* Ajusta el tamaño según sea necesario */
            padding-right: 20px; /* Agrega espacio adicional para las flechas */
        }

        /* Responsive design */
        @media (max-width: 768px) {
            .card-body .row {
                flex-direction: column; /* Cambia la dirección del flex para pantallas pequeñas */
            }

            #btn_buscar,
            #btn_buscar_color,
            #btn_buscar_marca,
            #btn_nuevo_color,
            #btn_nuevo_marca {
                width: 100%; /* Hace que los botones ocupen todo el ancho en pantallas pequeñas */
            }
        }
	</style>

	<div class="content-wrapper">
		<div class="content-header">
			<div class="container-fluid">
				<div class="row mb-2">
					<div class="col-sm-6">
						<h1 class="m-0">Vehículos</h1>
					</div>
	
					<div class="col-sm-6">
						<ol class="breadcrumb float-sm-right">
							<!-- <li class="breadcrumb-item"><a href="#" onclick="mySession()" class="nav-link">Cerrar Sesión</a></li> -->
						</ol>
					</div>
				</div>
			</div>
		</div>

		<section class="content">
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-12">
						<div class="card card-secondary">
							<div class="card-header">
								<h3 class="card-title">Datos de busqueda</h3>
							</div>
					
							<form id="quickForm" autocomplete="off">
								<div class="card-body">
									<div class="row">
										<div class="col-12 col-sm-4 col-md-3 col-lg-2 mt-1 mb-1">
											<div class="form-group">
												<label for="exampleInputEmail1">Placa</label>
												<input type="text" name="selectPlaca" class="form-control" id="selectPlaca" placeholder="Placa">
											</div>
										</div> 

										<div class="col-12 col-sm-4 col-md-3 col-lg-2 mt-1 mb-1">
											<div class="form-group">
												<label>Tipo</label>
												<select class="custom-select" id="cmb_tipoVeh">
													<option value="null">-- Seleccionar --</option>
													<?php foreach($clasematricula as $k9) { ?>
														<option value="<?=$k9['IdClaseMatricula']?>"><?=$k9['NombreClase']?></option>
													<?php } ?>  
												</select>
											</div>
										</div> 

										<div class="col-12 col-sm-4 col-md-3 col-lg-2 mt-1 mb-1">
											<div class="form-group autocomplete">
												<label>Marca</label>
												<input type="text" name="myInput" class="form-control" id="myInput" placeholder="Marca" onkeyup="mayus(this);">
											</div>
										</div> 

										<div class="col-12 col-sm-4 col-md-3 col-lg-2 mt-1 mb-1 d-flex align-items-end">
											<button type="button" id="btn_buscar" class="btn btn-primary">Buscar</button>
										</div>
									</div>
								</div> 

								<div class="card-body">
									<div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
                                        <div class="table-responsive">
											<table id="example1" class="table table-bordered table-striped dataTable dtr-inline" role="grid" aria-describedby="">
											    <thead>
													<tr role="row">
														<th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Placa</th>
														<th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Clase</th>
														<th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Marca</th>
														<th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Tipo</th>
														<th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Modelo</th>
														<th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Huésped</th>
														<th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Identificación</th>
														<th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Móvil</th>
													</tr>
												</thead>
												<tbody>
												</tbody>
												<tfoot>
													<tr>
														<th rowspan="1" colspan="1" style="">Placa</th>
														<th rowspan="1" colspan="1" style="">Clase</th>
														<th rowspan="1" colspan="1" style="">Marca</th>
														<th rowspan="1" colspan="1" style="">Tipo</th>
														<th rowspan="1" colspan="1" style="">Modelo</th>
														<th rowspan="1" colspan="1" style="">Huésped</th>
														<th rowspan="1" colspan="1" style="">Identificación</th>
														<th rowspan="1" colspan="1" style="">Móvil</th>
													</tr>
												</tfoot>
											</table>
										</div>	
									</div>
								</div> 
							</form>
						</div>
		      		</div>
      			</div>
    		</div>
  		</section>

		<div class="content-header">
			<div class="container-fluid">
				<div class="row mb-2">
					<div class="col-sm-6">
						<h1 class="m-0">  Opciones Vehículos </h1>
					</div>
				</div>
			</div>
		</div>

		<section class="content">
			<div class="container-fluid">
				<div class="row">
					
					<!-- COLORES VEHICULOS -->
			  		<div class="col-md-6">
						<div class="card card-secondary">
							<div class="card-header">
								<h2 class="card-title"> <b> Colores Vehículos </b> </h2>
							</div>
					
							<form id="quickForm" autocomplete="off">
								<div class="card-body">
									<div class="row">
										<div class="col-12 col-sm-4 col-md-3 col-lg-2 mt-1 mb-1">
											<div class="form-group autocomplete">
												<label>Color</label>
												<input type="text" name="opt_color_veh" class="form-control" id="opt_color_veh" placeholder="Color" onkeyup="mayus(this);">
											</div>
										</div> 

										<div class="col-12 col-sm-4 col-md-3 col-lg-2 mt-1 mb-1 d-flex align-items-end">
											<button type="button" id="btn_buscar_color" class="btn btn-primary">Buscar</button>
										</div>
									</div>
								</div> 

								<div class="card-body">
									<div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4">
                                        <div class="table-responsive">
											<table id="example2" class="table table-bordered table-striped dataTable dtr-inline" role="grid" aria-describedby="">
												<thead>
													<tr role="row">
														<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" style="">Id</th>
														<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" style="">Color</th>
														<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" style="">Código MT</th>
														<th class="sorting" tabindex="0" aria-controls="example3" rowspan="1" colspan="1" style="">Estado</th>
														<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" style="">Acciones</th>
													</tr>
												</thead>
												<tbody>
												</tbody>
												<tfoot>
													<tr>
														<th rowspan="1" colspan="1" style="">Id</th>
														<th rowspan="1" colspan="1" style="">Color</th>
														<th rowspan="1" colspan="1" style="">Código MT</th>
														<th rowspan="1" colspan="1" style="">Estado</th>
														<th rowspan="1" colspan="1" style="">Acciones</th>
													</tr>
												</tfoot>
											</table>
										</div>
									</div>
								</div> 
					
								<div class="card-footer">
									<button type="button" id="btn_nuevo_color" class="btn btn-primary col-md-1 ">Nuevo</button>
								</div>
							</form>
						</div>
        			</div> 
     	 	
					<!-- MARCAS VEHICULOS -->
					<div class="col-md-6">
						<div class="card card-secondary">
							<div class="card-header">
								<h2 class="card-title"> <b> Marcas Vehículos </b> </h2>
							</div>
					
							<form id="quickForm" autocomplete="off">
								<div class="card-body">
									<div class="row">
										<div class="col-12 col-sm-4 col-md-3 col-lg-2 mt-1 mb-1">
											<div class="form-group autocomplete">
												<label>Marcas</label>
												<input type="text" name="opt_marca_veh" class="form-control" id="opt_marca_veh" placeholder="Marca" onkeyup="mayus(this);">
											</div>
										</div> 

										<div class="col-12 col-sm-4 col-md-3 col-lg-2 mt-1 mb-1 d-flex align-items-end">
											<button type="button" id="btn_buscar_marca" class="btn btn-primary">Buscar</button>
										</div>
									</div>
								</div> 

								<div class="card-body">
									<div id="example3_wrapper" class="dataTables_wrapper dt-bootstrap4">
                                        <div class="table-responsive">
											<table id="example3" class="table table-bordered table-striped dataTable dtr-inline" role="grid" aria-describedby="">
												<thead>
													<tr role="row">
														<th class="sorting" tabindex="0" aria-controls="example3" rowspan="1" colspan="1" style="">Id</th>
														<th class="sorting" tabindex="0" aria-controls="example3" rowspan="1" colspan="1" style="">Marca</th>
														<th class="sorting" tabindex="0" aria-controls="example3" rowspan="1" colspan="1" style="">Código MT</th>
														<th class="sorting" tabindex="0" aria-controls="example3" rowspan="1" colspan="1" style="">Estado</th>
														<th class="sorting" tabindex="0" aria-controls="example3" rowspan="1" colspan="1" style="">Acciones</th>
													</tr>
												</thead>
												<tbody>
												</tbody>
												<tfoot>
													<tr>
														<th rowspan="1" colspan="1" style="">Id</th>
														<th rowspan="1" colspan="1" style="">Marca</th>
														<th rowspan="1" colspan="1" style="">Código MT</th>
														<th rowspan="1" colspan="1" style="">Estado</th>
														<th rowspan="1" colspan="1" style="">Acciones</th>
													</tr>
												</tfoot>
											</table>
										</div>
									</div>
								</div> 
					
								<div class="card-footer">
									<button type="button" id="btn_nuevo_marca" class="btn btn-primary col-md-1 ">Nuevo</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
    	</section>
	</div>

	<?php $this->load->view("template/footer"); ?>
        
	<aside class="control-sidebar control-sidebar-dark"></aside>

<!-- ======================================================================================================================================================================================================= -->

	<!-- MODAL CREAR VEHICULOS -->
	<div class="modal fade show" id="modal_vehiculo_nuevo" aria-modal="true" role="dialog">
		<div class="modal-dialog modal-dialog-centered modal-lg modal_vehiculo_nuevo">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">Nuevo Vehículo</h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
				</div>

				<div class="modal-body">
					<div class="card-body">
						<dl class="row">
							<dt class="col-sm-4">Placa</dt>
							<dd class="col-sm-8"><input type="text" class="form-control" name="opt_placa_veh" id="opt_placa_veh" onkeyup="mayus(this);"></dd>
									
							<dt class="col-sm-4">Clase Matricula</dt>
							<dd class="col-sm-8">
								<select class="custom-select" id="opt_clasemat">
									<option value = "">-- Seleccionar --</option>
									<option value = 1>PUBLICO</option>
									<option value = 2>PARTICULAR</option>
								</select>
							</dd>

							<dt class="col-sm-4">Marca</dt>
							<dd class="col-sm-8 autocomplete"><input type="text" class="form-control" name="myInput2" id="myInput2"></dd>

							<dt class="col-sm-4">Color</dt>
							<dd class="col-sm-8"><input type="text" class="form-control" name="opt_color_veh" id="opt_color_veh"></dd>

							<dt class="col-sm-4">Tipo Vehiculo</dt>
							<dd class="col-sm-8">
								<select class="custom-select" id="opt_tipo_veh">
									<option value="0">-- Seleccionar --</option>
									<?php foreach($tipo as $k1) { ?>
										<option value="<?=$k1->IdTipo?>"> <?=$k1->TipoVehiculo?></option>
									<?php } ?>                                      
								</select>    
							</dd>	
						</dl>
					</div>
				</div>

				<div class="modal-footer justify-content-between">
					<button style="float: left" type="button" class="btn btn-secondary col-md-1  " id="btn_cancelar_veh" data-dismiss="modal">Cancelar </button>  
					<button style="float: right" type="button" class="btn btn-primary col-md-1 " id="btn_guardar_veh" data-dismiss="modal">Guardar </button>   
				</div>
    		</div>
  		</div>
	</div>

<!-- ======================================================================================================================================================================================================= -->
	<!-- MODAL CREAR COLORES -->
	<div class="modal fade show" id="modal_color" aria-modal="true" role="dialog">
		<div class="modal-dialog modal-dialog-centered modal-md modal_color">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title tituloColor"></h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
				</div>

				<form id="quickForm" autocomplete="off">
					<div class="modal-body">
						<div class="card-body">
							<dl class="row">
								<dt class="col-sm-4">Color<span class="required">*</span></dt>
								<dd class="col-sm-8"><input type="text" class="form-control" name="opt_color_color" id="opt_color_color" onkeyup="mayus(this);"></dd>
							
								<dt class="col-sm-4">Código MT<span class="required">*</span></dt>
								<dd class="col-sm-8"><input type="text" class="form-control" name="opt_codigo_color" id="opt_codigo_color"></dd>

								<dt class="col-sm-4">Estado<span class="required">*</span></dt>
								<dd class="col-sm-8">
									<select class="custom-select" id="opt_estado_color">
										<option value = 0>-- Seleccionar --</option>
										<option value = 1>ACTIVO</option>
										<option value = 2>INACTIVO</option>
									</select>
								</dd>
							</dl>
						</div>
					</div>
				</form>

				<div class="modal-footer justify-content-between">
					<button type="button" class="btn btn-secondary col-md-3" id="btn_cancelar_veh" data-dismiss="modal" style="margin-left: 20px;">Cancelar</button>  
					<button type="button" class="btn btn-primary col-md-3" id="btn_guardar_color" onclick="GuardarColor()" style="margin-right: 20px;">Guardar</button>   
				</div>
    		</div>
  		</div>
	</div>

<!-- ======================================================================================================================================================================================================= -->
	<!-- MODAL CREAR MARCAS -->
	<div class="modal fade show" id="modal_marca" aria-modal="true" role="dialog">
		<div class="modal-dialog modal-dialog-centered modal-md modal_marca">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title tituloMarca"></h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
				</div>

				<form id="quickForm" autocomplete="off">
					<div class="modal-body">
						<div class="card-body">
							<dl class="row">
								<dt class="col-sm-4">Marca<span class="required">*</span></dt>
								<dd class="col-sm-8"><input type="text" class="form-control" name="opt_marca_marca" id="opt_marca_marca" onkeyup="mayus(this);"></dd>
							
								<dt class="col-sm-4">Código MT<span class="required">*</span></dt>
								<dd class="col-sm-8"><input type="text" class="form-control" name="opt_codigo_marca" id="opt_codigo_marca"></dd>

								<dt class="col-sm-4">Estado<span class="required">*</span></dt>
								<dd class="col-sm-8">
									<select class="custom-select" id="opt_estado_marca">
										<option value = 0>-- Seleccionar --</option>
										<option value = 1>ACTIVO</option>
										<option value = 2>INACTIVO</option>
									</select>
								</dd>
							</dl>
						</div>
					</div>
				</form>

				<div class="modal-footer justify-content-between">
					<button type="button" class="btn btn-secondary col-md-3" id="btn_cancelar_veh" data-dismiss="modal" style="margin-left: 20px;">Cancelar </button>  
					<button type="button" class="btn btn-primary col-md-3" id="btn_guardar_marca" onclick="GuardarMarca()" style="margin-right: 20px;">Guardar </button>   
				</div>
    		</div>
  		</div>
	</div>

<!-- ======================================================================================================================================================================================================= -->
    <!-- jQuery -->
    <script src="<?php echo base_url() ?>assets/plugins/jquery/jquery.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/jquery/jquery.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="<?php echo base_url() ?>assets/plugins/jquery-ui/jquery-ui.min.js"></script>
    <!-- jQuery Mask -->
    <script src="<?php echo base_url() ?>assets/plugins/jquery-Mask/jquery.mask.min.js"></script>
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    <script>
        $.widget.bridge('uibutton', $.ui.button)
    </script>
    <!-- Bootstrap 4 -->
    <script src="<?php echo base_url() ?>assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- ChartJS -->
    <script src="<?php echo base_url() ?>assets/plugins/chart.js/Chart.min.js"></script>
    <!-- Sparkline -->
    <!-- <script src="<?php echo base_url() ?>assets/plugins/sparklines/sparkline.js"></script> -->
    <!-- JQVMap -->
    <script src="<?php echo base_url() ?>assets/plugins/jqvmap/jquery.vmap.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
    <!-- jQuery Knob Chart -->
    <script src="<?php echo base_url() ?>assets/plugins/jquery-knob/jquery.knob.min.js"></script>
    <!-- daterangepicker -->
    <script src="<?php echo base_url() ?>assets/plugins/moment/moment.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/daterangepicker/daterangepicker.js"></script>
    <!-- Tempusdominus Bootstrap 4 -->
    <script src="<?php echo base_url() ?>assets/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
    <!-- Summernote -->
    <script src="<?php echo base_url() ?>assets/plugins/summernote/summernote-bs4.min.js"></script>
    <!-- overlayScrollbars -->
    <script src="<?php echo base_url() ?>assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
    <!-- AdminLTE App -->
    <script src="<?php echo base_url() ?>assets/dist/js/adminlte.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="<?php echo base_url() ?>assets/dist/js/demo.js"></script>
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
     <!-- <script src="<?php echo base_url() ?>assets/dist/js/pages/dashboard.js"></script> -->
	<!-- SweetAlert -->
	<script src="<?php echo base_url() ?>assets/plugins/sweetalert2/sweetalert2.all.min.js"></script>
    <!-- AdminLTE Datatable components -->
    <script src="<?php echo base_url() ?>assets/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/jszip/jszip.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/pdfmake/pdfmake.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/pdfmake/vfs_fonts.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/datatables-buttons/js/buttons.print.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>

<!-- ======================================================================================================================================================================================================= -->
 
	<script>
		//definir varialbles
		var Modulo = 'VEHICULOS';

		var Opcion    = '';
		var Placa     = '';
		var Tipo      = '';
		var Marca     = '';
		var MarcaNom  = '';
		var MarcaId   = '';
		var ColorNom  = '';
		var ColorId   = '';
		var CtrlColor = '0';
		var CtrlMarca = '0';

		//aca ya carga la data no necesito enviar nuevamente   
		var permisos = <?php echo json_encode($permisos) ?>;
		
		//Iniciar Carga 
		$(document).ready (function() 
		{
			//Cargra tabla Vehiculos
			Opcion = '1';
			CargarVehiculos();
	
			//Cargra tabla Colores
			Opcion = '10';
			CargarColores();
			
			//Cargra tabla Marcas
			Opcion = '11';
			CargarMarcas();
		});

		//Crear Color
		$("#btn_nuevo_color").click(function ()
		{
			for(i=0; i<permisos.length; i++){
				if (permisos[i].Nombre == Modulo){ 
                    if(permisos[i].Registrar == 'A'){
						//Variables
						CtrlColor = '1';
						
						//Limpiar Campos
						$('#opt_color_color').val(''); 
						$('#opt_codigo_color').val(''); 
						$('#opt_estado_color').val(0);
						
						//Cargar Modal
                        $("#modal_color").modal({
                            backdrop: 'static',
                            keyboard: false
                        });
						$("#modal_color").modal("show");
						$('.tituloColor').text('Crear Color');
						$('#btn_guardar_color').text('Guardar');
						break;
					}else{
						MsgAlerta(); 
					}
				}
			}  
			
        });

		//Buscar si el color existe 
		$('#opt_color_color').change(function() 
		{
			//Definir variables
			var Opcion = '3';
			var Color = $('#opt_color_color').val();
				
			//Lamado a ajax para traer los departamentos
			$.ajax({
				url: '<?php echo base_url() ?>Vehiculos/searchColores',//controlador
				type: "POST",//tipo de peticion POST o GET
				headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
				data: {	'Opcion' : Opcion, 
						'Color'  : Color }//formato json Data
			}).done(function(datoc){
				//convierto la respuesta json
				var color_bus = JSON.parse(datoc);
				if (color_bus.length > 0){
					CtrlColor = '1';
					ColorId = color_bus[0].IdColor;
                    Swal.fire({
                        title: "Información",
                        text: "El color ya existe",
                        icon: "question"
                    });
                    $('#opt_color_color').val('');
					// $('#opt_codigo_color').val(color_bus[0].CodigoMT); 
					// $('#opt_estado_color').val(color_bus[0].IdEstado);
				}else{
					CtrlColor = '0';
				}
				//Activar Boton
				$('#btn_guardar_color').show();
			});
		});

        //Buscar si el codigo del color existe 
		$('#opt_codigo_color').change(function() 
		{
			//Definir variables
			var Opcion = '1';
			var CodigoMT = $('#opt_codigo_color').val();
				
			//Lamado a ajax para traer los departamentos
			$.ajax({
				url: '<?php echo base_url() ?>Vehiculos/searchCodigoMTColor',//controlador
				type: "POST",//tipo de peticion POST o GET
				headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
				data: {	'Opcion'   : Opcion, 
						'CodigoMT' : CodigoMT }//formato json Data
			}).done(function(datoc){
				//convierto la respuesta json
				var color_bus = JSON.parse(datoc);
				if (color_bus.length > 0){
					CtrlColor = '1';
					ColorId = color_bus[0].IdColor;
                    Swal.fire({
                        title: "Información",
                        text: "El codigoMT ya existe para otro color",
                        icon: "question"
                    });
                    $('#opt_codigo_color').val('');
				}else{
					CtrlColor = '0';
				}
				//Activar Boton
				$('#btn_guardar_color').show();
			});
		});

		// Buscar color vehiculo
		$("#btn_buscar_color").click(function () 
		{        
			Opcion = '3';
			ColorNom  = $("#opt_color_veh").val();
			
			//Cargar tabla vehiculos
			CargarColores();
			$("#opt_color_veh").val('');
		});

		//Crear Marca
		$("#btn_nuevo_marca").click(function ()
		{  
			for(i=0; i<permisos.length; i++){
				if (permisos[i].Nombre == Modulo){ 
                    if(permisos[i].Registrar == 'A'){
					
						CtrlMarca = '1';
						
						//Limpiar Campos
						$('#opt_marca_marca').val(''); 
						$('#opt_codigo_marca').val(''); 
						$('#opt_estado_marca').val(0);
						
						//Cargar Modal
                        $("#modal_marca").modal({
                            backdrop: 'static',
                            keyboard: false
                        });
						$("#modal_marca").modal("show");
						$('.tituloMarca').text('Crear Marca');
						$('#btn_guardar_marca').text('Guardar');
						break;
					}else{
						MsgAlerta(); 
					}
				}
			}
            
        });

		//Buscar si la marca existe 
		$('#opt_marca_marca').change(function() 
		{
			//Definir variables
			var Opcion = '2';
			var Marca  = $('#opt_marca_marca').val();
				
			//Lamado a ajax para traer los departamentos
			$.ajax({
				url: '<?php echo base_url() ?>Vehiculos/searchMarcas',//controlador
				type: "POST",//tipo de peticion POST o GET
				headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
				data: {	'Opcion' : Opcion, 
						'Marca'  : Marca }//formato json Data
			}).done(function(datom){
				//convierto la respuesta json
				var marca_bus = JSON.parse(datom);
				if (marca_bus.length > 0){
					CtrlColor = '1';
					MarcaId = marca_bus[0].IdMarca;
					$('#opt_codigo_marca').val(marca_bus[0].CodigoMT); 
					$('#opt_estado_marca').val(marca_bus[0].IdEstado);
				}else{
					CtrlColor = '0';
				}
				//Activar Boton
				$('#btn_guardar_color').show();
			});
		});

		// Buscar marca vehiculo
		$("#btn_buscar_marca").click(function () 
		{             
			Opcion = '2';
			MarcaNom  = $("#opt_marca_veh").val();
			
			//Cargar tabla vehiculos
			CargarMarcas();
			$("#opt_marca_veh").val('');
		});

        //Buscar si el codigo de la marca existe 
		$('#opt_codigo_marca').change(function() 
		{
			//Definir variables
			var Opcion = '1';
			var CodigoMT = $('#opt_codigo_marca').val();
				
			//Lamado a ajax para traer los departamentos
			$.ajax({
				url: '<?php echo base_url() ?>Vehiculos/searchCodigoMTMarca',//controlador
				type: "POST",//tipo de peticion POST o GET
				headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
				data: {	'Opcion'   : Opcion, 
						'CodigoMT' : CodigoMT }//formato json Data
			}).done(function(datom){
				//convierto la respuesta json
				var marca_bus = JSON.parse(datom);
				if (marca_bus.length > 0){
					CtrlMarca = '1';
					MarcaId = marca_bus[0].IdMarca;
                    Swal.fire({
                        title: "Información",
                        text: "El codigoMT ya existe para otra marca",
                        icon: "question"
                    });
                    $('#opt_codigo_marca').val('');
				}else{
					CtrlMarca = '0';
				}
				//Activar Boton
				$('#btn_guardar_color').show();
			});
		});

		// Buscar vehiculo
		$("#btn_buscar").click(function () 
		{             
			Opcion = '1';
			Placa  = $('#selectPlaca').val();
			Tipo   = $('#cmb_tipoVeh').val();
			Marca  = $('#myInput').val();

			//Cargar tabla vehiculos
			CargarVehiculos();

			$('#selectPlaca').val('');
			$('#cmb_tipoVeh').val('');
			$('#myInput').val('');
			
		});

		//Autocompletar colores
		function autocomplete(inp, arr) 
		{
			var currentFocus;
			inp.addEventListener("input", function(e){
				var a, b, i, val = this.value;
				closeAllLists();
				if (!val) { return false;}
				currentFocus = -1;
				a = document.createElement("DIV");
				a.setAttribute("id", this.id + "autocomplete-list");
				a.setAttribute("class", "autocomplete-items");
				this.parentNode.appendChild(a);
				for (i = 0; i < arr.length; i++){
					if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()){
						b = document.createElement("DIV");
						b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
						b.innerHTML += arr[i].substr(val.length);
						b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
						b.addEventListener("click", function(e){
							inp.value = this.getElementsByTagName("input")[0].value;
							closeAllLists();
						});
						a.appendChild(b);
					}
				}
			});

			inp.addEventListener("keydown", function(e){
				var x = document.getElementById(this.id + "autocomplete-list");
				if (x) x = x.getElementsByTagName("div");
				if (e.keyCode == 40){
					currentFocus++;
					addActive(x);
				} else if (e.keyCode == 38){ 
					currentFocus--;
					addActive(x);
				} else if (e.keyCode == 13){
					e.preventDefault();
					if (currentFocus > -1){
						if (x) x[currentFocus].click();
					}
				}
			});

			function addActive(x){
				if (!x) return false;
				removeActive(x);
				if (currentFocus >= x.length) currentFocus = 0;
				if (currentFocus < 0) currentFocus = (x.length - 1);
				x[currentFocus].classList.add("autocomplete-active");
			}

			function removeActive(x){
				for (var i = 0; i < x.length; i++){
					x[i].classList.remove("autocomplete-active");
				}
			}

			function closeAllLists(elmnt){
				var x = document.getElementsByClassName("autocomplete-items");
				for (var i = 0; i < x.length; i++){
					if (elmnt != x[i] && elmnt != inp){
						x[i].parentNode.removeChild(x[i]);
					}
				}
			}
		
			document.addEventListener("click", function (e){
				closeAllLists(e.target);
			});
		};

		var color = <?php echo json_encode($color) ?>;
		let colorVeh = [];
		for (let index = 0; index < color.length; index++){
			colorVeh.push(color[index].NombreColor);  
		}
		autocomplete(document.getElementById("opt_color_veh"), colorVeh);

		//Autocompletar marcas
		function autocomplete(inp, arr) 
		{
			var currentFocus;
			inp.addEventListener("input", function(e){
				var a, b, i, val = this.value;
				closeAllLists();
				if (!val) { return false;}
				currentFocus = -1;
				a = document.createElement("DIV");
				a.setAttribute("id", this.id + "autocomplete-list");
				a.setAttribute("class", "autocomplete-items");
				this.parentNode.appendChild(a);
				for (i = 0; i < arr.length; i++){
					if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()){
						b = document.createElement("DIV");
						b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
						b.innerHTML += arr[i].substr(val.length);
						b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
						b.addEventListener("click", function(e){
							inp.value = this.getElementsByTagName("input")[0].value;
							closeAllLists();
						});
						a.appendChild(b);
					}
				}
			});

			inp.addEventListener("keydown", function(e){
				var x = document.getElementById(this.id + "autocomplete-list");
				if (x) x = x.getElementsByTagName("div");
				if (e.keyCode == 40){
					currentFocus++;
					addActive(x);
				} else if (e.keyCode == 38){ 
					currentFocus--;
					addActive(x);
				} else if (e.keyCode == 13){
					e.preventDefault();
					if (currentFocus > -1){
						if (x) x[currentFocus].click();
					}
				}
			});

			function addActive(x){
				if (!x) return false;
				removeActive(x);
				if (currentFocus >= x.length) currentFocus = 0;
				if (currentFocus < 0) currentFocus = (x.length - 1);
				x[currentFocus].classList.add("autocomplete-active");
			}

			function removeActive(x){
				for (var i = 0; i < x.length; i++){
					x[i].classList.remove("autocomplete-active");
				}
			}

			function closeAllLists(elmnt){
				var x = document.getElementsByClassName("autocomplete-items");
				for (var i = 0; i < x.length; i++){
					if (elmnt != x[i] && elmnt != inp){
						x[i].parentNode.removeChild(x[i]);
					}
				}
			}
		
			document.addEventListener("click", function (e){
				closeAllLists(e.target);
			});
		};

		var marca = <?php echo json_encode($marcas) ?>;
		let marcaVeh = [];
		for (let index = 0; index < marca.length; index++){
			marcaVeh.push(marca[index].Marca);  
		}
		autocomplete(document.getElementById("opt_marca_veh"), marcaVeh);
		autocomplete(document.getElementById("myInput"), marcaVeh);
		
		//Editar colores
		function btn_editar_color(Valor)
		{   
			//validar permisos de acceso
			for(i=0; i<permisos.length; i++){
				if (permisos[i].Nombre == Modulo){ 
                    if(permisos[i].Actualizar == 'A'){
						//Definir Varialbles
						Opcion    = '3';
						CtrlColor = '1';
						ColorId   = Valor;

						//Limpiar Campos
						$('#opt_color_color').val(''); 
						$('#opt_codigo_color').val(''); 
						$('#opt_estado_color').val('');

						//Buscar Color
						$.ajax({
							url: '<?php echo base_url() ?>Vehiculos/searchColores',//controlador
							type: "POST",//tipo de peticion POST o GET
							headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
							data: { 'Opcion'  : Opcion,
									'IdColor' : ColorId, 
									'Color'   : ColorNom }//formato json Data                         
						}).done(function(dato) {
							var color=JSON.parse(dato);
						
							$('#opt_color_color').val(color[0].NombreColor); 
							$('#opt_codigo_color').val(color[0].CodigoMT); 
							$('#opt_estado_color').val(color[0].IdEstado);	
						});
                        $("#modal_color").modal({
                            backdrop: 'static',
                            keyboard: false
                        });
						$("#modal_color").modal("show");
						$('.tituloColor').text('Editar Color');
						$('#btn_guardar_color').text('Actualizar'); 
						break;
					}else{
						MsgAlerta(); 
					}
				}
			}
			
        };

		//Cargar tabla Vehiculos
		function CargarVehiculos()
		{
			//llamada a micro servicio de validacion
			$.ajax({
				url: '<?php echo base_url() ?>Vehiculos/searchVehiculos',//controlador
				type: "POST",//tipo de peticion POST o GET
				headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
				data: { 'Opcion' : Opcion,
						'Placa'  : Placa, 
						'Tipo'   : Tipo,
						'Marca'  : Marca }//formato json Data                         
			
			}).done(function(dato) {
						
				//convierto la respuesta json
				var vehiculos_bus=JSON.parse(dato);

				$("#example1").DataTable({
					data: vehiculos_bus,
					destroy: true,
					searching: false,
					columns:
					[
						{data : 'Placa'},
						{data : 'NombreClase'},
						{data : 'Marca'},
						{data : 'TipoVehiculo'},
						{data : 'Modelo'},
						{data : 'NomHue'},
						{data : 'Identificacion'},
						{data : 'Movil'},
					],
					responsive: true, 
                    "lengthChange": false, 
                    "autoWidth": false,
                    lengthChange: true, // Habilitar la opción de longitud
                    lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, "All"] ], // Opciones para seleccionar la cantidad de registros por página
                    autoWidth: false,
                    language: {
                        "sProcessing": "Procesando...",
                        "sLengthMenu": "Mostrar _MENU_ entradas",
                        "sZeroRecords": "No se encontraron resultados",
                        "sInfo": "Mostrando de _START_ a _END_ de _TOTAL_ entradas",
                        "sInfoEmpty": "Mostrando 0 a 0 de 0 entradas",
                        "sInfoFiltered": "(filtrado de _MAX_ entradas totales)",
                        "sInfoPostFix": "",
                        "sSearch": "Buscar:",
                        "sUrl": "",
                        "sInfoThousands": ",",
                        "sLoadingRecords": "Cargando...",
                        "oPaginate": {
                            "sFirst": "Primero",
                            "sPrevious": "Anterior",
                            "sNext": "Siguiente",
                            "sLast": "Último"
                        },
                        "oAria": {
                            "sSortAscending": ": activar para ordenar la columna de manera ascendente",
                            "sSortDescending": ": activar para ordenar la columna de manera descendente"
                        }
                    },
					buttons: ["copy", "csv", "excel", "pdf", "print"]
				}).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(1)').css('float','right');
			});
		};

		//Cargar tabla Vehiculos
		function CargarColores()
		{
			//llamada a micro servicio de validacion
			$.ajax({
				url: '<?php echo base_url() ?>Vehiculos/searchColores',//controlador
				type: "POST",//tipo de peticion POST o GET
				headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
				data: { 'Opcion'  : Opcion,
						'IdColor' : ColorId,
						'Color'   : ColorNom}//formato json Data                         
			
			}).done(function(dato) {
						
				//convierto la respuesta json
				var colores_bus=JSON.parse(dato);

				$("#example2").DataTable({
					data: colores_bus,
					destroy: true,
					searching: false,
					columns:
					[
						{data : 'IdColor'},
						{data : 'NombreColor'},
						{data : 'CodigoMT'},
						{data : 'Estado'},
						{"data" : function (row, type,val, meta) {
							var ColorId = row.IdColor;
							return '<a href="#" onclick="btn_editar_color('+ ColorId +')" data-id="' + ColorId + '" class="table-edit">Editar</a> &nbsp;&nbsp;<a href="#" onclick="btn_eliminar_color('+ ColorId +')"  class="table-edit">Inactivar</a>';
						}}
					],
					responsive: true, 
                    "lengthChange": false, 
                    "autoWidth": false,
                    lengthChange: true, // Habilitar la opción de longitud
                    lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, "All"] ], // Opciones para seleccionar la cantidad de registros por página
                    autoWidth: false,
                    language: {
                        "sProcessing": "Procesando...",
                        "sLengthMenu": "Mostrar _MENU_ entradas",
                        "sZeroRecords": "No se encontraron resultados",
                        "sInfo": "Mostrando de _START_ a _END_ de _TOTAL_ entradas",
                        "sInfoEmpty": "Mostrando 0 a 0 de 0 entradas",
                        "sInfoFiltered": "(filtrado de _MAX_ entradas totales)",
                        "sInfoPostFix": "",
                        "sSearch": "Buscar:",
                        "sUrl": "",
                        "sInfoThousands": ",",
                        "sLoadingRecords": "Cargando...",
                        "oPaginate": {
                            "sFirst": "Primero",
                            "sPrevious": "Anterior",
                            "sNext": "Siguiente",
                            "sLast": "Último"
                        },
                        "oAria": {
                            "sSortAscending": ": activar para ordenar la columna de manera ascendente",
                            "sSortDescending": ": activar para ordenar la columna de manera descendente"
                        }
                    },
					buttons: ["copy", "csv", "excel", "pdf", "print"]
				}).buttons().container().appendTo('#example2_wrapper .col-md-6:eq(1)').css('float','right');
			});
		};

		//Cargar tabla Vehiculos
		function CargarMarcas()
		{
			//llamada a micro servicio de validacion
			$.ajax({
				url: '<?php echo base_url() ?>Vehiculos/searchMarcas',//controlador
				type: "POST",//tipo de peticion POST o GET
				headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
				data: { 'Opcion'  : Opcion,
						'IdMarca' : MarcaId, 
						'Marca'   : MarcaNom }//formato json Data                         		
			}).done(function(dato){
				//convierto la respuesta json
				var marcas_bus=JSON.parse(dato);

				$("#example3").DataTable({
					data: marcas_bus,
					destroy: true,
					searching: false,
					columns:
					[
						{data : 'IdMarca'},
						{data : 'Marca'},
						{data : 'CodigoMT'},
						{data : 'Estado'},
						{"data" : function (row, type,val, meta) {
							var MarcaId = row.IdMarca;			
							return '<a href="#" onclick="btn_editar_marca('+ MarcaId +')" data-id="' + MarcaId + '" class="table-edit">Editar</a> &nbsp;&nbsp;<a href="#" onclick="btn_eliminar_marca('+ MarcaId +')"  class="table-edit">Inactivar</a>';
						}}
					],
					responsive: true, 
                    "lengthChange": false, 
                    "autoWidth": false,
                    lengthChange: true, // Habilitar la opción de longitud
                    lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, "All"] ], // Opciones para seleccionar la cantidad de registros por página
                    autoWidth: false,
                    language: {
                        "sProcessing": "Procesando...",
                        "sLengthMenu": "Mostrar _MENU_ entradas",
                        "sZeroRecords": "No se encontraron resultados",
                        "sInfo": "Mostrando de _START_ a _END_ de _TOTAL_ entradas",
                        "sInfoEmpty": "Mostrando 0 a 0 de 0 entradas",
                        "sInfoFiltered": "(filtrado de _MAX_ entradas totales)",
                        "sInfoPostFix": "",
                        "sSearch": "Buscar:",
                        "sUrl": "",
                        "sInfoThousands": ",",
                        "sLoadingRecords": "Cargando...",
                        "oPaginate": {
                            "sFirst": "Primero",
                            "sPrevious": "Anterior",
                            "sNext": "Siguiente",
                            "sLast": "Último"
                        },
                        "oAria": {
                            "sSortAscending": ": activar para ordenar la columna de manera ascendente",
                            "sSortDescending": ": activar para ordenar la columna de manera descendente"
                        }
                    },
					buttons: ["copy", "csv", "excel", "pdf", "print"]
				}).buttons().container().appendTo('#example3_wrapper .col-md-6:eq(1)').css('float','right');
			});
		};

		//Agregar Vehiculo 
        function GuardarColor()
		{
			//Asignar valores a las variables
			var OpcionC = '1';
			var Color   = $('#opt_color_color').val(); 
			var CodigoC = $('#opt_codigo_color').val(); 
			var EstadoC = $('#opt_estado_color').val();

            //Validaciones del front end.
            if(Color == ''){
                Swal.fire({
                    title: 'Error',
                    text: 'Debe ingresar el color',
                    icon: 'error',
                    confirmButtonText: 'OK',
                    allowOutsideClick: false, // Deshabilita el cierre al hacer clic fuera del modal
                    allowEscapeKey: false // Deshabilita el cierre al presionar la tecla "Escape"
                });
			    return;
            }

            if(CodigoC == ''){
                Swal.fire({
                    title: 'Error',
                    text: 'Debe ingresar el código MT para el color que está creando',
                    icon: 'error',
                    confirmButtonText: 'OK',
                    allowOutsideClick: false, // Deshabilita el cierre al hacer clic fuera del modal
                    allowEscapeKey: false // Deshabilita el cierre al presionar la tecla "Escape"
                });
			    return;
            }

            if(EstadoC == 0){
                Swal.fire({
                    title: 'Error',
                    text: 'Debe seleccionar un estado para el color que está creando',
                    icon: 'error',
                    confirmButtonText: 'OK',
                    allowOutsideClick: false, // Deshabilita el cierre al hacer clic fuera del modal
                    allowEscapeKey: false // Deshabilita el cierre al presionar la tecla "Escape"
                });
			    return;
            }

			if(CtrlColor == '1'){
				$.ajax({
					url: '<?php echo base_url() ?>Vehiculos/updateColores',//controlador
					type: "POST",//tipo de peticion POST o GET
					headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
					data: { 'Opcion'  : OpcionC, 
							'ColorId' : ColorId,
							'Color'   : Color, 
							'CodigoC' : CodigoC, 
							'EstadoC' : EstadoC }//formato json Data   
				}).done(function(dato){
					//convierto la respuesta json
					var obj = JSON.parse(dato); 
					if (obj.res == 'ok'){
                        Swal.fire({
                            title: 'Información',
                            text: obj.msg,
                            icon: 'info',
                            confirmButtonText: 'OK',
                            allowOutsideClick: false, // Deshabilita el cierre al hacer clic fuera del modal
                            allowEscapeKey: false // Deshabilita el cierre al presionar la tecla "Escape"
                        }).then(() => {
                            //Cargra tabla Colores
                            Opcion = '10';
                            CargarColores();
                            window.location.href="<?php echo base_url() ?>Vehiculos/listVehiculos";
                        });  
					}else{
                        Swal.fire({
                            title: 'Error',
                            text: obj.msg,
                            icon: 'error',
                            confirmButtonText: 'OK',
                            allowOutsideClick: false, // Deshabilita el cierre al hacer clic fuera del modal
                            allowEscapeKey: false // Deshabilita el cierre al presionar la tecla "Escape"
                        });
					}
				});
			}else{
				$.ajax({
					url: '<?php echo base_url() ?>Vehiculos/insertColores',//controlador
					type: "POST",//tipo de peticion POST o GET
					headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
					data: { 'Opcion'  : OpcionC, 
							'Color'   : Color, 
							'CodigoC' : CodigoC, 
							'EstadoC' : EstadoC}//formato json Data   
				}).done(function(dato){
					//convierto la respuesta json
					var obj = JSON.parse(dato); 
					if (obj.res == 'ok'){
						Swal.fire("Información", obj.msg, "success").then(() => {
                            //Cargra tabla Colores
                            Opcion = '10';
                            CargarColores();
                            window.location.href="<?php echo base_url() ?>Vehiculos/listVehiculos";
                        });  
					}else{
                        Swal.fire({
                            title: 'Error',
                            text: obj.msg,
                            icon: 'error',
                            confirmButtonText: 'OK',
                            allowOutsideClick: false, // Deshabilita el cierre al hacer clic fuera del modal
                            allowEscapeKey: false // Deshabilita el cierre al presionar la tecla "Escape"
                        });    
					}
				});
			}
        };

		//Agregar Vehiculo 
        function GuardarMarca()
		{
			var OpcionM = '1';
            var Marca   = $('#opt_marca_marca').val(); 
            var CodigoM = $('#opt_codigo_marca').val(); 
            var EstadoM = $('#opt_estado_marca').val();

            if(Marca == ''){
                Swal.fire({
                    title: 'Error',
                    text: 'Debe ingresar una marca',
                    icon: 'error',
                    confirmButtonText: 'OK',
                    allowOutsideClick: false, // Deshabilita el cierre al hacer clic fuera del modal
                    allowEscapeKey: false // Deshabilita el cierre al presionar la tecla "Escape"
                });
			    return;
            }

            if(CodigoM == ''){
                Swal.fire({
                    title: 'Error',
                    text: 'Debe ingresar el código MT de la marca',
                    icon: 'error',
                    confirmButtonText: 'OK',
                    allowOutsideClick: false, // Deshabilita el cierre al hacer clic fuera del modal
                    allowEscapeKey: false // Deshabilita el cierre al presionar la tecla "Escape"
                });
			    return;
            }

            if(EstadoM == 0){
                Swal.fire({
                    title: 'Error',
                    text: 'Debe ingresar el estado de la marca',
                    icon: 'error',
                    confirmButtonText: 'OK',
                    allowOutsideClick: false, // Deshabilita el cierre al hacer clic fuera del modal
                    allowEscapeKey: false // Deshabilita el cierre al presionar la tecla "Escape"
                });
			    return;
            }

			if(CtrlColor == '1'){
				$.ajax({
					url: '<?php echo base_url() ?>Vehiculos/updateMarcas',//controlador
					type: "POST",//tipo de peticion POST o GET
					headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
					data: {	'Opcion' : OpcionM,
							'MarcaId' : MarcaId,
							'Marca'   : Marca, 
							'CodigoM' : CodigoM, 
							'EstadoM' : EstadoM }//formato json Data   
				}).done(function(dato){
					//convierto la respuesta json
					var obj = JSON.parse(dato); 
					if (obj.res == 'ok'){
						Swal.fire("Información", obj.msg, "success").then(() => {
                            //Cargra tabla Colores
						    Opcion = '11';
						    CargarMarcas();
                            window.location.href="<?php echo base_url() ?>Vehiculos/listVehiculos";
                        });  
					}else{
						Swal.fire("Error", obj.msg, "error");     
					}
				});
			}else{
				$.ajax({
					url: '<?php echo base_url() ?>Vehiculos/insertMarcas',//controlador
					type: "POST",//tipo de peticion POST o GET
					headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
					data: { 'Opcion'  : OpcionM, 
							'Marca'   : Marca, 
							'CodigoM' : CodigoM, 
							'EstadoM' : EstadoM }//formato json Data   
				}).done(function(dato){
					//convierto la respuesta json
					var obj = JSON.parse(dato); 
					if (obj.res == 'ok'){
						Swal.fire("Información", obj.msg, "success").then(() => {
                            //Cargra tabla Colores
                            Opcion = '2';
						    CargarMarcas();
                            window.location.href="<?php echo base_url() ?>Vehiculos/listVehiculos";
                        }); 
					}else{
						Swal.fire("Error", obj.msg, "error");     
					}
				});
			}	
        };

		//Editar marcas
		function btn_editar_marca(Valor)
		{   
			
			//validar permisos de acceso
			for(i=0; i<permisos.length; i++){
				if (permisos[i].Nombre == Modulo){ 
                    if(permisos[i].Actualizar == 'A'){
						//Definir Varialbles
						Opcion    = '2';
						CtrlColor = '1';
						MarcaId   = Valor;

						//Limpiar Campos
						$('#opt_marca_marca').val(''); 
						$('#opt_codigo_marca').val(''); 
						$('#opt_estado_marca').val('');

						//Buscar Color
						$.ajax({
							url: '<?php echo base_url() ?>Vehiculos/searchMarcas',//controlador
							type: "POST",//tipo de peticion POST o GET
							headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
							data: { 'Opcion'  : Opcion,
									'IdMarca' : MarcaId, 
									'Marca'   : MarcaNom}//formato json Data                         
						}).done(function(dato) {
							var marca=JSON.parse(dato);
						
							$('#opt_marca_marca').val(marca[0].Marca); 
							$('#opt_codigo_marca').val(marca[0].CodigoMT); 
							$('#opt_estado_marca').val(marca[0].IdEstado);	
						});
                        $("#modal_marca").modal({
                            backdrop: 'static',
                            keyboard: false
                        });
						$("#modal_marca").modal("show");
						$('.tituloMarca').text('Editar Marca');
						$('#btn_guardar_marca').text('Actualizar'); 
						break;
					}else{
						MsgAlerta(); 
					}
				}
			}
			
        };

		//Boton Eliminar Color
		function btn_eliminar_color(ColorId)
		{
			for(i=0; i<permisos.length; i++){
				if (permisos[i].Nombre == Modulo){ 
                    if(permisos[i].Eliminar == 'A'){
						Swal.fire({
							title: "¿Está seguro de inactivar el color?",
							text: "Esta opción inactivara el color seleccionado",
							icon: "warning",
							showCancelButton: true,
							confirmButtonColor: '#3085d6',
							cancelButtonColor: '#d33',
							confirmButtonText: 'Inactivar',
							cancelButtonText: 'Cancelar'
						}).then((result) => {
							if (result.isConfirmed){
								$.ajax({
									url: '<?php echo base_url() ?>Vehiculos/deleteColores/',//controlador
									type: "POST",//tipo de peticion POST o GET
									headers: {'X-Requested-With': 'XMLHttpRequest'},
									data: {'IdColor': ColorId}//Encabezados
								}).done(function(dato){
									var obj = JSON.parse(dato); 
									if (obj.res == 'ok'){
										Opcion = '10';
										CargarColores();
										Swal.fire("Información", obj.msg, "success");  
									}else{
										Swal.fire("Error", obj.msg, "error");     
									}
								});
							} 
						});
					}else{
						MsgAlerta(); 
					}
				}
			}
		};

		//Boton Eliminar Color
		function btn_eliminar_marca(MarcaId)
		{
			for(i=0; i<permisos.length; i++){
				if (permisos[i].Nombre == Modulo){ 
                    if(permisos[i].Eliminar == 'A'){
						Swal.fire({
							title: "¿Está seguro de inactivar la marca?",
							text: "Esta opción inactivara la marca seleccionada",
							icon: "warning",
							showCancelButton: true,
							confirmButtonColor: '#3085d6',
							cancelButtonColor: '#d33',
							confirmButtonText: 'Inactivar',
							cancelButtonText: 'Cancelar'
						}).then((result) => {
							if (result.isConfirmed){
								$.ajax({
									url: '<?php echo base_url() ?>Vehiculos/deleteMarcas/',//controlador
									type: "POST",//tipo de peticion POST o GET
									headers: {'X-Requested-With': 'XMLHttpRequest'},
									data: {'IdMarca': MarcaId}//Encabezados
								}).done(function(dato){
									var obj = JSON.parse(dato); 
									if (obj.res == 'ok'){
										Opcion = '11';
										CargarMarcas();
										Swal.fire("Información", obj.msg, "success");  
									}else{
										Swal.fire("Error", obj.msg, "error");     
									}
								});
							} 
						});
					}else{
						MsgAlerta(); 
					}
				}
			}
		};

		//funcion pasar a mayusculas
		function mayus(e) 
		{
			e.value = e.value.toUpperCase();
		};
	</script>

</body>
</html>
