@extends('layouts.daerah')

@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>
        </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: '',
                    data: [{!! json_encode($totalDiproses) !!}, {!! json_encode($totalGagal) !!}, {!! json_encode($totalLulus) !!}]
                }],
                xaxis: {
                    categories: ['Diproses', 'Gagal', 'Lulus'],
                    tickPlacement: 'on',
                }
            }
            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(); 

            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'],
                        tickPlacement: 'on',
                    }
                }
            var chart = new ApexCharts(document.querySelector("#chart3"), options);
            chart.render();   

            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'],
                        tickPlacement: 'on',
                    }
                }
            var chart = new ApexCharts(document.querySelector("#chart4"), options);
            chart.render();    

            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();  
            
            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(); 

            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',
                    }

                }
            var chart = new ApexCharts(document.querySelector("#chart7"), options);
            chart.render();   
        </script>

    @endpush
    </div>
@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