@extends('masterpage.masterpage')

@section ('content')
<section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1>Trabalho social</h1>
        </div>
      </div>
    </div>
  </section>

  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          @if(Session::has('flash_message'))
            <div class="alert alert-success alert-dismissible">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
              <h5><i class="icon fas fa-check"></i> {{ Session::get('flash_message')}}</h5>
            </div>
          @endif
          @if(Session::has('error'))
            <div class="alert alert-danger alert-dismissible">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
              <h5><i class="icon fas fa-ban"></i> {{ Session::get('error')}}</h5>
            </div>
          @endif
          <div class="card">
            <div class="card-header">
              <h3 class="card-title"><b><i>Lista</b></i></h3>
           
            </div>
            <div class="card-header">
                <a style="margin-top: 10px" href="{{ URL('sociais/create') }}" class="btn btn-primary">Novo cadastro</a>
            </div>  
            <div class="card-body">            
              <table id="example1" class="table table-striped">
                <thead>                
                <tr>
                  <th>Trabalho social</th>
                  <th>Liderança</th>
                  <th>Data solicitada</th>
                  <th>Data devolução</th>
                  <th style="text-align: right">Ações</th>
                </tr>
                </thead>
                <tbody>
                  @foreach ($sociais as $social)
                  <tr>
                    <td>{{ $social->grupo->nome }}</td>   
                    <td>{{ $social->lideranca_nome }}</td>
                    <td>{{ date("d/m/Y", strtotime($social->data_emprestimo)) }}</td>
                    @if ($social->data_devolucao != null)
                      <td>{{ date("d/m/Y", strtotime($social->data_devolucao)) }}</td>
                    @else
                    <td>-</td>
                    @endif
                    <td style="text-align: right">
                      <div>
                        <button type="button" class="btn btn-success btn rounded-circle" socialId={{ $social->id }} onclick="openModal(this)"
                            title="Ver eleitores"><i class="fa fa-users"></i>
                        </button>
                        <a href="#" onclick="confirmDelete(this)" socialId="{{ $social->id }}" class="btn btn-danger btn rounded-circle"
                            title="Excluir"><i class="fa fa-trash"></i>
                        </a>
                      </div>  
                    </td>
                  </tr>   
                @endforeach
                </tbody> 
                </tfoot>
              </table>
              <a style="margin-top: 10px" href="{{ URL('sociais/create') }}" class="btn btn-primary">Novo cadastro</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
    
  </section>

  <div class="modal fade" id="modalEleitores" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalTitle">Lista</h5>
        </div>
        <div class="modal-body">           
          <table id="tblEleitores" class="table table-striped">
            <thead>                
            <tr>
              <th>Eleitor(res)</th>
            </tr>
            </thead>
            <tbody>
            </tbody> 
            </tfoot>
          </table>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
        </div>
      </div>
    </div>
  </div>

  @stop

 @section('scripts')

  <script>

    function openModal(params) {
      var csrfToken = document.getElementById('csrf-token').value;
      var data = new FormData();
      data.append('socialId', params.getAttribute('socialId'));      
      fetch('{{URL('sociais/getEleitores')}}', {
        method: 'post',
        body: data,
        headers: {
          "X-CSRF-Token": csrfToken
        },       
      }).then(function(response) {
        if (response.status === 200) {
          return response.json()
        } else {
          Swal.fire(
            'Falha!',
            'Falha ao buscar eleitores.',
            'error'
          )
        }
      }).then(function(json) {
        document.getElementById('modalTitle').innerHTML = 'Liderança: <i>' + json[0].lideranca_nome + '</i>'
        let table = $('#tblEleitores').DataTable();
        table.clear().draw();
        let arrayControle = []
        json.forEach(element => {
          arrayControle = [element.eleitor_nome]
          table.row.add( arrayControle ).draw();
        });
        $("#modalEleitores").modal()
      })
    }

    $(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)');

      $("#tblEleitores").DataTable({
          "responsive": true,
          "autoWidth": false,
          "bFilter": 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)');
    });

    function confirmDelete(params) {
      Swal.fire({
        title: 'Tem certeza que deseja excluir?',
        text: "Os dados serão excluídos permanentemente!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Confirmar',
        cancelButtonText: 'Cancelar',
      }).then((result) => {
        if (result.isConfirmed) {
          var csrfToken = document.getElementById('csrf-token').value;
          var data = new FormData();
          data.append('socialId', params.getAttribute('socialId'));      
          fetch('{{URL('sociais/destroy')}}', {
            method: 'post',
            body: data,
            headers: {
              "X-CSRF-Token": csrfToken
            },       
          }).then(function(response) {
            if (response.status === 200) {
              Swal.fire({
                icon: 'success',
                title: 'Cadastro excluído com sucesso',
                showConfirmButton: false,
                timer: 1500
              })
              window.location.reload();
            } else {
              Swal.fire(
                'Falha!',
                'Falha ao excluir despesa.',
                'error'
              )
            }
          });
        }
      })
    }

    </script>
 @stop