@extends('layout')


@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<script src="{{ asset('dashboard/js/reportes/reportes.js?280821')}}"></script>
<meta name="csrf-token" content="{{ csrf_token() }}" />
@csrf


<div class="container">
<div class="row">
    <div class="col-md-12 form-group">
        <h5 id="titleView">Generación de Reportes</h5>
    </div>
</div>

<div class="row form-group text-center">
    <div class="col-md-3">
      <h6>Fuente de datos</h6>
      <select id="select_fuente" class="form-control">
        <option value="TODOS">Todos</option>
        <option value="WHATSAPP">Grupos de Seguridad de WhatsApp</option>
        <option value="POLICIA_AMBIENTAL">Policía Ambiental</option>
        <option value="APP">Saltillo Seguro App</option>
      </select>
    </div>
    <div class="col-md-3">
      <h6>Turno</h6>
      <select id="select_turno" class="form-control" onchange="getTurn(this);">
        <option value="06A14">Turno de 6AM a 2PM</option>
        <option value="14A22">Turno de 2PM a 22PM</option>
        <option value="22A06">Turno de 22PM a 6AM</option>
      </select>
    </div>
    <div class="col-md-2">
        <h6>Fecha de Inicio</h6>
        <input id="Inicio" type="text" class="date form-control" name="init" placeholder="" required> 
    </div>
    <div class="col-md-2">
        <h6>Fecha Final</h6>
        <input id="Fin" type="text" class="date form-control" name="end" placeholder="" required> 
    </div>
    <div class="col-md-2">
        <h6>.</h6>
        <button type="button" class="btn btn-primary" onClick="check_download_report()">Generar Reporte</button>
    </div>
</div>
    
<script type="text/javascript">
$('.date').datepicker({
    format: 'yyyy-mm-dd'
});
</script>     
  

  <!--
  <div class="alert alert-secondary" role="alert">
    Turno de 6:00 AM a 2:00 PM
  </div>
-->
<div class="row">
  <div class="col-md-12">
    <h6 style="margin-top:20px;">Reportes - Acumulado por turnos y total</h6>
    <table style="font-size: 12px;" id="table_reportes" class="table table-hover">
      <thead class="thead-dark">
        <tr>
          <th scope="col">Tipo de Reporte</th>
          <th scope="col">6:00 am a 1:59 PM</th>
          <th scope="col">2:00 pm a 21:59 PM</th>
          <th scope="col">10:00 pm a 5:59 AM</th>
          <th scope="col">Total de 6:00 AM a 5:59 AM</th>
        </tr>
      </thead>
      <tbody>
        <thead class="table-light">
          <tr>
            <td>Grupos de WhatsApp</td>
            <td id="whatsapp_06A14">---</td>
            <td id="whatsapp_14A22">---</td>
            <td id="whatsapp_22A06">---</td>
            <td id="whatsapp_TOTAL">---</td>
          </tr>
          <tr>
            <td>Policía ambiental</td>
            <td id="policia_06A14" >---</td>
            <td id="policia_14A22">---</td>
            <td id="policia_22A06">---</td>
            <td id="policia_TOTAL">---</td>
          </tr>
          <tr>
            <td>App Saltillo Seguro</td>
            <td id="app_06A14" >---</td>
            <td id="app_14A22">---</td>
            <td id="app_22A06">---</td>
            <td id="app_TOTAL">---</td>
          </tr>
        </thead>
      </tbody>
    </table>
  </div>  
</div>


  <div class="row">
    <div class="col-md-6">
      <h6 style="margin-top:20px;">Grupos de Seguridad de WhatsApp</h6>
      <table style="font-size: 12px;" id="table_whatsapp" class="table table-hover">
        <thead class="thead-dark">
          <tr>
            <th scope="col">Incidente</th>
            <th scope="col">Total</th>
            <th scope="col">Pendiente</th>
            <th scope="col">En Proceso</th>
            <th scope="col">Atendido</th>
            <th scope="col">No Encontrado</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <div class="col-md-6">
      <h6 style="margin-top:20px;">Policía Ambiental</h6>
      <table style="font-size: 12px;" id="table_policia" class="table table-hover">
        <thead class="thead-dark">
          <tr>
            <th scope="col">Incidente</th>
            <th scope="col">Total</th>
            <th scope="col">Pendiente</th>
            <th scope="col">En Proceso</th>
            <th scope="col">Atendido</th>
            <th scope="col">No Encontrado</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
      <h6 style="margin-top:20px;">Saltillo Seguro App</h6>
      <table style="font-size: 12px;" id="table_app" class="table table-hover">
        <thead class="thead-dark">
          <tr>
            <th scope="col">Servicio</th>
            <th scope="col">Total</th>
            <th scope="col">Pendiente</th>
            <th scope="col">En Proceso</th>
            <th scope="col">Atendido</th>
            <th scope="col">No Encontrado</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>

</div>              
@stop