@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">Bil 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 buttontekan">
                            <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">Bil Pembiayaan 6 Bulan Ke atas</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 buttontekan">
                            <i class="fas fa-chart-bar"></i>
                        </div>
                        <br>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php if($bilanganlelong > 0) { ?>
    <div class="col-xl-3 col-lg-6">
        <div class="card card-stats mb-4 mb-xl-0" style="background-color: crimson;">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <h6 class="card-title text-uppercase text-muted"><font color="white">Bil Pembiayaan<br>Akan Dilelong</font></h6>
                        <span class="h4 font-weight-bold mb-0"><font color="white">{{ $bilanganlelong }}</font></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 buttontekan">
                            <i class="fas fa-gavel" style="margin-left: 2px;"></i>
                        </div>
                        <br>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php } else { ?>
    <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">Bil 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 buttontekan">
                            <i class="fas fa-gavel" style="margin-left: 2px;"></i>
                        </div>
                        <br>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php } ?>
</div>


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

<div id="lelong" style="margin-bottom: 15px; display:none;" class="">
                <i class="text-danger" style="font-size:12px;">1. Sekiranya Lelongan Anda Dalam Tempoh Kontrak Lanjutan (Mencapai 12 Bulan), Urusan Penebusan Hanya Dibenarkan Di Kaunter Cawangan Selewatnya-lewatnya 3 Hari Sebelum Tarikh Lelong.</i><br>                
                <i class="text-danger" style="font-size:12px;">2. Transaksi Pembayaran Hanya Dibenarkan Selewat-lewatnya 3 Hari Sebelum Lelongan.</i><br>
                <i class="text-danger" style="font-size:12px;">(Contoh: Tarikh Lelong: 21-02-2023, Pembayaran/Penebusan Hanya dibenarkan Sehingga Tarikh 18-02-2023 Sahaja)</i>
            </div>
<div id="gadai" style="margin-bottom: 15px; display:none;">
                <i class="text-danger" style="font-size:12px;">1. Sila Buat Penebusan Di Kaunter Jika Tempoh Telah Mencapai 12 Bulan!</i><br>
                <!-- <i class="text-danger" style="font-size:12px;">2. Maksima bagi transaksi pembayaran ialah 3 SAG sahaja pada satu masa.</i><br> -->
                <i class="text-danger" style="font-size:12px;">2. Sila 'Tick' Kotak No Rujukan Yang Hendak Dibayar.</i>
            </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 id="open" 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 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> -->

            @if (\Session::has('error'))
                <script>
                    Swal.fire(
                        // "Melebihi tempoh 12 Bulan.",
                        "Akan/Telah Tamat Kontrak 12 Bulan.",
                        "{{ \Session::get('error') }}",
                        'warning'
                    )
                </script>
            @endif

            @if (\Session::has('errorsagonline'))
                <script>
                    Swal.fire(
                        // "Melebihi tempoh 12 Bulan.",
                        "Pembayaran Terdahulu Dalam Proses.",
                        "{{ \Session::get('errorsagonline') }}",
                        'warning'
                    )
                </script>
            @endif
            <div class="table-responsive table-bordered table-hover">
                <table class="table align-items-center table-flush border" id="main-table" style="text-align: center; width: 100%">
                    <thead class="thead-light bg-dark text-white text-center">
                        <tr>
                            <th>#</th>
                            <th>No Rujukan</th>
                            <th class="hide-xs">Tempoh</th>
                            <th>T Akhir</th>
                            <th>Keuntungan</th>                  
                            <th class="hide-xs">Cawangan</th>
                        </tr>
                    </thead>
                    <tbody class="list">
                        @foreach($pembiayaanAktif as $pembiayaan)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $pembiayaan->norujukan }}</td>
                            <td class="hide-xs">{{ $pembiayaan->tempoh }}</td>
                            <td>{{ $pembiayaan->tarikh_akhir }}</td>
                            <td>{{ $pembiayaan->keuntungan_formatted }}</td>
                            <td class="hide-xs">{{ $pembiayaan->cawangan_name }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <i class="hide-xs text-success" style="font-size:12px;">"Swipe" ke kiri</i>
            </div>
            
            <!-- wide screen -->
            <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>No Rujukan</th>
                            <th class="hide-xs">Tempoh</th>
                            <th>T Akhir</th>
                            <th>Keuntungan</th>                  
                            <th class="hide-xs">Cawangan</th>
                            {{-- <th>Status</th> --}}
                        </tr>
                    </thead>
                    <tbody class="list">
                        <tr>
                            <td>1</td>
                            <td>1</td>
                            <td class="hide-xs">1</td>
                            <td>1</td>
                            <td>1</td>
                            <td class="hide-xs">1</td>
                            {{-- <td>1</td> --}}

                        </tr>
                    </tbody>
                </table>
                <i class="hide-xs text-success" style="font-size:12px;">"Swipe" ke kiri</i>
            </div>
            <!-- end of wide screen-->
            <!--//if small screen -->
            <!-- <div class="show-xs table-responsive table-bordered table-hover">
                <table class="table" id="selepas_tawarruq" style="text-align: center">
                    <thead class="thead-light bg-dark text-white text-center">
                        <tr>
                            <div>#</div>
                            <div>No Rujukan</div>
                            <div>Tempoh</div>
                            <div>T Akhir</div>
                            <div>Keuntungan</div>                  
                            
                        </tr>
                    </thead>
                    <tbody class="list">
                        <tr>
                            <div>1</div>
                            <div>1</div>
                            <div>1</div>
                            <div>1</div>
                            <div>1</div>
                            

                        </tr>
                    </tbody>
                </table>
                
            </div> -->
            <!-- end for small screen -->
            <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 body = document.getElementsByTagName("HTML")[0];
    var width = body.offsetWidth;
    
    if (window.addEventListener) {  // all browsers except IE before version 9
      window.addEventListener ("resize", onResizeEvent, true);
    } else {
      if (window.attachEvent) {   // IE before version 9
        window.attachEvent("onresize", onResizeEvent);
      }
    }
    
    function onResizeEvent() {
    //   bodyElement = document.getElementsByTagName("HTML")[0];
    //   newWidth = bodyElement.offsetWidth;
    //   if(newWidth != width){
    //     width = newWidth;
    //     console.log(width);
    // console.log("t3");
        var t1 = document.getElementsByClassName('hide-xs');
        var style = getComputedStyle(t1[0]);
        var visibility = style.getPropertyValue('visibility');
        // document.getElementsByClassName('hide-xs')[5];
        if(visibility != 'visible')
        {
            selepastawarruqtable.column(2).visible(false);
            selepastawarruqtable.column(5).visible(false);

        } else {
            selepastawarruqtable.column(2).visible(true);
            selepastawarruqtable.column(5).visible(true);
        }
        //console.log(visibility);
    //   }
    }


    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');
        document.getElementById('gadai').style.display = "block";
        document.getElementById('lelong').style.display = "none";
        
        $('#totalsag').text(0);

        var empat = selepastawarruqtable.columns(3).header();
        var tiga = selepastawarruqtable.columns(2).header();
        // var lima = selepastawarruqtable.columns(4).header();

        //$(empat).html('JBG');
         $(tiga).html('Tempoh');
          $(empat).html('T Akhir');
        //   $(lima).html('T Lanjut');

        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/check/serah/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() <= 3)
                       //  if(tarikhblock.toFixed() <= 2)
                       //  {
                         //    lelongblock = 'disabled';
                       //  }
                    // }

		if(response == 1){
			lelongblock = 'disabled';
		}
                 
                }
            });

            var had_paid = false;

            $.ajax({
                url: api_url + '/portal/searchsagonline/',
                method: 'get',
                async:false,
                dataType: "json",
                data: {
                    norujukan: ps.norujukan
                },
                success: function(response) {
                    had_paid = response;
                }   
            });

            var should_block = '';

            if(had_paid == true || lelongblock == 'disabled' || ps.tagbaru == 1)
            // if(had_paid == true || lelongblock == 'disabled')
            {
                should_block = '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}" ${should_block} />`,
                `<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-tempoh="${ps.tempoh}" data-namacaw="${namacawangan}" data-target="#marhunModal" style="color:#3490dc"><span class="name mb-0 text-sm">${ps.norujukan}</span></a>`,
                ps.tempoh,
                t_matang,
                formatter.format(ps.keuntungan),
                namacawangan,
                // statementlelong
            ]).draw();

            counter = counter + 1;
        });

        onResizeEvent();
        
    }

    function filterpembiayaan6bulan(){

        $('#loadertable').removeClass('d-none');
        $('#formtable').addClass('d-none');
        document.getElementById('gadai').style.display = "block";
        document.getElementById('lelong').style.display = "none";

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

        var empat = selepastawarruqtable.columns(3).header();
        var tiga = selepastawarruqtable.columns(2).header();
        //$(empat).html('JBG');
        $(tiga).html('Tempoh');
          $(empat).html('T Akhir');
        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() <= 3)
                        if(tarikhblock.toFixed() <= 2)
                        {
                            lelongblock = 'disabled';
                        }
                    }
                
                }
            });

            var had_paid = false;

            $.ajax({
                url: api_url + '/portal/searchsagonline/',
                method: 'get',
                async:false,
                dataType: "json",
                data: {
                    norujukan: ps.norujukan
                },
                success: function(response) {
                    had_paid = response;
                }   
            });

		var today = new Date();
            var tarikh_12bulan = DateDiff(new Date(ps.t_matang1),today);

            var lelong_12bulanblock = false;
            if(tarikh_12bulan.toFixed() <= 30)
            {
                lelong_12bulanblock = true;
            }

            var should_block = '';

            if(had_paid == true || lelongblock == 'disabled' || lelong_12bulanblock == true)
            {
                should_block = '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");

            } else {

            }
                
            

            // 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}"  ${should_block} />`,
                `<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-tempoh="${ps.tempoh}" data-namacaw="${namacawangan}" data-target="#marhunModal" style="color:#3490dc"><span class="name mb-0 text-sm">${ps.norujukan}</span></a>`,
                ps.tempoh,
                t_matang,
                formatter.format(ps.keuntungan),
                namacawangan,
                // statementlelong
            ]).draw();

            counter = counter + 1;
        });

        onResizeEvent();
    }

    function lelongan(e){
        $('#loadertable').removeClass('d-none');
        $('#formtable').addClass('d-none');
        document.getElementById('lelong').style.display = "block";
        document.getElementById('gadai').style.display = "none";
        $('#totalsag').text(0);

        var empat = selepastawarruqtable.columns(3).header();
         var tiga = selepastawarruqtable.columns(2).header();
         $(empat).html('Cawangan');
          $(tiga).html('T Lelong');
        // selepastawarruqtable.column( 3 ).visible( true );

        //selepastawarruqtable.column( 2 ).visible( false );
        selepastawarruqtable.column( 4 ).visible( false );
         selepastawarruqtable.column( 5 ).visible( false );
         //console.log('hi');

        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() <= 3)
            if(tarikhblock.toFixed() <= 2)
            {
                lelongblock = 'disabled';
            }

            var had_paid = false;

            $.ajax({
                url: api_url + '/portal/searchsagonline/',
                method: 'get',
                async:false,
                dataType: "json",
                data: {
                    norujukan: lelong.norujukan
                },
                success: function(response) {
                    had_paid = response;
                }   
            });

            var tarikh_12bulan = DateDiff(new Date(lelong.t_matang1),today);

            var lelong_12bulanblock = false;
            if(tarikh_12bulan.toFixed() <= 30)
            {
                lelong_12bulanblock = true;
            }

            var should_block = '';

            if(had_paid == true || lelongblock == 'disabled' || lelong_12bulanblock == true)
            {
                should_block = '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}" ${should_block} />`,
                `<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-namacaw="${namacawangan}" data-target="#marhunModal" style="color:#3490dc"><span class="name mb-0 text-sm">${lelong.norujukan}</span></a>`,
                tarikhlelong  = new Date(lelong.t_lelong).toLocaleDateString("en-GB"),
                namacawangan,                  
                '',
                '',
                ''
                ]).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');
        let tempoh = $(e).data('tempoh');
        let namacaw = $(e).data('namacaw');

        $('#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));
        $('#norujukan').text(norujukan);
        $('#tempoh').text(tempoh);
        $('#namacaw').text(namacaw);

        $.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);
    } 

    $(".buttontekan").click(function() {
        $('html,body').animate({
            scrollTop: $("#formtable").offset().top},
            'slow');
            
    });

    // $('.divaktif').click(function() {
    //     $('#gadai').toggle('slow', function() {
    //     // Animation complete.q
    //     });
    // });

    // $('.divlelong').click(function() {
    //     $('#lelong').toggle('slow', function() {
    //     // Animation complete.
    //     });
    // });


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

@endsection