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

@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/estadistica/reports.js')}}"></script>
<script src="{{ asset('dashboard/js/estadistica/coloniascalles.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 - Colonias y Calles</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-secondary mb-3">
      <div class="card-body">
        <h5 class="card-title">1er colonia con más reportes</h5>
        <p id="card_primer_colonia" 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">2da colonia con más reportes</h5>
        <p id="card_segunda_colonia" 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 colonia con más reportes</h5>
        <p id="card_tercer_colonia" class="card-text text-white">Cargando...</p>
      </div>
    </div>
  </div>
  <div class="card-deck">
    <div class="card text-white bg-primary mb-3">
      <div class="card-body">
        <h5 id="card_primer_calle" class="card-title">Cargando...</h5>
        <p class="card-text text-white">1er calle con más reportes</p>
      </div>
    </div>
    <div class="card text-white bg-success mb-3">
      <div class="card-body">
        <h5 id="card_segunda_calle" class="card-title">Cargando...</h5>
        <p class="card-text text-white">2da calle con más reportes</p>
      </div>
    </div>
    <div class="card text-white bg-info mb-3">
      <div class="card-body">
        <h5 id="card_tercer_calle" class="card-title">Cargando...</h5>
        <p class="card-text text-white">3er calle con más reportes</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm">
      <h6 style="margin-top:20px;">Listado de Colonias más reportadas en el periodo</h6>
      <table id="table_colonias" class="table table-hover">
        <thead class="thead-dark">
          <tr>
            <th scope="col">Colonia</th>
            <th scope="col">Cantidad de Reportes</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <div class="col-sm">
      <h6 style="margin-top:20px;">Listado de Calles más reportadas en el periodo</h6>
      <table id="table_calles" class="table table-hover">
        <thead class="thead-dark">
          <tr>
            <th scope="col">Calle</th>
            <th scope="col">Cantidad de Reportes</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
</div> 
@stop