@extends('layouts.app')




@section('content')
<div class="container">
    <div class="clearfix" style="padding-top: 40px"></div>
        <div class="box box-warning">
            <div class="box-body">
                <div class="col-md-3" style="float: left">
                    <div class="row">
                        <!-- DONUT CHART -->
                        <div class="card card-info">
                            <div class="card-header">
                            <h3 class="card-title" style="text-align: center">Contas à Pagar</h3>
                            
                            </div>
                            <div class="card-body">
                            
                            </div>
                            <canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%; display: block; width: 853px;" width="853" height="250" class="chartjs-render-monitor"></canvas>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                </div>
                <div class="col-md-3" style="float: right">
                    <div class="row">
                        <!-- DONUT CHART -->
                        <div class="card card-info">
                            <div class="card-header">
                            <h3 class="card-title" style="text-align: center">Contas à Receber</h3>
                            
                            </div>
                            <div class="card-body">
                            
                            </div>
                            <canvas id="donutChart2" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%; display: block; width: 853px;" width="853" height="250" class="chartjs-render-monitor"></canvas>
                        </div>
                    </div>
                </div>
            
            </div>
        </div>
    </div>

</div>

@endsection

@section('javascript')
    <script type="text/javascript">
    $(function () {
      
  
      //-------------
      //- DONUT CHART -
      //-------------
      // Get context with jQuery - using jQuery's .get() method.
        $.get("/extratoContasPagar", function(data) {
            // console.log(data['AGUADANDO']);
            // console.log(data['PAGO']);
            // console.log(data['PAGOPARCIAL']);
        
            var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
            var donutData        = {
                labels: [
                    'Aguardando', 
                    'Pago',
                    'Pago Parcial', 
                ],
                datasets: [
                {
                    data: [data['AGUADANDO'],data['PAGO'],data['PAGOPARCIAL']],
                    backgroundColor : ['#f56954', '#00a65a', '#f39c12'],
                }
                ]
            }

            var donutOptions     = {
            maintainAspectRatio : false,
            responsive : true,
            }
            //Create pie or douhnut chart
            // You can switch between pie and douhnut using the method below.
            var donutChart = new Chart(donutChartCanvas, {
                type: 'doughnut',
                data: donutData,
                options: donutOptions      
            })
        });

      
      //***********************************
      
        $.get("/extratoContasReceber", function(data) {
                    //-------------
            //- DONUT CHART -
            //-------------
            // Get context with jQuery - using jQuery's .get() method.
            var donutChartCanvas2 = $('#donutChart2').get(0).getContext('2d')
            var donutData2        = {
                labels: [
                    'Aguardando', 
                    'Recebido',
                    'Recebido Parcial', 
                ],
                datasets: [
                {
                    data: [data['AGUADANDO'],data['RECEBIDO'],data['RECEBIDOPARCIAL']],
                    backgroundColor : ['#f56954', '#00a65a', '#f39c12'],
                }
                ]
            }
            var donutOptions2     = {
                maintainAspectRatio : false,
                responsive : true,
            }
            //Create pie or douhnut chart
            // You can switch between pie and douhnut using the method below.
            var donutChart2 = new Chart(donutChartCanvas2, {
                type: 'doughnut',
                data: donutData2,
                options: donutOptions2      
            })
        });
    })
</script>
@endsection