@extends('layout')
@include('modal/modal_loading')
@include('modal/modal_error_alert')
@include('modal/modal_dashboard_table_reportes')
@section('topmenu')
<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="nav nav-pills ml-auto">
  <li class="nav-item">
    <a class="nav-link active" href="{{ route('/dashboard/estadistica/whatsapp') }}">Grupos de WhatsApp</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="{{ route('/dashboard/estadistica/servicios') }}">Incidentes</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="{{ route('/dashboard/estadistica/coloniascalles') }}">Colonias y Calles</a>
  </li>
</ul>
</div>
@stop

@section('content')
         
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

<script src="{{ asset('dashboard/js/estadistica/reports.js')}}"></script>
<script src="{{ asset('dashboard/js/estadistica/whatsapp.js')}}"></script>
<style src="{{ asset('dashboard/css/styles.css')}}"></style>
<meta name="csrf-token" content="{{ csrf_token() }}" />
@csrf

<div class="container">
<div class="row">
    <div class="col-md-12 form-group">
        <h5 id="titleView">Estadística de Saltillo Seguro - WhatsApp</h5>
    </div>
</div>

<div class="row form-group text-center">
    <div class="col-md-4">
        <h6>Fecha de Inicio</h6>
        <input id="Inicio" type="text" class="date form-control" name="init" placeholder="" required> 
    </div>
    <div class="col-md-4">
        <h6>Fecha Final</h6>
        <input id="Fin" type="text" class="date form-control" name="end" placeholder="" required> 
    </div>
    <div class="col-md-4">
        <h6>.</h6>
        <button type="button" class="btn btn-primary" onClick="get_stats()">Generar Estadística</button>
    </div>
</div>
    
<script type="text/javascript">
$('.date').datepicker({
    format: 'yyyy-mm-dd'
});
</script>                

<h6 style="margin-top:30px;">Acumulado</h6>

<div class="card-deck">
  <div class="card text-white bg-primary mb-3">
    <div class="card-body">
      <h5 id="card_number_groups" class="card-title">Cargando...</h5>
      <p class="card-text text-white">Donde se han realizado reportes</p>
    </div>
  </div>
  <div class="card text-white bg-success mb-3">
    <div class="card-body">
      <h5 id="card_no_persons" class="card-title">Cargando...</h5>
      <p class="card-text text-white">Realizaron reportes</p>
    </div>
  </div>
  <div class="card text-white bg-info mb-3">
    <div class="card-body">
      <h5 id="card_number_reports" class="card-title">Cargando...</h5>
      <p class="card-text text-white">Se recibieron en el periodo</p>
    </div>
  </div>
</div>
    
<div class="card-deck">
  <div class="card text-white bg-secondary mb-3">
    <div class="card-body">
      <h5 class="card-title">1er grupo con más reportes</h5>
      <p id="card_first_group" class="card-text text-white">Cargando...</p>
    </div>
  </div>
  <div class="card text-white bg-warning mb-3">
    <div class="card-body">
      <h5 class="card-title">2do grupo con más reportes</h5>
      <p id="card_second_group" class="card-text text-white">Cargando...</p>
    </div>
  </div>
  <div class="card text-white bg-dark mb-3">
    <div class="card-body">
      <h5 class="card-title">3er grupo con más reportes</h5>
      <p id="card_third_group" class="card-text text-white">Cargando...</p>
    </div>
  </div>
</div>

<h6 style="margin-top:20px;">Listado de Grupos de Seguridad de WhatsApp que tuvieron reportes en el periodo</h6>

<div class="row">
    <div class="col-sm">
      <h6 style="margin-top:20px;">Grupos con más reportes en el periodo</h6>
      <table id="table_grupos" class="table table-hover">
  <thead class="thead-dark">
    <tr>
      <th scope="col">Id</th>
      <th scope="col">Grupo de WhatsApp</th>
      <th scope="col">Nó de Reportes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>312</td>
      <td>SEGURIDAD TAXISTAS</td>
      <td>5</td>
    </tr>
  </tbody>
</table>
    </div>
    <div class="col-sm">
      <h6 id="table_grupo_reportes_title" style="margin-top:20px;">Servicios reportados del grupo seleccionado</h6>
      <table id="table_grupo_reportes" class="table table-hover">
        <thead class="thead-dark">
          <tr>
            <th scope="col">CodigoIncidente</th>
            <th scope="col">Incidente</th>
            <th scope="col">Nó de Reportes</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</div>                      
@stop