@extends('layout.admin')

@section('content')
    <div class="row bg-title" style="background-color: white;">
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title">Beranda</h4> </div>
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
            <button class="right-side-toggle waves-effect waves-light btn-info btn-circle pull-right m-l-20"><i class="ti-settings text-white"></i></button>
            {{-- <a href="" target="_blank" class="btn btn-danger pull-right m-l-20 hidden-xs hidden-sm waves-effect waves-light">Buy Admin Now</a> --}}
            <ol class="breadcrumb">
                <li><a href="javascript:void(0)">Beranda</a></li>
                <li class="active">Beranda</li>
            </ol>
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->
    <!-- ============================================================== -->
    <!-- Different data widgets -->
    <!-- ============================================================== -->
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box">
                <div class="row row-in">
                    <div class="col-lg-3 col-sm-6 row-in-br">
                        <ul class="col-in">
                            <li>
                                <span class="circle circle-md bg-danger"><i class="fa fa-users"></i></span>
                            </li>
                            <li class="col-last">
                                <h3 class="counter text-right m-t-15">{{ $var['jum_anggota'] }}</h3>
                            </li>
                            <li class="col-middle">
                                <h4>Anggota / Non Anggota</h4>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-sm-6 row-in-br  b-r-none">
                        <ul class="col-in">
                            <li>
                                <span class="circle circle-md bg-info"><i class="ti-wallet"></i></span>
                            </li>
                            <li class="col-last">
                                <h3 class="counter text-right m-t-15">{{ $var['jum_simpanan'] }}</h3>
                            </li>
                            <li class="col-middle">
                                <h4>Produk Simpanan</h4>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-sm-6 row-in-br">
                        <ul class="col-in">
                            <li>
                                <span class="circle circle-md bg-success"><i class="fa fa-briefcase"></i></span>
                            </li>
                            <li class="col-last">
                                <h3 class="counter text-right m-t-15">{{ $var['jum_pinjaman'] }}</h3>
                            </li>
                            <li class="col-middle">
                                <h4>Jenis Pinjaman</h4>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-sm-6  b-0">
                        <ul class="col-in">
                            <li>
                                <span class="circle circle-md bg-warning"><i class="fa fa-user"></i></span>
                            </li>
                            <li class="col-last">
                                <h3 class="counter text-right m-t-15">{{ $var['jum_rekening'] }}</h3>
                            </li>
                            <li class="col-middle">
                                <h4>Rekening Simpanan</h4>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
     <!-- row -->
    <div class="row">
        <div class="col-sm-8">
            <div class="white-box">
                <h3 class="box-title"><center>Jml Transaksi Per Bulan Tahun {{ date('Y') }}</center></h3>
                <div>
                    <canvas id="myChart" height="158px"></canvas>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="white-box">
                <h3 class="box-title"><center>Jml Presentase Anggota</center></h3>
                <div>
                    <canvas id="myChart2"></canvas>
                </div>
                <br >
                <h3 class="box-title"><center>Jml Presentase Anggota Keluar</center></h3>
                <div>
                    <canvas id="myChart3"></canvas>
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->

    <!-- row -->
    <div class="row">
        <div class="col-sm-4">
            <div class="panel panel-themecolor">
                <div class="panel-heading">ANGGOTA TERBARU</div>
                <div class="panel-body">
                    <div class="steamline">
                        @php
                            \Carbon\Carbon::setLocale('id');
                        @endphp
                        @foreach($var['anggotaTerbaru'] as $item)
                            <div class="sl-item">
                                <div class="sl-left"> <img class="img-circle" alt="user" src="{{ ($item['foto']!=''?asset('upload/foto-anggota/'.$item['foto']):asset('upload/no-photo.png')) }}"> </div>
                                <div class="sl-right">
                                    <div><a href="{{ url('/anggota/anggota/'.$item->id)}}">{{ $item->nama }}</a> <span class="sl-date">{{ \Carbon\Carbon::createFromTimeStamp(strtotime($item->created_at))->diffForHumans() }}</span></div>
                                    <div class="desc">{{ $item->statusAnggota['nama'] }} | {{ $item->no_anggota }}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-8">
            <div id="kalenderku"></div>
        </div>
    </div>
    <!-- /.row -->

@endsection

@section('javascript')
    <!--Counter js -->
    <script src="{{ asset('ample/bower_components/waypoints/lib/jquery.waypoints.js') }}"></script>
    <script src="{{ asset('ample/bower_components/counterup/jquery.counterup.min.js') }}"></script>

    <script src="{{ asset('ample/vendor/Chart.js/Chart.js') }}"></script>

    <!-- Calendar JavaScript -->
    <script src="{{ asset('ample/bower_components/calendar/jquery-ui.min.js') }}"></script>
    <script src="{{ asset('ample/vendor/fullcalendar-3.6.1/fullcalendar.js') }}"></script>
    <script src="{{ asset('ample/vendor/fullcalendar-3.6.1/locale/id.js') }}"></script>

    <!--dashboard-->
    <script type="text/javascript">
        $(document).ready(function () {
            var ctx = document.getElementById("myChart").getContext("2d");
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: {!! $var['bulan'] !!},
                    datasets: [{
                        label: "Jml. Trans Simpanan",
                        backgroundColor: "rgba(255, 99, 132, 1)",
                        data: {!! $var['jumTransSimpanan'] !!}
                    }, {
                        label: "Jml. Trans Pinjaman",
                        backgroundColor: "rgba(54, 162, 235, 1)",
                        data: {!! $var['jumTransPinjaman'] !!}
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                }
            });

            var ctx2 = document.getElementById("myChart2").getContext("2d");
            var myPieChart = new Chart(ctx2,{
                type: 'doughnut',
                data: {
                    datasets: [{
                        data: {!! $var['jumJenisAnggota'] !!},
                        backgroundColor: [
                            "rgba(255, 206, 86, 1)",
                            "rgba(75, 192, 192, 1)",
                            "rgba(153, 102, 255, 1)"
                        ]
                    }],
                    labels: {!! $var['jenis_anggota'] !!}
                },
                options: {
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItem, data) {
                                var dataset = data.datasets[tooltipItem.datasetIndex];
                                var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
                                    return previousValue + currentValue;
                                  });
                                var currentValue = dataset.data[tooltipItem.index];
                                var precentage = Math.floor(((currentValue/total) * 100)+0.5);         
                                return precentage + "%";
                            }
                        }
                    }
                }
            });

            var ctx3 = document.getElementById("myChart3").getContext("2d");
            var myPieChart = new Chart(ctx3,{
                type: 'doughnut',
                data: {
                    datasets: [{
                        data: {!! $var['jumJenisAnggota2'] !!},
                        backgroundColor: [
                            "rgba(54, 162, 235, 1)",
                            "rgba(255, 159, 64, 1)"
                        ]
                    }],
                    labels: {!! $var['jenis_anggota2'] !!}
                },
                options: {
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItem, data) {
                                var dataset = data.datasets[tooltipItem.datasetIndex];
                                var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
                                    return previousValue + currentValue;
                                  });
                                var currentValue = dataset.data[tooltipItem.index];
                                var precentage = Math.floor(((currentValue/total) * 100)+0.5);         
                                return precentage + "%";
                            }
                        }
                    }
                }
            });

            //kalender
            $('#kalenderku').fullCalendar({
                timeFormat: 'H:mm',
                height: 680,
                weekends: true,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                },
                editable: false,
                eventLimit: true, // allow "more" link when too many events
                events: {
                    url: '{{ url('/beranda/kalender-1') }}',
                    success: function (data) {
                        // console.log(data);
                    },
                    error: function(data) {
                        // console.log(data);
                        // alert("cannot load json");
                    }
                }
            });

            $(".counter").counterUp({
                 delay: 100,
                 time: 1200
             });
        });
    </script>
@endsection