@extends("master")
@section("title",auth()->user()->company->name??"")
@section("body")

    <!-- Navbar -->
    <!-- /.navbar -->

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper" style="min-height: 612px;">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Dashboard</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Dashboard v1</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container">
                <!-- Small boxes (Stat box) -->
                <div class="row">
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-info">
                            <div class="inner">
                                <h3>{{convertToBMK($totalMembers)}}</h3>
                                <p>Members</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-bag"></i>
                            </div>
                            <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-success">
                            <div class="inner">
                                <h3>{{convertToBMK($offeringAmount)}} RWF</h3>
                                <p>Offerings</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-stats-bars"></i>
                            </div>
                            <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-warning">
                            <div class="inner">
                                <h3>{{convertToBMK($totalSmallGroups)}}</h3>

                                <p>Small Groups</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-person-add"></i>
                            </div>
                            <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-danger">
                            <div class="inner">
                                <h3>{{convertToBMK($totalUsers)}}</h3>
                                <p>System Users</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-pie-graph"></i>
                            </div>
                            <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                </div>
                <!-- /.row -->
                <!-- Main row -->
                <div class="row">
                    <!-- Left col -->
                    <section class="col-md-8 connectedSortable ui-sortable">
                        <!-- Custom tabs (Charts with tabs)-->
                        <div class="card">
                            <div class="card-header ui-sortable-handle" style="cursor: move;">
                                <h3 class="card-title">
                                    <i class="fas fa-chart-pie mr-1"></i>
                                    Total Offerings by Types
                                </h3>
                                <div class="card-tools">
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="tab-content p-0">

                                    <div class="chart tab-pane active" id="revenue-chart"
                                         style="position: relative; height: 300px;">
                                        <div class="chartjs-size-monitor">
                                            <div class="chartjs-size-monitor-expand">
                                                <div class=""></div>
                                            </div>
                                            <div class="chartjs-size-monitor-shrink">
                                                <div class=""></div>
                                            </div>
                                        </div>
                                        <canvas id="revenue-chart-canvas" height="600"
                                                style="height: 300px; display: block; width: 872px;" width="1744"
                                                class="chartjs-render-monitor"></canvas>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- /.card -->

                    </section>
                    <!-- /.Left col -->
                    <!-- Left col -->
                    <section class="col-md-4 connectedSortable ui-sortable">
                        <!-- Custom tabs (Charts with tabs)-->
                        <div class="card">
                            <div class="card-header ui-sortable-handle" style="cursor: move;">
                                <h3 class="card-title">
                                    <i class="fas fa-chart-pie mr-1"></i>
                                    Total Offerings
                                </h3>
                                <div class="card-tools">
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="tab-content p-0">

                                    <div class="chart tab-pane active" id="sales-chart"
                                         style="position: relative; height: 300px;">
                                        <div class="chartjs-size-monitor">
                                            <div class="chartjs-size-monitor-expand">
                                                <div class=""></div>
                                            </div>
                                            <div class="chartjs-size-monitor-shrink">
                                                <div class=""></div>
                                            </div>
                                        </div>
                                        <canvas id="sales-chart-canvas" height="600"
                                                style="height: 300px; display: block; width: 630px;" width="1260"
                                                class="chartjs-render-monitor"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.card -->

                    </section>
                    <!-- /.Left col -->

                </div>
                <!-- /.row (main row) -->
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Control Sidebar -->
@endsection


@section("script")
    <script src="{{asset('js/Chart.min.js')}}"></script>
    <script src="{{asset('js/sparkline.js')}}"></script>
    <script src="{{asset('js/dashboard.js')}}"></script>
    <script>
        $(function () {
            'use strict'
// $('.connectedSortable').sortable({placeholder:'sort-highlight',connectWith:'.connectedSortable',handle:'.card-header, .nav-tabs',forcePlaceholderSize:true,zIndex:999999})
            $('.connectedSortable .card-header').css('cursor', 'move')
            // $('.todo-list').sortable({
            //     placeholder: 'sort-highlight',
            //     handle: '.handle',
            //     forcePlaceholderSize: true,
            //     zIndex: 999999
            // })
            // $('.textarea').summernote()
            // $('.daterange').daterangepicker({
            //     ranges: {
            //         Today: [moment(), moment()],
            //         Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            //         'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            //         'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            //         'This Month': [moment().startOf('month'), moment().endOf('month')],
            //         'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            //     }, startDate: moment().subtract(29, 'days'), endDate: moment()
            // }, function (start, end) {
            //     alert('You chose: ' + start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
            // })
            // $('.knob').knob()
            var visitorsData = {
                US: 398,
                SA: 400,
                CA: 1000,
                DE: 500,
                FR: 760,
                CN: 300,
                AU: 700,
                BR: 600,
                IN: 800,
                GB: 320,
                RU: 3000
            }
            // $('#world-map').vectorMap({
            //     map: 'usa_en',
            //     backgroundColor: 'transparent',
            //     regionStyle: {
            //         initial: {
            //             fill: 'rgba(255, 255, 255, 0.7)',
            //             'fill-opacity': 1,
            //             stroke: 'rgba(0,0,0,.2)',
            //             'stroke-width': 1,
            //             'stroke-opacity': 1
            //         }
            //     },
            //     series: {regions: [{values: visitorsData, scale: ['#ffffff', '#0154ad'], normalizeFunction: 'polynomial'}]},
            //     onRegionLabelShow: function (e, el, code) {
            //         if (typeof visitorsData[code] !== 'undefined') {
            //             el.html(el.html() + ': ' + visitorsData[code] + ' new visitors')
            //         }
            //     }
            // })
            // var sparkline1 = new Sparkline($('#sparkline-1')[0], {
            //     width: 80,
            //     height: 50,
            //     lineColor: '#92c1dc',
            //     endColor: '#ebf4f9'
            // })
            // var sparkline2 = new Sparkline($('#sparkline-2')[0], {
            //     width: 80,
            //     height: 50,
            //     lineColor: '#92c1dc',
            //     endColor: '#ebf4f9'
            // })
            // var sparkline3 = new Sparkline($('#sparkline-3')[0], {
            //     width: 80,
            //     height: 50,
            //     lineColor: '#92c1dc',
            //     endColor: '#ebf4f9'
            // })
            // sparkline1.draw([1000, 1200, 920, 927, 931, 1027, 819, 930, 1021])
            // sparkline2.draw([515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921])
            // sparkline3.draw([15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21])
            // $('#calendar').datetimepicker({format: 'L', inline: true})
            // $('#chat-box').overlayScrollbars({height: '250px'})
            var salesChartCanvas = document.getElementById('revenue-chart-canvas').getContext('2d')
            var salesChartData = {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', "September", "October", "November", "December"],
                datasets: [
                        @foreach($collect as $col)
                    {
                        label: "{{$col['name']}}",
                        backgroundColor: "{{$col['color']}}",
                        borderColor: 'rgba(127,187,222,0.8)',
                        pointRadius: false,
                        pointColor: "#fff",
                        pointStrokeColor: 'rgb(255,255,255)',
                        pointHighlightFill: '#fff',
                        pointHighlightStroke: 'rgba(60,141,188,1)',
                        data: [
                            @foreach($col['data'] as $dt)
                                {{$dt['totalAmount']}},
                            @endforeach
                        ]
                    },
                    @endforeach
                ]
            }
            var salesChartOptions = {
                maintainAspectRatio: false,
                responsive: true,
                legend: {display: true},
                scales: {
                    xAxes: [{gridLines: {display: false},}], yAxes: [{
                        gridLines: {display: false}, ticks: {
                            callback: function (label, index, labels) {
                                return label.toLocaleString();
                            },
                            beginAtZero: true,
                        },
                    },]
                }
            }
            var salesChart = new Chart(salesChartCanvas, {
                type: 'bar',
                data: salesChartData,
                options: salesChartOptions
            })
            var pieChartCanvas = $('#sales-chart-canvas').get(0).getContext('2d')
            var pieData = {
                labels: [
                    @foreach($collect2 as $c)
                        "{{$c['name']}}",
                    @endforeach
                ],
                datasets: [{
                    data: [
                        @foreach($collect2 as $c)
                            {{$c['sum']}},
                        @endforeach
                    ], backgroundColor: [
                        @foreach($collect2 as $c)
                            "{{$c['color']}}",
                        @endforeach
                    ]
                }]
            }
            var pieOptions = {legend: {display: false}, maintainAspectRatio: false, responsive: true}
            var pieChart = new Chart(pieChartCanvas, {type: 'doughnut', data: pieData, options: pieOptions})

        })
    </script>
@endsection