@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;
        }
        #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-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">
                        <select class="form-control" id="filter_type" style="height:unset;padding:5px 5px;width:130px;float:right;" onchange="getByYear(this.value)">
                            <option value="keseluruhan">Keseluruhan</option>
                            @php 
                                foreach(range(date('Y'), 2016) as $year) {
                                    echo "<option value='$year'>$year</option>";
                                }
                            @endphp
                        </select>
                        <span style="padding:5px;float:right;">Pilihan Mengikut Tahun</span>
                    </div>
                </div>
                <br>
                <div class="m-stack m-stack--ver m-stack--desktop m-stack--demo">
                    <a href="{{-- url('icu/e-kasih'.$ipr->name) --}}" 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 PERMOHONAN E-KASIH</h4>
                                <h3 style="text-align: left;" id="ekasih_total">{{ number_format($ekasih_total, 0, '', ',') }}</h3>
                            </div>
                        </div>
                    </a>
                    <a href="{{-- url('icu/e-kasih'.$ipr->name) --}}" class="m-stack__item m-stack__item--center m-stack__item--middle header-button" style="background-color: #34babf; color: white">
                        <div class="row" style="padding-left: 25px;">
                            <div class="mb-2">
                                <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 MISKIN</h4>
                                <h3 style="text-align: left;" id="miskin_total">{{ number_format($miskin_total, 0, '', ',') }}</h3>
                            </div>
                        </div>
                    </a>
                    <a href="{{-- url('icu/e-kasih'.$ipr->name) --}}" class="m-stack__item m-stack__item--center m-stack__item--middle header-button" style="background-color: #34bfa3; 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 MISKIN TEGAR</h4>
                                <h3 style="text-align: left;" id="miskintegar_total">{{-- number_format($taksiran_cukai_total['kk_pegangan'], 0, '', ',') --}}</h3>
                            </div>
                        </div>
                    </a>
                    <a href="{{-- url('icu/e-kasih'.$ipr->name) --}}" class="m-stack__item m-stack__item--center m-stack__item--middle header-button" style="background-color: #bdbf34; color: white">
                        <div class="row" style="padding-left: 25px;">
                            <div class="mb-2">
                                <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 TERKELUAR</h4>
                                <h3 style="text-align: left;" id="terkeluar_total">{{ number_format($terkeluar_total, 0, '', ',') }}</h3>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col" style="padding:1px;">
                <div class="card card-body" style="padding:1px;">
                    <div id="chart1"></div>
                </div>
            </div>
            <div class="col" style="padding:1px;">
                <div class="card card-body" style="padding:1px;">
                    <div id="chart2"></div>
                </div>
            </div>
            <div class="col" style="padding:1px;">
                <div class="card card-body" style="padding:1px;">
                    <div id="chart3"></div>
                </div>
            </div>
            <div class="col" style="padding:1px;">
                <div class="card card-body" style="padding:1px;">
                    <div id="chart4"></div>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 10px;">
            
        </div>
        {{-- Modal --}}
        
    </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>
        

        // function getByYear(tahun) {
        //     $('#kkr_pegangan').html('');
        //     $('#kkr_taksiran').html('');
        //     $('#kk_pegangan').html('');
        //     $('#kk_taksiran').html('');

        //     chart1.updateSeries([{ data: [] }])
        //     chart2.updateSeries([{ data: [] }])
        //     chart3.updateSeries([{ data: [] }])
        //     chart4.updateSeries([{ data: [] }])
            
        //     var data = {
        //         _token: '{{ csrf_token() }}',
        //         tahun
        //     };

        //     $.ajax({
        //         url: '{{ url('admin/permohonan/cukai') }}',
        //         type: 'POST',
        //         data: data,
        //         success: function(response) {
        //             var amount =parseFloat(response.taksiran_total.kkr_pegangan);
        //             var kkr_pegangan = amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

        //             var amount =parseFloat(response.taksiran_total.kkr_taksiran).toFixed(2);
        //             var kkr_taksiran = amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

        //             var amount =parseFloat(response.taksiran_total.kk_pegangan);
        //             var kk_pegangan = amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

        //             var amount =parseFloat(response.taksiran_total.kk_taksiran).toFixed(2);
        //             var kk_taksiran = amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

        //             $('#kkr_pegangan').html(kkr_pegangan);
        //             $('#kkr_taksiran').html('RM ' + kkr_taksiran);
        //             $('#kk_pegangan').html(kk_pegangan);
        //             $('#kk_taksiran').html('RM ' + kk_taksiran);
                    
        //             chart1.updateSeries(response.taksiran_data.kkr_pegangan)
        //             chart2.updateSeries(response.taksiran_data.kkr_taksiran)
        //             chart3.updateSeries(response.taksiran_data.kk_pegangan)
        //             chart4.updateSeries(response.taksiran_data.kk_taksiran)
        //         },
        //         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',
        //             });
        //         }
        //     });
        // }

        

        
    </script>
@endpush