<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title><?= $titulo?></title>
	<?php
		$this->load->view('link');
		echo script_tag('js/modulos/xmto.js?'.$_SESSION['app.soptec_sesion_version']);
	?>
	<style type="text/css">
	</style>
	<script type="text/javascript">
		function readimg(file) {
			if(file.files&&file.files[0]){
				var reader = new FileReader();
				reader.onload = function (e) {
					$('#img_xmto').attr('src', e.target.result);
					img_file = e.target.result;
				}
				reader.readAsDataURL(file.files[0]);
			}
		}

		function fn_agregar_img () {
			var x       = Math.floor((Math.random() * 10000000) + 1);
			var lista 	= $('#lista_img').html();
			var nimg 	= '<div class="col-sm-6 col-md-4" id="'+x+'">';
			nimg += '<div class="thumbnail">';
			nimg += '<img src="'+img_file+'" class="img-responsive">';
			nimg += '<div class="caption">';
			nimg += '<h3>Imagen '+x+'</h3>';
			nimg += '<p>'+$('#txt_comentario_img').val()+'</p>';
			nimg += '<p>';
			nimg += '<button type="button" onclick="fn_eliminar_img('+x+');" class="btn btn-danger">';
			nimg += '<span class="glyphicon glyphicon-trash"></span> <b>Eliminar</b>';
			nimg += '</button>';
			nimg += '</p></div></div></div>';
			$('#lista_img').html(lista + nimg);
			json_img[x] = {
				'img'			: img_file,
				'comentario'	: $('#txt_comentario_img').val()
			};
			fn_limpiar_img();
		}

		function fn_eliminar_img (rand) {
			$('#'+rand).html('').remove();
        	delete json_img[rand];
		}

		function fn_limpiar_img() {
			$('#img_xmto').attr('src', '');
			$('#txt_imagenes').val('');
			//$('#foto').html('<input type="file" name="txt_imagenes" id="txt_imagenes" accept="image/*" capture="camera" class="form-control">');
			$('#txt_comentario_img').val('');
		}
		$(function () {
			$('#txt_imagenes').change(function () {
				readimg(this);
			});

			var sel;
			var ehtml = '';

			$('#btn_grabar').on('click', function (e) {
				if($('#txt_asunto').val()==''){
					ehtml 	= 'Debe ingresar un Asunto<br/>';
					sel 	= $('#txt_asunto');
				}
			
				if($('#txt_cuerpo').val()==''){
					ehtml 	+= 'Debe ingresar una descripción del problema<br/>';
					if(!sel) sel = $('#txt_cuerpo');
				}
			
				if($('#txt_cuerpo').val()!=''&&$('#txt_cuerpo').val().length <=30){
					ehtml 	+= 'La descripción del problema debe tener como mínimo 30 caracteres<br/>';
					if(!sel) sel = $('#txt_cuerpo');
				}

				if($('#cbo_destino option:selected').val()==0){
					ehtml 	+= 'Debe seleccionar un destino<br/>';
					if(!sel) sel = $('#cbo_destino');
				}

				if(ehtml!=''){
					swal({
    			        type    			: 'warning',
    			        title   			: 'Alerta!',
    			        html    			: ehtml + '<b style="color:red;">Campos requeridos</b>',
    			        confirmButtonClass	: 'btn btn-primary'
    			    }).then(function () {
    			    	sel.focus();
    			    });
    			    e.stopPropagation();
     				return;
				}
				

				swal({
        			title               : 'Alerta!',
        			html                : 'Desea grabar la solicitud de mantenimiento?',
        			type                : 'question',
        			showCancelButton    : true,
        			confirmButtonColor  : '#3085d6',
        			cancelButtonColor   : '#d33',
        			confirmButtonText   : 'Si, grabar!',
        			cancelButtonText    : 'No, cancelar!',
        			confirmButtonClass	: 'btn btn-primary',
        			cancelButtonClass 	: 'btn btn-danger',
        			showLoaderOnConfirm : true,
        			preConfirm 			: function () {
  						return new Promise(function (resolve, reject) {
							$.ajax({
								url 	: ruta + 'soporte/xmto/insertar',
								data 	: {
									asunto 		: $('#txt_asunto').val(),
									cuerpo 		: $('#txt_cuerpo').val(),
									xeqo 		: $('#txt_id_xeqo').val(),
									fecha 		: $('#txt_fecha').val(),
									xmqo 		: $('#txt_id_xmqo').val(),
									xeo 		: $('#txt_xeo').val(),
									destino 	: $('#cbo_destino option:selected').val(),
									json_img 	: json_img
								},
								type 	: 'post',
								success : function (data) {
									resolve();
								}
							});
  						});
  					}
				}).then(function () {
					swal({
	    			    type    			: 'info',
	    			    title   			: 'Mensaje!',
	    			    html    			: 'Solicitud grabada correctamente!',
	    			    confirmButtonClass	: 'btn btn-primary'
	    			}).then(function () {
	    				window.location.reload();
	    			});
    			});
			})

			$('.date').datepicker({
                autoclose   : true,
                format      : 'dd/mm/yyyy'
            });
		});
	</script>
</head>
<body>
	<div class="container">
		<div class="panel panel-primary">
			<?= $cabecera?>
			<div class="panel-body">
				<ol class="breadcrumb">
  					<li><a href="<?= base_url()?>">Inicio</a></li>
  					<li><a href="<?= base_url('soporte/xmto')?>">Mantenimiento</a></li>
  					<li class="active">Nuevo</li>
				</ol>
			</div>
			<div class="panel-body">
				<form id="form_nxmto" class="form-horizontal">
					<h3>NUEVA SOLICITUD DE MANTENIMIENTO</h3>
					<hr>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
  							<button type="button" id="btn_grabar" class="btn btn-primary">
  								<span class="glyphicon glyphicon-floppy-disk"></span> <b>Grabar solicitud</b>
  							</button>
  							<a href="<?= base_url('soporte/xmto/nuevo')?>" class="btn btn-warning">
  								<span class="glyphicon glyphicon-refresh"></span> <b>Refrescar</b>
  							</a>
						</div>
						</div>
						<hr>
						<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<button type="button" onclick="fn_xmto_buscar_xeqo();" class="btn btn-success">
								<span class="glyphicon glyphicon-search"></span> <b>Buscar equipo</b>
							</button>
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-12 table-responsive">
							<table class="table table-responsive table-striped table-bordered">
								<thead>
									<tr>
										<th>CODPAT</th>
										<th>SERIE</th>
										<th>MARCA</th>
										<th>MODELO</th>
										<th>EQUIPO</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td id="codpat"></td>
										<td id="serie"></td>
										<td id="marca"></td>
										<td id="modelo"></td>
										<td id="equipo"></td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="form-group">
						<label for="txt_asunto" class="col-sm-2 control-label">Asunto</label>
						<div class="col-sm-10">
							<input type="hidden" id="txt_id_xeqo" name="txt_id_xeqo">
							<input type="hidden" id="txt_xeo" name="txt_xeo">
							<input type="hidden" id="txt_id_xmqo" name="txt_id_xmqo">
							<input type="text" id="txt_asunto" name="txt_asunto" placeholder="Ingrese el asunto" class="form-control" autocomplete="off">
						</div>
					</div>
					<div class="form-group">
						<label for="txt_cuerpo" class="col-sm-2 control-label">Cuerpo</label>
						<div class="col-sm-10">
							<textarea name="txt_cuerpo" id="txt_cuerpo" placeholder="Describa el problema del equipo..." style="height: 100px;" class="form-control"></textarea>
						</div>
					</div>
					<div class="form-group">
						<label for="txt_fecha" class="col-sm-2 control-label">Fecha</label>
						<div class="col-sm-10">
							<div class="input-group date">
								<input type="text" id="txt_fecha" name="txt_fecha" value="<?= date('d/m/Y')?>" placeholder="Ingrese el asunto" readonly class="form-control" autocomplete="off">
								<span class="input-group-addon">
									<span class="glyphicon glyphicon-calendar"></span>
								</span>
							</div>
						</div>
					</div>
					<div class="form-group">
						<label for="cbo_destino" class="col-sm-2 control-label">Destino</label>
						<div class="col-sm-10">
							<select name="cbo_destino" id="cbo_destino" class="form-control">
								<option value="0"> - SELECCIONAR - </option>
								<option value="1">SOPORTE LOCAL</option>
								<option value="2">SOPORTE OSI RED</option>
							</select>
						</div>
					</div>
					<hr>
					<div class="form-group col-md-12" style="text-align:center;">
						<b>IMÁGENES</b>
					</div>
					<div class="form-group">
						<div class="col-sm-10 col-sm-offset-2" id="foto">
							<input type="file" name="txt_imagenes" id="txt_imagenes" accept="image/*" capture="camera" class="form-control">
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-10 col-sm-offset-2" id="foto">
							<textarea name="txt_comentario_img" id="txt_comentario_img" placeholder="Comentario de la foto..." style="height: 75px;" class="form-control"></textarea>
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-12">
							<img id="img_xmto" src="" class="img-responsive" alt="">
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<div class="btn-group" role="group" aria-label="...">
								<button type="button" onclick="fn_agregar_img();" class="btn btn-success">
									<b>Agregar imágen</b>
								</button>
	  							<button type="button" onclick="fn_limpiar_img();" class="btn btn-warning">
	  								<b>Limpiar imagen</b>
	  							</button>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="panel-body">
				<div class="row" id="lista_img">
				</div>
			</div>
			<!--
				<div class="col-sm-6 col-md-4">
    					<div class="thumbnail">
      						<img src="..." alt="..." class="img-responsive">
      						<div class="caption">
	        					<h3>Imagen 03</h3>
	    						<p>...</p>
	        					<p>
	        						<button class="btn btn-danger">
	        							<span class="glyphicon glyphicon-trash"></span> <b>Eliminar</b>
	        						</button>
	        					</p>
      						</div>
    					</div>
  					</div>
			-->
			<?= $pie?>
		</div>
	</div>
</body>
</html>