@extends('layouts.dun')

@section('title', 'Home')
@section('home', 'm-menu__item--active')

@push('styles')
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
@endpush

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="m-stack m-stack--ver m-stack--desktop m-stack--demo">
                <div class="m-stack__item m-stack__item--center m-stack__item--middle" style="background-color: #716aca; color: white">
                    <div class="mb-2">
                        <i class="flaticon-file" style="font-size: 40px"></i>
                    </div>
                    <h4>Jumlah Permohonan</h4>
                    <h3> {{$totalPermohonan}} </h3>
                </div>
                <div class="m-stack__item m-stack__item--center m-stack__item--middle" style="background-color: #34bfa3; color: white">
                    <div class="mb-2">
                        <i class="la la-check-circle" style="font-size: 40px"></i>
                    </div>
                    <h4>Permohonan Lulus</h4>
                    <h3> {{$totalLulus}} </h3>
                </div>
                <div class="m-stack__item m-stack__item--center m-stack__item--middle" style="background-color: #f4516c; color: white">
                    <div class="mb-2">
                        <i class="flaticon-cancel" style="font-size: 40px"></i>
                    </div>
                    <h4>Permohonan Ditolak</h4>
                    <h3>  {{$totalGagal}}  </h3>
                </div>
                <!--<div class="m-stack__item m-stack__item--center m-stack__item--middle" style="background-color: #e062cb; color: white">
                    <div class="mb-2">
                        <i class="fa fa-check" style="font-size: 40px"></i>
                    </div>
                    <h4>{{__('application.statistics.total_on_review')}}</h4>
                    <h3>{{-- $total->review --}}</h3>
                </div>-->
            </div>
        </div>
    </div>

   
    <div class="mb-3" id="dashboardContent">
    
        <div class="row mb-3">
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart1"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart2"></div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
        <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart3"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart4"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart5"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart6"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart7"></div>
                </div>
            </div>
        </div>

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js" integrity="sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js" integrity="sha256-gJWdmuCRBovJMD9D/TVdo4TIK8u5Sti11764sZT1DhI=" crossorigin="anonymous"></script>
        <script>

            var options = {
                title: { text: 'Status Permohonan' },
                zoom: {enabled: true},
                chart: { type: 'bar', height: 280 , toolbar: { show: false }},
                plotOptions: { bar: { horizontal: true } },
                series: [{
                    name: 'Status Permohonan bar',
                    data: [{!! json_encode($totalDiproses) !!}, {!! json_encode($totalGagal) !!}, {!! json_encode($totalLulus) !!}]
                }],
                xaxis: {
                    categories: ['Diproses', 'Gagal', 'Lulus'],
                    // tickAmount: 'dataPoints',
                    labels: { 
                        show: true, 
                        rotate: -35, 
                        rotateAlways: false,
                        hideOverlappingLabels: false,
                        formatter: function(val) {
                            return val;
                        },
                        
                    },
                    axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
                },
                yaxis: {
                    // categories: ['Jumlah Permohonan', 'Jumlah Lulus', 'Jumlah Gagal'],
                    // tickAmount: 'dataPoints',
                    labels: { 
                        show: true, 
                        // rotate: -35, 
                        rotateAlways: false,
                        hideOverlappingLabels: false,
                        formatter: function(val) {
                            return val;
                        },
                        
                    },
                    axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                        return val
                        }
                    }
                }
            }
            var chart = new ApexCharts(document.querySelector("#chart1"), options);
            chart.render();

            var options = {
                    title: { text: 'Status Permohonan' },
                    zoom: {enabled: true},
                    legend: { show: true, position: 'left',  },
                    chart: { type: 'pie', height: 280, toolbar: { show: false } },
                    series: [{!! json_encode($totalDiproses) !!}, {!! json_encode($totalGagal) !!}, {!! json_encode($totalLulus) !!}],
                    labels: ['Diproses', 'Gagal', 'Lulus',],
                    colors: ['#008FFB', '#f4516c', '#34bfa3']
                    
                }
            var chart = new ApexCharts(document.querySelector("#chart2"), options);
            chart.render(); 


            // agama 
            var options = {
                    title: { text: 'Agama' },
                    zoom: {enabled: true},
                    chart: { type: 'bar', height: 280, toolbar: { show: false } },
                    plotOptions: { bar: { horizontal: false } },
                    series: [{
                        name: 'Status Agama',
                        data: [ {{ $totalAgama_Islam }},
                                {{ $totalAgama_Kristian }},
                                {{ $totalAgama_Hindu }},
                                {{ $totalAgama_Buddha }},
                                {{ $totalAgama_Lainlain }},
                            ]
                    }],
                    xaxis: {
                        categories: ['Islam', 'Kristian', 'Hindu', 'Buddha', 'Lain-lain'],
                    // tickAmount: 'dataPoints',
                    labels: { 
                        show: true, 
                        rotate: -35, 
                        rotateAlways: false,
                        hideOverlappingLabels: false,
                        formatter: function(val) {
                            return val;
                        },
                        
                        },
                        axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
                    },
                    yaxis: {
                        // categories: ['Jumlah Permohonan', 'Jumlah Lulus', 'Jumlah Gagal'],
                        // tickAmount: 'dataPoints',
                        labels: { 
                            show: true, 
                            // rotate: -35, 
                            rotateAlways: false,
                            hideOverlappingLabels: false,
                            formatter: function(val) {
                                return val;
                            },
                            
                        },
                        axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
                    },
                    tooltip: {
                        y: {
                            formatter: function(val) {
                            return val
                            }
                        }
                    }
                }
            var chart = new ApexCharts(document.querySelector("#chart3"), options);
            chart.render();   

            // bangsa
            var options = {
                    title: { text: 'Bangsa' },
                    zoom: {enabled: true},
                    chart: { type: 'bar', height: 280, toolbar: { show: false } },
                    plotOptions: { bar: { horizontal: false } },
                    series: [{
                        name: 'Status Bangsa',
                        data: [ {{ $totalBangsa_Melayu }},
                                {{ $totalBangsa_India }},
                                {{ $totalBangsa_Cina }},
                                {{ $totalBangsa_LainLain }},
                                ]
                    }],
                    xaxis: {
                        categories: ['Melayu', 'India', 'Cina', 'Lain-lain'],
                        // tickAmount: 'dataPoints',
                        labels: { 
                            show: true, 
                            rotate: -35, 
                            rotateAlways: false,
                            hideOverlappingLabels: false,
                            formatter: function(val) {
                                return val;
                            },
                            
                        },
                        axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
                    },
                    yaxis: {
                        // categories: ['Jumlah Permohonan', 'Jumlah Lulus', 'Jumlah Gagal'],
                        // tickAmount: 'dataPoints',
                        labels: { 
                            show: true, 
                            // rotate: -35, 
                            rotateAlways: false,
                            hideOverlappingLabels: false,
                            formatter: function(val) {
                                return val;
                            },
                            
                        },
                        axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
                    },
                    tooltip: {
                        y: {
                            formatter: function(val) {
                            return val
                            }
                        }
                    }
                }
            var chart = new ApexCharts(document.querySelector("#chart4"), options);
            chart.render();    

            //Jantina
            var options = {
                    title: { text: 'Jantina' },
                    zoom: {enabled: true},
                    legend: { show: true, position: 'bottom' },
                    chart: { type: 'donut', height: 280, toolbar: { show: false } },
                    series: [{!! json_encode($totalJantina_Lelaki) !!},
                            {!! json_encode($totalJantina_Perempuan) !!},
                            ],
                    labels: ['Lelaki', 'Perempuan'],
                    
                }
            var chart = new ApexCharts(document.querySelector("#chart5"), options);
            chart.render();  
            
            //Status Perkahwinan
            var options = {
                    title: { text: 'Status Perkahwinan' },
                    zoom: {enabled: true},
                    legend: { show: true, position: 'bottom' },
                    chart: { type: 'donut', height: 280, toolbar: { show: false } },
                    series: [{!! json_encode($totalStatusperkahwinan_berkahwin) !!},
                            {!! json_encode($totalStatusperkahwinan_bujang) !!},
                            {!! json_encode($totalStatusperkahwinan_dudajanda) !!},
                            ],
                    labels: ['Berkahwin', 'Bujang' , 'Duda/Janda'],
                    
                }
            var chart = new ApexCharts(document.querySelector("#chart6"), options);
            chart.render(); 

            //Status umur
            var options = {
                    title: { text: 'Umur' },
                    zoom: {enabled: true},    
                    chart: { type: 'bar', height: 280 , toolbar: { show: false }},
                    plotOptions: { bar: { horizontal: false } },
                    series: [{
                        name: 'Status Umur',
                        data: [ 
                                {!! json_encode($totalage["0-20"]) !!},
                                {!! json_encode($totalage["21-30"]) !!},
                                {!! json_encode($totalage["31-40"]) !!},
                                {!! json_encode($totalage["41-50"]) !!},
                                {!! json_encode($totalage["51-60"]) !!},
                                {!! json_encode($totalage["61+"]) !!},
                                ]
                    }],
                    xaxis: {
                        categories: ['0-20', '21-30', '31-40', '41-50', '51-60', '61+'],
                        tickPlacement: 'on',
                    },

                    yaxis: {
                        // categories: ['0-20', '21-30', '31-40', '41-50', '51-60', '61+'],
                        labels: { 
                            show: true, 
                            // rotate: -35, 
                            rotateAlways: false,
                            hideOverlappingLabels: false,
                            formatter: function(val) {
                                return val;
                            },
                            
                        },
                    },
                    tooltip: {
                        y: {
                            formatter: function(val) {
                            return val
                            }
                        }
                    }

                }
            var chart = new ApexCharts(document.querySelector("#chart7"), options);
            chart.render();   
            
            console.log({!! json_encode($totalage['0-20']) !!});
           
        </script>

    @endpush
    </div>
    {{-- @endif --}}
@endsection

@push('cdn_script')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js" integrity="sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js" integrity="sha256-gJWdmuCRBovJMD9D/TVdo4TIK8u5Sti11764sZT1DhI=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script>
        $(function() {
            $('#daterange').daterangepicker({
                opens: 'left',
                timePicker: true,
                autoUpdateInput: false,
                locale: {
                    format: 'YYYY-MM-DD HH:mm:ss',
                    cancelLabel: 'Clear',
                }
            }, function(start, end, label) {
                console.log("A new date selection was made: " + start.format('YYYY-MM-DD HH:mm:ss') + ' to ' + end.format('YYYY-MM-DD HH:mm:ss'));
            });
            $('#daterange').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm:ss') + ' - ' + picker.endDate.format('YYYY-MM-DD HH:mm:ss'));
            });
            $('#daterange').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });
        });
        $('#downloadPDF').click(function () {
            domtoimage.toPng(document.getElementById('dashboardContent'))
                .then(function (blob) {
                    var pdf = new jsPDF('l', 'pt', [$('#dashboardContent').width(), $('#dashboardContent').height()]);
                    pdf.addImage(blob, 'PNG', 0, 0, $('#dashboardContent').width(), $('#dashboardContent').height());
                    pdf.save("dashboard.pdf");
                })
                .catch(function (error) {
                    console.error('oops, something went wrong!', error);
                });;
        });
    </script>
@endpush