<!-- Creado: Félix Ricardo Oliva Alonso, 27/03/2017. Se crea la vista para administrar consultorios (Pruebas)-->
<!-- Creado: Félix Ricardo Oliva Alonso, 28/03/2017. Se modifica la vista para administrar consultorios (Pruebas)-->
<!-- Creado: Félix Ricardo Oliva Alonso, 30/03/2017. Se modifica la vista para administrar consultorios (Pruebas)-->
<!-- Modificado: Félix Ricardo Oliva Alonso, 24/07/2017. Se crean las tablas para mostrar los equipos registrados-->

<?php
use App\Libraries\ejLib;
$var = ejLib::getInstance();
$soapclient = $var->getWs();
$wsClave = $var->get_wsClave();

$respuesta = $soapclient->AdministrarConsultorios_get_Modulo($_POST['Id_Archivo'],$wsClave);
$obj = new SimpleXMLElement(utf8_encode($respuesta));

//print_r($obj);

$equiposreg= explode(",", $obj->respuesta[0]->equiposreg);
$nequiposreg=count($equiposreg);

//echo $respuesta.'<br><br>';

$Centro_Sal=$_POST['Centro_Sal'];
$catalogo = $soapclient->vCat_Compu($Centro_Sal,$wsClave);
$Cat  = new SimpleXMLElement(utf8_encode($catalogo));

//echo $catalogo;
?>

<style media="screen">
  .contenedor_tabla{
  	min-height: 320px;
    width: 990px;
    margin: auto;
	  margin-top: 5px;
  }
  .tabla_agregar,  .tabla_remover{
    height: 320px;
    width: 435px;
    float: left;
    margin: 0px 8px 0px 5px;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .botones{
    height: 230px;
    width: 70px;
    float: left;
    margin: 0px 8px 0px 5px;
    display: inline-block;
    padding-top: 100px;
  }
  .boton{margin: 7.5px;text-align: center; opacity: 0.75}
  .agregar_todos,.eliminar_todos{
    border-top: 0;
    border-bottom: 0;
    border-left:  1px solid rgba(85, 85, 85, 0.75);
    border-right:   1px solid rgba(85, 85, 85, 0.75);

  }
  table{ width: 100%;}
  td{border: 0.5px solid #ccc; }
  .agregar_modulo, .remover_modulo, .agregar_modulo:active, .remover_modulo:active{border: 0; outline: 0;}
  .guardar{ float: right;margin-top: 20px;	}
</style>

<script src="js/jqv/dist/jquery.validate.js"></script>
<script src="js/validar/root.js"></script>
<script src="js/notify.js"></script>

<div class="row">
	<div class="titulo_fondo">
		<div class="titulo_pagina2">EDITAR EL MÓDULO</div><a href="#"><img src="Img/close.png" height="20"  class="cerrar_form"/></a>
	</div>
</div>
<br>

<div class="row">
	<div class=" form-group   col-md-6 col-md-offset-0"><label><b>CENTRO DE SALUD: {!! $obj->respuesta[0]->centrosalud; !!}</b></label></div>
	<div class="col-md-2  col-md-offset-3">
    <div class="input-group input-group-sm">
	     <span class="input-group-addon" id="sizing-addon3">Módulo</span>
	     <input type="text" class="form-control" name="consultorio_adcon3" id="consultorio_adcon3"  placeholder="Máximo 50 caracteres" value="{!! $obj->respuesta[0]->no; !!}" onkeypress="return NumEntCheck(event, this, 6);" />
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-5">
    <div class="input-group input-group-sm">
	     <span class="input-group-addon" id="sizing-addon3">Buscar por MAC o Usuario</span>
	     <input type="text" class="form-control"  id="prueba"/>
    </div>
  </div>
  <div class="col-md-1" style="height: 30px;width: 5%;">
    <div>&nbsp;</div>
  </div>    
  <div class="col-md-5">
    <div class="input-group input-group-sm">
	     <span class="input-group-addon" id="sizing-addon2">Descripción</span>
	     <input type="text" class="form-control"  id="txt_descripcion" name="txt_descripcion" value="{!! $obj->respuesta[0]->descripcion; !!}" />
    </div>
  </div>
</div>

<div class="contenedor_tabla">
  <div class="row">

	  <div class="tabla_agregar ">
	    <table class="tabla_agre">
			  <tr><th colspan="3" style="text-align:center">Equipos por Asignar</th></tr>
  			<tr class="titulo_tabla"><th >MAC</th><th>Usuario</th><th width="30px">Opciones</th></tr>
  				@foreach($Cat->respuesta as $rcat)
  			    <tr class="con"><td class="mac">{!! trim($rcat->mac) !!}</td><td class="perfil">{!! trim($rcat->nombre) !!}</td><td class="validar"> <input type="image" style="margin-left:15px;" src="Img/Baja.png" width="20px" class="agregar_modulo" title="Asignar este equipo"></td></tr>
  			  @endforeach
	    </table>
	  </div>

    <div class="botones">
      <div class="boton"><input type="image" class="agregar_todos" src="Img/arrow_add.png" height="40px" width="40px" title="Agregar todos"/></div>
      <div class="boton"><input type="image" class="eliminar_todos" src="Img/arrow_remove.png" height="40px" width="40px" title="Eliminar todos"/></div>
    </div>

  	<div class="tabla_remover">
  		<table class="tabla_remo">
			<tr><th colspan="3" style="text-align:center">Equipos Asignados</th></tr>
			<tr class="titulo_tabla"><th >MAC</th><th>Usuario</th><th width="30px">Opciones</th></tr>

  		    <?php
          for ($i=0; $i<$nequiposreg ; $i++) {
            $mac=explode(" - ", $equiposreg[$i]);
  					if(trim($mac[0])!= ''){
            list($macRemover,$ipRemover,$nombreRemover) = explode(" - ", $equiposreg[$i]);
            echo
            '<tr class="borrar"><td class="mac">'.trim($macRemover).
            '</td><td class="perfil">'. trim($nombreRemover).
            '</td><td><input type="image" style="margin-left:15px;" src="Img/Activar.png" class="remover_modulo" width="20px" height="20px" title="Remover este equipo"></td></tr>';
            }
          }
  			?>
  		</table>
  	</div>
  </div>


	<div class="row" style="text-align:right;" id="upModulo" name="upModulo">
		<button type="button" id="btn_guardar_adcon3" onclick="
		jqSetMensaje('upModulo', '', null);

	 	var Id_Archivo= '<?php echo $_POST['Id_Archivo']; ?>';
		var vActual = Id_Archivo+','+$( '#consultorio_adcon3' ).val();
		var resultado='';

	  $('.tabla_remo .mac').each(function(){ var mac=$(this).html(); resultado+=','+mac;});
	  if (resultado.length > 1) {

	   	resultado=resultado.substring(1, resultado.length);
	  }

		jqGetAjax('catalogo-up_ModuloDeArchivo','upModulo', { Id_Archivo: '<?php echo $_POST['Id_Archivo']; ?>', No: $( '#consultorio_adcon3' ).val(), Descripcion: $( '#txt_descripcion' ).val(), equiposReg: resultado });

		resultado.empty();

		">Actualizar</button>
	</div>
</div>
{{-- ////////////////////////////////////////////// --}}
<script>

	$( ".cerrar_form" ).click(function() {
		jqGetAjax("cerrar","tblMovimientos", { clvRama: '', titleRama: '' });
	});


	$(document).ready(function(){
		var con=0;
		$(".tabla_remo .mac").each(function(){
			var mac=$(this).html();
			con=con+1;
			$('#equiposAsignados').html(con);
			$(".tabla_agre .mac").each(function(){
				var mac2=$(this).html();
					if (mac==mac2) {$(this).closest("tr").remove();}
					});
			});
	});
///////////////////////
  $(document).on("click", ".agregar_modulo", function(event) {
    event.stopImmediatePropagation();
    var tr = '';
	  var filaActual = $(this).closest('tr');
	  var macActual = filaActual.find('.mac').html();
	  var perfilActual = filaActual.find('.perfil').html();

	  var imagen_remover = '<input type="image" style="margin-left:15px;" src="Img/Activar.png" class="remover_modulo" width="20px" height="20px" title="Remover este equipo">';
		tr = '<tr class="borrar"><td class="mac">'+macActual+'</td><td class="perfil">'+perfilActual+'</td><td>'+imagen_remover+'</td></tr>';
		var agregar = $('.tabla_remo').append(tr);

		$(this).closest("tr").remove();
	});
///////////////////////
	$(document).on("click", ".agregar_todos", function(event) {
    event.stopImmediatePropagation();
	    var filaActual = $(this).closest('tr');
	    var macActual = filaActual.find('.mac').html();
	    var imagen_remover = '<input type="image" style="margin-left:15px;" src="Img/Activar.png" class="remover_modulo" width="20px" height="20px" title="Remover este equipo">';

	    $(".tabla_agre .con ").each(function (index) {
	        var mac, perfil;
	        $(this).children("td").each(function (index2) {
	            switch (index2) {
	                case 0: mac = $(this).text();break;
	                case 1: perfil = $(this).text(); break;
	                }
	            })

	            var tr = '<tr class="borrar"><td class="mac">'+mac+'</td><td class="perfil">'+perfil+'</td><td>'+imagen_remover+'</td></tr>';
	            var agregar = $('.tabla_remo').append(tr);
	    })

		 $('.tabla_agre  .con').remove();
    });
///////////////////////
	$(document).on("click", ".remover_modulo", function(event) {
    event.stopImmediatePropagation();
		var tr = '';
	  var filaActual = $(this).closest('tr');
	  var macActual = filaActual.find('.mac').html();
	  var perfilActual = filaActual.find('.perfil').html();

	  var imagen_remover = '<input type="image" style="margin-left:15px;" src="Img/Baja.png" class="agregar_modulo" width="20px" height="20px" title="Asignar este equipo">';
		tr = '<tr class="con"><td class="mac">'+macActual+'</td><td class="perfil">'+perfilActual+'</td><td>'+imagen_remover+'</td></tr>';
		var agregar = $('.tabla_agre').append(tr);

		$(this).closest("tr").remove();
	  tr.empty();
	});
///////////////////////
	$(document).on("click", ".eliminar_todos", function(event) {
    event.stopImmediatePropagation();
	    var filaActual = $(this).closest('tr');
	    var macActual = filaActual.find('.mac').html();
	    var imagen_remover = '<input type="image" style="margin-left:15px;" src="Img/Baja.png" class="agregar_modulo" width="20px" height="20px" title="Asignar este equipo">';

	    $(".tabla_remo .borrar ").each(function (index) {
	        var mac, perfil;
	        $(this).children("td").each(function (index2) {
	            switch (index2) {
	                case 0: mac = $(this).text();break;
	                case 1: perfil = $(this).text(); break;
	                }
	            })

	            var tr = '<tr class="con"><td class="mac">'+mac+'</td><td class="perfil">'+perfil+'</td><td>'+imagen_remover+'</td></tr>';
	            var agregar = $('.tabla_agre').append(tr);
	    })

		$('.tabla_remo  .borrar').remove();

	});

  // Función tomada de http://jsfiddle.net/FranWahl/rFGWZ/
  $(document).on("keyup", "#prueba", function() {
      var mac = $(this).val().toUpperCase();
      $(".tabla_agre tr").each(function(index) {
        if (index >= 2) {

            $self = $(this);
            var mc = $.trim($self.find(".mac").text().toUpperCase());
            var pf = $.trim($self.find(".perfil").text().toUpperCase());

            if (  (mc.match(mac))||(pf.match(mac))   )
            {$self.show();}
            else
            {$self.hide();}
        }
      });

      $(".tabla_remo tr").each(function(index) {
        if (index >= 2) {

            $self = $(this);
            var mc = $.trim($self.find(".mac").text().toUpperCase());
            var pf = $.trim($self.find(".perfil").text().toUpperCase());

            if (  (mc.match(mac))||(pf.match(mac))   )
            {$self.show();}
            else
            {$self.hide();}
        }
      });
  })
</script>
