@extends('layouts.diseño')

@section('contenido')

<div class="box">
<div class="panel-heading"><center><h4><strong>Traspaso a Postgrado</strong></h4></center></div> 
       
  <br>


 {{ Form::open(['route' => 'Postgrado.index', 'method' => 'GET', 'class' => 'form-inline']) }}






  <div class="col-6">
   {{ Form::select('Institutos_id', $sedeofertas, null, ['class'=>'form-control', 'id' => 'sedee', 'placeholder' => 'Institutos/Extensión']) }} 
   </div> 
        <br>
                   <div class="col-6">  
   
          
            {{ Form::select('Especialidad_id', array(), null, ['class'=>'form-control', 'id'=>'curso1','placeholder' => 'Especialidad']) }}
           
        
  
          <button type="submit" id="submit" class="btn btn-default">
            <span class="fa fa-search">&nbsp;</span>
          </button>
    </div>
                        
{{ Form::close() }}

</div>

 @if($Preinscritos->count())
<table id="example" class="display nowrap" style="width:100%">
        <thead>
            <tr>
                <th>Acción</th>
                <th>Identificación</th>
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Género</th>
                <th>Edad</th>
                <th>Correo</th>
                <th>Institutos</th>
                <th>Especialidad</th>
                <th>Lapso</th>
                <th>Condición</th>
            </tr>
        </thead>
        <tbody>
              @foreach($Preinscritos as $user)
            <tr>
                 <td> 
      <input data-id="{{ $user->Cedula }}" class="mi_checkbox" name="aprobacion[]" type="checkbox" data-toggle="toggle" data-on="Aprobado" data-off="Denegado" data-onstyle="success" data-offstyle="danger" {{ $user->Aprobado ? 'checked' : '' }}>

       
</td>
                <td>{{ $user->Cedula }}</td>
                <td>{{ $user->PrimerNombre }}</td>
                <td>{{ $user->PrimerApellido }}</td>
                <td>{{ $user->Genero }}</td>
                <td>{{ $user->Edad }}</td>
                <td>{{ $user->Correo }}</td>
                <td>{{ $user->NombInstituto }}</td>
                <td>{{ $user->NombEspecialidad }}</td>
                <td>{{ $user->Lapso }}</td>
                     <td id="resp{{ $user->id }}"> 
                        @if($user->Aprobado == 1) 
                      <label style = "background-color: #0fc166;">Aprobado</label>
                       @else
                        <label style = "background-color: #ed9c28;">En_Espera </label>

                            @endif
                      
                    </td>
            </tr>
        @endforeach
         
        </tbody>
    </table>
@endif

@endsection

@section ('scripts')
<script type ="text/javascript">



$(document).ready(function () {
    $('#example').DataTable({
      //   scrollY: 200,
       // scrollX: true,
        "language": {
          "search":  "Buscar",
          "searchPlaceholder": "Buscar...",
          "lengthMenu": "Mostrar _MENU_ registros por página",
          "info":       "Mostrando página _PAGE_ de _PAGE_",
           "emptyTable":     "No hay datos disponibles en la tabla",
           "infoEmpty":      "Mostrando 0 a 0 de 0 entradas",
          "paginate": {

                    "previous": "Anterior",
                    "next":     "Siguiente",
                    "first":    "Primero",
                    "last":     "Último"
          }
        }

    });
});

$(function () { 
     
     $('select[name="Institutos_id"]').on('change', function(){
         var intituto = $(this).val();
       // var select = document.getElementById("modoingre").value;
       //  console.log(intituto);
        // console.log(sedeId, valor);
         if(intituto) {
             $.ajax({
                 url: '/EspecialidadesPost/'+intituto,
                 type:"GET",
                 dataType:"json",
                 beforeSend: function(){
                     $('#loader').css("visibility", "visible");
                 },
                 
                  
                 success:function(data) {
  
                  $('select[name="Especialidad_id"]').empty();
                  
                
                    //console.log(data)
                                
                                                        
                     $('select[name="Especialidad_id"]').append('<option value="'+ "0" +'">' + "--Seleccione--" + '</option>');
                     
                     $.each(data, function(key, value){
                      $('select[name="Especialidad_id"]').append('<option value="'+ key +'">' + value + '</option>');
                      
                  });
                 },
                 complete: function(){
                     $('#loader').css("visibility", "hidden");
                 }
             });
             
         } else {
             $('select[name="Especialidad_id"]').empty();
         }
  
     })
  
  
    });

    
     $(document).ready(function() {
      
$('.mi_checkbox').change(function() {
    //Verifico el estado del checkbox, si esta seleccionado sera igual a 1 de lo contrario sera igual a 0
    var Aprobado = $(this).prop('checked') == true ? 1 : 0; 
    var id = $(this).data('id'); 
      //  console.log(Aprobado,id);
    $.ajax({
        type: "GET",
        dataType: "json",
        //url: '/StatusNoticia',
        url: '{{ route('validarcertificado') }}',
        data: {'Aprobado': Aprobado, 'id': id},
        success: function(data){
            $('#resp' + id).html(data.var); 
          //  console.log(data.var)
         
        }
    });
})
      
});

</script>
@endsection

<!-- <style>
 
.dataTables_filter {
   float: right !important;
}
</style>-->