diff --git a/resources/views/gadaian/v2/edit.blade.php b/resources/views/gadaian/v2/edit.blade.php
index f0d85c5..1143d29 100644
--- a/resources/views/gadaian/v2/edit.blade.php
+++ b/resources/views/gadaian/v2/edit.blade.php
@@ -590,7 +590,7 @@
                     marhun_detail['harga'],
                     status_tag_permata,
                     marhun_detail['berat_batu_permata'],
-                    "<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>"
+                    "<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>"
                 ]).draw();
                 count++;
                 counter = counter + 1;
@@ -603,7 +603,7 @@
         $('#bilangan_jumlah_kuantiti').val(formatter.format(total_kuantiti));
         $('#jumlah_nilai_marhun').val(formatter.format(jumlah_nilai_marhun));
         if (count == 1){
-            $('.buttonpunya').html("<button onclick='editmarhun(this)' class='btn btn-primary'><i class='fas fa-edit'></i></button>");
+            $('.buttonpunya').html("<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>");
         }
         
         // if(total_nilai_marhun > 0 && total_nilai_marhun < 401){
@@ -707,6 +707,103 @@
         });
     }
 
+    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>RM${parseFloat(response.maxteller).toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td></tr>
+                                <tr><td><strong>Nilai Marhun PC</strong></td><td>RM${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>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>
+                    ${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');
@@ -1508,7 +1605,7 @@
 
                     swalWithBootstrapButtons.fire({
                         title: 'Dapatkan Pengesahan Daripada Khazanah?',
-                        text: "Tetapan margin melebihi" + pinjaman_teller + "% untuk Khazanah!",
+                        text: "Tetapan Margin Melebihi Limit Maksima Teller!",
                         icon: 'info',
                         showCancelButton: true,
                         confirmButtonText: 'Hantar',
@@ -1520,7 +1617,7 @@
                             let norujukan = $('#norujukan').val();
                             let nm = parseFloat($('#total_nilai_marhun').val().replace(/[^0-9.-]+/g,""));let ber = $('#total_berat').val();let marg = $('.span-pinjaman').text();
                             // let komen = "Pembiayaan Melebihi Margin 70%|" + nm + "|" + ber +  "|" + marg + "|";
-                            let status = "Pembiayaan Melebihi Margin " + pinjaman_teller + "%";
+                            let status = "Tetapan Margin Melebihi Limit Maksima Teller: " + pinjaman_teller + "%";
                             let jumpinjam = $('#pinjaman').val();
                             let teller = "{{ Auth::user()->name }}";
 
diff --git a/resources/views/gadaian/v2/index.blade.php b/resources/views/gadaian/v2/index.blade.php
index 39104a1..2dc0951 100644
--- a/resources/views/gadaian/v2/index.blade.php
+++ b/resources/views/gadaian/v2/index.blade.php
@@ -14,7 +14,7 @@
 @endphp
 
 @if($gadai_session != null)
-<div class="container">
+<div class="p-4">
     <div class="row justify-content-center">
         <div class="col-md-12 col-lg-12">
 
@@ -565,7 +565,7 @@
                         marhun_detail['harga'],
                         status_tag_permata,
                         marhun_detail['berat_batu_permata'],
-                        "<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>"
+                        "<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>"
                     ]).draw();
                     counter = counter + 1;
                 });
@@ -1433,22 +1433,24 @@
                                                                 buttonsStyling: false
                                                             });
 
-                                                            swalWithBootstrapButtons.fire({
-                                                                title: 'Dapatkan Pengesahan Khazanah',
-                                                                text: "Tetapan margin melebihi " + pinjaman_teller + "% untuk Khazanah!",
-                                                                icon: 'info',
-                                                                showCancelButton: true,
-                                                                confirmButtonText: 'Hantar',
-                                                                cancelButtonText: 'Batal',
-                                                                reverseButtons: true
-                                                            }).then((result) => {
-                                                                if (result.isConfirmed) {
+                                        swalWithBootstrapButtons.fire({
+                                            title: 'Dapatkan Pengesahan Khazanah',
+                                            text: "Tetapan Margin Melebihi Limit Maksima Teller!",
+                                            icon: 'info',
+                                            showCancelButton: true,
+                                            confirmButtonText: 'Hantar',
+                                            cancelButtonText: 'Batal',
+                                            reverseButtons: true
+                                        }).then((result) => {
+                                            if (result.isConfirmed) {
 
-                                                                    let norujukan = $('#norujukan').val();
-                                                                    let nm = parseFloat($('#total_nilai_marhun').val().replace(/[^0-9.-]+/g,""));let ber = $('#total_berat').val();let marg = $('.span-pinjaman').text();
-                                                                    let status = "Pembiayaan Melebihi Margin " + pinjaman_teller + "%";
-                                                                    let jumpinjam = $('#pinjaman').val();
-                                                                    let teller = "{{ Auth::user()->name }}";
+                                                let norujukan = $('#norujukan').val();
+                                                let nm = parseFloat($('#total_nilai_marhun').val().replace(/[^0-9.-]+/g, ""));
+                                                let ber = $('#total_berat').val();
+                                                let marg = $('.span-pinjaman').text();
+                                                let status = "Tetapan Margin Melebihi Limit Maksima Teller: " + pinjaman_teller + "%";
+                                                let jumpinjam = $('#pinjaman').val();
+                                                let teller = "{{ Auth::user()->name }}";
 
                                                                     Swal.fire({
                                                                         title: 'Tunggu Pengesahan Daripada Khazanah.',
@@ -1606,20 +1608,117 @@
         let marhun = $(e).closest('tr').children('td:eq(1)').text();let selectedrow = $(e).closest('tr');let recnozz = tablemarhun.row(selectedrow).data();
         let norujuk = $('#norujukan').val();
 
+            $.ajax({
+                method: 'put',
+                url: '{{ route("gadai.editmarhun") }}',
+                data: {
+                    "_token": "{{ csrf_token() }}",
+                    "norujukan": norujuk,
+                    "recno": recnozz[1],
+                    "teller": "{{ Auth::user()->name }}"
+                },
+                success: function(data) {
+                    location.reload();
+                },
+                error: function(xhr, status, error) {
+                    var err = eval("(" + xhr.responseText + ")");
+                    alert(xhr.responseText);
+                }
+            });
+        }
+
+    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({
-            method: 'put',
-            url: '{{ route("gadai.editmarhun") }}',
-            data: {
-                "_token": "{{ csrf_token() }}",
-                "norujukan" : norujuk,
-                "recno" : recnozz[1],
-                "teller": "{{ Auth::user()->name }}"
+            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'
+                });
             },
-            success:function(data){
-                location.reload();
-            },error: function(xhr, status, error) {
-                var err = eval("(" + xhr.responseText + ")");
-                alert(xhr.responseText);
+            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'
+                });
             }
         });
     }