erahn-click/resources/views/modal/marhun.blade.php

<link href="{{ asset('css/customportal.css') }}" rel="stylesheet">

<div id="marhunLoader" class="loader" style="display: none;"></div>

<div class="modal animate__animated animate__bounceInDown" id="marhunModal">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                {{-- <h5 class="modal-title">Senarai Marhun</h5> --}}
                <ul class="nav nav-tabs nav-fill">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="pill" href="#home" role="tab" aria-controls="pills-marhun" aria-selected="true">Marhun</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="pill" href="#rekod" role="tab" aria-controls="pills-rekod" aria-selected="false">Rekod Bayaran</a>
                    </li>
                    <li class="show-xs nav-item test">
                        <a class="show-xs nav-link" data-toggle="pill" href="#detail" role="tab" aria-controls="pills-detail" aria-selected="false">Detail SAG</a>
                    </li>
                </ul>
                <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
            </div>

            <!-- Modal body -->
            <div class="modal-body">

                <div class="tab-content">
                    <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="marhun-tab">
                        {{-- <div class="row">
                            <div class="col-4">
                            <div class="p-2 rounded bg-warning text-center text-dark mb-2"><div class="inner"><b>Pembiayaan: <span id="pemb"></span></b></div></div>
                            </div>
                
                            <div class="col-4">
                            <div class="p-2 rounded bg-warning text-center text-dark mb-2"><div class="inner"><b>B. Pembiayaan: <span id="bpemb"></span></b></div></div>
                            </div>
                
                            <div class="col-4">
                            <div class="p-2 rounded bg-warning text-center text-dark mb-2"><div class="inner"><b>Status: <span id="statuslelong"></span></b></div></div>
                            </div>
                        </div> --}}

                        <div class="table-responsive table-bordered">
                            <table id="biasa" class="table table-hover text-center" style="width:100%">
                                <thead class="bg-dark text-white">
                                    <tr>
                                        <th>Bil</th>
                                        <th>Jenis Marhun</th>
                                        <th>Berat</th>
                                        <th>Karat</th>
                                        <th>Nilai Marhun</th>
                                        <th>Nota</th>
                                    </tr>
                                </thead>
                                <tbody id="tablemarhun">
                                    <tr>
                                        <td>dassad</td>
                                        <td>dassad</td>

                                        <td>dassad</td>

                                        <td>dassad</td>

                                        <td>dassad</td>

                                        <td>dassad</td>

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

                    <div class="tab-pane fade" id="rekod" role="tabpanel" aria-labelledby="rekod-tab">

                        <div class="row">
                            <div class="col-6">
                                <div class="p-2 rounded bg-warning text-center text-dark mb-2">
                                    <div class="inner"><b>Pembiayaan Asal: <span id="pembiayaan"></span></b></div>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="p-2 rounded bg-warning text-center text-dark mb-2">
                                    <div class="inner"><b>Baki Pembiayaan: <span id="bpembiayaan"></span></b></div>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="p-2 rounded bg-warning text-center text-dark mb-2">
                                    <div class="inner"><b>Nilai Marhun: <span id="nm"></span></b></div>
                                </div>
                            </div>

                            {{-- <div class="col-4">
                              <div class="p-2 rounded bg-warning text-center text-dark mb-2"><div class="inner"><b>T.Matang: <span id="berat"></span></b></div></div>
                            </div> --}}
                            {{-- <div class="col-4">
                            </div> --}}

                            <div class="col-6">
                                <div class="p-2 rounded bg-warning text-center text-dark mb-2">
                                    <div class="inner"><b>Keuntungan 6 bulan: <span id="koskeun"></span></b></div>
                                </div>
                            </div>

                            {{-- <div class="col-4">
                              <div class="p-2 rounded bg-warning text-center text-dark mb-2"><div class="inner"><b>T.Lanjut: <span id="berat"></span></b></div></div>
                            </div> --}}
                        </div>

                        <div style="overflow-x: auto;">
                            <table id="tablehistorybayaran" class="table table-striped table-bordered text-center">
                                <thead class="bg-dark text-white">
                                    <tr>
                                        <th>Bil</th>
                                        <th>Tarikh</th>
                                        <th>Bayaran</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- <p style="font-size: 12px;"><i>*Dengan bayaran serendah jumlah keuntungan <span class="text-danger font-weight-bold">6 bulan</span>, anda layak mendapat lanjutan tempoh selama <span class="text-danger font-weight-bold">6 bulan</span> lagi.</i></p> -->

                    </div>

                    <div class="show-xs tab-pane fade " id="detail" role="tabpanel" aria-labelledby="detail-tab">

                        <div class="row show-xs">
                            <div class="col-6">
                                <div class="show-xs p-2 rounded bg-warning text-center text-dark mb-2">
                                    <div class="inner"><b>No Rujukan: <span id="norujukan"></span></b></div>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="show-xs p-2 rounded bg-warning text-center text-dark mb-2">
                                    <div class="inner"><b>Tempoh: <span id="tempoh"></span></b></div>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="show-xs p-2 rounded bg-warning text-center text-dark mb-2">
                                    <div class="inner"><b>Cawangan: <span id="namacaw"></span></b></div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary">Tutup</button>
            </div>

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

@push('additional_styles')
<style>
    .loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }

    .loader::after {
        content: "";
        width: 50px;
        height: 50px;
        border: 10px solid #dddddd;
        border-top-color: #009578;
        border-radius: 50%;
        animation: loading 1s ease infinite;
    }

    @keyframes loading {
        from {
            transform: rotate(0turn)
        }

        to {
            transform: rotate(1turn)
        }
    }
</style>
@endpush

@push('additional_js_scripts')
<script>
    const showMarhunDetailModal = async function(event,tagsyarikat) {

        event.preventDefault();

        document.getElementById('marhunLoader').style.display = 'flex';
        const norujukan = event.target.innerHTML;
        try {
        const data = await fetch('/api/pembiayaan-modal-data/' + norujukan + "/" + tagsyarikat)
            .then(x => x.json())
            .catch(error => {
                console.error(error);
                const loader = document.getElementById('load-arrahn');
                loader.classList.add('d-none');
                throw error; 
        });
   
        const loader = document.getElementById('load-arrahn');
        loader.classList.add('d-none');
        
        const formatter = new Intl.NumberFormat('en-US', {
            minimumFractionDigits: 2
        });

            $('#pembiayaan').text('RM' + formatter.format(data.gadaianDetails.pinjaman));
            $('#bpembiayaan').text('RM' + formatter.format(data.gadaianDetails.bakipjm));
            $('#nm').text('RM' + formatter.format(data.gadaianDetails.nilaimarhun));
            $('#berat').text(data.gadaianDetails.berat + 'g');
            $('#koskeun').text('RM' + formatter.format(data.gadaianDetails.bakiupah));
            $('#norujukan').text(data.gadaianDetails.norujukan);
            $('#tempoh').text(data.gadaianDetails.tempoh);
            $('#namacaw').text(data.gadaianDetails.cawangan_name);
            $('#pemb').text('RM ' + data.gadaianDetails.pinjaman);
            $('#bpemb').text('RM ' + data.gadaianDetails.bakipjm);
            $('#statuslelong').text(data.gadaianDetails.taglel === 1 ? 'Akan Dilelong' : '-');
            $('#norujukan_modal').val(data.gadaianDetails.norujukan);
            $('#pinjaman_modal').val(data.gadaianDetails.pinjaman);
            $('#marhunModal').modal('show');


            $('#tablehistorybayaran').DataTable().clear().destroy();
            let table_bayaran_history = $('#tablehistorybayaran').DataTable();

            $('#biasa').DataTable().clear().destroy();
            let table_marhun = $('#biasa').DataTable();

            data.bayaranHistoryDetails.forEach((x, index) => {
                table_bayaran_history.row.add([
                    index + 1,
                    x.created_at,
                    `RM ${x.duit_masuk}  <a target='_blank' href="${x.resit_ansuran_link}" class='btn btn-info btn-sm'><span class='fas fa-print'></span></a>`,
                ]).draw(false)
            });

            data.marhunDetails.forEach((x, index) => {
                table_marhun.row.add([
                    index + 1,
                    x.marhun,
                    x.berat,
                    x.karat,
                    `RM ${formatter.format(x.n_marhun)}`,
                    x.nota
                ]).draw(false)
            });

            document.getElementById('marhunLoader').style.display = 'none';

        } catch (error) {
            console.error('Error fetching data:', error);
            // Hide loader in case of error
            document.getElementById('marhunLoader').style.display = 'none';
        }
    };

    document.addEventListener('DOMContentLoaded', function() {


        $('#main-table').on('click', 'a.marhun-detail-link', function(e) {
            const loader = document.getElementById('load-arrahn');
            loader.classList.remove('d-none');

            const tag_syarikat = $(this).find('input[name="tag_syarikat"]').val();
            showMarhunDetailModal(e,tag_syarikat)
        });

    });

    document.querySelector('#marhunModal .modal-footer button').addEventListener('click', function(e) {
        e.preventDefault();
        $('#marhunModal').modal('hide');
    });

    document.querySelector('#marhunModal').addEventListener('hidden.bs.modal', function(e) {
        document.querySelector('#marhunModal .modal-header a[aria-controls="pills-marhun"]').click();
    });
</script>')
@endpush