@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 active" 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/servicios.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 - Incidentes</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 incidente más solicitado</h5>
        <p id="card_primer_servicio" 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 incidente más solicitado</h5>
        <p id="card_segundo_servicio" 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 incidente más solicitado</h5>
        <p id="card_tercer_servicio" 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_number_detenidos" class="card-title">Cargando...</h5>
        <p class="card-text text-white">Han sido detenidas</p>
      </div>
    </div>
    <div class="card text-white bg-success mb-3">
      <div class="card-body">
        <h5 id="card_tiempo_promedio" class="card-title">Cargando...</h5>
        <p class="card-text text-white">Tiempo promedio de atención</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">Han sido recibidos</p>
      </div>
    </div>
  </div>

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

  <table id="table_servicios" class="table table-hover">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Incidente</th>
        <th scope="col">Cantidad de Reportes</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

</div>

@stop