@extends('layouts.app')

@section('title', 'Pakej Kita Selangor')
@section('kita', '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;
        }
        #maklumat_senarai .form-control[disabled] {
            border: 0px;
            background: transparent !important;
        }
    </style>
@endpush

@section('content')
    <section id="dashboardContent">
        <div class="row mb-4" style="margin-bottom: 0px !important;">
            <div class="row-md-12">
                <div class="m-stack m-stack--ver m-stack--desktop m-stack--demo" style="height:auto">
                    <div class="m-stack__item m-stack__item--center m-stack__item--middle" style="background-color: lightgray;">
                        <h4 style="margin:0px;">PELAPORAN STATUS PELAKSANAAN PAKEJ KITA SELANGOR 2021</h4>
                    </div>
                </div>
                <img src="{{ asset('img/kita') }}/pakej-kita-selangor.jpg" style="width: 100%; display:block"></img>
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text" style="float: left;">PAKEJ KITA SELANGOR (INISIATIF)
                            <a href="kita/add" class="btn btn-brand m-btn btn-sm m-btn m-btn--icon m-btn--pill" style="margin-left: 30px;"><span><i class="fa fa-edit"></i><span>Kemaskini</span></span></a>
                            <a href="/kita/rumusan" target=_blank class="btn btn-brand m-btn btn-sm m-btn m-btn--icon m-btn--pill" style="margin-left: 10px;"><span><i class="fa fa-file-text"></i><span>Cetak pdf mingguan</span></span></a>
                            <a href="/kita/rumusan?type=overall" target=_blank class="btn btn-brand m-btn btn-sm m-btn m-btn--icon m-btn--pill" style="margin-left: 10px;"><span><i class="fa fa-file"></i><span>Cetak pdf keseluruhan</span></span></a>
                            <a href="#" id="downloadPDF" class="btn btn-brand m-btn btn-sm m-btn m-btn--icon m-btn--pill" style="margin-left: 10px;"><span><i class="fa fa-pie-chart"></i><span>Cetak statistik</span></span></a>
                        </h3>
                    </div>                 
                </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="row" style="padding-left: 25px;">
                            <div class="mb-2">
                                <i class="flaticon-coins" style="font-size: 50px"></i>
                            </div>
                            <div class="col" style="padding-bottom:0px;align-self:center;">
                                <h4 style="text-align: left;">IMPAK KEWANGAN</h4>
                                <h3 style="text-align: left;"> RM{{number_format($impak_kewangan_total,2,".",",")}} </h3>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="m-stack__item m-stack__item--center m-stack__item--middle header-button" style="background-color: #716aca; color: white">
                        <div class="row" style="padding-left: 25px;">
                            <div class="mb-2">
                                <i class="flaticon-share" style="font-size: 50px"></i>
                            </div>
                            <div class="col" style="padding-bottom:0px;align-self:center;">
                                <h4 style="text-align: left;">JUMLAH PERBELANJAAN</h4>
                                <h3 style="text-align: left;" >RM{{number_format($perbelanjaan_total,2,".",",")}} ({{ number_format((float)$peratus_perbelanjaan_total, 2, '.', '') }}%)</h3>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="m-stack__item m-stack__item--center m-stack__item--middle header-button" style="background-color: #716aca; color: white">
                        <div class="row" style="padding-left: 25px;">
                            <div class="mb-2" style="margin-top: 5px;">
                                <i class="fa fa-group" style="font-size: 50px"></i>
                            </div>
                            <div class="col" style="padding-bottom:0px;align-self:center;">
                                <h4 style="text-align: left;">JUMLAH PENERIMA MANFAAT</h4>
                                <h3 style="text-align: left;">{{number_format($penerima_total)}}</h3>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div class="row mb-1">
            <div class="col-md-4 card card-body">
                <div id="chart102"></div>
            </div>
            <div class="col-md-4 card card-body">
                <div id="chart100"></div>
            </div>
            <div class="col-md-4 card card-body">
                <div id="chart101"></div>
            </div>
        </div>

        <div class="row mb-4" style="margin-bottom: 0px !important;">
            <div class="row-md-12">
                <select class="form-control" id="filter_type" style="height:unset;padding:5px 5px;width:60%;float:right;" onchange="getChart(this.value)">
                    <option value="all">Keseluruhan Pakej [Pilih bagi menunjukkan statistik]</option>
                    @php 
                        $kewangan_id = 0;
                        $count = 1;
                        foreach($inisiatif as $item) {
                            if ($kewangan_id != $item['kewangan_id']) {
                                $kewangan_id = $item['kewangan_id'];
                                if ($kewangan_id == 9) {
                                    echo "<option value='10,11,12,13,14,15'>&nbsp;&nbsp;".$count++." - Bakul Makanan (Mekanisme Delivery)</option>";
                                } else if ($kewangan_id == 10) {
                                    echo "<option value='16,17,18,19,20'>&nbsp;&nbsp;".$count++." - Bantuan Warga Tani</option>";
                                } else if ($kewangan_id == 4) {
                                    echo "<option value='32,33,34'>&nbsp;&nbsp;".$count++." - Peruntukan Khas Program Mesra Rakyat</option>";
                                }
                            }
                            if ($item['kewangan_id'] == 9 || $item['kewangan_id'] == 10 || $item['kewangan_id'] == 4) {
                                echo "<option value=".$item['id']." style='padding-left: 10px;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".$item['pakej']."</option>";
                            } else {
                                echo "<option value=".$item['id']." style='padding-left: 10px;'>&nbsp;&nbsp;".$count++." - ".$item['pakej']."</option>";
                            }
                        }
                    @endphp
                </select>
            </div>
        </div>

        <div class="row mb-1">
            <div class="col card card-body">
                <div id="chart200"></div>
            </div>
        </div>

        <div class="row mb-4" style="margin-bottom: 0px !important;">
            <div class="col-md-8">
                <select class="form-control" id="filter_type" style="height:unset;padding:5px 5px;width:60%;float:right;" onchange="getChartInisiatif(this.value)">
                    <option value="all">Keseluruhan Minggu [Pilih bagi menunjukkan statistik mingguan]</option>
                    @php 
                        foreach($minggu as $item) {
                                echo "<option value=".$item." style='padding-left: 10px;'>&nbsp;&nbsp;Minggu ".$item."</option>";
                        }
                    @endphp
                </select>
            </div>
        </div>

        <div class="row mb-1">
            <div class="col card card-body">
                <div id="chart201"></div>
            </div>
        </div>
    </section>
@endsection

@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 chart100 = new ApexCharts(document.querySelector("#chart100"), {
            title: { text: 'JUMLAH PERBELANJAAN (INISIATIF)' },
            chart: { type: 'pie', height: 350, toolbar: { show: true, offsetX: -50, } },
            legend: { show: false, position: 'bottom' },
            series: {!! json_encode($jumlah_perbelanjaan_pakej['data']) !!},
            labels: {!! $jumlah_perbelanjaan_pakej['label']->toJson() !!},
            yaxis: { labels: { formatter: function(val, index) { return "RM "+parseFloat(val).toLocaleString(); } } }
        });

        var chart101 = new ApexCharts(document.querySelector("#chart101"), {
            title: { text: 'JUMLAH PENERIMA MANFAAT (INISIATIF)' },
            chart: { type: 'pie', height: 350, toolbar: { show: true, offsetX: -50 } },
            legend: { show: false, position: 'bottom' },
            series: {!! json_encode($jumlah_penerima_pakej['data']) !!},
            labels: {!! $jumlah_penerima_pakej['label']->toJson() !!},
            yaxis: { labels: { formatter: function(val, index) { return "Seramai: "+parseFloat(val).toLocaleString(); } } }
        });

        var chart102 = new ApexCharts(document.querySelector("#chart102"), {
            title: { text: 'IMPAK KEWANGAN (INISIATIF)' },
            chart: { type: 'pie', height: 350, toolbar: { show: true, offsetX: -50 } },
            legend: { show: false, position: 'bottom' },
            series: {!! json_encode($impak_kewangan_pakej['data']) !!},
            labels: {!! $impak_kewangan_pakej['label']->toJson() !!},
            yaxis: { labels: { formatter: function(val, index) { return "RM "+parseFloat(val).toLocaleString(); } } }
        });

        
        var chart200 = new ApexCharts(document.querySelector("#chart200"), {
            title: { text: 'CARTA KUMULATIF MINGGUAN' },
            series: [{name: 'JUMLAH KUMULATIF PERBELANJAAN', data: {!! json_encode($cumulative) !!}}, {name: 'JUMLAH KUMULATIF PENERIMA', data: {!! json_encode($cumulative_penerima) !!}}],
            chart: { type: 'line', height: 550, stacked: false, toolbar: { show: true }, zoom: { enabled: false }},
            legend: { show: true, position: 'bottom' },
            xaxis: { type: 'categories', categories: {!! $minggu->toJson() !!}, labels: { formatter: function(val, index) { return "Minggu "+val; }, style: { fontSize: '12px' }, rotate: -35, rotateAlways: true} },
            yaxis: [{ title: { text: "JUMLAH KUMULATIF PERBELANJAAN" }, labels: { formatter: function(val, index) { return 'RM ' + parseFloat(val).toLocaleString() } } }, { opposite: true, max:({!! $max_penerima !!}/6*10), title: { text: "JUMLAH KUMULATIF PENERIMA" }, labels: { formatter: function(val, index) { return parseInt(val).toLocaleString() } } }],
            fill: { opacity: 1 },
            dataLabels: { enabled: true,  formatter: function(val, index) { return parseFloat(val).toLocaleString() } },
            stroke: { curve: 'smooth' },
        });

        var chart201 = new ApexCharts(document.querySelector("#chart201"), {
            title: { text: 'CARTA KUMULATIF INISIATIF' },
            series: [{name: 'JUMLAH KUMULATIF PERBELANJAAN', data: {!! json_encode($cumulative_inisiatif) !!}}, {name: 'JUMLAH KUMULATIF PENERIMA', data: {!! json_encode($cumulative_penerima_inisiatif) !!}}],
            chart: { type: 'line', height: 550, stacked: false, toolbar: { show: true }, zoom: { enabled: false }},
            legend: { show: true, position: 'bottom' },
            xaxis: { type: 'categories', categories: {!! $list_pakej->toJson() !!}, labels: { formatter: function(val, index) { return val; }, style: { fontSize: '12px' }, rotate: -45, rotateAlways: true, hideOverlappingLabels: false, trim: true} },
            yaxis: [{ title: { text: "JUMLAH KUMULATIF PERBELANJAAN" }, labels: { formatter: function(val, index) { return 'RM ' + parseFloat(val).toLocaleString() } } }, { opposite: true, title: { text: "JUMLAH KUMULATIF PENERIMA" }, labels: { formatter: function(val, index) { return parseFloat(val).toLocaleString() } } }],
            fill: { opacity: 1 },
            dataLabels: { enabled: true,  formatter: function(val, index) { return parseFloat(val).toLocaleString() } },
            stroke: { curve: 'smooth' },
            
        });
        
        chart100.render();
        chart101.render();
        chart102.render();
        chart200.render();
        chart201.render();

        function getChart(inisiatif_id) {
            chart200.render();
            chart200.updateSeries([]);
            chart200.updateOptions([]);

            var data = { _token: '{{ csrf_token() }}', inisiatif_id };

            $.ajax({
                url: '{{ url('kita') }}',
                type: 'POST',
                data: data,
                success: function(response) {
                    var max_penerima = (response.max_penerima)/6*10;

                    chart200.updateSeries([{name: 'JUMLAH KUMULATIF PERBELANJAAN', data: response.cumulative}, {name: 'JUMLAH KUMULATIF PENERIMA', data: response.cumulative_penerima }]);
                    if(max_penerima != 0){
                    chart200.updateOptions({yaxis: [{ title: { text: "JUMLAH KUMULATIF PERBELANJAAN" }, labels: { formatter: function(val, index) { return 'RM ' + parseFloat(val).toLocaleString() } } }, { opposite: true, max:max_penerima, title: { text: "JUMLAH KUMULATIF PENERIMA" }, labels: { formatter: function(val, index) { return parseInt(val).toLocaleString() } } }]});
                    }
                },
                error: function(response) {
                    $.alert({
                        type: 'red',
                        title: 'Whoops, looks like something went wrong!',
                        content: 'Please check with system admin.',
                        typeAnimated: true,
                        icon: 'fa fa-warning',
                        columnClass: 'col-md-6 col-md-offset-3',
                    });
                }
            });
        }

        function getChartInisiatif(week) {
            chart201.render();
            chart201.updateSeries([])

            var data = { _token: '{{ csrf_token() }}', week };
            $.ajax({
                url: '{{ url('kita') }}',
                type: 'POST',
                data: data,
                success: function(response) {
                    chart201.updateSeries([{name: 'JUMLAH KUMULATIF PERBELANJAAN', data: response.cumulative_inisiatif}, {name: 'JUMLAH KUMULATIF PENERIMA', data: response.cumulative_penerima_inisiatif }, {name: 'Max Penerima', data: response.max_penerima }]);
                },
                error: function(response) {
                    $.alert({
                        type: 'red',
                        title: 'Whoops, looks like something went wrong!',
                        content: 'Please check with system admin.',
                        typeAnimated: true,
                        icon: 'fa fa-warning',
                        columnClass: 'col-md-6 col-md-offset-3',
                    });
                }
            });
        }

        $('#downloadPDF').click(function () {
            domtoimage.toPng(document.getElementById('dashboardContent'))
                .then(function (blob) {
                    var y = new Date();
                    var y = y.getFullYear();
                    var m = new Date();
                    var m = m.getMonth() + 1;
                    var d = new Date();
                    var d = d.getDate();
                    var filename = 'Statistik Pakej Kita Selangor - ' + y + '-' + m + '-' + d + '.pdf';
                    var pdf = new jsPDF('p', 'pt', [$('#dashboardContent').width(), $('#dashboardContent').height()]);
                    pdf.addImage(blob, 'PNG', 0, 0, $('#dashboardContent').width(), $('#dashboardContent').height());
                    pdf.save(filename);
                })
                .catch(function (error) {
                    console.error('oops, something went wrong!', error);
                });
        });
    </script>
@endpush