@extends ('layouts.diseño')

@section ('contenido')


         <section class="content">
      <div class="container-fluid">
        <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
     
            <div class="box box-primary">
            <div class="panel-heading"> <center> <h4><strong>Cierre Proceso Admitidos</strong></h4></center>
              </div>
              <br><br>
        

              <tr> <th>Instituto/Extensión:</th> </tr> &nbsp;&nbsp;  <td>{{$ladilla->NombInstituto}}</td>  <br><br>
              <tr> <th>Especialidad:</th> </tr> &nbsp;&nbsp;  <td>{{$ladilla->NombEspecialidad}}</td>
             <br><br> 
              <tr> <th>Lapso:</th> </tr> &nbsp;&nbsp;  <td>{{$ladilla->Lapso}}</td>
              <br><br>
               <tr> <th>Límite de Oferta:</th> </tr> &nbsp;&nbsp;  <td>{{$sumadeCUpos}}</td>

        <br><br>
      <td><input type="text" id="domTextElement" value="{{$sumadeCUpos}}" ></td><br>





              <!-- /.card-header -->
              <form name="formulario" class="form-groub" method="get" action="{{ route('Temporal') }}" target="_blank">
              <!--  <label>
              <input style="margin: 8px" class="form-check-input"  type="checkbox" id="chec" onclick="marcar(this); btTutorial.disabled = !this.checked"/> Marcar/Desmarcar Todos
              </label>-->
 


              <div class="card-body">


              <button style="margin: 8px" class="btn btn-success btn-sm Active info button pull-right" onclick="return confirm('¿Seguro deseas continuar?')" name="btTutorial" disabled>Aprobar</button>
 
              <a style="margin: 8px" href="{{ route('Admitidos.index') }}" class="btn btn-danger btn-sm Active info button pull-right">Regresar</a>
   
                </div>
  <div class="form-group">
<input id="myInput" type="text" placeholder="Cédula.." onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;">

 </div>
 

                <table class="table table-bordered"  id="lista">
     
                  <thead>    
                      
                    <th style="width: 10px"></th>
                      <th style="width: 10px">posición</th>
                      <th>Identificación</th>
                      <th>Nombres</th>
                      <th>Apellidos</th>
                      <th>Estatus</th>
                      <th style="width: 40px">Condición</th>
                      <th>Revertir</th>
                    </tr>
                  </thead>
                  @foreach($posiciones as $datos)
                  <tbody id="myTable">
                    <tr>
                      <div class="form-check">
                        
                    <td> <input class="form-check-input" type="checkbox" value="{{$datos->id}}" name="aspirante[]" onclick="btTutorial.disabled = !this.checked" id="defaultCheck1" ></td>
                    </div>
                   
                  
                      <td>{{$datos->NUN}}</td>
                       @if($datos->opsu == 1)
                      <td  class="highlightme">{{$datos->Cedula}} </td>
                      @else
                       <td >{{$datos->Cedula}} </td>
                       @endif
                      <td>{{$datos->PrimerNombre}}&nbsp {{$datos->SegundoNombre}}</td>
                      <td>{{$datos->PrimerApellido}}&nbsp {{$datos->SegundoApellido}}</td>
                      <td>{{$datos->estatus}} </td>
                      <td>{{$datos->condicion}} </td>

                      @if($datos->condicion ===  'Admitido' && $datos->EnviadoSIGE ===  '0')

    <td><button style="margin: 3px"  type="submit" value="{{$datos->id}}" id="evento_eliminar" name="evento_eliminar" class="btn btn-warning btn-sm Active info button pull-right"  >Revertir</button ></td>


    @elseif($datos->EnviadoSIGE ===  '1')

    <td><div> <span tooltip="El aspirante se encuentra en SIGE" flow="left">Pre-Inscrito</span></div></td>

@else
<td><center> </center></td>



@endif 
                    </tr>
                   
                  </tbody>
                 
                  @endforeach
                </table>
              </div>
            
            </div>
            <!-- /.card -->

          </div>
          <!-- /.col -->
         
          <!-- /.col -->
        </div>
        <!-- /.row 
      -->
        <!-- /.row -->
   
      </div><!-- /.container-fluid -->

      <main>
 

</main>

    </section>


    

@endsection

@section ('scripts')



 <script type="text/javascript">

  function marcar(source) 
	{
		checkboxes=document.getElementsByTagName('input'); //obtenemos todos los controles del tipo Input
		for(i=0;i<checkboxes.length;i++) //recoremos todos los controles
		{
			if(checkboxes[i].type == "checkbox") //solo si es un checkbox entramos
			{
				checkboxes[i].checked=source.checked; //si es un checkbox le damos el valor del checkbox que lo llamó (Marcar/Desmarcar Todos)
			}
		}

  
   
	}
  $("#chec").on("click", function() {  
    $(".user").prop("checked", this.checked);  
});


$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});





 

var limite = document.getElementById("domTextElement").value; 
//var limite = 2;
//console.log(limite);
$('input.form-check-input').change(function() {
   if($("input:checked").length > limite) {
       this.checked = false;
   }
});



 /*   <script src="http://code.jquery.com/jquery-latest.min.js">
   

  $.expr[':'].icontains = function(obj, index, meta, stack){
    return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
    };
    $(document).ready(function(){   
        $('#buscador').keyup(function(){
                     buscar = $(this).val();
                     $('#lista tr').removeClass('resaltar');
                            if(jQuery.trim(buscar) != ''){
                               $("#lista tr:icontains('" + buscar + "')").addClass('resaltar');
                            }
            });
    });    */


 


$('#domTextElement').hide(); //OCULTA EL VALOR DEL LIMITE DE OFERTA SEGUN EL INSTITUTO Y LA ESPECIdad


function showTooltip(e) {
  var tooltip = e.target.classList.contains("tooltip")
      ? e.target
      : e.target.querySelector(":scope .tooltip");
  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
          ? (e.pageX + 10 + "px")
          : (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
          ? (e.pageY + 10 + "px")
          : (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}

var tooltips = document.querySelectorAll('.couponcode');
for(var i = 0; i < tooltips.length; i++) {
  tooltips[i].addEventListener('mousemove', showTooltip);
}
 
  </script>

<style>
.resaltar{background-color:#FF0;}

.highlightme { background-color:#FFFF00; }

/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: .9em; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}

</style> 

@endsection