@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/graficas/reportes.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 Reportes</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="chartPressed()">Generar Gráfica</button>
    </div>
</div>
    
<script type="text/javascript">
$('.date').datepicker({
    format: 'yyyy-mm-dd'
});
</script>                
<div class="row">
    
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">Reportes Recibidos</div>
            <div class="card-body">
                <canvas id="bar_chart" class="chartjs-render-monitor"></canvas>
            </div>
        </div>
    </div>
</div>
                            
@stop