diff --git a/resources/views/gadaian/v2/edit.blade.php b/resources/views/gadaian/v2/edit.blade.php
index 1143d29..943d99c 100644
--- a/resources/views/gadaian/v2/edit.blade.php
+++ b/resources/views/gadaian/v2/edit.blade.php
@@ -24,6 +24,9 @@
             </div>
             <div class="col-12 text-right mb-2">
                 <button type="button" style="margin:auto" class="btn btn-primary" data-toggle="modal" data-target="#daftar_marhun">Daftar Marhun</button>
+                <button type="button" id="toggleTableBtn" class="btn btn-info ml-2">
+                    <i class="fas fa-exchange-alt"></i> Papar Margin
+                </button>
             </div>
             <div class="card">
                 <div class="card-body">
@@ -53,6 +56,33 @@
                             <th colspan="5"></th>
                         </tfoot>
                     </table>
+                    
+                    <!-- Margin Summary Table (Hidden by default) -->
+                    <table class="table table-striped table-hover text-center" id="marginTable" style="display: none;">
+                        <thead class="thead-dark">
+                            <tr>
+                                <th>Bil</th>
+                                <th>Karat</th>
+                                <th>Nilai Marhun</th>
+                                <th>Margin Teller (%)</th>
+                                <th>Margin PC (%)</th>
+                                <th>Nilai Marhun Teller</th>
+                                <th>Nilai Marhun PC</th>
+                            </tr>
+                        </thead>
+                        <tbody id="marginTableBody">
+                            <!-- Dynamic content will be inserted here -->
+                        </tbody>
+                        <tfoot class="thead-success">
+                            <tr>
+                                <th colspan="2" class="text-center">Jumlah</th>
+                                <th id="totalNilaiMarhunMargin"></th>
+                                <th colspan="2"></th>
+                                <th id="totalNilaiTellerMargin"></th>
+                                <th id="totalNilaiPCMargin"></th>
+                            </tr>
+                        </tfoot>
+                    </table>
                 </div>
             </div>
             <div class="card">
@@ -511,7 +541,21 @@
                 "visible": false,
                 "searchable": false
             }
-        ]
+        ],
+        "language": {
+            "lengthMenu": "Papar _MENU_ rekod setiap halaman",
+            "zeroRecords": "Tiada rekod dijumpai",
+            "info": "Memapar halaman _PAGE_ dari _PAGES_",
+            "infoEmpty": "Tiada rekod tersedia",
+            "infoFiltered": "(ditapis dari _MAX_ jumlah rekod)",
+            "search": "Cari:",
+            "paginate": {
+                "first": "Pertama",
+                "last": "Akhir",
+                "next": "Seterusnya",
+                "previous": "Sebelumnya"
+            }
+        }
     });
 
     $(".select2").select2({
@@ -658,6 +702,9 @@
         $('#keuntungan_sebulan').val(formatter.format(keuntungan_sebulan.toFixed(2)));
         $('#keuntungan_6bln').val(formatter.format(keuntungan_6bln.toFixed(2)));
 
+        var max_teller = 0;
+        var max_pelulus = 0;
+
         $.ajax({
             method:'GET',
             url: api_url + '/api/maxpinjaman',
@@ -668,19 +715,19 @@
             success:function(data){
                 
                 $.each(data,function(index,pinjaman){
-                    if(pinjaman['user_type'] == 'teller'){
+                    if (pinjaman['user_type'] == 'teller') {
                         pinjaman_teller = Number(pinjaman['max']);
+                        max_teller = pinjaman['teller_pinjaman'];
                     }
-                    if(pinjaman['user_type'] == 'khazanah'){
+                    if (pinjaman['user_type'] == 'khazanah') {
                         pinjaman_pelulus = Number(pinjaman['max']);
+                        max_pelulus = pinjaman['pc_pinjaman'];
                     }
                 });
                 $('.span-pinjaman-max-pelulus').text(formatter.format(pinjaman_pelulus) + ' %');
                 $('.span-pinjaman-max').text(formatter.format(pinjaman_teller) + ' %');
-                var max_teller = total_nilai_marhun * (pinjaman_teller/100);
-                var max_pelulus = total_nilai_marhun * (pinjaman_pelulus/100);
                 $('#pembiayaan_max_teller').val(formatter.format(max_teller));
-                $('#pembiyaan_max_pelulus').val(formatter.format(max_pelulus.toFixed(2)));
+                $('#pembiyaan_max_pelulus').val(formatter.format(max_pelulus));
             }
         });
     }
@@ -1721,5 +1768,153 @@
             }
         }
     }
+
+    // Toggle Table Functionality
+    let isMarginTableVisible = false;
+    
+    $('#toggleTableBtn').on('click', function() {
+        if (!isMarginTableVisible) {
+            // Show margin table, hide main table
+            $('#myTable_wrapper').hide();
+            $('#marginTable').show();
+            $(this).html('<i class="fas fa-exchange-alt"></i> Papar Marhun');
+            loadMarginData();
+            isMarginTableVisible = true;
+        } else {
+            // Show main table, hide margin table
+            $('#marginTable_wrapper').hide();
+            $('#myTable_wrapper').show();
+            $(this).html('<i class="fas fa-exchange-alt"></i> Papar Margin');
+            isMarginTableVisible = false;
+        }
+    });
+    
+    function loadMarginData() {
+        let marginData = [];
+        let totalNilaiMarhun = 0;
+        let totalNilaiTeller = 0;
+        let totalNilaiPC = 0;
+        
+        // Process each individual row from the main table
+        let rowsData = [];
+        tablemarhun.rows().data().each(function(row, index) {
+            let recno = row[1]; // Recno column
+            let karat = row[4]; // Karat column
+            let nilaiMarhun = parseFloat(row[3].replace(/[^0-9.-]+/g, "")); // Nilai Marhun column
+            rowsData.push({
+                index: index,
+                recno: recno,
+                karat: karat, 
+                nilaiMarhun: nilaiMarhun
+            });
+        });
+        
+        let bil = 1;
+        let processedCount = 0;
+        let totalEntries = rowsData.length;
+
+        rowsData.forEach((rowData) => {
+            // Call API to get margin data for each individual item
+            $.ajax({
+                url: '{{ config("api.url") }}/api/maxmutuemas/specific',
+                type: 'GET',
+                data: { karat: rowData.karat, nilaimarhun: rowData.nilaiMarhun },
+                success: function(response) {
+                    if (response && response.karat) {
+                        let nilaiTeller = parseFloat(response.maxteller) || 0;
+                        let nilaiPC = parseFloat(response.maxpc) || 0;
+
+                        marginData.push({
+                            index: rowData.index,
+                            bil: rowData.index + 1,
+                            recno: rowData.recno,
+                            karat: rowData.karat,
+                            nilaiMarhun: rowData.nilaiMarhun,
+                            marginTeller: response.teller,
+                            marginPC: response.pc,
+                            nilaiTeller: nilaiTeller,
+                            nilaiPC: nilaiPC
+                        });
+                        
+                        totalNilaiMarhun += rowData.nilaiMarhun;
+                        totalNilaiTeller += nilaiTeller;
+                        totalNilaiPC += nilaiPC;
+                    }
+                    
+                    processedCount++;
+                    if (processedCount === totalEntries) {
+                        // Sort by original index to maintain order
+                        marginData.sort((a, b) => a.index - b.index);
+                        populateMarginTable(marginData, totalNilaiMarhun, totalNilaiTeller, totalNilaiPC);
+                    }
+                },
+                error: function() {
+                    processedCount++;
+                    if (processedCount === totalEntries) {
+                        // Sort by original index to maintain order
+                        marginData.sort((a, b) => a.index - b.index);
+                        populateMarginTable(marginData, totalNilaiMarhun, totalNilaiTeller, totalNilaiPC);
+                    }
+                }
+            });
+        });
+    }
+    
+    let marginDataTable = null;
+    
+    function populateMarginTable(data, totalMarhun, totalTeller, totalPC) {
+        // If DataTable already exists, destroy it first
+        if (marginDataTable !== null) {
+            marginDataTable.destroy();
+            marginDataTable = null;
+        }
+        
+        let tbody = $('#marginTableBody');
+        tbody.empty();
+        
+        data.forEach(function(item) {
+            let row = `
+                <tr>
+                    <td>${item.bil}</td>
+                    <td>${item.karat}</td>
+                    <td>RM${item.nilaiMarhun.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
+                    <td>${item.marginTeller}%</td>
+                    <td>${item.marginPC}%</td>
+                    <td>RM${item.nilaiTeller.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
+                    <td>RM${item.nilaiPC.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
+                </tr>
+            `;
+            tbody.append(row);
+        });
+        
+        // Initialize DataTable
+        marginDataTable = $('#marginTable').DataTable({
+            "pageLength": 10,
+            "ordering": false,
+            "order": [[ 0, "asc" ]],
+            "responsive": true,
+            "language": {
+                "lengthMenu": "Papar _MENU_ rekod setiap halaman",
+                "zeroRecords": "Tiada rekod dijumpai",
+                "info": "Memapar halaman _PAGE_ dari _PAGES_",
+                "infoEmpty": "Tiada rekod tersedia",
+                "infoFiltered": "(ditapis dari _MAX_ jumlah rekod)",
+                "search": "Cari:",
+                "paginate": {
+                    "first": "Pertama",
+                    "last": "Akhir",
+                    "next": "Seterusnya",
+                    "previous": "Sebelumnya"
+                }
+            },
+            "footerCallback": function (row, data, start, end, display) {
+                // Update footer totals
+                $('#totalNilaiMarhunMargin').text('RM' + totalMarhun.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
+                $('#totalNilaiTellerMargin').text('RM' + totalTeller.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
+                $('#totalNilaiPCMargin').text('RM' + totalPC.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
+            }
+        });
+    }
+
 </script>
 @endsection
diff --git a/resources/views/gadaian/v2/index.blade.php b/resources/views/gadaian/v2/index.blade.php
index 2dc0951..ce1d84f 100644
--- a/resources/views/gadaian/v2/index.blade.php
+++ b/resources/views/gadaian/v2/index.blade.php
@@ -63,6 +63,14 @@
             </div>
             <div class="card">
                 <div class="card-body">
+                    <!-- Toggle Button -->
+                    <div class="mb-3">
+                        <button type="button" class="btn btn-info" id="toggleTableBtn">
+                            <i class="fas fa-exchange-alt"></i> Papar Margin
+                        </button>
+                    </div>
+                    
+                    <!-- Main Marhun Table -->
                     <table class="table table-striped table-hover text-center" id="myTable">
                         <thead class="thead-dark">
                             <tr>
@@ -89,6 +97,35 @@
                             <th colspan="5"></th>
                         </tfoot>
                     </table>
+                    
+                    <!-- Margin Summary Table (Hidden by default) -->
+                    <table class="table table-striped table-hover text-center" id="marginTable" style="display: none;">
+                        <thead class="thead-dark">
+                            <tr>
+                                <th>Bil</th>
+                                <th>Karat</th>
+                                <th>Nilai Marhun</th>
+                                <th>Margin Teller (%)</th>
+                                <th>Margin PC (%)</th>
+                                <th>Nilai Marhun Teller</th>
+                                <th>Nilai Marhun PC</th>
+                            </tr>
+                        </thead>
+                        <tbody id="marginTableBody">
+                            <!-- Data will be populated by JavaScript -->
+                        </tbody>
+                        <tfoot class="thead-dark">
+                            <tr>
+                                <th>Jumlah</th>
+                                <th></th>
+                                <th id="totalNilaiMarhunMargin"></th>
+                                <th></th>
+                                <th></th>
+                                <th id="totalNilaiTellerMargin"></th>
+                                <th id="totalNilaiPCMargin"></th>
+                            </tr>
+                        </tfoot>
+                    </table>
                 </div>
             </div>
             <div class="card">
@@ -472,21 +509,34 @@
         })
     }
 
-    var tablemarhun = $('#myTable').DataTable({
-        "ordering": false,
-        "columnDefs": [
-            {
-                "targets": [ 1 ],
-                "visible": false,
-                "searchable": false
+        var tablemarhun = $('#myTable').DataTable({
+            "ordering": false,
+            "columnDefs": [{
+                    "targets": [1],
+                    "visible": false,
+                    "searchable": false
+                },
+                {
+                    "targets": [7],
+                    "visible": true,
+                    "searchable": false
+                }
+            ],
+            "language": {
+                "lengthMenu": "Papar _MENU_ rekod setiap halaman",
+                "zeroRecords": "Tiada rekod dijumpai",
+                "info": "Memapar halaman _PAGE_ dari _PAGES_",
+                "infoEmpty": "Tiada rekod tersedia",
+                "infoFiltered": "(ditapis dari _MAX_ jumlah rekod)",
+                "search": "Cari:",
+                "paginate": {
+                    "first": "Pertama",
+                    "last": "Akhir",
+                    "next": "Seterusnya",
+                    "previous": "Sebelumnya"
+                }
             },
-            {
-                "targets": [ 7 ],
-                "visible": false,
-                "searchable": false
-            }
-        ]
-    });
+        });
 
     $(".select2").select2({
         dropdownParent: $('#daftar_marhun'),
@@ -565,7 +615,7 @@
                         marhun_detail['harga'],
                         status_tag_permata,
                         marhun_detail['berat_batu_permata'],
-                        "<div class='buttonpunya text-center'><button onclick='viewmarhun(this)' class='btn btn-info'><i class='fas fa-eye'></i></button> <button onclick='editmarhun(this)' class='btn btn-primary'><i class='fas fa-edit'></i></button> <button onclick='deletemarhun(this)' class='btn btn-danger'><i class='fas fa-trash-alt'></i></button></div>"
+                        "<div class='buttonpunya text-center'><button onclick='editmarhun(this)' class='btn btn-primary'><i class='fas fa-edit'></i></button> <button onclick='deletemarhun(this)' class='btn btn-danger'><i class='fas fa-trash-alt'></i></button></div>"
                     ]).draw();
                     counter = counter + 1;
                 });
@@ -576,13 +626,7 @@
             $('#bilangan_marhun').val(formatter.format(counter - 1));
             $('#bilangan_jumlah_kuantiti').val(formatter.format(total_kuantiti));
             $('#jumlah_nilai_marhun').val(formatter.format(jumlah_nilai_marhun));
-            // if(total_nilai_marhun > 0 && total_nilai_marhun < 401){
-            //     kadarupah = 1.2/100;
-            // }else if(total_nilai_marhun >= 401 && total_nilai_marhun < 2001){
-            //     kadarupah = 1.5/100;
-            // }else if(total_nilai_marhun >= 2001 ){
-            //     kadarupah = 1.7/100;
-            // }
+
 
         $.ajax({
             method:'GET',
@@ -597,11 +641,14 @@
             }
         });
 
-        $('#total_nilai_marhun').val(formatter.format(total_nilai_marhun));
-        $('#marhun_detail').val(marhun_details);
-        $('#total_berat').val(formatter.format(total_berat));
-        $('#kadarkeuntungan').val(formatter.format(kadarupah));
-        $('#kuantiti_marhun').val(formatter.format(jumlah_marhun));
+            $('#total_nilai_marhun').val(formatter.format(total_nilai_marhun));
+            $('#marhun_detail').val(marhun_details);
+            $('#total_berat').val(formatter.format(total_berat));
+            $('#kadarkeuntungan').val(formatter.format(kadarupah));
+            $('#kuantiti_marhun').val(formatter.format(jumlah_marhun));
+
+            var max_teller = 0;
+            var max_pelulus = 0;
 
             $.ajax({
                 method: 'GET',
@@ -614,17 +661,17 @@
                     $.each(data, function(index, pinjaman) {
                         if (pinjaman['user_type'] == 'teller') {
                             pinjaman_teller = Number(pinjaman['max']);
+                            max_teller = pinjaman['teller_pinjaman'];
                         }
                         if (pinjaman['user_type'] == 'khazanah') {
                             pinjaman_pelulus = Number(pinjaman['max']);
+                            max_pelulus = pinjaman['pc_pinjaman'];
                         }
                     });
                     $('.span-pinjaman-max-pelulus').text(formatter.format(pinjaman_pelulus) + ' %');
                     $('.span-pinjaman-max').text(formatter.format(pinjaman_teller) + ' %');
-                    var max_teller = total_nilai_marhun * (pinjaman_teller / 100);
-                    var max_pelulus = total_nilai_marhun * (pinjaman_pelulus / 100);
-                    $('#pembiayaan_max_teller').val(formatter.format(max_teller.toFixed(2)));
-                    $('#pembiyaan_max_pelulus').val(formatter.format(max_pelulus.toFixed(2)));
+                    $('#pembiayaan_max_teller').val(formatter.format(max_teller));
+                    $('#pembiyaan_max_pelulus').val(formatter.format(max_pelulus));
                 }
             });
         }
@@ -1627,102 +1674,6 @@
             });
         }
 
-    function viewmarhun(e){
-        let selectedrow = $(e).closest('tr');
-        let recno = tablemarhun.row(selectedrow).data();
-        let nm = recno[3];
-        let karat = recno[4];
-        let berat = recno[5];
-        let harga = recno[8];
-        let nota = recno[7];
-        let kuantiti = recno[6];
-        let jenismarhun = recno[2];
-        let beratpermata = recno[10];
-        
-
-
-        // Call API to get specific MaxMutuEmas data by karat
-        $.ajax({
-            url: '{{ config("api.url") }}/api/maxmutuemas/specific',
-            type: 'GET',
-            data: { karat: karat,nilaimarhun: nm },
-            success: function(response) {
-                let marginInfo = '';
-                let marginTable = '';
-                if (response && response.karat) {
-                    marginTable = `
-                        <table class="table table-bordered table-sm mt-3">
-                            <thead class="thead-light">
-                                <tr><th colspan="2" class="text-center"><strong>Maklumat Margin</strong></th></tr>
-                            </thead>
-                            <tbody>
-                                <tr><td><strong>Margin Teller</strong></td><td>${response.teller}%</td></tr>
-                                <tr><td><strong>Margin PC</strong></td><td>${response.pc}%</td></tr>
-                                <tr><td><strong>Nilai Marhun Teller</strong></td><td>${parseFloat(response.maxteller).toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td></tr>
-                                <tr><td><strong>Nilai Marhun PC</strong></td><td>${parseFloat(response.maxpc).toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td></tr>
-                            </tbody>
-                        </table>
-                    `;
-                }
-                
-                let details = `
-                    <table class="table table-bordered table-sm">
-                        <thead class="thead-light">
-                            <tr><th colspan="2" class="text-center"><strong>Maklumat Marhun</strong></th></tr>
-                        </thead>
-                        <tbody>
-                            <tr><td><strong>Jenis Marhun</strong></td><td>${jenismarhun}</td></tr>
-                            <tr><td><strong>Nilai Marhun Asal</strong></td><td>${nm}</td></tr>
-                            <tr><td><strong>Karat</strong></td><td>${karat}</td></tr>
-                            <tr><td><strong>Berat</strong></td><td>${berat}g</td></tr>
-                            <tr><td><strong>Harga</strong></td><td>RM${harga}</td></tr>
-                        </tbody>
-                    </table>
-                    ${marginTable}
-                `;
-                
-                Swal.fire({
-                    title: 'Maklumat Marhun & Margin',
-                    html: details,
-                    icon: 'info',
-                    confirmButtonText: 'OK',
-                    width: '600px'
-                });
-            },
-            error: function(xhr) {
-                // If API call fails, show basic marhun info only
-                let details = `
-                    <table class="table table-bordered table-sm">
-                        <thead class="thead-light">
-                            <tr><th colspan="2" class="text-center"><strong>Maklumat Marhun</strong></th></tr>
-                        </thead>
-                        <tbody>
-                            <tr><td><strong>Jenis Marhun</strong></td><td>${jenismarhun}</td></tr>
-                            <tr><td><strong>Nama</strong></td><td>${nm}</td></tr>
-                            <tr><td><strong>Karat</strong></td><td>${karat}</td></tr>
-                            <tr><td><strong>Berat</strong></td><td>${berat}g</td></tr>
-                            <tr><td><strong>Kuantiti</strong></td><td>${kuantiti}</td></tr>
-                            <tr><td><strong>Harga</strong></td><td>RM${harga}</td></tr>
-                            <tr><td><strong>Nota</strong></td><td>${nota}</td></tr>
-                            <tr><td><strong>Berat Batu Permata</strong></td><td>${beratpermata}g</td></tr>
-                        </tbody>
-                    </table>
-                    <div class="alert alert-warning text-center">
-                        <em>Maklumat margin tidak tersedia</em>
-                    </div>
-                `;
-                
-                Swal.fire({
-                    title: 'Maklumat Marhun',
-                    html: details,
-                    icon: 'info',
-                    confirmButtonText: 'OK',
-                    width: '600px'
-                });
-            }
-        });
-    }
-
     function editmarhun(e){
         let norujuk = $('#norujukan').val();
         let selectedrow = $(e).closest('tr');
@@ -1959,5 +1910,152 @@
         }
     });
 
+    // Toggle Table Functionality
+    let isMarginTableVisible = false;
+    
+    $('#toggleTableBtn').on('click', function() {
+        if (!isMarginTableVisible) {
+            // Show margin table, hide main table
+            $('#myTable_wrapper').hide();
+            $('#marginTable').show();
+            $(this).html('<i class="fas fa-exchange-alt"></i> Papar Marhun');
+            loadMarginData();
+            isMarginTableVisible = true;
+        } else {
+            // Show main table, hide margin table
+            $('#marginTable_wrapper').hide();
+            $('#myTable_wrapper').show();
+            $(this).html('<i class="fas fa-exchange-alt"></i> Papar Margin');
+            isMarginTableVisible = false;
+        }
+    });
+    
+    function loadMarginData() {
+        let marginData = [];
+        let totalNilaiMarhun = 0;
+        let totalNilaiTeller = 0;
+        let totalNilaiPC = 0;
+        
+        // Process each individual row from the main table
+        let rowsData = [];
+        tablemarhun.rows().data().each(function(row, index) {
+            console.log(row);
+            let recno = row[1]; // Recno column
+            let karat = row[4]; // Karat column
+            let nilaiMarhun = parseFloat(row[3].replace(/[^0-9.-]+/g, "")); // Nilai Marhun column
+            rowsData.push({
+                index: index,
+                recno: recno,
+                karat: karat, 
+                nilaiMarhun: nilaiMarhun
+            });
+        });
+        
+        let bil = 1;
+        let processedCount = 0;
+        let totalEntries = rowsData.length;
+
+        rowsData.forEach((rowData) => {
+            // Call API to get margin data for each individual item
+            $.ajax({
+                url: '{{ config("api.url") }}/api/maxmutuemas/specific',
+                type: 'GET',
+                data: { karat: rowData.karat, nilaimarhun: rowData.nilaiMarhun },
+                success: function(response) {
+                    if (response && response.karat) {
+                        let nilaiTeller = parseFloat(response.maxteller) || 0;
+                        let nilaiPC = parseFloat(response.maxpc) || 0;
+
+                        marginData.push({
+                            index: rowData.index,
+                            bil: rowData.index + 1,
+                            recno: rowData.recno,
+                            karat: rowData.karat,
+                            nilaiMarhun: rowData.nilaiMarhun,
+                            marginTeller: response.teller,
+                            marginPC: response.pc,
+                            nilaiTeller: nilaiTeller,
+                            nilaiPC: nilaiPC
+                        });
+                        
+                        totalNilaiMarhun += rowData.nilaiMarhun;
+                        totalNilaiTeller += nilaiTeller;
+                        totalNilaiPC += nilaiPC;
+                    }
+                    
+                    processedCount++;
+                    if (processedCount === totalEntries) {
+                        // Sort by original index to maintain order
+                        marginData.sort((a, b) => a.index - b.index);
+                        populateMarginTable(marginData, totalNilaiMarhun, totalNilaiTeller, totalNilaiPC);
+                    }
+                },
+                error: function() {
+                    processedCount++;
+                    if (processedCount === totalEntries) {
+                        // Sort by original index to maintain order
+                        marginData.sort((a, b) => a.index - b.index);
+                        populateMarginTable(marginData, totalNilaiMarhun, totalNilaiTeller, totalNilaiPC);
+                    }
+                }
+            });
+        });
+    }
+    
+    let marginDataTable = null;
+    function populateMarginTable(data, totalMarhun, totalTeller, totalPC) {
+        // If DataTable already exists, destroy it first
+        if (marginDataTable !== null) {
+            marginDataTable.destroy();
+            marginDataTable = null;
+        }
+        
+        let tbody = $('#marginTableBody');
+        tbody.empty();
+        
+        data.forEach(function(item) {
+            let row = `
+                <tr>
+                    <td>${item.bil}</td>
+                    <td>${item.karat}</td>
+                    <td>RM${item.nilaiMarhun.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
+                    <td>${item.marginTeller}%</td>
+                    <td>${item.marginPC}%</td>
+                    <td>RM${item.nilaiTeller.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
+                    <td>RM${item.nilaiPC.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
+                </tr>
+            `;
+            tbody.append(row);
+        });
+        
+        // Initialize DataTable
+        marginDataTable = $('#marginTable').DataTable({
+            "pageLength": 10,
+            "ordering": false,
+            "order": [[ 0, "asc" ]],
+            "responsive": true,
+            "language": {
+                "lengthMenu": "Papar _MENU_ rekod setiap halaman",
+                "zeroRecords": "Tiada rekod dijumpai",
+                "info": "Memapar halaman _PAGE_ dari _PAGES_",
+                "infoEmpty": "Tiada rekod tersedia",
+                "infoFiltered": "(ditapis dari _MAX_ jumlah rekod)",
+                "search": "Cari:",
+                "paginate": {
+                    "first": "Pertama",
+                    "last": "Akhir",
+                    "next": "Seterusnya",
+                    "previous": "Sebelumnya"
+                }
+            },
+            "footerCallback": function (row, data, start, end, display) {
+                // Update footer totals
+                $('#totalNilaiMarhunMargin').text('RM' + totalMarhun.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
+                $('#totalNilaiTellerMargin').text('RM' + totalTeller.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
+                $('#totalNilaiPCMargin').text('RM' + totalPC.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
+            }
+        });
+    }
+
 </script>
 @endsection