@extends('layout')
@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/graficos.js')}}"></script>
<style src="{{ asset('dashboard/css/styles.css')}}"></style>
<meta name="csrf-token" content="{{ csrf_token() }}" />
@csrf
<div class="row">
    <div class="col-md-12 form-group">
        <h5 id="titleView">Gráficos de estadísticas de Saltillo Seguro</h5>
    </div>
</div>

<div class="row">
        <div class="col-md-12 form-group">
<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">WhatsApp</a>
  </li>
  <li class="nav-item">
    <a style="background-color:orange; margin-left:5px; margin-right: 5px;" class="nav-link active" href="#">Servicios</a>
  </li>
  <li class="nav-item">
    <a style="background-color:skyblue;" class="nav-link active" href="#">Colonias y Calles</a>
  </li>
</ul>
</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>                
<div class="row">
    
</div>

<div class="row">
    <div style="height: 300px;" class="col-md-6">
        <div class="col-md-12">
        <div class="card">
            <div class="card-header">Grupos con más reportes recibidos</div>
            <div class="card-body">
                <canvas id="chart1" class="chartjs-render-monitor"></canvas>
            </div>
        </div>
         </div>
    </div>
    <div class="col-md-6">
        <div class="col-md-12">
        <div class="card">
            <div class="card-header">Servicios más solicitados</div>
            <div class="card-body" >
                <canvas id="chart2" class="chartjs-render-monitor"></canvas>
            </div>
        </div>
        </div>
    </div>
</div>
                            
@stop