@extends('layouts.app')

@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')
    <section id="dashboardContent">
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">{{ $ipr->display_name }}</h3>
                    </div>
                </div>
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        
                    </div>
                </div>
                <br>
                <div class="m-stack m-stack--ver m-stack--desktop m-stack--demo">
                    <a href="{{ url('admin/permohonan/'.$ipr->name) }}" 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(App\PermohonanBaucer::where('ipr_id', $ipr->id)->count()) }}</h3>
                    </a>
                    <a href="{{ url('admin/permohonan/'.$ipr->name.'?status='.\App\PermohonanBaucer::APPROVED) }}" 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</h4>
                        <h3>{{ number_format(App\PermohonanBaucer::where('ipr_id', $ipr->id)->where('status', 2)->count()) }}</h3>
                    </a>
                    <a href="{{ url('admin/permohonan/'.$ipr->name.'?status='.\App\PermohonanBaucer::REJECTED) }}" 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(App\PermohonanBaucer::where('ipr_id', $ipr->id)->where('status', 3)->count()) }}</h3>
                    </a>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card card-body" style="height:600px">
                    <iframe id="kibana" src="{{ url('kibana/baucer') }}" frameborder="0" style="width:100%;height:100%;"></iframe>
                </div>
            </div>
            <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 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 class="col-md-6">
                <div class="card card-body">
                    <div id="chart8"></div>
                </div>
            </div>
            <!-- <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart9"></div>
                </div>
            </div> -->
        </div>

        <div class="row-mt-3">
            <div class="col-md-12">
                <h4 style="color: red;">Ringkasan Peruntukan</h4>
            </div>
        </div>
        <hr>


        <div class="row mb-3">
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart13"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-body">
                    <div id="chart14"></div>
                </div>
            </div>
            <!-- <div class="col-md-4">
                <div class="card card-body">
                    <div id="chart15"></div>
                </div>
            </div> -->
        </div>

        <hr>
        <div class="row-mb-6">
            <div class="col-md-12">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <div class="row">
                            <div class="col-md-2">
                                <span style="padding:5px;">Pilihan Mengikut Tahun: </span>
                                <select class="form-control" id="filter_type" style="height:unset;padding:5px 5px;width:130px;" onchange="getByYear(this.value)">
                                    <option value="keseluruhan">Keseluruhan</option>
                                    @php 
                                        foreach(range(date('Y'), 2013) as $year) {
                                            echo "<option value='$year'>$year</option>";
                                        }
                                    @endphp
                                </select>
                            </div>
                            <div class="col-md-2">
                                <span style="padding:5px;">Pilihan Mengikut Perayaan: </span>
                                <select class="form-control" id="filter_perayaan" style="height:unset;padding:5px 5px;width:200px;" onchange="getByPerayaan(this.value)">
                                    <option value="SEMUA" selected>Semua</option>
                                    <option value="HARI RAYA AIDILFITRI">Hari Raya Aidilfitri</option>
                                    <option value="TAHUN BARU CINA">Tahun Baru Cina</option>
                                    <option value="DEEPAVALI">Deepavali</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row-mt-3-mb-3 aidilfitri">
            <div class="col-md-12">
                <div class="card card-body">
                    <div id="chart10"></div>
                </div>
            </div>
        </div>
        <div class="row-mt-3-mb-3 tahun_baru_cina">
            <div class="col-md-12">
                <div class="card card-body">
                    <div id="chart11"></div>
                </div>
            </div>
        </div>
        <div class="row-mt-3-mb-6 deepavali">
            <div class="col-md-12">
                <div class="card card-body">
                    <div id="chart12"></div>
                </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 chart = new ApexCharts(document.querySelector("#chart1"), {
            title: { text: 'Status Permohonan' },
            series: [{ name: '', data: {!! $topStatusIPRBaucer->pluck('total')->toJson() !!} }],
            chart: { type: 'bar', height: 265, toolbar: { show: false } },
            plotOptions: { bar: { horizontal: true } },
            dataLabels: { enabled: false },
            xaxis: {
                categories: {!! $topStatusIPRBaucer->pluck('label')->toJson() !!},
                tickPlacement: 'on',
                labels: { show: true, rotate: 0, 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: {!! $topStatusIPRBaucer->pluck('total')->toJson() !!},
            labels: {!! $topStatusIPRBaucer->pluck('label')->toJson() !!},
            colors: ['#008FFB', '#f4516c', '#34bfa3', ]
        });
        chart.render();

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

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

        chart = new ApexCharts(document.querySelector("#chart5"), {
            title: { text: 'Jantina' },
            chart: { type: 'donut', height: 315 },
            legend: { show: true, position: 'bottom' },
            series: {!! $topByGenderBaucer->pluck('total')->toJson() !!},
            labels: {!! $topByGenderBaucer->pluck('label')->toJson() !!},
        });
        chart.render();

        chart = new ApexCharts(document.querySelector("#chart6"), {
            title: { text: 'Status Perkahwinan' },
            chart: { type: 'donut', height: 315 },
            legend: { show: true, position: 'bottom' },
            series: {!! $topByMarriageBaucer->pluck('total')->toJson() !!},
            labels: {!! $topByMarriageBaucer->pluck('label')->toJson() !!},
        });
        chart.render();


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

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

        var chart10 = new ApexCharts(document.querySelector("#chart10"), {
            title: { text: 'Jumlah Peruntukan Mengikut Perayaan: HARI RAYA AIDILFITRI' },
            series: null,
            dataLabels: { enabled: false },
            chart: { type: 'bar', height: 500, stacked: true, toolbar: { show: false }, zoom: { enabled: false }},
            plotOptions: { bar: { horizontal: false } },
            xaxis: { type: 'number', categories: {!! $s_adun->pluck('nama')->toJson() !!}, labels: { formatter: function(val, index) { return val.toUpperCase(); }, style: { fontSize: '8px' }, rotate: -45, rotateAlways: true, hideOverlappingLabels: false } },
            yaxis: { labels: { formatter: function(val, index) { return parseFloat(val).toLocaleString(); } } },
            legend: { position: 'bottom' },
            fill: { opacity: 1 },
        });
        chart10.render();

        var chart11 = new ApexCharts(document.querySelector("#chart11"), {
            title: { text: 'Jumlah Peruntukan Mengikut Perayaan: TAHUN BARU CINA' },
            series: null,
            dataLabels: { enabled: false },
            chart: { type: 'bar', height: 500, stacked: true, toolbar: { show: false }, zoom: { enabled: false }},
            plotOptions: { bar: { horizontal: false } },
            xaxis: { type: 'number', categories: {!! $s_adun->pluck('nama')->toJson() !!}, labels: { formatter: function(val, index) { return val.toUpperCase(); }, style: { fontSize: '8px' }, rotate: -45, rotateAlways: true, hideOverlappingLabels: false } },
            yaxis: { labels: { formatter: function(val, index) { return parseFloat(val).toLocaleString(); } } },
            legend: { position: 'bottom' },
            fill: { opacity: 1 },
        });
        chart11.render();

        var chart12 = new ApexCharts(document.querySelector("#chart12"), {
            title: { text: 'Jumlah Peruntukan Mengikut Perayaan: DEEPAVALI' },
            series: null,
            dataLabels: { enabled: false },
            chart: { type: 'bar', height: 500, stacked: true, toolbar: { show: false }, zoom: { enabled: false }},
            plotOptions: { bar: { horizontal: false } },
            xaxis: { type: 'number', categories: {!! $s_adun->pluck('nama')->toJson() !!}, labels: { formatter: function(val, index) { return val.toUpperCase(); }, style: { fontSize: '8px' }, rotate: -45, rotateAlways: true, hideOverlappingLabels: false} },
            yaxis: { labels: { formatter: function(val, index) { return parseFloat(val).toLocaleString(); } } },
            legend: { position: 'bottom' },
            fill: { opacity: 1 },
        });
        chart12.render();

        var chart13 = new ApexCharts(document.querySelector("#chart13"), {
            title: { text: 'Jumlah Peruntukan Sebenar Mengikut Tahun' },
            series: null,
            dataLabels: { enabled: false },
            chart: { type: 'bar', height: 500, stacked: true, toolbar: { show: false }, zoom: { enabled: false }},
            plotOptions: { bar: { horizontal: false } },
            xaxis: { type: 'number', categories: null, labels: { formatter: function(val, index) { return val.toUpperCase(); }, style: { fontSize: '12px' }, rotate: -35, rotateAlways: false } },
            yaxis: { labels: { formatter: function(val, index) { return parseFloat(val).toLocaleString(); } } },
            legend: { position: 'bottom' },
            fill: { opacity: 1 },
        });
        chart13.render();

        var chart14 = new ApexCharts(document.querySelector("#chart14"), {
            title: { text: 'Jumlah Peruntukan Asal Mengikut Tahun' },
            series: null,
            dataLabels: { enabled: false },
            chart: { type: 'bar', height: 500, stacked: true, toolbar: { show: false }, zoom: { enabled: false }},
            plotOptions: { bar: { horizontal: false } },
            xaxis: { type: 'number', categories: null, labels: { formatter: function(val, index) { return val.toUpperCase(); }, style: { fontSize: '12px' }, rotate: -35, rotateAlways: false } },
            yaxis: { labels: { formatter: function(val, index) { return parseFloat(val).toLocaleString(); } } },
            legend: { position: 'bottom' },
            fill: { opacity: 1 },
        });
        chart14.render();

        function getByYear(tahun) {

            chart10.updateSeries([{ data: [] }])
            chart11.updateSeries([{ data: [] }])
            chart12.updateSeries([{ data: [] }])
            
            var data = {
                _token: '{{ csrf_token() }}',
                tahun
            };

            $.ajax({
                url: '{{ url('admin/permohonan/baucer') }}',
                type: 'POST',
                data: data,
                success: function(response) {
                    chart10.updateSeries(response.peruntukan_baucer_aidilfitri.jumlah_peruntukan)
                    chart11.updateSeries(response.peruntukan_baucer_tahun_baru_cina.jumlah_peruntukan)
                    chart12.updateSeries(response.peruntukan_baucer_deepavali.jumlah_peruntukan)
                },
                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 getByPerayaan(perayaan) {
            $('.aidilfitri').show();
            $('.tahun_baru_cina').show();
            $('.deepavali').show();
            
            if (perayaan == 'HARI RAYA AIDILFITRI') {
                $('.aidilfitri').show('slow');
                $('.tahun_baru_cina').hide('slow');
                $('.deepavali').hide('slow');
            } else if (perayaan == 'TAHUN BARU CINA') {
                $('.aidilfitri').hide('slow');
                $('.tahun_baru_cina').show('slow');
                $('.deepavali').hide('slow');
            } else if (perayaan == 'DEEPAVALI') {
                $('.aidilfitri').hide('slow');
                $('.tahun_baru_cina').hide('slow');
                $('.deepavali').show('slow');
            }
        }

        

        function MoneyFormat(labelValue) 
        {
        // Nine Zeroes for Billions
        return Math.abs(Number(labelValue)) >= 1.0e+9

            ? Math.abs(Number(labelValue)) / 1.0e+9 + " bilion"
            // Six Zeroes for Millions 
            : Math.abs(Number(labelValue)) >= 1.0e+6

            ? Math.abs(Number(labelValue)) / 1.0e+6 + " juta"
            // Three Zeroes for Thousands
            : Math.abs(Number(labelValue)) >= 1.0e+3

            ? Math.abs(Number(labelValue)) / 1.0e+3 + " K"

            : Math.abs(Number(labelValue));

        }
    </script>
@endpush