@extends('layouts.app')

@section('styles')

    <style>

    </style>
@endsection

@section('content')

    <div class="row">
        <div class="col-lg-12">

            <div class="card" style="background-color: #1a1a1914;">
                <div class="card-header separator">
                    <h4 class="card-title" id="heading-buttons1">Welcome to
                            <span class="semi-bold">Payment Platform</span></h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">

                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body">

                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Number of Paid vs Not Paid Invoices</h4>
                                        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                                        <div class="heading-elements">

                                        </div>
                                    </div>
                                    <div class="card-content collapse show">
                                        <div class="card-body">
                                            <canvas id="simple-doughnut-chart" height="400"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Paid Amount vs Not Paid Amount</h4>
                                        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                                        <div class="heading-elements">

                                        </div>
                                    </div>
                                    <div class="card-content collapse show">
                                        <div class="card-body">
                                            <canvas id="simple-doughnut-chart_2" height="400"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

@endsection

@section('script')

    <script src="{{ asset('modern/app-assets/vendors/js/charts/chart.min.js')}}"></script>

    {{--<script src="{{ asset('modern/app-assets/js/scripts/charts/chartjs/pie-doughnut/pie.js')}}"></script>--}}
    {{--<script src="{{ asset('modern/app-assets/js/scripts/charts/chartjs/pie-doughnut/pie-simple.js')}}"></script>--}}
    {{--<script src="{{ asset('modern/app-assets/js/scripts/charts/chartjs/pie-doughnut/doughnut.js')}}"></script>--}}
    {{--<script src="{{ asset('modern/app-assets/js/scripts/charts/chartjs/pie-doughnut/doughnut-simple.js')}}"></script>--}}

    <script>
        $(document).ready(function () {

        });

        $(window).on("load", function(){



            //setTimeout(function () {
                //Get the context of the Chart canvas element we want to select
                var ctx = $("#simple-doughnut-chart");

                // Chart Options
                var chartOptions = {
                    responsive: true,
                    maintainAspectRatio: false,
                    responsiveAnimationDuration:500,
                };

                // Chart Data
                var chartData = {
                    labels: ["Paid Count", "Not Paid Count"],
                    datasets: [{
                        label: "My First dataset",
                        //data: [pausecontent[0], pausecontent[1]],
                        data: ["", ""],
                        backgroundColor: ['#00A5A8', '#626E82'],
                    }]
                };

                var config = {
                    type: 'doughnut',

                    // Chart Options
                    options : chartOptions,

                    data : chartData
                };

                // Create the chart
                var doughnutSimpleChart = new Chart(ctx, config);
            //}, 3000);


            //setTimeout(function () {
            //Get the context of the Chart canvas element we want to select
            var ctx = $("#simple-doughnut-chart_2");

            // Chart Options
            var chartOptions = {
                responsive: true,
                maintainAspectRatio: false,
                responsiveAnimationDuration:500,
            };

            // Chart Data
            var chartData = {
                labels: ["Paid Amount($)", "Not Paid Amount($)"],
                datasets: [{
                    label: "My First dataset",
                    //data: [pausecontent[0], pausecontent[1]],
                    data: ["", ""],
                    backgroundColor: ['#28D094', '#FF4961'],
                }]
            };

            var config = {
                type: 'doughnut',

                // Chart Options
                options : chartOptions,

                data : chartData
            };

            // Create the chart
            var doughnutSimpleChart = new Chart(ctx, config);
        });
    </script>

@endsection