erahn-click/resources/views/pembayaran/checkout.blade.php

@extends('layouts.app')

@section('content')
@include('layouts.headers.cards')

<!-- Header -->
<div class="header bg-primary pb-6">
  <div class="container-fluid">
    <div class="header-body">
      <div class="row align-items-center py-4">
        <div class="col-lg-6 col-7">

          <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
            <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
              <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fas fa-home"></i></a></li>
              <li class="breadcrumb-item"><a href="#">Semak SAG</a></li>
              <li class="breadcrumb-item"><a href="#">Senarai SAG</a></li>
              <li class="breadcrumb-item active" aria-current="page">Checkout</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Page content -->
<div class="container-fluid mt--6">

  <form method="post" action="{{ route('payment.engine') }}">
    @csrf

    <div class="row mt-5">
      <div class="col-xl-8 mb-5 mb-xl-0">
        <div class="card shadow">
          <div class="card-header border-0">
            <div class="row align-items-center">
              <div class="col">
                <h3 class="mb-0">Senarai Surat Gadaian</h3>
              </div>
              <div class="col text-right">
                <i class="fas fa-list-alt fa-2x"></i>
              </div>
            </div>
          </div>

          <div class="nav-wrapper">
            <ul class="nav nav-pills ml-2" id="tabs-icons-text" role="tablist">
              <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-icons-text-1-tab" data-toggle="tab" href="#tabs-icons-text-1" role="tab" aria-controls="tabs-icons-text-1" aria-selected="true">Ar-Rahn</a>
              </li>
              <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-2-tab" data-toggle="tab" href="#tabs-icons-text-2" role="tab" aria-controls="tabs-icons-text-2" aria-selected="false">Tawarruq</a>
              </li>
            </ul>
          </div>

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

              <div class="table-responsive table-striped text-center">
                <table class="table align-items-center table-flush" id="belum_tawarruq">
                  <thead class="thead-light">
                    <tr>
                      <th>No.</th>
                      <th>No Rujukan</th>
                      <th>Pembiayaan</th>
                      <th>Tempoh Simpan</th>
                      <th>Upah telah bayar</th>
                      <th>Upah semasa</th>
                      <th width="20%">Bayaran</th>
                    </tr>
                  </thead>
                  <tbody class="list">
                    @php $counter = 1;$jenisbayaran = 'arrahn'; @endphp
                    @foreach($arraybayar as $index=>$bayar)
                    @if($bayar['hargajualan'] == '')
                    @php
                    $koskeuntungan = Http::withOptions(['verify' => config('app.api_verify')])->get(config('api.url') . '/api/upahbukantawarruq/' . $bayar['kodcaw'] . '/' . $bayar['norujukan'])->json();
                    @endphp
                    <tr>
                      <td>
                        {{ $counter }}
                      </td>
                      <td>
                        {{ $bayar['norujukan'] }}
                      </td>
                      <td>
                        {{ number_format($bayar['pinjaman'],2) }}
                      </td>
                      <td>
                        {{ number_format($bayar['tempoh'],2) }}
                      </td>
                      <td>
                        {{ number_format($bayar['telahbayar'],2) }}
                      </td>
                      <td>
                        {{ number_format($koskeuntungan,2) }}
                      </td>
                      <td>
                        <select name="sltbayaran" class="form-control mb-2" data-upah="{{ $koskeuntungan }}" data-jenis="arrahn">
                          <option selected disabled>Pilih Bayaran</option>
                          <option value="fixed">Amaun Semasa</option>
                          {{-- <option value="otheramount">Amaun Lain</option> --}}
                        </select>

                        <input type="text" data-pinjaman="{{ $bayar['pinjaman'] }}" data-taglel="{{ $bayar['taglel'] }}" data-upah="{{ $koskeuntungan }}" data-nm="{{ $bayar['nilaimarhun'] }}" data-jenis="arrahn" name="txtbayaranarrahn" readonly class="form-control txtbayaran" />

                        <input type="hidden" name="txtbayaranhidden[]" class="bayaran" />
                        <input type="hidden" name="txtupahhidden[]" value="{{ $koskeuntungan }}" />
                        <input type="hidden" name="txtjbghidden[]" value="{{ $bayar['tempoh'] }}" />
                        <input type="hidden" name="txtjenisbayaran[]" value="{{ $jenisbayaran }}" />
                        <input type="hidden" name="txtnorujukanhidden[]" value="{{ $bayar['norujukan'] }}" />
                        <input type="hidden" name="txtkodcawhidden[]" value="{{ $bayar['kodcaw'] }}" />
                      </td>
                    </tr>
                    @php $counter++; @endphp
                    @endif
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>

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

              <div class="table-responsive table-striped text-center">
                <table class="table align-items-center table-flush" id="selepas_tawarruq">
                  <thead class="thead-light">
                    <tr>
                      <th>No</th>
                      <th>No Rujukan</th>
                      <th>Pembiayaan Asal</th>
                      <th>B. Pembiayaan</th>
                      <th>Tempoh</th>
                      <th>Keuntungan</th>
                      <th width="20%">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'],['jeniskeuntungan' => ($bayar['tagbaru'] == 1) ? 'onepercent' : 'asal'])->json();
                        @endphp
                        {{ $upahtawarruq }}
                      </td>
                      <td>

                        <select name="sltbayaran" class="form-control mb-2" data-upah="{{ $upahtawarruq }}" data-jenis="tawarruq">
                          <option selected disabled>Pilih Bayaran</option>
                          <option value="fixed">Amaun Semasa</option>
                          <option value="otheramount">Amaun Lain</option>
                        </select>

                        <input type="text" 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" />

                        <input type="hidden" name="txtbayaranhidden[]" class="bayaran" />
                        <input type="hidden" name="txtjenisbayaran[]" value="{{ $jenisbayaran }}" />
                        <input type="hidden" name="txtnorujukanhidden[]" value="{{ $bayar['norujukan'] }}" />
                        <input type="hidden" name="txtkodcawhidden[]" value="{{ $bayar['kodcaw'] }}" />
                      </td>
                    </tr>
                  </tbody>
                  @php $counter++; @endphp
                  @endif
                  @endforeach
                </table>
              </div>


            </div>

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


      <div class="col-xl-4">
        <div class="card shadow">
          <div class="card-header border-0">
            <div class="row align-items-center">
              <div class="col">
                <h3 class="mb-0">Ringkasan Pembayaran</h3>
              </div>
              <div class="col text-right">
                <i class="fas fa-shopping-cart fa-2x"></i>
              </div>
              <hr />
            </div>
          </div>

          <div class="form">

            <div class="row mb--4 font-weight-light">
              <div class="col-7">
                <label class="text-dark ml-4 ">Bayaran Ar-Rahn</label>
              </div>

              <div class="col-5 text-right pr-5">
                <span>RM <span id="spanbayaranarrahn">0.00</span></span>
              </div>
            </div>
            <hr />

            <div class="row mb--4 font-weight-light">
              <div class="col-7">
                <label class="text-dark ml-4 ">Bayaran Tawarruq</label>
              </div>

              <div class="col-5 text-right pr-5">
                <span>RM <span id="spanbayarantawarruq">0.00</span></span>
              </div>
            </div>
            <hr />


            {{-- <div class="row mb--4 font-weight-light">
                      <div class="col-7">
                        <label class="text-dark ml-4">Keuntungan</label>
                      </div>

                      <div class="col-5 text-right pr-5">
                        <span>RM <span id="spankeuntungan">0.00</span></span>
                      </div>
                    </div>
                    <hr/> --}}


            <div class="row pb-4 font-weight-light">
              <div class="col-7">
                <label class="text-dark ml-4">Jumlah Keseluruhan</label>
              </div>

              <div class="col-5 text-right pr-5">
                <span>RM <span id="spanjumlah">0.00</span></span>
              </div>
            </div>
          </div>

        </div>


        <div class="d-flex justify-content-end col-12 mt-3 align-self-end">
          <button type="submit" id="bayarsbmt" class="btn btn-primary" disabled onclick="loadingbtn();">Bayar</button>
        </div>
      </div>

    </div>

  </form>
</div>


<script>
  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>'
      }
    }
  });

  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>'
      }
    }
  });

  function validateform() {
    return false;
  }

  let total = 0;

  $("select[name=sltbayaran]").change(function(e) {
    let selected = $('option:selected', this).attr('value');
    let jenis = $(this).data('jenis');
    let upah = $(this).data('upah');
    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);
      calculateall(jenis, taglel);

    }
  });

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

    let upah = $(this).data('upah');
    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 = $(this).data('upah');
    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;
    }

    $(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() {
      sumtawarruq += parseFloat(this.value) || 0;

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

    sum = sumarrahn + sumtawarruq;

    if (counterrorbayar > 0) {
      $("#bayarsbmt").prop('disabled', true);
    } else {
      $("#bayarsbmt").prop('disabled', false);
    }

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

  if (document.addEventListener) {
    window.addEventListener('pageshow', function(event) {
        if (event.persisted || window.performance && window.performance.navigation.type == 2) {
          $('#logout-form').submit();
          // location.reload();
        }
      },
      false);
  }
</script>

@endsection