@extends('layouts.indexforth')
@section('content')

<style>
    .breadcrumb-second {
        display: flex;
        flex-wrap: wrap;
        padding: 0.5rem 1rem;
        margin-bottom: 1rem;
        list-style: none;
        border-radius: 0.375rem;
    }

    .icon-shape i {
        top: 11px;
        left: 15px;
    }

    @media (min-width:1400px) {
        .card-title {
            max-width: 180px;
        }

        .col-auto {
            height: 48px;
            position: absolute;
            right: 0;
        }

    }

    @media (max-width:1399px) {
        .card-title {
            max-width: 135px;
        }

        .col-auto {
            height: 48px;
            position: absolute;
            right: 0;
        }

    }

    @media (max-width:1200px) {
        .card-title {
            max-width: inherit;
        }
    }

    .card-bg {
        box-shadow: 0rem 1rem 2rem #0000003d !important;
    }
</style>

<title>Analisa | Customer Portal</title>

<section>
    <img src="{{ asset('assets/img/material-kit/waves-white.svg') }}" alt="pattern-lines" class="position-absolute opacity-1 w-100">
    <div class="container py-lg-4 py-4">
        <div class="row mt-6">
            <nav aria-label="breadcrumb-second">
                <ol class="breadcrumb-second">
                    <li class="breadcrumb-item text-white opacity-5"><a href="/" style="color: #fff;">Home</a></li>
                    <li class="breadcrumb-item text-white active" aria-current="page">Ringkasan Transaksi Pembiayaan</li>
                </ol>
            </nav>
        </div>
        <div class="row">
            <div class="col-xl-3 col-lg-6">
                <div class="card card-stats mb-4 mb-xl-0">
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <h6 class="card-title text-uppercase text-muted mb-0"> Jumlah Pembiayaan Semasa</h6>
                                <span class="h4 font-weight-bold mb-0">RM{{ number_format($totalgadai,2) }}</span>
                            </div>
                            <div class="col-auto">
                                <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
                                    <i class="fas fa-chart-bar"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-lg-6">
                <div class="card card-stats mb-4 mb-xl-0">
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <h6 class="card-title text-uppercase text-muted mb-0">Bilangan Pembiayaan Aktif</h6>
                                <span class="h4 font-weight-bold mb-0">{{ number_format($bilangan_belum_tebus) }}</span>
                            </div>
                            <div class="col-auto">
                                <div class="icon icon-shape bg-warning text-white rounded-circle shadow">
                                    <i class="fas fa-chart-pie"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6">
                <div class="card card-stats mb-4 mb-xl-0">
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <h6 class="card-title text-uppercase text-muted mb-0">Pembiayaan Melebihi 6 Bulan</h6>
                                <span class="h4 font-weight-bold mb-0">{{ number_format($bilangan_melebihi_6_bulan) }}</span>
                            </div>
                            <div class="col-auto">
                                <div class="icon icon-shape bg-success text-white rounded-circle shadow">
                                    <i class="fas fa-users"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6">
                <div class="card card-stats mb-4 mb-xl-0">
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <h6 class="card-title text-uppercase text-muted mb-0">Bilangan Gadaian Akan Dilelong</h6>
                                <span class="h4 font-weight-bold mb-0">{{ number_format($bilakandilelong) }}</span>
                            </div>
                            <div class="col-auto">
                                <div class="icon icon-shape bg-info text-white rounded-circle shadow">
                                    <i class="fas fa-percent" style="margin-left: 2px;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- <section class="py-7">
    <div class="container">
        <div class="row">
            <div class="col-xl-6 mb-5 mb-xl-0">
                <div class="card bg-gradient-default shadow">
                    <div class="card-header bg-transparent">
                        <div class="row align-items-center">
                            <div class="col">
                                <h6 class="text-uppercase text-muted ls-1 mb-1">Keseluruhan</h6>
                                <h4 class="mb-0 text-primary">Jumlah Bayaran</h4>
                            </div>
                            <div class="col">
                                
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="chart">
                            <canvas id="chart-sales" class="chart-canvas" style="height: 265px !important;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="card shadow">
                    <div class="card-header bg-transparent">
                        <div class="row align-items-center">
                            <div class="col">
                                <h6 class="text-uppercase text-muted ls-1 mb-1">Prestasi</h6>
                                <h4 class="mb-0 text-primary">Pembiayaan (Bulanan)</h4>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="chart">
                            <canvas id="chart-orders" class="chart-canvas" style="height: 265px !important;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section> -->
<section class="bg-white">
    <div class="container py-lg-4 py-4">
        <div class="row justify-content-center">
            <!-- <div class="col-xl-7 mb-5 mb-xl-0">
                <div class="card shadow p-4">
                    <div class="card-header border-0">
                        <div class="row align-items-center">
                            <div class="col">
                                <h4 class="mb-0 text-primary">Pembiayaan Aktif</h4>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table align-items-center table-bordered table-hover border" style="text-align: center; width: 100%" id="sag_aktif">
                            <thead class="thead-light bg-dark text-white text-center">
                                <tr>
                                    <th scope="col">No. SAG</th>
                                    <th scope="col">Pembiayaan (RM)</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($belum_tebus as $index1=>$bt)
                                <tr>
                                    <td>{{ $bt['norujukan'] }}</td>
                                    <td>{{ number_format($bt['pinjaman'],2) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div> -->
            <div class="col-xl-6 col-md-12">
                <div class="card card-bg shadow p-4">
                    <div class="card-header border-0">
                        <div class="row align-items-center">
                            <div class="col">
                                <h4 class="mb-0 text-primary">Harga Emas</h4>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <!-- Projects table -->
                        <table class="table align-items-center table-bordered table-hover border" id="harga_emas" style="text-align: center; width: 100%">
                            <thead class="thead-dark bg-dark text-white text-center">
                                <tr>
                                    <th>Karat</th>
                                    <th>Harga (RM)</th>
                                    <th>Perubahan (%)</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($hargaemasterdahulu as $index=>$hm)
                                <tr>
                                    <td>{{ $hm['karat'] }}</td>
                                    <td>{{ $hm['hargasemasa'] }}</td>
                                    @if($hm['percent'] > 0)
                                    <td><i class="fas fa-arrow-up text-success mr-3"></i><span class="text-success">({{ number_format($hm['percent'],2) }})</span></td>
                                    @else
                                    <td><i class="fas fa-arrow-down text-warning mr-3"></i><span class="text-warning">({{ number_format($hm['percent']*-1,2) }})</span></td>
                                    @endif
                                </tr>
                                @endforeach
                                <!-- <tr>
                                    <td>14.0k</td>
                                    <td>157.30</td>
                                    <td><i class="fas fa-arrow-up text-success mr-3"></i><span class="text-success">0.47</span></td>
                                </tr>
                                <tr>
                                    <td>14.0k</td>
                                    <td>157.30</td>
                                    <td><i class="fas fa-arrow-up text-success mr-3"></i><span class="text-success">0.47</span></td>
                                </tr>
                                <tr>
                                    <td>14.0k</td>
                                    <td>157.30</td>
                                    <td><i class="fas fa-arrow-up text-success mr-3"></i><span class="text-success">0.47</span></td>
                                </tr>
                                <tr>
                                    <td>14.0k</td>
                                    <td>157.30</td>
                                    <td><i class="fas fa-arrow-up text-success mr-3"></i><span class="text-success">0.47</span></td>
                                </tr> -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    var api_url = "{{  config('api.url') }}";
    var icno = "{{ Auth::User()->icno }}";
    var datafin = "{{ $financemonth }}";

    datafin = datafin.replace(/&quot;/g, '\"');
    datafin = JSON.parse(datafin);

    var hargaemastable = $('#harga_emas').DataTable({
        "bLengthChange": false,
        "bFilter": false,
        language: {
            'paginate': {
                'previous': '<span class="fas fa-backward"></span>',
                'next': '<span class="fas fa-forward"></span>'
            }
        },
        "scrollX": true,
        "pageLength": 5

    });

    var sagaktiftable = $('#sag_aktif').DataTable({
        "bLengthChange": false,
        "bFilter": false,
        "pageLength": 5,
        "scrollX": true,
        language: {
            'paginate': {
                'previous': '<span class="fas fa-backward"></span>',
                'next': '<span class="fas fa-forward"></span>'
            }
        }
    });



    //
    // Charts
    //

    'use strict';

    var Charts = (function() {

        // Variable

        var $toggle = $('[data-toggle="chart"]');
        var mode = 'light'; //(themeMode) ? themeMode : 'light';
        var fonts = {
            base: 'Open Sans'
        }

        // Colors
        var colors = {
            gray: {
                100: '#f6f9fc',
                200: '#e9ecef',
                300: '#dee2e6',
                400: '#ced4da',
                500: '#adb5bd',
                600: '#8898aa',
                700: '#525f7f',
                800: '#32325d',
                900: '#212529'
            },
            theme: {
                'default': '#172b4d',
                'primary': '#5e72e4',
                'secondary': '#f4f5f7',
                'info': '#11cdef',
                'success': '#2dce89',
                'danger': '#f5365c',
                'warning': '#fb6340'
            },
            black: '#12263F',
            white: '#FFFFFF',
            transparent: 'transparent',
        };


        // Methods

        // Chart.js global options
        function chartOptions() {

            // Options
            var options = {
                defaults: {
                    global: {
                        responsive: true,
                        maintainAspectRatio: false,
                        defaultColor: (mode == 'dark') ? colors.gray[700] : colors.gray[600],
                        defaultFontColor: (mode == 'dark') ? colors.gray[700] : colors.gray[600],
                        defaultFontFamily: fonts.base,
                        defaultFontSize: 13,
                        layout: {
                            padding: 0
                        },
                        legend: {
                            display: false,
                            position: 'bottom',
                            labels: {
                                usePointStyle: true,
                                padding: 16
                            }
                        },
                        elements: {
                            point: {
                                radius: 0,
                                backgroundColor: colors.theme['primary']
                            },
                            line: {
                                tension: .4,
                                borderWidth: 4,
                                borderColor: colors.theme['primary'],
                                backgroundColor: colors.transparent,
                                borderCapStyle: 'rounded'
                            },
                            rectangle: {
                                backgroundColor: colors.theme['warning']
                            },
                            arc: {
                                backgroundColor: colors.theme['primary'],
                                borderColor: (mode == 'dark') ? colors.gray[800] : colors.white,
                                borderWidth: 4
                            }
                        },
                        tooltips: {
                            enabled: false,
                            mode: 'index',
                            intersect: false,
                            custom: function(model) {

                                // Get tooltip
                                var $tooltip = $('#chart-tooltip');

                                // Create tooltip on first render
                                if (!$tooltip.length) {
                                    $tooltip = $('<div id="chart-tooltip" class="popover bs-popover-top" role="tooltip"></div>');

                                    // Append to body
                                    $('body').append($tooltip);
                                }

                                // Hide if no tooltip
                                if (model.opacity === 0) {
                                    $tooltip.css('display', 'none');
                                    return;
                                }

                                function getBody(bodyItem) {
                                    return bodyItem.lines;
                                }

                                // Fill with content
                                if (model.body) {
                                    var titleLines = model.title || [];
                                    var bodyLines = model.body.map(getBody);
                                    var html = '';

                                    // Add arrow
                                    html += '<div class="arrow"></div>';

                                    // Add header
                                    titleLines.forEach(function(title) {
                                        html += '<h3 class="popover-header text-center">' + title + '</h3>';
                                    });

                                    // Add body
                                    bodyLines.forEach(function(body, i) {
                                        var colors = model.labelColors[i];
                                        var styles = 'background-color: ' + colors.backgroundColor;
                                        var indicator = '<span class="badge badge-dot"><i class="bg-primary"></i></span>';
                                        var align = (bodyLines.length > 1) ? 'justify-content-left' : 'justify-content-center';
                                        html += '<div class="popover-body d-flex align-items-center ' + align + '">' + indicator + body + '</div>';
                                    });

                                    $tooltip.html(html);
                                }

                                // Get tooltip position
                                var $canvas = $(this._chart.canvas);

                                var canvasWidth = $canvas.outerWidth();
                                var canvasHeight = $canvas.outerHeight();

                                var canvasTop = $canvas.offset().top;
                                var canvasLeft = $canvas.offset().left;

                                var tooltipWidth = $tooltip.outerWidth();
                                var tooltipHeight = $tooltip.outerHeight();

                                var top = canvasTop + model.caretY - tooltipHeight - 16;
                                var left = canvasLeft + model.caretX - tooltipWidth / 2;

                                // Display tooltip
                                $tooltip.css({
                                    'top': top + 'px',
                                    'left': left + 'px',
                                    'display': 'block',
                                    'z-index': '100'
                                });

                            },
                            callbacks: {
                                label: function(item, data) {
                                    var label = data.datasets[item.datasetIndex].label || '';
                                    var yLabel = item.yLabel;
                                    var content = '';

                                    if (data.datasets.length > 1) {
                                        content += '<span class="badge badge-primary mr-auto">' + label + '</span>';
                                    }

                                    content += '<span class="popover-body-value">' + yLabel + '</span>';
                                    return content;
                                }
                            }
                        }
                    },
                    doughnut: {
                        cutoutPercentage: 83,
                        tooltips: {
                            callbacks: {
                                title: function(item, data) {
                                    var title = data.labels[item[0].index];
                                    return title;
                                },
                                label: function(item, data) {
                                    var value = data.datasets[0].data[item.index];
                                    var content = '';

                                    content += '<span class="popover-body-value">' + value + '</span>';
                                    return content;
                                }
                            }
                        },
                        legendCallback: function(chart) {
                            var data = chart.data;
                            var content = '';

                            data.labels.forEach(function(label, index) {
                                var bgColor = data.datasets[0].backgroundColor[index];

                                content += '<span class="chart-legend-item">';
                                content += '<i class="chart-legend-indicator" style="background-color: ' + bgColor + '"></i>';
                                content += label;
                                content += '</span>';
                            });

                            return content;
                        }
                    }
                }
            }

            // yAxes
            Chart.scaleService.updateScaleDefaults('linear', {
                gridLines: {
                    borderDash: [2],
                    borderDashOffset: [2],
                    color: (mode == 'dark') ? colors.gray[900] : colors.gray[300],
                    drawBorder: false,
                    drawTicks: false,
                    lineWidth: 0,
                    zeroLineWidth: 0,
                    zeroLineColor: (mode == 'dark') ? colors.gray[900] : colors.gray[300],
                    zeroLineBorderDash: [2],
                    zeroLineBorderDashOffset: [2]
                },
                ticks: {
                    beginAtZero: true,
                    padding: 10,
                    callback: function(value) {
                        if (!(value % 10)) {
                            return value
                        }
                    }
                }
            });

            // xAxes
            Chart.scaleService.updateScaleDefaults('category', {
                gridLines: {
                    drawBorder: false,
                    drawOnChartArea: false,
                    drawTicks: false
                },
                ticks: {
                    padding: 20
                },
                maxBarThickness: 10
            });

            return options;

        }

        // Parse global options
        function parseOptions(parent, options) {
            for (var item in options) {
                if (typeof options[item] !== 'object') {
                    parent[item] = options[item];
                } else {
                    parseOptions(parent[item], options[item]);
                }
            }
        }

        // Push options
        function pushOptions(parent, options) {
            for (var item in options) {
                if (Array.isArray(options[item])) {
                    options[item].forEach(function(data) {
                        parent[item].push(data);
                    });
                } else {
                    pushOptions(parent[item], options[item]);
                }
            }
        }

        // Pop options
        function popOptions(parent, options) {
            for (var item in options) {
                if (Array.isArray(options[item])) {
                    options[item].forEach(function(data) {
                        parent[item].pop();
                    });
                } else {
                    popOptions(parent[item], options[item]);
                }
            }
        }

        // Toggle options
        function toggleOptions(elem) {
            var options = elem.data('add');
            var $target = $(elem.data('target'));
            var $chart = $target.data('chart');

            if (elem.is(':checked')) {

                // Add options
                pushOptions($chart, options);

                // Update chart
                $chart.update();
            } else {

                // Remove options
                popOptions($chart, options);

                // Update chart
                $chart.update();
            }
        }

        // Update options
        function updateOptions(elem) {
            var options = elem.data('update');
            var $target = $(elem.data('target'));
            var $chart = $target.data('chart');

            // Parse options
            parseOptions($chart, options);

            // Toggle ticks
            toggleTicks(elem, $chart);

            // Update chart
            $chart.update();
        }

        // Toggle ticks
        function toggleTicks(elem, $chart) {

            if (elem.data('prefix') !== undefined || elem.data('prefix') !== undefined) {
                var prefix = elem.data('prefix') ? elem.data('prefix') : '';
                var suffix = elem.data('suffix') ? elem.data('suffix') : '';

                // Update ticks
                $chart.options.scales.yAxes[0].ticks.callback = function(value) {
                    if (!(value % 10)) {
                        return prefix + value + suffix;
                    }
                }

                // Update tooltips
                $chart.options.tooltips.callbacks.label = function(item, data) {
                    var label = data.datasets[item.datasetIndex].label || '';
                    var yLabel = item.yLabel;
                    var content = '';

                    if (data.datasets.length > 1) {
                        content += '<span class="popover-body-label mr-auto">' + label + '</span>';
                    }

                    content += '<span class="popover-body-value">' + prefix + yLabel + suffix + '</span>';
                    return content;
                }

            }
        }


        // Events

        // Parse global options
        if (window.Chart) {
            parseOptions(Chart, chartOptions());
        }

        // Toggle options
        $toggle.on({
            'change': function() {
                var $this = $(this);

                if ($this.is('[data-add]')) {
                    toggleOptions($this);
                }
            },
            'click': function() {
                var $this = $(this);

                if ($this.is('[data-update]')) {
                    updateOptions($this);
                }
            }
        });


        // Return

        return {
            colors: colors,
            fonts: fonts,
            mode: mode
        };

    })();


    //
    // Orders chart
    //

    var OrdersChart = (function() {

        //
        // Variables
        //

        var $chart = $('#chart-orders');
        var $ordersSelect = $('[name="ordersSelect"]');


        //
        // Methods
        //

        // Init chart
        function initChart($chart) {

            var PembiayaanBulanan = new Array();
            var BayaranBulanan = new Array();
            var NamaBulan = new Array();


            $.each(datafin, function(index, finance) {
                PembiayaanBulanan.push(finance['pembiayaan']);
                BayaranBulanan.push(finance['bayaran']);
                NamaBulan.push(finance['namabulan']);
            });


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

            // Create chart
            var ordersChart = new Chart($chart, {
                type: 'bar',
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                callback: function(value) {
                                    if (!(value % 10)) {
                                        //return '$' + value + 'k'
                                        return formatter.format(value)
                                    }
                                }
                            }
                        }]
                    },
                    tooltips: {
                        callbacks: {
                            label: function(item, data) {
                                var label = data.datasets[item.datasetIndex].label || '';
                                var yLabel = item.yLabel;
                                var content = '';

                                if (data.datasets.length > 1) {
                                    content += '<span class="popover-body-label mr-auto">' + label + '</span>';
                                }

                                content += '<span class="popover-body-value">' + yLabel + '</span>';

                                return content;
                            }
                        }
                    }
                },
                data: {
                    labels: NamaBulan,
                    datasets: [{
                        label: 'Pembiayaan',
                        data: PembiayaanBulanan
                    }]
                }
            });

            // Save to jQuery object
            $chart.data('chart', ordersChart);
        }


        // Init chart
        if ($chart.length) {
            initChart($chart);
        }

    })();

    //
    // Charts
    //

    'use strict';

    //
    // Sales chart
    //

    var SalesChart = (function() {

        // Variables

        var $chart = $('#chart-sales');


        // Methods

        function init($chart) {

            var PembiayaanBulanan = new Array();
            var BayaranBulanan = new Array();
            var NamaBulan = new Array();

            $.each(datafin, function(index, finance) {
                PembiayaanBulanan.push(finance['pembiayaan']);
                BayaranBulanan.push(finance['bayaran']);
                NamaBulan.push(finance['namabulan']);
            });


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

            var salesChart = new Chart($chart, {
                type: 'bar',
                options: {
                    scales: {
                        yAxes: [{
                            gridLines: {
                                color: Charts.colors.gray[900],
                                zeroLineColor: Charts.colors.gray[900]
                            },
                            ticks: {
                                callback: function(value) {
                                    if (!(value % 10)) {
                                        return 'RM' + formatter.format(value);
                                    }
                                }
                            }
                        }]
                    },
                    tooltips: {
                        callbacks: {
                            label: function(item, data) {
                                var label = data.datasets[item.datasetIndex].label || '';
                                var yLabel = item.yLabel;
                                var content = '';

                                if (data.datasets.length > 1) {
                                    content += '<span class="popover-body-label mr-auto">' + label + '</span>';
                                }

                                content += '<span class="popover-body-value">RM' + formatter.format(yLabel) + '</span>';
                                return content;
                            }
                        }
                    }
                },
                data: {
                    labels: NamaBulan,
                    datasets: [{
                        label: 'Prestasi',
                        data: BayaranBulanan
                    }]
                }
            });

            // Save to jQuery object

            $chart.data('chart', salesChart);

        };


        // Events

        if ($chart.length) {
            init($chart);
        }

    })();
</script>

@endsection