@extends('adminlte::page')
@section('content_header')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Dashboard</h1>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
<div class="card card-outline card-primary">
    <div class="card-header">
        <h3 class="card-title">Dashboard</h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-lg-3 col-6">
                        <div class="small-box bg-info">
                            <div class="inner">
                                <h3>{{ $customers }}</h3>
                                <p>Total Customers</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-bag"></i>
                            </div>
                                <a href="{{ route('customers.index') }}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    
                        <div class="col-lg-3 col-6">
                            <div class="small-box bg-success">
                                <div class="inner">
                                    <h3>{{ $transportation }}</h3>
                                    <p>Total Box</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-stats-bars"></i>
                                </div>
                                <a href="{{ route('transportation.index') }}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="row">
                        <div class="col-lg-6 col-6">
                            <main>
                                <div id="box_by_month" style="height: 370px; width: 100%;"></div>
                            </main>
                        </div>
                        
                        <div class="col-lg-6 col-6">
                            <main>
                                <div id="payment_by_month" style="height: 370px; width: 100%;"></div>
                            </main>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
    <script type="text/javascript">
        window.onload = function () {
            var box_by_month = new CanvasJS.Chart("box_by_month", {
                animationEnabled: true,
                exportEnabled: true,
                theme: "light1", // "light1", "light2", "dark1", "dark2"
                title: {
                    text: "Top Box by month",
                    fontSize: 23
                },
                data: [{
                    type: "column",
                    showInLegend: false,
                    indexLabel: "{y}",
                    legendMarkerColor: "grey",
                    legendText: "MMbbl = one million barrels",
                    dataPoints: []
                }]
            }); 
            render_chart();
            setInterval(render_chart,5000);
            function render_chart() {
                var box_by_month_data = [];
                $.ajax({
                    type: 'post',
                    url: "{{route('dashboard-chart')}}",
                    data: {
                        _token: "{{csrf_token()}}"
                    },
                    success: function(response) {
                        $.each(response, function(i, item) {
                            box_by_month_data.push({
                                label: item.label,
                                y: item.y,
                                labelIndex: item.labelIndex
                            });
                        });
                        box_by_month.options.data[0].dataPoints = box_by_month_data;
                        box_by_month.render();
                    }
                });
            }

            var payment_by_month = new CanvasJS.Chart("payment_by_month", {
                animationEnabled: true,
                exportEnabled: true,
                theme: "light1", // "light1", "light2", "dark1", "dark2"
                title: {
                    text: "Payment Box by month",
                    fontSize: 23
                },

                data: [{
                    type: "column",
                    showInLegend: false,
                    indexLabel: "{y}",
                    legendMarkerColor: "grey",
                    legendText: "MMbbl = one million barrels",
                    dataPoints: []
                }]
            });

            render_payment_chart();
            setInterval(render_chart,5000);

            function render_payment_chart() {
                var payment_by_month_data = [];
                $.ajax({
                    type: 'post',
                    url: "{{route('payment-chart')}}",
                    data: {
                        _token: "{{csrf_token()}}"
                    },
                    success: function(response) {
                        $.each(response, function(i, item) {
                            payment_by_month_data.push({
                                label: item.label,
                                y: item.y,
                                labelIndex: item.labelIndex
                            });
                        });
                        payment_by_month.options.data[0].dataPoints = payment_by_month_data;
                        payment_by_month.render();
                    }
                });
            }
        }
    </script>
@endsection