@extends('layouts.zon')

@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">
    <style>
        .header-button:hover {
            opacity: .5 !important;
            text-decoration: none;
        }
    </style>
@endpush

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="m-portlet__head-caption">
                
            </div>
            <div class="m-stack m-stack--ver m-stack--desktop m-stack--demo">
                <a href="#" class="m-stack__item m-stack__item--center m-stack__item--middle header-button" 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>{{ number_format($total) }}</h3>
                </a>
                <a href="#" class="m-stack__item m-stack__item--center m-stack__item--middle header-button" 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 PCH/JKL</h4>
                    <h3> {{number_format($total_lulus)}} </h3>
                </a>
                <a href="#" class="m-stack__item m-stack__item--center m-stack__item--middle header-button" style="background-color: #f4516c; color: white">
                    <div class="mb-2">
                        <i class="flaticon-cancel" style="font-size: 40px"></i>
                    </div>
                    <h4>Permohonan Gagal</h4>
                    <h3> {{number_format($total_gagal_pinjaman)}} </h3>
                </a>
            </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">
            <!-- Umur -->
            <!-- <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 chart = new ApexCharts(document.querySelector("#chart1"), {
            title: { text: 'Status Permohonan' },
            series: [{ name: '', data: {!! $topStatusIPRHijrah->pluck('total')->toJson() !!} }],
            chart: { type: 'bar', height: 265, toolbar: { show: false } },
            plotOptions: { bar: { horizontal: true } },
            dataLabels: { enabled: false },
            xaxis: {
                categories: {!! $topStatusIPRHijrah->pluck('label')->toJson() !!},
                tickPlacement: 'on',
                labels: { show: true, rotate: -35, rotateAlways: false },
                axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
            },
        });
        chart.render();


        chart = new ApexCharts(document.querySelector("#chart2"), {
            title: { text: 'Status Permohonan' },
            chart: { type: 'pie', height: 280 },
            legend: { show: true, position: 'left' },
            // series: {!! $topStatusIPRHijrah->pluck('total')->toJson() !!},
            series: [
                {!! json_encode($total_permohonan) !!}, 
                {!! json_encode($total_gagal_maklumat) !!}, 
                {!! json_encode($total_terima_tawaran) !!}, 
                {!! json_encode($total_terima_akaun) !!}, 
                {!! json_encode($total_lulus) !!}, 
                {!! json_encode($total_bayar_ebanking) !!}, 
                {!! json_encode($total_tangguh) !!}, 
                {!! json_encode($total_aktif_bayar) !!}, 
                {!! json_encode($total_selesai) !!}, 
                {!! json_encode($total_gagal_pinjaman) !!},
            ],
            // labels: {!! $topStatusIPRHijrah->pluck('label')->toJson() !!},
            labels: ['PERMOHONAN', 'BATAL (MAKLUMAT SALAH)', 'TERIMA TAWARAN', 'PENERIMAAN DI AKAUN', 'LULUS PCH/JKL', 'PEMBAYARAN E-BANKING', 'TANGGUH PERMOHONAN', 'AKTIF BAYAR', 'SELESAI', 'BATAL/TOLAK PINJAMAN'], 
        });
        chart.render();

        // chart = new ApexCharts(document.querySelector("#chart3"), {
        //     title: { text: 'Status Permohonan' },
        //     series: [{ name: '', 
        //         data:  {!! $topByAgeHijrah->pluck('18-24')->toJson() !!} ,
        //         // data:  {!! $topByAgeHijrah->pluck('18-24')->toJson() !!} ,

        //     }],
        //     chart: { type: 'bar', height: 265, toolbar: { show: false } },
        //     plotOptions: { bar: { horizontal: true } },
        //     dataLabels: { enabled: false },
        //     xaxis: {
        //         categories: {!! $topByAgeHijrah->pluck('label')->toJson() !!},
        //         tickPlacement: 'on',
        //         labels: { show: true, rotate: -35 },
        //         axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
        //     },
        // });
        // chart.render();


        chart = new ApexCharts(document.querySelector("#chart4"), {
            title: { text: 'Agama' },
            series: [{ name: '', data: {!! $topByReligionHijrah->pluck('total')->toJson() !!} }],
            chart: { type: 'bar', height: 280, toolbar: { show: false } },
            plotOptions: { bar: { horizontal: true } },
            dataLabels: { enabled: false },
            xaxis: {
                categories: {!! $topByReligionHijrah->pluck('label')->toJson() !!},
                labels: { show: true, rotate: -35 },
                axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
            }
        });
        chart.render();

        chart = new ApexCharts(document.querySelector("#chart5"), {
            title: { text: 'Bangsa' },
            series: [{ name: '', data: {!! $topByKaumHijrah->pluck('total')->toJson() !!} }],
            chart: { type: 'bar', height: 280, toolbar: { show: false } },
            plotOptions: { bar: { horizontal: true } },
            dataLabels: { enabled: false },
            xaxis: {
                categories: {!! $topByKaumHijrah->pluck('label')->toJson() !!},
                labels: { show: true, rotate: -35 },
                axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
            }
        });
        chart.render();


        chart = new ApexCharts(document.querySelector("#chart6"), {
            title: { text: 'Jantina' },
            chart: { type: 'donut', height: 280 },
            legend: { show: true, position: 'bottom' },
            series: [
                {!! json_encode($topByGender_lelaki) !!}, 
                {!! json_encode($topByGender_perempuan) !!}, 
            ],
            labels: {!! $topByGenderHijrah->pluck('label')->toJson() !!},
            // labels: ['LELAKI', 'PEREMPUAN'], 

        });
        chart.render();


        chart = new ApexCharts(document.querySelector("#chart7"), {
            title: { text: 'Status Perkahwinan' },
            series: [{ name: '', data: {!! $topByMarriedHijrah->pluck('total')->toJson() !!} }],
            chart: { type: 'bar', height: 265, toolbar: { show: false } },
            plotOptions: { bar: { horizontal: true } },
            dataLabels: { enabled: false },
            xaxis: {
                categories: {!! $topByMarriedHijrah->pluck('label')->toJson() !!},
                tickPlacement: 'on',
                labels: { show: true, rotate: -35, rotateAlways: false },
                axisTicks: { show: true, borderType: 'solid', color: '#78909C', offsetX: 0, offsetY: 0 },
            },
        });
        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