diff --git a/app/Http/Controllers/PenebusanController.php b/app/Http/Controllers/PenebusanController.php
index fad382b..3abad3e 100644
--- a/app/Http/Controllers/PenebusanController.php
+++ b/app/Http/Controllers/PenebusanController.php
@@ -3,6 +3,8 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Auth;
 
 class PenebusanController extends Controller
 {
@@ -11,7 +13,24 @@ class PenebusanController extends Controller
         $this->middleware('auth');
     }
 
-    public function index(){
-        return view('penebusan.index');
+    public function index($norujukan){
+        $auth_user = Auth::user();
+        $api_url = config('api.url');
+        $cawangan_info = Http::get(config('api.url') . '/api/cawangan/'. $auth_user['cawangan'])->json();
+
+        $gadaidetail = Http::get(config('api.url') . '/api/gadai/norujukan/'. $norujukan)->json();
+        $noic = $gadaidetail[0][0]['nokp'];
+        $customerdetail = Http::get(config('api.url') . '/api/customers/'. $noic)->json();
+        $marhundetail = Http::get(config('api.url') . '/api/marhun/'. $norujukan)->json();
+
+        // dd($marhundetail[0]);
+
+        $marhun = $marhundetail[0];
+        $nama = $customerdetail[0]['nama'];
+
+        $gadai = $gadaidetail[0][0];
+        
+
+        return view('penebusan.index',compact('cawangan_info','api_url','gadai','marhun','nama'));
     }
 }
diff --git a/resources/views/customers/info.blade.php b/resources/views/customers/info.blade.php
index 37b76f8..ad48070 100644
--- a/resources/views/customers/info.blade.php
+++ b/resources/views/customers/info.blade.php
@@ -220,6 +220,47 @@
                             </tr>
                         </thead>
                     </table>
+
+                    {{-- Sudah Tebus --}}
+
+                    <table id="dahtebusTable">
+                        <thead>
+                            <tr>
+                                <th>Bil</th>
+                                <th>No Rujukan</th>
+                                <th>Tarikh Gadai</th>
+                                <th>Pembiayaan</th>
+                                <th>Nilai Marhun</th>
+                                <th>Tempoh</th>
+                                <th>Keuntungan</th>
+                                <th>Tarikh Matang</th>
+                                <th>Margin</th>
+                                <th>Kos Keuntungan</th>
+                                <th>Hapus Gadai</th>
+                                <!-- <th>Tebus/Upah</th> -->
+                            </tr>
+                        </thead>
+                    </table>
+
+                    <table id="lelongTable">
+                        <thead>
+                            <tr>
+                                <th>Bil</th>
+                                <th>No Rujukan</th>
+                                <th>Tarikh Gadai</th>
+                                <th>Pembiayaan</th>
+                                <th>Nilai Marhun</th>
+                                <th>Tempoh</th>
+                                <th>Keuntungan</th>
+                                <th>Tarikh Matang</th>
+                                <th>Margin</th>
+                                <th>Kos Keuntungan</th>
+                                <th>Hapus Gadai</th>
+                                <!-- <th>Tebus/Upah</th> -->
+                            </tr>
+                        </thead>
+                    </table>
+
                 </div>
             </div>
         </div>
@@ -232,40 +273,105 @@
         "scrollX": true
     });
 
+    var tabledahtebus = $('#dahtebusTable').DataTable({
+        "scrollX": true
+    });
+
+    var tablelelong = $('#lelongTable').DataTable({
+        "scrollX": true
+    });
+
     const formatter = new Intl.NumberFormat('en-US', {
         minimumFractionDigits: 2
     })
-    function gadaiTable(data){
+    function gadaiTable(data,jenistebus){
         var counter = 1;
+
         tablegadai.clear().draw();
+        tabledahtebus.clear().draw();
+        tablelelong.clear().draw();
+
         $.each(data,function(index,gadai){
             $.each(gadai, function(index,gadai_detail){
-                var keuntungan_semasa = (gadai_detail['kadarupah']/100)*gadai_detail['bakipjm']*gadai_detail['jbg'];
-                tablegadai.row.add([
-                    counter,
-                    gadai_detail['norujukan'],
-                    gadai_detail['t_gadai'],
-                    'RM '+formatter.format(gadai_detail['pinjaman']),
-                    'RM '+ formatter.format(gadai_detail['nilaimarhun']),
-                    gadai_detail['jbg'],
-                    'RM '+ formatter.format(keuntungan_semasa),
-                    gadai_detail['t_matang'],
-                    (((Number(gadai_detail['pinjaman'])/Number(gadai_detail['nilaimarhun']))*100).toFixed(2)).toLocaleString("en-GB") + '%',
-                    'RM ' + formatter.format((Number(gadai_detail['kadarupah'])*Number(gadai_detail['pinjaman'])).toFixed(2)),
-                    ''
-                ]).draw();
+
+                if(jenistebus == "belum_tebus")
+                {
+                        var keuntungan_semasa = (gadai_detail['kadarupah']/100)*gadai_detail['bakipjm']*gadai_detail['jbg'];
+                        
+                        var urlroute = '{{ route("penebusan", ":id") }}';
+                        urlroute = urlroute.replace(':id', gadai_detail["norujukan"]);
+
+                        tablegadai.row.add([
+                        counter,
+                        '<a href=' + urlroute +'>' + gadai_detail['norujukan'] + '</a>',
+                        gadai_detail['t_gadai'],
+                        'RM '+formatter.format(gadai_detail['pinjaman']),
+                        'RM '+ formatter.format(gadai_detail['nilaimarhun']),
+                        gadai_detail['jbg'],
+                        'RM '+ formatter.format(keuntungan_semasa),
+                        gadai_detail['t_matang'],
+                        (((Number(gadai_detail['pinjaman'])/Number(gadai_detail['nilaimarhun']))*100).toFixed(2)).toLocaleString("en-GB") + '%',
+                        'RM ' + formatter.format((Number(gadai_detail['kadarupah'])*Number(gadai_detail['pinjaman'])).toFixed(2)),
+                        ''
+                    ]).draw();
+                }
+                else if(jenistebus == "sudah_tebus")
+                {
+                        var keuntungan_semasa = (gadai_detail['kadarupah']/100)*gadai_detail['bakipjm']*gadai_detail['jbg'];
+                        tabledahtebus.row.add([
+                        counter,
+                        gadai_detail['norujukan'],
+                        gadai_detail['t_gadai'],
+                        'RM '+formatter.format(gadai_detail['pinjaman']),
+                        'RM '+ formatter.format(gadai_detail['nilaimarhun']),
+                        gadai_detail['jbg'],
+                        'RM '+ formatter.format(keuntungan_semasa),
+                        gadai_detail['t_matang'],
+                        (((Number(gadai_detail['pinjaman'])/Number(gadai_detail['nilaimarhun']))*100).toFixed(2)).toLocaleString("en-GB") + '%',
+                        'RM ' + formatter.format((Number(gadai_detail['kadarupah'])*Number(gadai_detail['pinjaman'])).toFixed(2)),
+                        ''
+                    ]).draw();
+                }
+                else if(jenistebus == "lelong")
+                {
+                        var keuntungan_semasa = (gadai_detail['kadarupah']/100)*gadai_detail['bakipjm']*gadai_detail['jbg'];
+                        tablelelong.row.add([
+                        counter,
+                        gadai_detail['norujukan'],
+                        gadai_detail['t_gadai'],
+                        'RM '+formatter.format(gadai_detail['pinjaman']),
+                        'RM '+ formatter.format(gadai_detail['nilaimarhun']),
+                        gadai_detail['jbg'],
+                        'RM '+ formatter.format(keuntungan_semasa),
+                        gadai_detail['t_matang'],
+                        (((Number(gadai_detail['pinjaman'])/Number(gadai_detail['nilaimarhun']))*100).toFixed(2)).toLocaleString("en-GB") + '%',
+                        'RM ' + formatter.format((Number(gadai_detail['kadarupah'])*Number(gadai_detail['pinjaman'])).toFixed(2)),
+                        ''
+                    ]).draw();
+                }
+
+                
 
                 counter = counter + 1;
             });
         });
+
+
+
+
     }
     $(document).ready( function () {
+        $('#myTable').parents('div.dataTables_wrapper').first().hide();
+        $('#dahtebusTable').parents('div.dataTables_wrapper').first().hide();
+        $('#lelongTable').parents('div.dataTables_wrapper').first().hide();
+
         var noic = $("#noic").val();
         $.ajax({
             method:"GET",
             url: api_url + "/api/customers/"+noic+"/gadai/belum_tebus",
             success: function(data){
-                gadaiTable(data);
+                $('#myTable').parents('div.dataTables_wrapper').first().show();
+                gadaiTable(data,"belum_tebus");
             }
         });
         $("input[name='options']").click(function(){
@@ -276,30 +382,44 @@
     function gadaiOptionButton(noic){
         tablegadai.clear().draw();
         if($("input[name='options']:checked").val() == 'belum_tebus'){
+            
+            $('#myTable').parents('div.dataTables_wrapper').first().show();
+            $('#dahtebusTable').parents('div.dataTables_wrapper').first().hide();
+            $('#lelongTable').parents('div.dataTables_wrapper').first().hide();
 
             $.ajax({
                 method:"GET",
                 url: api_url + "/api/customers/"+noic+"/gadai/belum_tebus",
                 success: function(data){
-                    gadaiTable(data);
+                    gadaiTable(data,"belum_tebus");
                 }
             });
         }
         if($("input[name='options']:checked").val() == 'sudah_tebus'){
+
+            $('#myTable').parents('div.dataTables_wrapper').first().hide();
+            $('#dahtebusTable').parents('div.dataTables_wrapper').first().show();
+            $('#lelongTable').parents('div.dataTables_wrapper').first().hide();
+
             $.ajax({
                 method:"GET",
                 url: api_url + "/api/customers/"+noic+"/gadai/sudah_tebus",
                 success: function(data){
-                    gadaiTable(data);
+                    gadaiTable(data,"sudah_tebus");
                 }
             });
         }
         if($("input[name='options']:checked").val() == 'lelong'){
+
+            $('#myTable').parents('div.dataTables_wrapper').first().hide();
+            $('#dahtebusTable').parents('div.dataTables_wrapper').first().hide();
+            $('#lelongTable').parents('div.dataTables_wrapper').first().show();
+
             $.ajax({
                 method:"GET",
                 url: api_url + "/api/customers/"+noic+"/gadai/lelong",
                 success: function(data){
-                    gadaiTable(data);
+                    gadaiTable(data,"lelong");
                 }
             });
         }
diff --git a/resources/views/penebusan/index.blade.php b/resources/views/penebusan/index.blade.php
index a6f0d80..9f00a8c 100644
--- a/resources/views/penebusan/index.blade.php
+++ b/resources/views/penebusan/index.blade.php
@@ -4,15 +4,17 @@
 <div class="container">
     <div class="row justify-content-center">
         <div class="col-md-12">
-            <h3 class="text-center text-uppercase">gadaian</h3>
+            <h3 class="text-center text-uppercase mb-5">PENEBUSAN</h3>
             <div class="form-group row col-12">
+
+                {{-- {{ dd($gadai) }} --}}
             <div class="col-6">
                     <div class="form-group row">
                         <div class="col-4">
                             NAMA
                         </div>
                         <div class="col-8">
-                            <input type="text">
+                        <input type="text" value="{{ $nama }}" class="form-control" readonly/>
                         </div>
                     </div>
                 </div>
@@ -22,7 +24,7 @@
                             NO PELANGGGAN
                         </div>
                         <div class="col-8">
-                            <input type="text">
+                            <input type="text" value="{{ $gadai['nopelanggan'] }}" class="form-control" readonly/>
                         </div>
                     </div>
                 </div>
@@ -32,7 +34,7 @@
                             NO RUJUKAN
                         </div>
                         <div class="col-8">
-                            <input type="text">
+                            <input type="text" value="{{ $gadai['norujukan'] }}" class="form-control" readonly/>
                         </div>
                     </div>
                 </div>
@@ -42,7 +44,7 @@
                             NO KAD PENGENALAN
                         </div>
                         <div class="col-8">
-                            <input type="text">
+                            <input type="text" value="{{ $gadai['nokp'] }}" class="form-control" readonly/>
                         </div>
                     </div>
                 </div>
@@ -52,12 +54,17 @@
                             JENIS TEBUS
                         </div>
                         <div class="col-8">
-                            <input type="text">
+                            <select class="form-control" id="sltjenistebus">
+                                <option value="T">T = Tebus</option>
+                                <option value="A">A = Ansuran</option>
+                                <option value="S">S = Separuh</option>
+                                <option value="P">P = Tambah Pinjaman</option>
+                              </select>
                         </div>
                     </div>
                 </div>
                 <div class="col-4">
-                    <div class="form-group row">
+                    <div class="form-group row" style="visibility: hidden;">
                         <div class="col-4">
                             NO SIRI TEBUS
                         </div>
@@ -67,7 +74,7 @@
                     </div>
                 </div>
                 <div class="col-4">
-                    <div class="form-group row">
+                    <div class="form-group row" style="visibility: hidden;">
                         <div class="col-4">
                             WAKIL
                         </div>
@@ -77,73 +84,96 @@
                     </div>
                 </div>
             </div>
+            
             <div class="card">
                 <div class="card-body">
-                    <table>
+                    <table id="tablemarhun" class="table table-striped table-bordered text-center">
                         <thead>
                             <tr>
                                 <th>Bil</th>
-                                <th>No Rujukan</th>
-                                <th>Tarikh Gadai</th>
                                 <th>Marhun</th>
-                                <th>Berat</th>
                                 <th>Nilai Marhun</th>
+                                <th>Berat/gram</th>
                                 <th>Karat</th>
-                                <th>Pinjaman</th>
                             </tr>
                         </thead>
+                        <tbody>
+                            @foreach ($marhun as $index=>$m)
+                            {{-- {{ dd($m) }} --}}
+                            <tr>
+                            <td><input type="checkbox" id="checkmarhun" data-recno="{{ $m['recno'] }}" style="display:none;"/><span class="spannar">{{ $index+1 }}</span></td>
+                            @php
+                            $marhunperibadi = Http::get(config('api.url') .'/api/jemas/nama_marhun/',["marhun" => $m['marhun']])->json();
+                            @endphp
+                            <td>{{ $marhunperibadi['descpt'] }}</td>
+                            <td>RM {{ number_format($m['n_marhuns'],2) }}</td>
+                            <td>{{ $m['berat'] }}</td>
+                            <td>{{ $m['karat'] }}</td>
+                            </tr>
+                            @endforeach
+                        </tbody>
                     </table>
                 </div>
             </div>
+            {{-- {{dd($gadai)}} --}}
             <div class="card">
                 <div class="card-body">
                     <form action="">
                         <div class="col-12 form-group row">
-                            <div class="col-4"></div>
-                            <div class="col-4">
+                            {{-- <div class="col-4"></div> --}}
+                            <div class="col-6">
                                 <div class="form-group row">
                                     <div class="col-4">
-                                        PINJAMAN
+                                        PINJAMAN(RM)
                                     </div>
                                     <div class="col-8">
-                                        <input type="text">
+                                        <input type="text" value="{{ $gadai['pinjaman'] }}" class="form-control" readonly/>
                                     </div>
                                 </diV>
                             </div>
-                            <div class="col-4">
+                            <div class="col-6">
                                 <div class="form-group row">
                                     <div class="col-4">
-                                        JUMLAH UPAH
+                                        JUMLAH UPAH(RM)
                                     </div>
                                     <div class="col-8">
-                                        <input type="text">
+                                        <input type="text" id="jumlahupah" class="form-control" readonly/>
                                     </div>
                                 </diV>
                             </div>
-                            <div class="col-4"></div>
-                            <div class="col-4">
+                            <div class="col-6">
                                 <div class="form-group row">
                                     <div class="col-4">
-                                        TELAH DIBAYAR
+                                       BAYARAN(RM)
                                     </div>
                                     <div class="col-8">
-                                        <input type="text">
+                                        <input type="text" id="bayaran" placeholder="0.00" class="form-control" disabled/>
                                     </div>
                                 </diV>
                             </div>
-                            <div class="col-4">
+                            <div class="col-6">
                                 <div class="form-group row">
                                     <div class="col-4">
-                                        PERLU DIBAYAR
+                                        TELAH DIBAYAR(RM)
                                     </div>
                                     <div class="col-8">
-                                        <input type="text">
+                                        <input type="text" id="jumlahtelahdibayar" class="form-control" readonly/>
+                                    </div>
+                                </diV>
+                            </div>
+                            <div class="col-6">
+                                <div class="form-group row">
+                                    <div class="col-4">
+                                        PERLU DIBAYAR(RM)
+                                    </div>
+                                    <div class="col-8">
+                                        <input type="text" id="perludibayar" class="form-control" readonly/>
                                     </div>
                                 </diV>
                             </div>
                             <div class="col-12">
                                 <input type="button" class="float-right btn btn-danger mr-2" value="BATAL">
-                                <input type="button" class="float-right btn btn-primary mr-2" value="TERIMA">
+                                <input type="button" class="float-right btn btn-primary mr-2" value="TERIMA" onclick="bayaransemua()">
                             </div>
                         </div>
                     </form>
@@ -152,4 +182,246 @@
         </div>
     </div>
 </div>
+
+<script>
+
+var api = '<?php echo $api_url ?>';
+
+$('input[type="checkbox"]').hide();
+
+var array_recno = [];
+
+var tarikhtawarruq = new Date("2021/1/1");
+var tarikhgadai = new Date("{{ $gadai['t_gadai'] }}");
+
+var kodcaw = "{{ $gadai['kodcaw'] }}";
+var norujukan = "{{ $gadai['norujukan'] }}";
+ 
+
+$( document ).ready(function() {
+    tebusan();
+});
+
+function tebusan()
+{
+    
+    if(tarikhgadai >= tarikhtawarruq)
+    {
+
+        //Upah Tawarruq
+        $.ajax({
+          method:'GET',
+          url: api + '/api/upahtawarruq/' + kodcaw + '/' + norujukan,
+          dataType: 'json',
+          success:function(data){
+            $('#jumlahupah').val(data);
+          }
+        });
+
+
+        //Tebus Tawarruq
+        $.ajax({
+          method:'GET',
+          url: api + '/api/tebustawarruq/' + kodcaw + '/' + norujukan,
+          dataType: 'json',
+          success:function(data){
+            $('#perludibayar').val(data);
+          }
+        });
+
+
+    }
+    else if(tarikhgadai < tarikhtawarruq)
+    {
+        //Upah Bukan Tawarruq
+        $.ajax({
+          method:'GET',
+          url: api + '/api/upahbukantawarruq/' + kodcaw + '/' + norujukan,
+          dataType: 'json',
+          success:function(data){
+            $('#jumlahupah').val(data);
+          }
+        });
+
+        //Tebus Bukan Tawarruq
+        $.ajax({
+          method:'GET',
+          url: api + '/api/tebusbukantawarruq/' + kodcaw + '/' + norujukan,
+          dataType: 'json',
+          success:function(data){
+            $('#perludibayar').val(data);
+          }
+        });
+
+
+
+
+    }
+
+    // Telah dibayar
+    $.ajax({
+          method:'GET',
+          url: api + '/api/transaction/' + norujukan,
+          dataType: 'json',
+          success:function(data){
+            var totaltelahdibayar = 0;
+
+            if(data == '')
+            {
+                $('#jumlahtelahdibayar').val(0);
+            }
+            else
+            {
+                $.each(data,function(index,transaksi){
+
+                    totaltelahdibayar += parseFloat(transaksi.duit_masuk);
+                });
+
+                $('#jumlahtelahdibayar').val(totaltelahdibayar);
+            }
+
+          }
+     });
+
+}
+
+if(tarikhgadai >= tarikhtawarruq)
+{
+          //Separuh Bayar Tawarruq
+    $(document).on('click', '#checkmarhun', function(e) {
+
+        var recno = $(this).data('recno');
+
+        if ($(this).is(':checked')) {
+            array_recno.push(recno);
+        }
+        else{
+            var rm = array_recno.findIndex(x => x === recno);
+            array_recno.splice(rm);
+        }
+        $.ajax({
+            method:'GET',
+            url: api + '/api/tebusseparuhtawarruq/' + kodcaw + '/' + norujukan,
+            dataType: 'json',
+            data:{
+            "array_recno" : array_recno
+            },
+            success:function(success){
+                $('#perludibayar').val(Number(success.toFixed(2)));
+            }
+        });
+    });
+
+          //checked box
+      var checkboxes = document.querySelectorAll('input[type="checkbox"]');
+      var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
+
+      if (checkedOne == false) {
+        $('#perludibayar').val(0);
+      }
+      else
+      {
+        $('#perludibayar').val(0);
+      }
+
+}
+    else if(tarikhgadai < tarikhtawarruq){
+                    //Separuh Bayar Bukan Tawarruq
+                    $(document).on('click', '#checkmarhun', function(e) {
+
+                    //checked box
+                    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
+                    var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
+
+
+                        var recno = $(this).data('recno');
+
+                        if ($(this).is(':checked')) {
+                            array_recno.push(recno);
+                        }
+                        else{
+                            var rm = array_recno.findIndex(x => x === recno);
+                            array_recno.splice(rm);
+                        }
+                        if (checkedOne == false) {
+                            $('#perludibayar').val(0);
+                        }
+                        else
+                        {
+                            $.ajax({
+                                method:'GET',
+                                url: api + '/api/tebusseparuhbukantawarruq/' + kodcaw + '/' + norujukan,
+                                dataType: 'json',
+                                data:{
+                                "array_recno" : array_recno
+                                },
+                                success:function(success){
+                                    $('#perludibayar').val(Number(success.toFixed(2)));
+                                },
+                                error: function (request, status, error) {
+                                    console.log(request.responseText);
+                                }
+                            });
+                        }
+                       
+
+                    });
+    }
+    
+
+  
+
+$("#sltjenistebus").change(function(){
+  
+    switch($(this).val()) {
+        case "T":
+        $('input[type="checkbox"]').hide();
+        $('span.spannar').show();
+        $("#bayaran").prop("disabled", true);
+
+        tebusan();
+        break;
+        case "A":
+        $('input[type="checkbox"]').hide();
+        $('span.spannar').show();
+        $("#bayaran").prop("disabled", false);
+
+        tebusan();
+        break;
+        case "S":
+        $('input[type="checkbox"]').show();
+        $('span.spannar').hide();
+        $("#bayaran").prop("disabled", false);
+
+        $('#perludibayar').val(0);
+        break;
+        case "P":
+        $('input[type="checkbox"]').hide();
+        $('span.spannar').show();
+        $("#bayaran").prop("disabled", false);
+        break;
+    }      
+
+});
+
+
+// function bayaransemua()
+// {
+//     var tarikhtawarruq = new Date("2021/1/1");
+//     var tarikhgadai = new Date("{{ $gadai['t_gadai'] }}");
+
+//     if(tarikhgadai >= tarikhtawarruq)
+//     {
+       
+//     }
+//     else if(tarikhgadai < tarikhtawarruq)
+//     {
+       
+//     }
+// }
+
+
+
+
+</script>
 @endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 704a77d..d8d26b9 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -33,7 +33,7 @@ Route::get('/pelanggan','CustomersController@index')->middleware('auth','teller'
 Route::get('/customer_info',['as'=>'customer_info','uses'=>'CustomersController@info'])->middleware('auth','teller');
 Route::get('/gadaian',['as'=>'gadaian','uses'=>'GadaianController@index'])->middleware('auth','teller');
 Route::get('/daftar_marhun',['as'=>'daftar_marhun','uses'=>'MarhunController@index'])->middleware('auth','teller');
-Route::get('/penebusan','PenebusanController@index')->middleware('auth','teller');
+Route::get('/penebusan/{norujukan}',['as'=>'penebusan','uses' => 'PenebusanController@index'])->middleware('auth','teller');
 Route::get('/aliran_tunai','AliranTunaiController@index')->middleware('auth','teller');
 Route::get('/harga_emas','HargaEmasController@index')->middleware('auth','teller');
 Route::get('/profile',['as'=>'profile','uses'=>'UserController@index'])->middleware('auth','teller');