@extends('layouts.app')

@section('content')
<div class="col-12 container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb pb-3">
                      <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                      <li class="breadcrumb-item active" aria-current="page">Bajet</li>
                    </ol>
                  </nav>

                <div class="card-body text-center">
                    
                   
                    <div class="row justify-content-center">
                        <div class="card bg-light mb-3 col-4">
                            <div class="card-header font-weight-bold">Pembiayaan</div>
                            <div class="card-body">
                                <div class="progress mb-2">
                                    <div id="pembprogress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
                                </div>

                                <div class="d-flex justify-content-between">
                                    <div>
                                        <span class="col-5 font-weight-bold">HARIAN</span>
                                        <span class="col-1">:</span>
                                        <span id="pembharian" class="col-5">HARIAN</span>
                                    </div>
                                    <div>
                                        <span id="pembpercent">-100%</span>
                                    </div>
                                    
                                </div>
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <span class="col-5 font-weight-bold">BAJET</span>
                                        <span class="col-1">:</span>
                                        <span id="pembbajet" class="col-5"></span>
                                    </div>
                                    <span>varians</span>
                                </div>
                            </div>
                        </div>

                        <div class="card bg-light mb-3 col-4">
                            <div class="card-header font-weight-bold">Penebusan</div>
                            <div class="card-body">
                                <div class="progress mb-2">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
                                </div>

                                <div class="d-flex justify-content-between">
                                    <div>
                                        <span class="col-5 font-weight-bold">HARIAN</span>
                                        <span class="col-1">:</span>
                                        <span id="penbharian" class="col-5">HARIAN</span>
                                    </div>
                                    <div>
                                        <span id="penbpercent">-100%</span>
                                    </div>
                                    
                                </div>
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <span class="col-5 font-weight-bold">BAJET</span>
                                        <span class="col-1">:</span>
                                        <span id="penbbajet" class="col-5"></span>
                                    </div>
                                    <span>varians</span>
                                </div>
                            </div>
                        </div>

                        <div class="card bg-light mb-3 col-4">
                            <div class="card-header font-weight-bold">Keuntungan</div>
                            <div class="card-body">
                                <div class="progress mb-2">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
                                </div>

                                <div class="d-flex justify-content-between">
                                    <span>HARIAN :</span>
                                    <span>-100%</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span>BAJET :</span>
                                    <span>dasdsa</span>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="mt-3">
                        <div class="row justify-content-center">
                            <div class="card bg-light mb-3 col-4">
                                <span class="font-weight-bold mt-2 mb-2">Pembiayaan Bulanan</span>
                                <div class="card-body">
                                    <div id="chartpembiayaan">
                                    </div>
                                </div>
                            </div>
    
                            <div class="card bg-light mb-3 col-4">
                                <span class="font-weight-bold mt-2 mb-2">Penebusan Bulanan</span>
                                <div class="card-body">
                                    <div id="chartpenebusan">
                                    </div>
                                </div>
                            </div>
    
                            <div class="card bg-light mb-3 col-4">
                                <span class="font-weight-bold mt-2 mb-2">Keuntungan Bulanan</span>
                                <div class="card-body">
                                    <div id="chartkeuntungan">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                
                </div>
            </div>
        </div>
    </div>
</div>
<script>


const formatter = new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2
});

var options = {
        series: [ {
            name: 'Actual',
            data: []
        }],
        chart: {
            id: 'pembiayaan-bulanan',
            height: 350,
            type: 'bar'
        },
        yaxis: {
            labels: {
            formatter: function (value) {
                return 'RM ' + formatter.format(value);
            }
            },
        },
        plotOptions: {
            bar: {
            columnWidth: '60%',
            dataLabels: {
                    position: 'top',
            },
            }
        },
        colors: ['#3498db'],
        dataLabels: {
            enabled: true,
                style: {
                    colors: ['#333']
                },
                offsetY: -30,
            formatter: function (val, opt) {
            let total = ((val - opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) / opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) * 100

            if(isNaN(total))
            {
                return 0.00
            }else{
                if(isFinite(total))
                {
                if(total == -100)
                {
                    return 0.00
                }else{
                    return total.toFixed(2)
                }
                }else{
                return 0.00
                }
            }
            },
        },
        legend: {
            show: true,
            showForSingleSeries: true,
            customLegendItems: ['Actual', 'Expected'],
            markers: {
                fillColors: ['#3498db', '#e74c3c']
            }
        }
};

$( document ).ready(function() {
    let api_url = "{{ $api_url }}";

    $.ajax({
        method:'get',
        url: api_url + '/admin/pembiayaanBulanan',
        datatype:'json',
        data:{
            'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
        },
        success:function(data){
            datapembiayaan(data);
        }
    });

    $.ajax({
        method:'get',
        url: api_url + '/admin/penebusanBulanan',
        datatype:'json',
        data:{
            'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
        },
        success:function(data){
            datapenebusan(data);
        }
    });

    $.ajax({
        method:'get',
        url: api_url + '/admin/keuntunganBulanan',
        datatype:'json',
        data:{
            'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
        },
        success:function(data){
            datakeuntungan(data);
        }
    });

    $.ajax({
        method:'get',
        url: api_url + '/admin/pembiayaanToday',
        datatype:'json',
        data:{
            'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
        },
        success:function(data){
            console.log(data);
            $('#pembharian').text('RM' + formatter.format(data[0].gadaiToday));
            $('#pembbajet').text('RM' + formatter.format(data[0].bajetharian.toFixed(2)));
            $('#pembpercent').text(data[0].percentDiff + '%');
            $('#pembprogress').text(100 - data[0].percentcum + '%');
            $("#pembprogress").css("width",100 - data[0].percentcum);
            // this.gadaianremaining = formatter.format(data[0].remaining.toFixed(2)),
            // this.percentcumgadai = (100 - data[0].percentcum)
        }
    });

});

    function datapembiayaan(datapemb)
    {
        let chartpemb = new ApexCharts(document.querySelector("#chartpembiayaan"), options);
        chartpemb.render();
        chartpemb.updateSeries([{
            data: datapemb
        }]);
    }

    function datapenebusan(datapen)
    {
        var chartpen = new ApexCharts(document.querySelector("#chartpenebusan"), options);
        chartpen.render();
        chartpen.updateSeries([{
            data: datapen
        }]);
    }

    function datakeuntungan(datakeun)
    {
        var charkeun = new ApexCharts(document.querySelector("#chartkeuntungan"), options);
        charkeun.render();
        charkeun.updateSeries([{
            data: datakeun
        }]);
    }
        


</script>

@endsection