erahn-click/resources/views/includes/bayaran/pembayaransag.blade.php

@extends('layouts.indexfifth')

@section('content')

<style>
    .not-allowed {
        cursor: not-allowed;
    }

    .card-header {
        padding: 1rem !important;
    }
</style>

<title>Bayar SAG | Portal Pelanggan</title>
<div class="container">

    <form name="formpayment" method="post" action="{{ route('payment.engine') }}">
        @csrf
        <div class="row">
            <div class="row">
                <div class="d-flex">
                    <p class="not-allowed text-sm">Home /Pembayaran /</p>
                    <p class="text-sm text-dark">Bayar SAG Pilihan</p>
                </div>
            </div>

        </div>

        <div class="row justify-content-center">
            <div class="col-xl-12 mb-5">
                <div class="card shadow">
                    <div class="card-header mb-4 bg-dark border-0">
                        <div class="row align-items-center">
                            <div class="d-flex">
                                <h4 class="text-white" style="margin-right: 1%;">Senarai Surat Gadaian</h4>
                                <i class="fas fa-clipboard-list fa-2x text-white"></i>
                            </div>

                        </div>
                    </div>



                    <div class="tab-content" id="myTabContent">

                        <div class="tab-pane fade show active" id="tabs-icons-text-2" role="tabpanel" aria-labelledby="tabs-icons-text-2-tab">

                            <div class="table-responsive text-center">
                                <table class="table align-items-center" id="selepas_tawarruq" style="width: 100%;">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>No</th>
                                            <th>No Rujukan</th>
                                            <th>Pembiayaan Asal</th>
                                            <th>Baki Pembiayaan</th>
                                            <th>Tempoh</th>
                                            <th>Keuntungan</th>
                                            <th>Bayaran</th>
                                        </tr>
                                    </thead>
                                    @php $counter = 1;$jenisbayaran = 'tawarruq'; @endphp
                                    @foreach($arraybayar as $index=>$bayar)
                                    @if($bayar['hargajualan'] != '')
                                    <tbody class="list">
                                        <tr>
                                            <td>
                                                {{ $counter }}
                                            </td>
                                            <td>
                                                {{ $bayar['norujukan'] }}
                                            </td>
                                            <td>
                                                {{ number_format($bayar['pinjaman'],2) }}
                                            </td>
                                            <td>
                                                {{ number_format($bayar['bakipjm'],2) }}
                                            </td>
                                            <td>
                                                {{ $bayar['tempoh'] }}
                                            </td>
                                            <td>
                                                @php
                                                $upahtawarruq = Http::withOptions(['verify' => config('app.api_verify')])->get(config('api.url') . '/api/upahtawarruq/'. $bayar['kodcaw'] . '/' . $bayar['norujukan'])->json();
                                                @endphp
                                                {{ $upahtawarruq }}
                                            </td>
                                            <td>

                                                <select name="sltbayaran" value="{{ old('sltbayaran') ? old('sltbayaran') : '' }}" class="form-control mb-2" data-upah="{{ $upahtawarruq }}" data-jenis="tawarruq" style="text-align: center; border: revert;">
                                                    <option selected disabled>Pilih Bayaran</option>
                                                    <option value="fixed">Amaun Semasa</option>
                                                    <option value="otheramount">Amaun Lain</option>
                                                </select>

                                                <input type="text" value="{{ old('txtbayarantawarruq') ? old('txtbayarantawarruq') : '' }}" data-bakipjm="{{ $bayar['bakipjm'] }}" data-taglel="{{ $bayar['taglel'] }}" data-upah="{{ $upahtawarruq }}" data-nm="{{ $bayar['nilaimarhun'] }}" data-jenis="tawarruq" name="txtbayarantawarruq" readonly class="form-control txtbayaran" style="text-align: center; border: outset;" />
                                                <input type="hidden" name="txtbayaranhidden[]" class="bayaran" style="text-align: center;" />
                                                <input type="hidden" name="txtjenisbayaran[]" value="{{ $jenisbayaran }}" style="text-align: center;" />
                                                <input type="hidden" name="txtnorujukanhidden[]" value="{{ $bayar['norujukan'] }}" style="text-align: center;" />
                                                <input type="hidden" name="txtkodcawhidden[]" value="{{ $bayar['kodcaw'] }}" style="text-align: center;" />
                                            </td>
                                        </tr>
                                    </tbody>
                                    @php $counter++; @endphp
                                    @endif
                                    @endforeach
                                </table>
                            </div>


                        </div>

                    </div>
                </div>
            </div>
           
            <div class="col-md-10 col-sm-12">
                <div class="card shadow">
                    <div class="card-header bg-dark border-0">
                        <div class="row align-items-center">
                            <div class="d-flex">
                                <h4 class="text-white" style="margin-right: 1%;">Ringkasan Pembayaran</h4>
                                <i class="fas fa-shopping-cart fa-2x text-white"></i>
                            </div>
                        </div>
                    </div>

                    <div class="form" style="text-align: center;">
                        <div style="overflow-x: auto;">
                            <table class="table align-items-center" id="ringkasan_bayaran" style="width: 100%;">
                                <thead class="thead-light">
                                    <tr>
                                        <th>No</th>
                                        <th>No Rujukan</th>
                                        <th>Bayaran</th>
                                    </tr>
                                </thead>
                                @php $counter = 1;
                                @endphp

                                @foreach($arraybayar as $index=>$bayar)
                                @if($bayar['hargajualan'] != '')
                                <tbody class="list">
                                    <tr>
                                        <td>
                                            {{ $counter }}
                                        </td>
                                        <td>
                                            {{ $bayar['norujukan'] }}
                                        </td>
                                        <td>
                                            <p id="spantransaksi{{ $counter }}">0.00</p>
                                        </td>

                                    </tr>
                                </tbody>
                                @php
                                $counter++;
                                @endphp
                                @endif
                                @endforeach
                            </table>
                            <hr>
                        </div>
                        <div class="row pb-4 font-weight-light">
                            <div class="col-6">
                                <label style="text-transform: uppercase;"><strong>Fi Pengurusan</strong></label>
                            </div>

                            <div class="col-6">
                                <span class="text-primary"><strong>RM <span>1.00</span></strong></span>
                            </div>
                        </div>
                        <div class="row pb-4 font-weight-light">
                            <div class="col-6">
                                <label style="text-transform: uppercase;"><strong>Jumlah Keseluruhan</strong></label>
                            </div>

                            <div class="col-6">
                                <span class="text-primary"><strong>RM <span id="spanjumlah">1.00</span></strong></span>
                            </div>
                        </div>

                    <span class="text-danger d-none" id="spanamarankosong">*Jangan biarkan kotak bayaran ditinggalkan kosong, Sila masukkan amaun!</span>

                    </div>

                </div>


                <div class="d-flex justify-content-between col-12 mt-3 align-self-end">
                    <a href="{{ route('home') }}" type="button" class="btn btn-danger">Batal</a>
                    <button type="submit" id="bayarsbmt" class="btn btn-primary" disabled onclick="loadingbtn();">Bayar</button>
                </div>
            </div>
        </div>
    </form>
</div>

<script>

    $(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
        event.preventDefault();
        return false;
        }
    });
    });

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

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

    var selepastawarruqtable = $('#selepas_tawarruq').DataTable({
        "bLengthChange": false,
        "bFilter": false,
        "bInfo": false,
        language: {
            'paginate': {
                'previous': '<span class="fas fa-backward"></span>',
                'next': '<span class="fas fa-forward"></span>'
            }
        },
        "scrollX": true,
        "pageLength": 10,
        "pagingType": "simple",
        "paging": false

    });
    // var selepastawarruqtable = $('#ringkasan_bayaran').DataTable({
    //     "bLengthChange": false,
    //     "bFilter": false,
    //     "bInfo": false,

    //     "scrollX": true,
    // });

    function validateform() {
        return false;
    }

    $("select[name=sltbayaran]").change(function(e) {
        let selected = $('option:selected', this).attr('value');
        let jenis = $(this).data('jenis');
        let upah = parseFloat($(this).data('upah').replace(",",""));
        let taglel = $(this).data('taglel');

        if (selected === 'fixed') {
            $(this).closest('tr').find("input").attr('readonly', true);
            $(this).closest('tr').find(".txtbayaran").val(upah);
            $(this).closest('tr').find(".bayaran").val(upah);
            calculateall(jenis, taglel);

        } else {
            // $(this).closest('tr').find("input").val();
            $(this).closest('tr').find("input").attr('readonly', false);
            $(this).closest('tr').find(".txtbayaran").val(upah);
            $(this).closest('tr').find(".bayaran").val(upah);
            calculateall(jenis, taglel);

        }
    });

    $("input[name=txtbayaranarrahn]").change(function(e) {

        let upah = parseFloat($(this).data('upah').replace(",",""));
        let pinjaman = $(this).data('pinjaman');
        let jenis = $(this).data('jenis');
        let nm = $(this).data('nm');
        let taglel = $(this).data('taglel');

        let bayar = Number(this.value);

        let errorlebih = nm - (nm * 0.1);

        if (bayar > parseFloat(errorlebih)) {
            $("#bayarsbmt").prop('disabled', false);
            Swal.fire(
                'Amaran!',
                'Baki Pembiayaan tidak boleh kurang 10% daripada Nilai Marhun',
                'error'
            )
            $(this).val(upah);
            $(this).closest('tr').find('.bayaran').val(upah);
            calculateall(jenis, taglel);

            return false;
        }

        $(this).closest('tr').find('.bayaran').val(this.value);
        calculateall(jenis, taglel);

    });

    $("input[name=txtbayarantawarruq]").change(function(e) {

        let upah = parseFloat($(this).data('upah').replace(",",""));
        let bakipinjam = $(this).data('bakipjm');
        let jenis = $(this).data('jenis');
        let nm = $(this).data('nm');
        let taglel = $(this).data('taglel');

        let bayar = Number(this.value);

        let errorlebih = (bakipinjam - (nm * 0.1));

        if (bayar > parseFloat(errorlebih)) {
            $("#bayarsbmt").prop('disabled', false);
            Swal.fire(
                'Amaran!',
                'Baki Pembiayaan tidak boleh kurang 10% daripada Nilai Marhun',
                'error'
            )
            $(this).val(upah);
            $(this).closest('tr').find('.bayaran').val(upah);
            calculateall(jenis, taglel);
            return false;
        }else if(bayar < parseFloat(upah) && parseFloat(upah) !== 0.00)
        {
            $("#bayarsbmt").prop('disabled', false);
            Swal.fire(
                'Amaran!',
                'Bayaran tidak boleh kurang daripada keuntungan semasa!',
                'error'
            )
            $(this).val(upah);
            $(this).closest('tr').find('.bayaran').val(upah);
            calculateall(jenis, taglel);
            return false;
        }

        $(this).closest('tr').find('.bayaran').val(this.value);
        calculateall(jenis, taglel);
    });

    function calculateall(jenis, taglel) {
        var $row = $(this).closest('tr');
        var sumarrahn = 0;
        var sumtawarruq = 0;
        var sum = 0;
        var counterrorbayar = 0;

        $('#belum_tawarruq').find('input[name=txtbayaranarrahn]').each(function() {
            sumarrahn += parseFloat(this.value) || 0;

            if (this.value <= 0 || this.value == '') {
                counterrorbayar++;
            }

        });

        $('#selepas_tawarruq').find('input[name=txtbayarantawarruq]').each(function(index) {

            $('#spantransaksi' + (index+1)).text(formatter.format(this.value));

            sumtawarruq += parseFloat(this.value) || 0;

            if (this.value <= 0 || this.value == '') {
                counterrorbayar++;
            }
        });

        sum = sumarrahn + sumtawarruq;

        if (counterrorbayar > 0) {
            $('#spanamarankosong').removeClass("d-none");
            $("#bayarsbmt").prop('disabled', true);
        } else {
            $('#spanamarankosong').addClass("d-none");
            $("#bayarsbmt").prop('disabled', false);
        }

        $("#spanbayaranarrahn").text(sumarrahn.toFixed(2));
        $("#spanbayarantawarruq").text(sumtawarruq.toFixed(2));
        $('#spanjumlah').text(formatter.format(sum + 1));
    }

    if (document.addEventListener) {
        window.addEventListener('pageshow', function(event) {
                if (event.persisted || window.performance && window.performance.navigation.type == 2) {
                    $('#logout-form').submit();
                }
                if (event.persisted || window.performance && window.performance.navigation.type == 0) {
                    $('form[name="formpayment"]')[0].reset();
                }
            },
            false);
    }
</script>

@endsection