@extends('layouts.app')

@section('content')
<!-- <div class="container"> -->



    <div class="row">
    <div class="col-sm-1"></div>
      <div class="col-sm-1">Buscar: </div>
      <div class="col-sm-2">
        <form action="/home" method="post">
          @csrf
         <input type="text" class="form-control" id="buscar" name="buscar" aria-describedby="buscar">
          
      </div>
      <div class="col-sm-1"><button type="submit" class="btn btn-primary">Buscar</button> </div>
      <div class="col-sm-2"></div>
      </form>
      
      <div class="col-sm-2">
        <!-- <button type="submit" id="enviar" name="enviar" class="btn btn-primary">Enviar Correos</button> -->
         <a href="#" id="enviar" onclick="enviar();" class="btn btn-primary" >Enviar Correos</a>
      </div>
      
    </div>

<br>
<form name="form1" id="form1">

  <table class="table">
  <thead>
    <tr>

      <th scope="col">Cuenta</th>
      <th scope="col">Nombre</th>
      <th scope="col">MAIL</th>
      <th scope="col"> <input type="checkbox" onClick="toggle(this)"  id="all" name="all"> </th>
    </tr>
  </thead>
  <tbody>
    @foreach ($consulta as $item)
    <tr> 
      <td>{{$item->cuenta}}<input type="hidden" id="cuenta_{{$item->cuenta}}" value="{{$item->cuenta}}"></td>
      <td>{{$item->Nombre}}<input type="hidden" id="nombre_{{$item->cuenta}}" value="{{$item->Nombre}}"></td>
      <td>{{$item->EMAILPRED}}<input type="hidden" id="EMAILPRED_{{$item->cuenta}}" value="{{$item->EMAILPRED}}"></td>
    <td>
            <div class="row">
                <div class="col-sm-6">
                      <center> <input type="checkbox" class="form-check-input" name="foo" id="Check_{{$item->cuenta}}" value="{{$item->cuenta}}" ></center>
                  </div>
                  <div class="col-sm-6">
                            <div class="spinner-border spinner-border-sm" role="status"  id="{{$item->cuenta}}"  style="display:none;">
                            <span class="sr-only">Loading...</span>
                            </div>
                            <div id="{{$item->cuenta}}_mensaje"></div>                  
                  </div>
            </div>
      </td>
    </tr>
   @endforeach

   <!--  -->
  </tbody>
</table>

</form>

<!-- </div> -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script language="JavaScript">
//*************************************************************************************************************************
//selecciona todos los checkbox
function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}
//*************************************************************************************************************************
function enviar() {
  var selected = [];
  $(":checkbox[name=foo]").each(function() {
    if (this.checked) {
        // console.log($(this).val());
        var loading = document.getElementById($(this).val());
        var cuenta  = document.getElementById("cuenta_"+$(this).val());
        var nombre  = document.getElementById("nombre_"+$(this).val());
        var mail    = document.getElementById("EMAILPRED_"+$(this).val());
        var msg     =document.getElementById($(this).val()+"_mensaje");
        
        // console.log(cuenta.value);
        // console.log(nombre.value);
        // console.log(mail.value);
        
        loading.style.display = 'block';
        //       //crea pdf
             (async () => {
                    let der = await asyncFunc_opc1(cuenta.value,nombre.value,mail.value);
                    console.log(der.data.status);
                    if(der.data.status=="ok"){
                        loading.style.display = 'none';
                        msg.innerHTML = "Enviado";
                    } 
                })();   
                
        }   

  });
}

async function asyncFunc_opc1(cuenta,nombre,mail) {
    try {
        
        var loading = document.querySelector('meta[name="csrf-token"]').content;
        console.log(loading);

    // fetch data from a url endpoint
    const response = await axios({
                                    method: 'post',
                                    url: '/Sindatos',
                                    data: {
                                        cuenta1: cuenta,
                                        nombre1: nombre,
                                        mail1:   mail,
                                        _token: loading
                                    }
                                    });
    const data = await response;

    return data;
  } catch (error) {
    alert(error); // catches both errors
  }
}

</script>

@endsection