@extends('masterpage.masterpage')
<!-- Content Header (Page header) -->

@section ('content')
<section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1>Reuniões</h1>
        </div>
      </div>
    </div><!-- /.container-fluid -->
  </section>
  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">Checkin</h3>
            </div>
            <div class="card-body">            
              <table id="example1" class="table table-striped">
                <thead>                
                <tr>
                  <th>Sub lider</th>
                  <th>Telefone</th>    
                  <th style="text-align: right">Marcar presença</th>
                </tr>
                </thead>
                <tbody>
                  @foreach ($subLideres as $subLider)
                  <tr>
                    <td>{{ $subLider->name }}</td>
                    <td>{{ $subLider->whatsapp }}</td>               
                    <td style="text-align: right">
                      <div class="form-check">
                        <input class="form-check-input" style="width: 20px; height: 20px;" type="checkbox" onclick="checkin(this)" 
                          id="{{ $subLider->id }}" subName="{{ $subLider->name }}">
                      </div>
                    </td>
                  </tr>   
                @endforeach
                </tbody> 
                </tfoot>
              </table>
            </div>
            <div class="card-footer">
              <button type="button" onclick="submitCheckin()" class="btn btn-primary">Salvar</button>
              <a href="{{ url('reunioes/show') }}" class="btn btn-default">Voltar </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />

  </section>

  @stop

 @section('scripts')

    <script>

      $(function () {
        $("#example1").DataTable({
          "responsive": true,
          "autoWidth": false,
          "oLanguage":{
            "sEmptyTable": "Nenhum registro encontrado",
            "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
            "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
            "sInfoFiltered": "(Filtrados de _MAX_ registros)",
            "sInfoPostFix": "",
            "sInfoThousands": ".",
            "sLengthMenu": "_MENU_ Resultados por página",
            "sLoadingRecords": "Carregando...",
            "sProcessing": "Processando...",
            "sZeroRecords": "Nenhum registro encontrado",
            "sSearch": "Pesquisar ",
            "oPaginate": {
              "sNext": "Próximo",
              "sPrevious": "Anterior",
              "sFirst": "Primeiro",
              "sLast": "Último"
            }
            }
        }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
      });

      var subId = []
      var subName = []
      var reuniaoId = {!! json_encode($reuniaoId) !!}
      function checkin(params) {
        if (document.getElementById(params.getAttribute('id')).checked) {
          subId.push(params.getAttribute('id'))
          subName.push(params.getAttribute('subName'))
        } else {
          subId = subId.filter(function(value, index, arr) { 
            return value != params.getAttribute('id');
          });
          subName = subName.filter(function(value, index, arr) { 
            return value != params.getAttribute('subName');
          });
        }
      }

      function submitCheckin() {
        var csrfToken = $('#csrf-token').val();
        var data = new FormData();
        data.append('reuniaoId', reuniaoId);
        data.append('subId', JSON.stringify(subId))
        data.append('subName', JSON.stringify(subName))
        
        fetch('{{URL('reunioes/checkin')}}', {
          method: 'post',
          body: data,
          headers: {
              "X-CSRF-Token": csrfToken
          },       
        }).then(function(response) {
          Swal.fire({
            icon: 'success',
            title: 'Cadastro realizado com sucesso',
            showConfirmButton: false,
            timer: 1500
          })
          location.reload();
        }).then(function(json) {
        }).catch(function(error) {
        });
          
      }

    </script>
 @stop