@extends('masterpage.masterpage')

@section('content')

<input id="_token" name="_token" type="hidden" value="{{ csrf_token() }}" />

<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Dashboard</h1>
      </div>
    </div>
  </div>
</section>

<section class="content">
  <div class="container-fluid">
    <h5 class="mb-2">
      Últimas ocorrências
    </h5>
    <div class="row">
      <div class="col-md-3 col-sm-6 col-12">
        <div class="info-box">
          <span class="info-box-icon bg-success"><i class="far fa-flag"></i></span>
          <div class="info-box-content">
            <span class="info-box-text">Total de ocorrências</span>
            <span class="info-box-number">{{ $occurrenceTotal }}</span>
          </div>
        </div>
      </div>
      <!--@foreach ($occurrencesByAssessment as $key => $item)
        <div class="col-md-3 col-sm-6 col-12">
          <div class="info-box">
            <span class="info-box-icon bg-info"><i class="far fa-envelope"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">{{ $item->assessment }}</span>
              <span class="info-box-number">{{ $item->total }}</span>
            </div>
          </div>
        </div>
      @endforeach-->
    </div>
  </div>
</section>
<hr>

<section class="content">
  <div class="container-fluid">
    <h5 class="mb-2">
      Filtro por data
    </h5>
    <div class="row">
      <div class="col-sm-3">
        <div class="form-group">
          <label>De</label>
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">
              <i class="far fa-calendar-alt"></i>
              </span>
            </div>
            <input type="date" class="form-control float-right" id="de" name="de">
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-12">
        <div class="form-group">
          <label>Até</label>
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">
              <i class="far fa-calendar-alt"></i>
              </span>
            </div>
            <input type="date" class="form-control float-right" id="ate" name="ate">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<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">Lista de ocorrências</h3>
          </div>
          <div class="card-body">
            <table id="tblOccurrences" class="table table-striped">
              <thead>
                <th>Número</th>
                <th>Data</th>
                <th>Responsável</th>
                <th>Orgão</th>
                <th>Ocorrência</th>
                <th>Bairro</th>
                <th style="width: 10%">Ações</th>
            </thead>
            <tbody>
                @if ($occurrences)
                  @foreach($occurrences as $occurrence)       
                    <tr> 
                      <td>{{ $occurrence->id }}</td>
                      <td>{{ date("d/m/Y H:i:s", strtotime($occurrence->created_at)) }}</td>
                      <td>{{ $occurrence->user }}</td>
                      <td>{{ $occurrence->organ }}</td>
                      <td>{{ $occurrence->occurrence }}</td>
                      <td>{{ $occurrence->local }}</td>
                      <td>
                        <button 
                          type="button"
                          occurrenceId="{{$occurrence->id}}"
                          onclick="pictures(this)"
                          data-toggle="modal" 
                          data-target="#picturesModal"
                          title="Ver fotos anexadas"><i class="fa fa-book"></i>
                        </button>
                      </td>
                    </tr>
                  @endforeach
                @endif
              </tbody>
              </tfoot>  
            </table>
            <a href="{{ url('occurrences/create') }}" class="btn btn-primary">Nova ocorrência</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<div id="involvedsModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Envolvidos</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <textarea class="form-control" id="involveds" cols="10"></textarea>
            </div>
          </div>
        </div>                    
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-default" data-dismiss="modal">Sair</button>
      </div>
    </div>
  </div>
</div>

<div id="picturesModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Imagens anexadas</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-12">                 
            <div id="preview"></div>
          </div>
        </div>
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-default" data-dismiss="modal">Sair</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="loadMe" tabindex="-1" role="dialog" aria-labelledby="loadMeLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-body text-center">
        <div class="loader"></div>
        <div clas="loader-txt">
          <p>Carregando dados. <br><br><small>Aguarde...</small></p>
        </div>
      </div>
    </div>
  </div>
</div>

@stop

@section('scripts')

<script type="text/javascript">

  async function involveds(params) {
    let URL_TO_POST = "{{ url('occurrences/involveds') }}";
    let data = new FormData();
    data.append('occurrenceId', params.getAttribute('occurrenceId'));
    fetch(URL_TO_POST, {
      method: 'post',
      body: data,
      credentials: "same-origin",
      headers: {
          "X-CSRF-Token": $('#_token').val()
      },
    }).then(function(response) {
      if(response.status = 200) {
          return response.json();
      } else {
          alert("Atenção! Não foram encontrados envolvidos.");
      }        
    }).then(function(data) {
      document.getElementById('involveds').value = '';
      document.getElementById('involveds').value = data.involveds;
      $('#involvedsModal').show()
    });
  }

  async function pictures(params) {
    $('#preview').empty()
    let URL_TO_POST = "{{ url('occurrences/pictures') }}";
    let data = new FormData();
    data.append('occurrenceId', params.getAttribute('occurrenceId'));
    fetch(URL_TO_POST, {
      method: 'post',
      body: data,
      credentials: "same-origin",
      headers: {
        "X-CSRF-Token": $('#_token').val()
      },
    }).then(await function(response) {
      if(response.status = 200) {
        return response.json();
      } else {
        alert("Atenção! Não foram encontradas fotos anexadas.");
      }        
    }).then(await function(data) {
      for (index in data) {
        let image = new Image();
        image.src = data[index].path;
        image.style.padding = "10px 10px 10px 10px";
        image.style.width = "108px";
        image.style.heigth = "192px";
        preview.appendChild(image);
      }
    });
    $('#picturesModal').show()
  }

  $('#dateSearch').on('click', function() {
    $("#loadMe").modal({
        backdrop: "static", //remove ability to close modal with click
        keyboard: false, //remove option to close with keyboard
        show: true //Display loader!
    });
    const URL_TO_POST = "{{URL('occurrences/getData')}}";
    var Token = $('#_token').val();
    var data = new FormData();
    data.append('periodo', document.getElementById("ok").value);
    fetch(URL_TO_POST, {
      method: 'post',
      body: data,
      credentials: "same-origin",
      headers: {
          "X-CSRF-Token": Token
          },
      }).then(function(response) {
        if(response.status == 200) {
            $("#loading").modal('hide');
            return response.json();
        }
        else {
          $("#loadMe").modal('hide');
          alert("Nenhum resultado foi encontrado.")
        }
      }).then(function (data) {
        $("#topTitle").empty();
        let html = ''
        html = `<div class="row tile_count">
          <div class="co1-md-3 col-sm-4 col-xs-6 tile_stats_count">
            <span class="count_top"><i class="fa fa-inbox"></i>Total de ocorrências</span>
            <div class="count blue"><label id="totalOccurrences" value="0">${ data[2] }</label></div>
            </div>`

        $.each(data[1], function (index, value) {
          html += `<div class="co1-md-3 col-sm-4 col-xs-6 tile_stats_count">
              <span class="count_top"><i class="fa fa-inbox"></i> ${ value.assessment }</span>
              <div class="count green"><label value="0">${ value.total }</label></div>
            </div>`
        })

        $("#topTitle").append(html + `</div>`)

        var table = $('#tblOccurrences').DataTable();
        table.clear().draw();
        $.each(data[0], function(index, value) {
          table.row.add( [
            value.created_at,
            value.user,
            value.organ,
            value.occurrence,
            value.assessment,
            value.local,
            `<button 
              type="button"
              occurrenceId="${value.id}"
              onclick="involveds(this)"
              title="Envolvidos"
              data-toggle="modal" 
              data-target="#involvedsModal"
              style="float:left;"><i class="fa fa-users"></i>
            </button>

            <button 
              type="button"
              occurrenceId="${value.id}"
              onclick="pictures(this)"
              data-toggle="modal" 
              data-target="#picturesModal"
              title="Ver fotos anexadas"><i class="fa fa-picture-o"></i>
            </button>`
          ] ).draw( false );
        });
      $("#loadMe").modal('hide');
    });
  });
    
  $('#tblOccurrences').DataTable({
    "processing": true,
    "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"
      },
    }
  });

</script>

@stop