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

<style>
    .loader {
        position: fixed;
        top: 45%;
        right: 50%;
        width: 70px;
        height: 70px;
        border-top-color: white;
        border-right-color: white;
        border-left-color: transparent;
        border-bottom-color: transparent;
        border-radius: 50%;
        box-sizing: border-box;
        z-index: 10000 !important;
    }

    .loadertable {
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #3498db;
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite; /* Safari */
        animation: spin 2s linear infinite;
    }

    /* Safari */
    @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

<title>Home | Portal Pelanggan</title>

@include('modal.marhun')

@error('chkboxsag')
<script>
    $.notify({
        icon: 'fas fa-exclamation-triangle fa-2x',
        newest_on_top: true,
        message: "<strong style='font-size:15px;'>Sila pilih salah satu checkbox di atas terlebih dahulu!</strong>"
    }, {
        type: 'danger',
        allow_dismiss: false,
        placement: {
            align: 'center',
            from: 'bottom'
        },
        animate: {
            enter: 'animate__animated animate__bounce',

            exit: 'animate__animated animate__bounceOutDown'
        }
    });
</script>
@enderror

<div class="row mt-n9 top-0">
    <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"> Jum. Pembiayaan Semasa</h6>
                        <span class="h5 font-weight-bold mb-0">RM{{ number_format($total,2) }}</span>
                    </div>
                    <div class="col-auto text-center">
                        <div class="icon icon-shape bg-warning text-white rounded-circle shadow text-center">
                            <i class="fas fa-chart-pie "></i>
                        </div>
                        <br>
                    </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<br>Semasa</h6>
                        <span class="h4 font-weight-bold mb-0">{{ $bilangan }}</span>
                    </div>
                    <div class="col-auto text-center">
                        <div onclick="filterpembiayaanaktif()" class="cursor-pointer icon icon-shape bg-success text-white rounded-circle shadow text-center">
                            <i class="fas fas fa-users text-center"></i>
                        </div>
                        <br>
                    </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">{{ $sixmonths }}</span>
                    </div>
                    <div class="col-auto text-center">
                        <div onclick="filterpembiayaan6bulan()" class="cursor-pointer icon icon-shape bg-danger text-white rounded-circle shadow text-center">
                            <i class="fas fa-chart-bar"></i>
                        </div>
                        <br>
                    </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<br>Akan Dilelong</h6>
                        <span class="h4 font-weight-bold mb-0">{{ $bilanganlelong }}</span>
                    </div>
                    <div class="col-auto text-center">
                        <div onclick="lelongan()" class="cursor-pointer icon icon-shape bg-info text-white rounded-circle shadow text-center">
                            <i class="fas fa-gavel" style="margin-left: 2px;"></i>
                        </div>
                        <br>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="loadertable" class="loadertable mt-4"></div>

<form method="post" id="formtable" class="d-none" action="{{ route('payment.action') }}" onsubmit="return validateform()">
    @csrf
    <div class="card shadow">
        <div class="card-body">

            <div style="margin-bottom: 15px;">
                <i class="text-danger" style="font-size:12px;">Maksima 3 No Rujukan Sahaja Dibenarkan Dalam Satu Transaksi Pembayaran.</i><br>
                <i class="text-danger" style="font-size:12px;">Sila 'Tick' Pada Kotak Yang Hendak Dibayar.</i>
            </div>

            <div class="table-responsive table-bordered table-hover">
                <table class="table align-items-center table-flush border" id="selepas_tawarruq" style="text-align: center; width: 100%">
                    <thead class="thead-light bg-dark text-white text-center">
                        <tr>
                            <th>#</th>
                            <th>Cawangan</th>
                            <th>No Rujukan</th>
                            <th>JBG</th>
                            <th>Keuntungan</th>
                            <th>T Lanjut</th>
                            {{-- <th>Status</th> --}}
                        </tr>
                    </thead>
                    <tbody class="list">
                        <tr>
                            <td>1</td>
                            <td>1</td>
                            <td>1</td>
                            <td>1</td>
                            <td>1</td>
                            <td>1</td>
                            {{-- <td>1</td> --}}

                        </tr>
                    </tbody>
                </table>
            </div>
            <br>
        </div>
    </div>

    <div class="d-flex justify-content-end mt-4">
        <button type="submit" class="btn btn-primary" onclick="loadingbtn();"><span class="mr-3">Seterusnya</span> <span class="badge alert-warning text-dark font-weight-bold" style="font-size:12px;" id="totalsag">0</span></button>
    </div>

</form>


<script>
    var api_url = "{{  $api_url }}";

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

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 historybayarandatatable = $('#tablehistorybayaran').DataTable({
        "ordering": false
    });

    var selepastawarruqtable = $('#selepas_tawarruq').DataTable({
        "bFilter": true,
        language: {
            'paginate': {
                'previous': '<span class="fas fa-backward fa-1.5x"></span>',
                'next': '<span class="fas fa-forward"></span>'
            }
        },
        "pageLength": 10,
        "scrollX": true
    });

    $( document ).ready(function() {
        filterpembiayaanaktif();
    });

    function linktargetfunc(e){
        var arraymarhun = $(e).data('marhun');
        var norujukan = $(e).data('norujukan');
        var kodcaw = $(e).data('kodcaw');
        var hargajualan = $(e).data('hargajualan');
        var pinjaman = $(e).data('pinjaman');
        var bakipjm = $(e).data('bakipjm');
        var lelong = $(e).data('lelong');
        var pjmnum = $(e).data('pjmnum');
        
        bayaranfunc(e,api_url);

        $('#pemb').text('RM ' + pjmnum);
        $('#bpemb').text('RM ' + bakipjm);

        if(lelong === 1)
        {
            $('#statuslelong').text('Akan Dilelong');
        }else{
            $('#statuslelong').text('-');
        }

        $('#norujukan_modal').val(norujukan);
        $('#pinjaman_modal').val(pinjaman);
        $('#tablemarhun').empty();
        var bil_count = 0;
        $.each(arraymarhun, function(index, marhun) {
            var marhun_name;
            $.ajax({
                method: 'GET',
                url: api_url + '/api/jemas/nama_marhun',
                dataType: 'json',
                data: {
                    marhun: marhun['marhun']
                },
                success: function(marhun_ajax) {
                    bil_count++;
                    $("#tablemarhun").append("<tr><td>" + bil_count + "</td><td>" + marhun_ajax['descpt'] + "</td><td>" + marhun['berat'] + "</td><td>" + marhun['karat'] + "</td><td>RM " + formatter.format(marhun['n_marhun']) + "</td><td>" + marhun['nota'] + "</td></tr>");
                }
            });
        });

    }

    function tickfunc(e){
        var count = parseInt($('#totalsag').text());
        var fasa = $(e).data('fasa');
        if (typeof fasa !== 'undefined' || fasa !== null) {
            if(fasa == 2){
                if ($(e).is(':checked')){
                    $.notify({
                        newest_on_top: true,
                        message: "<strong style='font-size:15px;text-align:center;margin-left:100px; color: #ffff'>Norujukan ini dalam fasa ke 2!</strong>"
                    }, {
                        type: 'danger',
                        allow_dismiss: false,
                        placement: {
                            align: 'center',
                            from: 'bottom'
                        },
                        animate: {
                            enter: 'animate__animated animate__bounce',

                            exit: 'animate__animated animate__bounceOutDown'
                        }
                    });
                    $(e).prop('checked', false);
                }
                return;
            }
        }

        if ($(e).is(':checked')) {
            var total = count + 1;

            if (total <= 3) {
                $('#totalsag').text(total);
            } else {
                $(e).prop('checked', false);
            }
        } else {
            var total = count - 1;
            $('#totalsag').text(total);
        }

        return false;
    }

    function DateDiff(date1, date2) {
        var datediff = date1.getTime() - date2.getTime(); //store the getTime diff - or +
        return (datediff / (24*60*60*1000)); //Convert values to -/+ days and return value      
    }

    async function filterpembiayaanaktif(){

        $('#loadertable').removeClass('d-none');
        $('#formtable').addClass('d-none');

        $('#totalsag').text(0);

        var empat = selepastawarruqtable.columns(3).header();
        $(empat).html('JBG');
        selepastawarruqtable.column( 4 ).visible( true );
        selepastawarruqtable.column( 5 ).visible( true );
        // selepastawarruqtable.column( 6 ).visible( true );

        let datapembaktif = [];
        $.ajax({
            url: '{{ route("info.pembaktif") }}',
            method: 'get',
            async: false, 
            dataType: "json",
            success: function(data) {
                for(i in data){
                    datapembaktif.push(data[i]);
                }

                $('#loadertable').addClass('d-none');
                $('#formtable').removeClass('d-none');
            }
        });




        selepastawarruqtable.clear().draw();
        var counter = 1;
        $.each(datapembaktif,function(index,ps){

            let namacawangan = '';
            $.ajax({
                url: api_url + '/api/cawangan/detail/' + ps.kodcaw,
                method: 'get',
                async:false,
                dataType: "json",
                success: function(data) {
                    namacawangan = data[0].namacaw;
                    namacawangan = namacawangan.toLowerCase().substring(8).replace(/\b[a-z]/g, function(value) {
                                        return value.toUpperCase();
                                    });
                }
            });

            let marhun = [];
            $.ajax({
                url: api_url + '/api/marhun/' + ps.norujukan,
                method: 'get',
                async:false,
                dataType: "json",
                success: function(response) {
                    // console.log(response);
                    for(i in response){
                        marhun.push(response[i]);
                    }
                }
            });

            var lelongblock = '';

            $.ajax({
                url: api_url + '/api/search/lelong',
                method: 'get',
                async:false,
                dataType: "json",
                data: {
                    kodcaw: ps.kodcaw,
                    norujukan: ps.norujukan
                },
                success: function(response) {
                    if(Object.keys(response).length != 0)
                    {
                        var today = new Date();
                        var tarikhlelong = new Date(response.t_lelong);
                        tarikhblock = DateDiff(tarikhlelong,today);
                        if(tarikhblock.toFixed() <= 2)
                        {
                            lelongblock = 'disabled';
                        }
                    }
                 
                }
            });

            let marh = JSON.stringify(marhun[0]);
            
            var t_matang  = new Date(ps.t_matang);
            
            var t_matang = '-';
            if(ps.lelong_tawarruq == 0)
                t_matang  = new Date(ps.t_matang1).toLocaleDateString("en-GB");

            // var statementlelong = '';
            // if(ps.taglel == 0)
            // {
            //     statementlelong = '-';
            // }else{
            //     statementlelong = 'Akan Dilelong';
            // }

            selepastawarruqtable.row.add([
                `<input type="checkbox" onclick="tickfunc(this)" name="chkboxsag[]" value="${ps.norujukan}" id="sag-${counter}" data-norujukan="${ps.norujukan}" ${lelongblock} />`,
                namacawangan,
                `<a href="#" onclick="linktargetfunc(this)" class="linktarget" data-toggle="modal" data-nm="${ps.nilaimarhun}" data-berat="${ps.berat}" data-upah12="${ps.bakiupah}" data-pjmnum="${ps.pinjaman}" data-bakipjm="${ps.bakipjm}" data-lelong="${ps.taglel}" data-marhun='${marh}' data-pinjaman="${ps.pinjaman}" data-norujukan="${ps.norujukan}" data-hargajualan="${ps.hargajualan}" data-kodcaw="${ps.kodcaw}" data-target="#marhunModal"><span class="name mb-0 text-sm">${ps.norujukan}</span></a>`,
                ps.tempoh,
                formatter.format(ps.keuntungan),
                t_matang,
                // statementlelong
            ]).draw();

            counter = counter + 1;
        });
    }

    function filterpembiayaan6bulan(){

        $('#loadertable').removeClass('d-none');
        $('#formtable').addClass('d-none');

        $('#totalsag').text(0);

        var empat = selepastawarruqtable.columns(3).header();
        $(empat).html('JBG');
        selepastawarruqtable.column( 4 ).visible( true );
        selepastawarruqtable.column( 5 ).visible( true );
        // selepastawarruqtable.column( 6 ).visible( true );

        let datapemb6 = [];
        $.ajax({
            url: '{{ route("info.pemb6bulan") }}',
            method: 'get',
            async: false, 
            dataType: "json",
            success: function(data) {
                for(i in data){
                    datapemb6.push(data[i]);
                }

                    $('#loadertable').addClass('d-none');
                    $('#formtable').removeClass('d-none');
                
               
            }
        });


        selepastawarruqtable.clear().draw();
        var counter = 1;
        $.each(datapemb6,function(index,ps){

            let namacawangan = '';
            $.ajax({
                url: api_url + '/api/cawangan/detail/' + ps.kodcaw,
                method: 'get',
                async:false,
                dataType: "json",
                success: function(data) {
                    namacawangan = data[0].namacaw;
                    namacawangan = namacawangan.toLowerCase().substring(8).replace(/\b[a-z]/g, function(value) {
                                        return value.toUpperCase();
                                    });
                }
            });

            let marhun = [];
            $.ajax({
                url: api_url + '/api/marhun/' + ps.norujukan,
                method: 'get',
                async:false,
                dataType: "json",
                success: function(response) {
                    // console.log(response);
                    for(i in response){
                        marhun.push(response[i]);
                    }
                }
            });

            var lelongblock = '';

            $.ajax({
                url: api_url + '/api/search/lelong',
                method: 'get',
                async:false,
                dataType: "json",
                data: {
                    kodcaw: ps.kodcaw,
                    norujukan: ps.norujukan
                },
                success: function(response) {
                    if(Object.keys(response).length != 0)
                    {
                        var today = new Date();
                        var tarikhlelong = new Date(response.t_lelong);
                        tarikhblock = DateDiff(tarikhlelong,today);
                        if(tarikhblock.toFixed() <= 2)
                        {
                            lelongblock = 'disabled';
                        }
                    }
                
                }
            });

            
            let marh = JSON.stringify(marhun[0]);
            
            var t_matang = '-';
            if(ps.lelong_tawarruq == 0)
                t_matang  = new Date(ps.t_matang1).toLocaleDateString("en-GB");
            

            // var statementlelong = '';
            // if(ps.taglel == 0)
            // {
            //     statementlelong = '-';
            // }else{
            //     statementlelong = 'Akan Dilelong';
            // }

            selepastawarruqtable.row.add([
                `<input type="checkbox" onclick="tickfunc(this)" name="chkboxsag[]" value="${ps.norujukan}" id="sag-${counter}" data-norujukan="${ps.norujukan}"  ${lelongblock} />`,
                namacawangan,
                `<a href="#" onclick="linktargetfunc(this)" class="linktarget" data-toggle="modal" data-nm="${ps.nilaimarhun}" data-berat="${ps.berat}" data-upah12="${ps.bakiupah}" data-pjmnum="${ps.pinjaman}" data-bakipjm="${ps.bakipjm}" data-lelong="${ps.taglel}" data-marhun='${marh}' data-pinjaman="${ps.pinjaman}" data-norujukan="${ps.norujukan}" data-hargajualan="${ps.hargajualan}" data-kodcaw="${ps.kodcaw}" data-target="#marhunModal"><span class="name mb-0 text-sm">${ps.norujukan}</span></a>`,
                ps.tempoh,
                formatter.format(ps.keuntungan),
                t_matang
                // statementlelong
            ]).draw();

            counter = counter + 1;
        });
    }

    function lelongan(e){

        $('#loadertable').removeClass('d-none');
        $('#formtable').addClass('d-none');
        
        $('#totalsag').text(0);

        var empat = selepastawarruqtable.columns(3).header();

        $(empat).html('T. Lelong');
        selepastawarruqtable.column( 4 ).visible( false );
        selepastawarruqtable.column( 5 ).visible( false );
        // selepastawarruqtable.column( 6 ).visible( false );

        let datalelong = [];
        $.ajax({
            url: '{{ route("info.pemblelongan") }}',
            method: 'get',
            async: false, 
            dataType: "json",
            success: function(data) {
                for(i in data){
                    datalelong.push(data[i]);
                }

                    $('#loadertable').addClass('d-none');
                    $('#formtable').removeClass('d-none');
            }
        });

        selepastawarruqtable.clear().draw();
        var counter = 1;
        $.each(datalelong,function(index,lelong){

            let namacawangan = '';
            $.ajax({
                url: api_url + '/api/cawangan/detail/' + lelong.kodcaw,
                method: 'get',
                async:false,
                dataType: "json",
                success: function(data) {
                    namacawangan = data[0].namacaw;
                    namacawangan = namacawangan.toLowerCase().substring(8).replace(/\b[a-z]/g, function(value) {
                                        return value.toUpperCase();
                                    });
                }
            });

            let marhun = [];
            $.ajax({
                url: api_url + '/api/marhun/' + lelong.norujukan,
                method: 'get',
                async:false,
                dataType: "json",
                success: function(response) {
                    // console.log(response);
                    for(i in response){
                        marhun.push(response[i]);
                    }
                }
            });

            var lelongblock = '';

            var today = new Date();
            var tarikhlelong = new Date(lelong.t_lelong);
            tarikhblock = DateDiff(tarikhlelong,today);
            if(tarikhblock.toFixed() <= 2)
            {
                lelongblock = 'disabled';
            }

            let marh = JSON.stringify(marhun[0]);

            selepastawarruqtable.row.add([
                `<input type="checkbox" onclick="tickfunc(this)" name="chkboxsag[]" value="${lelong.norujukan}" data-fasa="${lelong.fasa}" id="sag-${counter}" data-norujukan="${lelong.norujukan}" ${lelongblock} />`,
                namacawangan,   
                // lelong.norujukan,
                `<a href="#" onclick="linktargetfunc(this)" class="linktarget" data-toggle="modal" data-nm="${lelong.nilaimarhun}" data-berat="${lelong.berat}" data-upah12="${lelong.bakiupah}" data-pjmnum="${lelong.pinjaman}" data-bakipjm="${lelong.bakipjm}" data-lelong="${lelong.taglel}" data-marhun='${marh}' data-pinjaman="${lelong.pinjaman}" data-norujukan="${lelong.norujukan}" data-hargajualan="${lelong.hargajualan}" data-kodcaw="${lelong.kodcaw}" data-target="#marhunModal"><span class="name mb-0 text-sm">${lelong.norujukan}</span></a>`,
                tarikhlelong  = new Date(lelong.t_lelong).toLocaleDateString("en-GB"),
                '',
                '',
                ''
                ]).draw();

            counter = counter + 1;
            });
    }

   

    function bayaranfunc(e,api){
        
        let norujukan = $(e).data('norujukan');

        let pinjaman = $(e).data('pinjaman');
        let upah12 = $(e).data('upah12');
        let bakipjm = $(e).data('bakipjm');
        let berat = $(e).data('berat');
        let nm = $(e).data('nm');

        $('#pembiayaan').text('RM ' + formatter.format(pinjaman));
        $('#bpembiayaan').text('RM ' + formatter.format(bakipjm));
        $('#nm').text('RM ' + formatter.format(nm));
        $('#berat').text(berat + 'g');
        $('#koskeun').text('RM ' + formatter.format(upah12));

        $.ajax({
            method: 'get',
            url: api + '/api/transaction/' + norujukan,
            success: function(data){
                historybayarantable(data);
            }
        });
    }

    function historybayarantable(data){
        var counter = 1;
        
        historybayarandatatable.clear().draw();
        $.each(data,function(index,bayaran){

            var urlroute = '{{ route("resit.ansuran", ":id") }}';
            urlroute = urlroute.replace(':id', bayaran['id']);

            var date = new Date(bayaran['created_at']).toLocaleDateString("en-GB");
            // tarikhlelong  = new Date(lelong.t_lelong).toLocaleDateString("en-GB")
            historybayarandatatable.row.add([
                    counter,
                    date, 
                    // '<a target="_blank" href='+ urlroute + '>'+date.toLocaleDateString()+'</a>',
                    "RM " + formatter.format(bayaran['duit_masuk']),
                    "<a target='_blank' href=" + urlroute + " class='btn btn-info btn-sm'><span class='fas fa-print'></span></a>",
                ]).draw();
                counter = counter + 1;
        });
    }


    function validateform() {
        return true;
    }


    if (document.addEventListener) {
        window.addEventListener('pageshow', function(event) {
                if (event.persisted || window.performance && window.performance.navigation.type == 2) {
                    $('#logout-form').submit();
                    // location.reload();
                }
            },
            false);
    }

</script>
<!-- <script>
    $(function() {
        setTimeout(() => {
            $(".loader").fadeOut(1000);
        }, 500)
    })
</script> -->

@endsection