@extends('occurrences.master')

@section('content')

<input id="_token" name="_token" type="hidden" value="{{ csrf_token() }}" />
<!-- page content -->
  <!-- top tiles -->
  <div id="topTitle">
    <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">{{ $occurrenceTotal }}</label></div>
      </div>
    @foreach ($occurrencesByAssessment as $key => $item)
        <div class="co1-md-3 col-sm-4 col-xs-6 tile_stats_count">
          <span class="count_top"><i class="fa fa-inbox"></i> {{ $item->assessment }}</span>
          <div class="count green"><label value="0">{{ $item->total }}</label></div>
        </div>
    @endforeach
    </div>
  </div>
  <!-- /top tiles -->

  <div class="clearfix"></div>

  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="x_panel">
        <div class="x_title">
          <h2>Lista</h2>
          <div class="clearfix"></div>
        </div>

        <div class="x_content">
          <div class="form-group">
              <div class="col-md-12 col-sm-6 col-xs-12 form-group has-feedback">
                  <label>PERÍODO</label>
                  <input type="text" name="ok" id="ok" class="form-control" value="{{$date}} - {{$date}}">
                  <button style="margin-top: 25px; width: 100%" type="button" id="dateSearch" class="btn btn-sm btn-primary">Pesquisar</button>      
              </div>
          </div>

          <div class="clearfix"></div>
          <div class="ln_solid"></div>
        
          <table class="table table-hover table-bordered" id="rvs-table">
            <thead>
                <th>DATA</th>
                <th>OCORRÊNCIA</th>
                <th>LOCAL</th>
                <th style="width: 10%">AÇÕES</th>
            </thead>
            @if ($occurrences)
              <tbody>
                @foreach($occurrences as $occurrence)       
                  <tr> 
                    <td>{{ date("d/m/Y H:i:s", strtotime($occurrence->created_at)) }}</td>
                    <td>{{ $occurrence->occurrence }}</td>
                    <td>{{ $occurrence->local }}</td>
                    <td>
                      <button 
                        type="button"
                        occurrenceId="{{$occurrence->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="{{$occurrence->id}}"
                        onclick="pictures(this)"
                        data-toggle="modal" 
                        data-target="#picturesModal"
                        title="Ver fotos anexadas"><i class="fa fa-picture-o"></i>
                      </button>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            @endif
          </table> 
           
          <div class="clearfix"></div>
        </div>
    </div>
  </div>
 </div>
</div>

<div id="involvedsModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
      <!-- Modal content-->
      <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12">                          
              <div class="x_panel">
                  <div class="x_title">
                      <h2>LISTA</h2>
                      <div class="clearfix"></div>
                  </div>
  
                  <div class="x_content">
                      <div class="col-md-12 col-sm-6 col-xs-12 form-group has-feedback">
                          <label>ENVOLVIDOS</label>
                          <textarea class="form-control col-md-7 col-xs-12" id="involveds" cols="5"></textarea>
                      </div>

                      <div class="col-md-12 col-sm-6 col-xs-12 form-group has-feedback">
                        <button style="width: 100%" data-dismiss="modal" type="button" class="buttonFinish buttonDisabled btn btn-default">Sair</button>                         
                      </div>
                  </div>    
                  <div style="border: 0px" class="modal-footer"></div>
              </div>
          </div>
      </div>
  </div>
</div>

<div id="picturesModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
      <!-- Modal content-->
      <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12">                          
              <div class="x_panel">
                  <div class="x_title">
                      <h2>LISTA</h2>
                      <div class="clearfix"></div>
                  </div>
  
                  <div class="x_content">
                      <div class="col-md-12 col-sm-6 col-xs-12 form-group has-feedback">
                          <label>IMAGENS ANEXADAS</label>
                          <div id="preview" class="col-md-12 col-sm-6 col-xs-12 col-md-offset-3">
                            
                          </div>
                      </div>

                      <div class="col-md-12 col-sm-6 col-xs-12 form-group has-feedback">
                        <button style="width: 100%" data-dismiss="modal" type="button" class="buttonFinish buttonDisabled btn btn-default">Sair</button>                         
                      </div>
                  </div>    
                  <div style="border: 0px" class="modal-footer"></div>
              </div>
          </div>
      </div>
  </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 encontrados 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";
          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/getDataMobile')}}";
    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 = $('#rvs-table').DataTable();
        table.clear().draw();
        $.each(data[0], function(index, value) {
          table.row.add( [
            value.created_at,
            value.occurrence,
            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');
    });
  });
    
  $('#rvs-table').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"
      },
    }
  });

  var jsDate = $('#ok').val();
    $('#ok').daterangepicker({
    autoApply: true,
    "locale": {
        "format": "DD/MM/YYYY",
        "separator": "-",
        "applyLabel": "OK",
        "cancelLabel": "CANCELAR",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "Custom",
        "daysOfWeek": [
            "Dom",
            "Seg",
            "Ter",
            "Qua",
            "Qui",
            "Sex",
            "Sáb"
        ],
        "monthNames": [
            "Janeiro",
            "Fevereiro",
            "Março",
            "Abril",
            "Maio",
            "Junho",
            "Julho",
            "Agosto",
            "Setembro",
            "Outubro",
            "Novembro",
            "Dezembro"
        ],
        "firstDay": 1
      }
    });

</script>

@stop