@extends('layout.master')
@section('pageTitle')
  <title>Pawnshop Management System</title>
@endsection
@section('metaCSRF')
  <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('contents')
    <style>
    label {
      font-size:0.9em !important;
    }
    .pac-container {
      z-index: 99999999 !important;
    }
    .ui-front {
      z-index: 9999 !important;
    }
    .modal { overflow: auto !important; }
    #historyTransaction {
      z-index: 9999 !important;
    }
  </style>

  <!-- daterange picker -->
  <link rel="stylesheet" href="/theme/plugins/daterangepicker/daterangepicker.css">
  <link rel="stylesheet" href="/css/autocomplete-jquery-ui.css">
  <link rel="stylesheet" href="/theme/plugins/datatables-bs4/css/dataTables.bootstrap4.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">



  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Transaction <b>Reports</b></h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Reports</li>
              <li class="breadcrumb-item active">Transactions</li>
            </ol>
	          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-body">
                <div class="row">
                  <div class="col-md-2">
                    <input type="hidden" value="{{$currrentuser['branch']}}" id="transaction-branch"/>
                    <div class="form-group">
                      <label>Report Category:</label>
                      <select id="select-transaction-category" class="form-control form-control-sm">
                        <option value="">--select--</option>
                        <option value="JW">Jewelry</option>
                        <option value="ST">Storage</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group">
                      <label>Report Dates:</label>
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text">
                            <i class="far fa-calendar-alt"></i>
                          </span>
                        </div>
                        <input type="text" class="form-control form-control-sm float-right" id="reservation">
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="form-group">
                      <label>Report Status:</label>
                      <select id="select-transaction-status" class="form-control form-control-sm">
                        <option value="9">All</option>
                        <option value="0">New</option>
                        <option value="1">Renewed</option>
                        <option value="2">Redeemed</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <label>-</label>
                    <div class="form-group">
                      <input type="hidden" id="current-user-level" value="{{$currrentuser['level']}}" />
                      <button style="margin-left:5px;" id="generate-transaction-btn" type="button" class="btn btn-warning btn-sm form-control-sm"><i class="fas fa-search"></i> Search</button>
                      <button style="margin-left:5px;" id="print-transaction-btn" type="button" class="btn btn-success btn-sm form-control-sm">Print</button>
                      @if(isset($currrentuser['level']))
                        @if($isresetAllowed == true)
                          <button style="margin-left:5px;" id="delete-transaction-btn" type="button" class="btn btn-danger btn-sm form-control-sm">Delete</button>
                        @endif
                      @endif
                    </div>
                  </div>
                </div>
                <hr>
                <table id="transactiontable" class="table table-bordered table-hover">
                  <thead>
                    <tr style="background: #34cceb;">
                      <th>Transaction Date</th>
                      <th>Transaction Code</th>
                      <th>Papeleta No.</th>
                      <th>Branch</th>
                      <th>Customer</th>
                      <th>Amount</th>
                      <th>Adv Int.</th>
                      <th>Int.</th>
                      <th>Penalty</th>
                      <th>SrvCharge</th>
                      <th>DocStamp</th>
                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
                </table>
                <form id="delete-trans-form"></form>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>

  <div id="viewTransactionHistory" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content">
        <div class="modal-body">
          <div id="edit-new-transaction-view" style="border:1px solid rgba(0,0,0,0.1);padding:10px;background:rgba(0,0,0,0.04);display:none;">
            <form id="edit-new-transaction-form">
              <div style="padding:15px;">
                <hr>
                <h4 style="font-weight:600;font-size:1.1em;">Customer Details
                  <label class="float-right">Papeleta No.:
                    <input style="width:70px;padding-left:10px;font-weight:600;color:blue;border:none;background:transparent;"type="text" class="trans-input" id="trans-papeletanumber" name="papeletanumber" disabled>
                  </label>
                  <label class="float-right">Transaction Code:
                    <input style="padding-left:10px;font-weight:600;color:red;border:none;background:transparent;"type="text" class="trans-input" id="trans-transactioncode" name="transactioncode" disabled>
                  </label>
                </h4>
                <div class="row" style="margin-top:10px;">
                  <div class="col-md-3">
                      <div class="row" style="padding:10px;border:1px solid rgba(0,0,0,0.2);background:rgba(3, 144, 252,0.2);">
                        <div class="col-md-12" style="padding:0 !important;margin-bottom:10px;">
                          <img id="trans-customer-image" src="" style="width:100%;height:210px;" /><br>
                          <a href="" id="trans-editcustimage" data-toggle="modal" data-target="#customerProfile">View Full Details</a>
                        </div>
                      </div>
                  </div>
                  <div class="col-md-9">
                    <div style="padding:15px;margin-bottom:10px;background:rgba(3, 144, 252,0.2);">
                      <input type="hidden" value="{{$currrentuser['branch']}}" id="trans-userbranch" name="userbranch" />
                      <input type="hidden" value="{{$currrentuser['user']}}" id="trans-usercode" name="usercode" />
                      <div class="row">
                        <div class="col-md-3">
                          <div class="form-group">
                            <label>First Name</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-firstname" name="firstname">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label>Middle Name</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-middlename" name="middlename">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label>Last Name</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-lastname" name="lastname">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label>Customer Code</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-customercode" name="customercode" readonly>
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label>Branch Code</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-branchcode" name="branchcode">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label>Branch Name</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-branchname" name="branchname">
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="customeraddress">Present Address</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-address" = name="address">
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-3">
                          <div class="form-group">
                            <label for="customerbranch">Contact Number</label>
                            <input type="text" class="form-control form-control-sm trans-input trans-input" id="trans-contactnumber" name="contactnumber">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label for="customerbranch">ID Presented</label>
                            <select id="trans-idtype" name="idtype" class="form-control form-control-sm customer-input trans-input">
                              <option value="">--- Select Id ---</option>
                              <option value="sss">SSS</option>
                              <option value="gsis">GSIS</option>
                              <option value="government">Government ID</option>
                              <option value="school">School ID</option>
                              <option value="driverlicense">Driver's License</option>
                              <option value="prclicense">PRC License Card</option>
                              <option value="votersid">Voter's ID</option>
                              <option value="postal">Postal ID</option>
                              <option value="company">Company ID</option>
                              <option value="passport">Passport</option>
                              <option value="others">Others</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label for="customerbranch">ID Number</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-idnumber" name="idnumber">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label for="customerbranch">Employment</label>
                            <select id="trans-employment" name="employment" class="form-control form-control-sm customer-input trans-input">
                              <option value="employed">Employed</option>
                              <option value="self">Self-Employed</option>
                              <option value="business">Business Owner</option>
                              <option value="others">Others</option>
                            </select>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <hr>
                <h4 style="font-weight:600;font-size:1.1em;">Item Details</h4>
                <hr>
                <div class="row">
                  <div class="col-md-12">
                    <div class="row">
                      <div class="col-md-12">
                        <h3 class="card-title">Item List</h3>
                        <button style="display:none;" id="trans-add-item-transaction-modal-btn" type="button" class="btn btn-primary btn-sm float-right" data-toggle="modal" data-target="#addItemTransactionModal">Add New Item</button>
                        <br>
                        <table id="itemlisttable" class="table table-bordered table-hover" style="font-size:0.9em !important;">
                            <thead style="background:rgba(3, 144, 252,0.6);width:100% !important;">
                              <tr>
                                <th>Action</th>
                                <th>Type</th>
                                <th>Description</th>
                                <th>Quantity</th>
                                <th>Status</th>
                                <th>Value</th>
                                <th></th>
                              </tr>
                            </thead>
                            <tbody style="background:#fff;"></tbody>
                          </table>
                        <br>
                      </div>
                    </div>
                    <div style="padding:15px;margin-bottom:10px;background:rgba(3, 144, 252,0.2);">
                      <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                              <div class="col-md-4">
                                <div class="form-group">
                                  <label>Pawned Date</label>
                                  <div class="input-group">
                                    <div class="input-group-prepend">
                                      <span class="input-group-text">
                                        <i class="far fa-calendar-alt"></i>
                                      </span>
                                    </div>
                                    <input type="text" class="form-control form-control-sm float-right trans-input" id="trans-datepawned" name="datepawned" placeholder="yyyy-mm-dd" disabled>
                                    <div class="input-group-append">
                                      <span class="input-group-text">
                                        <i id="change-papeletano-btn" style="color:maroon;cursor:pointer;"class="fas fa-pencil-alt"></i>
                                      </span>
                                    </div>

                                  </div>
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="form-group">
                                  <label>Maturity Date</label>
                                  <div class="input-group">
                                    <div class="input-group-prepend">
                                      <span class="input-group-text">
                                        <i class="far fa-calendar-alt"></i>
                                      </span>
                                    </div>
                                    <input type="text" class="form-control form-control-sm float-right trans-input" id="trans-datemature" name="datemature" placeholder="yyyy-mm-dd" readonly>
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="form-group">
                                  <label>Last Day of Redemption</label>
                                  <div class="input-group">
                                    <div class="input-group-prepend">
                                      <span class="input-group-text">
                                        <i class="far fa-calendar-alt"></i>
                                      </span>
                                    </div>
                                    <input type="text" class="form-control form-control-sm float-right trans-input" id="trans-lastdayredeem" name="lastdayredeem" placeholder="yyyy-mm-dd" readonly>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="row" style="display:none">
                              <div class="col-md-4">
                                <div class="form-group">
                                  <label>New Trans Date</label>
                                  <div class="input-group">
                                    <div class="input-group-prepend">
                                      <span class="input-group-text">
                                        <i class="far fa-calendar-alt"></i>
                                      </span>
                                    </div>
                                    <input type="text" class="form-control form-control-sm float-right trans-input" id="trans-currentdate" name="currentdate" placeholder="yyyy-mm-dd" value="{{date('Y-m-d')}}">
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="form-group">
                                  <label>New Maturity Date</label>
                                  <div class="input-group">
                                    <div class="input-group-prepend">
                                      <span class="input-group-text">
                                        <i class="far fa-calendar-alt"></i>
                                      </span>
                                    </div>
                                    <input type="text" class="form-control form-control-sm float-right trans-input" id="new-trans-datemature" name="datemature" placeholder="yyyy-mm-dd" readonly>
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="form-group">
                                  <label>New Last Day of Redemption</label>
                                  <div class="input-group">
                                    <div class="input-group-prepend">
                                      <span class="input-group-text">
                                        <i class="far fa-calendar-alt"></i>
                                      </span>
                                    </div>
                                    <input type="text" class="form-control form-control-sm float-right trans-input" id="new-trans-lastdayredeem" name="lastdayredeem" placeholder="yyyy-mm-dd" readonly>
                                  </div>
                                </div>
                              </div>
                            </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-4">
                          <div class="form-group">
                            <label>Summary</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-transsummary" name="transsummary" />
                          </div>
                        </div>
                        <div class="col-md-4">
                          <div class="form-group">
                            <label>Remark</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-transremarks" name="transremarks" />
                          </div>
                        </div>
                        <div class="col-md-4">
                          <div class="form-group">
                            <label>Status</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-transstatus" name="transstatus" disabled/>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-2">
                           <div class="form-group">
                             <button id="history-transaction-btn" type="button" class="btn btn-primary btn-sm form-control form-control-sm" data-toggle="modal" data-target="#historyTransaction">History</button>
                           </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <hr>
              </div>
            </form>
            <form id="item-trans-table"></form>
          </div>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

  <div id="historyTransaction" class="modal fade">
    <div class="modal-dialog modal-xl" style="width:100%;">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Transaction History</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div style="padding:15px;margin-bottom:10px;background:rgba(0,0,0,0.08);">
            <div class="row">
              <div class="col-12">
                <div class="row">
                  <div class="col-md-3">
                    <label style="color:rgba(0,0,0,0.7);">Papeleta No.</label>
                  </div>
                  <div class="col-md-3">
                    <label style="color:rgba(0,0,0,0.7);">Transaction Date</label>
                  </div>
                  <div class="col-md-3">
                    <label style="color:rgba(0,0,0,0.7);">Amount</label>
                  </div>
                  <div class="col-md-3">
                    <label style="color:rgba(0,0,0,0.7);">Status</label>
                  </div>
                </div>
                <div id="accordion" class="historyTransactionHtml"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal -->
@endsection
@section('js')
<script src="/theme/plugins/moment/moment.min.js"></script>
<script src="/theme/plugins/daterangepicker/daterangepicker.js"></script>
<script src="/theme/plugins/datatables/jquery.dataTables.js"></script>
<script src="/theme/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>
<script src="/theme/dist/js/pages/dashboard.js"></script>
<script src="/theme/dist/js/demo.js"></script>

<script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js"></script>

<!-- bootstrap datepicker -->
<!-- AdminLTE App -->
<script>
  $('#cuttoffdate').datepicker({
    dateFormat: "yy-mm-dd",
    maxDate: new Date
  });
  var transactionArray = [];
  var dataTable = $('#transactiontable').DataTable({
    "scrollY":"auto",
    keys: true,
    draw: true,
    paging:   false,
    info:     false,
    });
  $('#reservation').daterangepicker();
  $('#reservation').on('change',function(event){
    $('#trans-date').val($(this).val());
  });
  $('#generate-transaction-btn').on('click',function(){
    generateTransactionList();
  });
  $('#print-transaction-btn').on('click',function(){
    var category = $('#select-transaction-category').val();
    var status = $('#select-transaction-status').val();
    var branch = $('#transaction-branch').val();
    var dates = $('#reservation').val();
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'transactions', type: 'branchreportprint', category: category, dates: dates, status: status, branch: branch},
        success:function(e){
          if(e){
            console.log(e);
            let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=0,height=0,left=-1000,top=-1000`;
            window.open("/report-branch-print-jewelry/"+e.url,'',params);
          }
        }
    });
  });
  $('#delete-transaction-btn').on('click',function(){
    var delr = confirm("Confirm Delete!");
    if (delr == true) {
      deletePawnedTransaction();
    }
  });
  $('#select-transaction-category').on('change',function(){
    $('#trans-category').val($(this).val());
  })
  var KYCDataTable = $('#kyctable').DataTable({
      keys: true,
      draw: true,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
  $('#add-customer-btn').on('click',function(event){
    event.preventDefault();
    $('#new-cus-success-msg').text('');
    $('#new-cus-error-msg').text('');
    $('.customer-input').css('border','1px solid rgba(0,0,0,0.08)');
    if(newImageFile == undefined) {
      $('#new-cus-error-msg').html('Error Encountered!<br>No Image Added!');
      $('#new-cus-error-msg').show();
    }
    else if(newImageFile == null) {
      $('#new-cus-error-msg').html('Error Encountered!<br>No Image Added!');
      $('#new-cus-error-msg').show();
    }
    else{
      $.ajax({
          url: '/add-customer-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: $('#add-customer-form').serialize(),
          success:function(e){
            if(e){
              console.log(e);
              if(e.code > 0){
                var errarr = e.msg;
                for(num in errarr){
                  if(errarr[num] == "branchname") $('#branch-select').css('border','1px solid red');
                  else if(errarr[num] == "nationality") $('#nationality-select').css('border','1px solid red');
                  else if(errarr[num] == "street") $('#address-street').css('border','1px solid red');
                  else if(errarr[num] == "province") $('#address-province').css('border','1px solid red');
                  else if(errarr[num] == "municipality") $('#address-municipality').css('border','1px solid red');
                  else if(errarr[num] == "barangay") $('#address-barangay').css('border','1px solid red');
                  $('#'+errarr[num]).css('border','1px solid red');
                }
                $('#new-cus-error-msg').html('Error Encountered!');
                $('#new-cus-error-msg').show();
              }
              else {
                $('#new-cus-success-msg').text('Customer Successfully Added!');
                $('#new-cus-success-msg').show();
                addCustomerImages($('#n-customercode').val(),$('#n-branchcode').val());
              }
            }
          }
      });
    }

  });
  $('#edit-customer-btn').on('click',function(event){
    event.preventDefault();
    $('.customer-input').css('border','1px solid rgba(0,0,0,0.08)');
    $('#edit-cus-success-msg').text('');
    $('#edit-cus-error-msg').text('');
    $.ajax({
        url: '/update-customer-details',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#edit-customer-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            if(e.code > 0){
              var errarr = e.msg;
              for(num in errarr){
                if(errarr[num] == "branchname") $('#e-branch-select').css('border','1px solid red');
                else if(errarr[num] == "nationality") $('#e-nationality-select').css('border','1px solid red');
                else if(errarr[num] == "street") $('#e-address-street').css('border','1px solid red');
                else if(errarr[num] == "province") $('#e-address-province').css('border','1px solid red');
                else if(errarr[num] == "municipality") $('#e-address-municipality').css('border','1px solid red');
                else if(errarr[num] == "barangay") $('#e-address-barangay').css('border','1px solid red');
                $('#e-'+errarr[num]).css('border','1px solid red');
              }
              $('#edit-cus-error-msg').text('Error Encountered!');
              $('#edit-cus-error-msg').show();
            }
            else {
              $('#edit-cus-success-msg').text('Customer Successfully Updated!');
              $('#edit-cus-success-msg').show();
              if(newImageFile != undefined) {
                addCustomerImages($('#e-customercode').val(),$('#e-branchcode').val());
              }
            }
        }
      }
    });
  });

  //getBranchList();
  function getBranchList(){
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'branch', type: 'list'},
        success:function(e){
          if(e){
            console.log(e);
            $('#select-transaction-branch').html('');
            var brnch = '<option value=""></option>';
            for(num in e){
              brnch = brnch + '<option value="'+e[num].branchcode+'">'+e[num].branchname+'</option>';
            }
            $('#select-transaction-branch').html(brnch);
          }
        }
    });
  }
  function getBranchCode(branchname){
    $.ajax({
        url: '/get-address-location',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {loctype: 'branchcode', locname: branchname},
        success:function(e){
          if(e){
            console.log(e);
            $('#n-branchcode').val(e.branchcode);
            $('#n-customercode').val(e.customercode);
          }
        }
    });
  }
  function getCustomerList(){
    $.ajax({
        url: '/get-address-location',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {loctype: 'customerlist'},
        success:function(e){
          if(e){
            //console.log(e);
            dataSet = [];
						for(num in e){
							dataSet.push([
								e[num].customercode,
								e[num].customername,
								e[num].customerbranch,
                0.00,
                '<button type="button" id="'+e[num].customercode+'" class="btn btn-info get-customer-btn" data-toggle="modal" data-target="#customerProfile">select</button>']
							);
						}
						dataTable.destroy();
						dataTable.draw();
						$('#customertable').DataTable({
							"scrollY":"360px",
							keys: true,
							data: dataSet,
							"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
							columns: [
								{ title: "Customer Code" },
								{ title: "Customer Code" },
                { title: "Branch" },
                { title: "Acc. Value" },
                { title: "" }
							]}),
							dataTable = $('#customertable').DataTable();
          }
        }
    });
  }
  function getCustomerDetails(customercode){
    $.ajax({
        url: '/get-address-location',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {loctype: 'customerdetails', code: customercode},
        success:function(e){
          if(e){
            console.log(e);
              var brgy = "";
              var municipality = "";
              var province = "";
              var street = "";
              for(num in e){
                if(num == "province") province = e[num];
                else if(num == "municipality") municipality = e[num];
                else if(num == "barangay") brgy = e[num];
                else if(num == "street") street = e[num];
                else $('#e-'+num).val(e[num]);
              }
              var address = street + " " + brgy + " " + municipality + " " + province;
              $("#e-address").val(address);
              if(e.image){
                $('#customer-image').prop('src',e.image);
                $('#customer-id-presented').prop('src',e.docimage);
              }
              getCustomerKYC(customercode);
          }
        }
    });
  }
  function getCustomerKYC(customercode){
    var filtdate = $('#date-filter').val();
    $.ajax({
        url: '/get-address-location',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {loctype: 'customerdetailskyc', code: customercode, fdate: filtdate},
        success:function(e){
          if(e){
            console.log(e);
            var kycDetails = e;
            var kycData = [];
            var totaltransamount = 0;
            var totaltranscount = 0;
            for(num in kycDetails){
              kycData.push([
                kycDetails[num].transdate,
                kycDetails[num].transactioncode,
                kycDetails[num].transactiontype,
                kycDetails[num].branch,
                kycDetails[num].receiver,
                kycDetails[num].relationship,
                kycDetails[num].purpose,
                kycDetails[num].transamount,
              ]);
              totaltranscount = totaltranscount + 1;
              totaltransamount = parseFloat(totaltransamount) + parseFloat(kycDetails[num].amount);
            }
            $('#number-of-trans').text(totaltranscount);
            $('#total-trans-amount').text(totaltransamount.toFixed(2));
            console.log(kycData);
            KYCDataTable.destroy();
            KYCDataTable.draw();
            $('#kyctable').DataTable({
              "scrollY":"300px",
              keys: true,
              data: kycData,
              "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
              columns: [
                { title: "Date" },
                { title: "Code" },
                { title: "Type" },
                { title: "Branch" },
                { title: "Receiver" },
                { title: "Relationship" },
                { title: "Purpose" },
                { title: "Amount" },
              ]}),
              KYCDataTable = $('#kyctable').DataTable();
          }
        }
    });
  }

  function generateTransactionList(){
    var category = $('#select-transaction-category').val();
    var status = $('#select-transaction-status').val();
    var branch = $('#transaction-branch').val();
    var dates = $('#reservation').val();
    var userlevel = $('#current-user-level').val();
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'transactions', type: 'branchreports', category: category, dates: dates, status: status, branch: branch },
        success:function(e){
          if(e){
            console.log(e);
            transactionArray = e;
            var transArray = [];
            for(num in e){
              var statusstr = e[num].statusstr;
              var adv = parseFloat(e[num].advintamnt);
              var int = parseFloat(e[num].intamnt);
              var pen = parseFloat(e[num].penamnt);
              var srv = parseFloat(e[num].srvcharge);
              var docst = parseFloat(e[num].docstamp);

              if(userlevel == "it"){
                statusstr = e[num].statusstr + ' <input id="'+e[num].code+'"type="checkbox" value="'+e[num].code+'" />';
              }
              else if(userlevel == "checker"){
                statusstr = e[num].statusstr + ' <input id="'+e[num].code+'"type="checkbox" value="'+e[num].code+'" />';
              }
              transArray.push([
                e[num].transdate,
                '<a href="" id="transselect1:'+e[num].transactionno+'" class="view-transaction-details" data-toggle="modal" data-target="#viewTransactionHistory">'+e[num].transactionno+'</a>',
                '<a href="" id="transselect2:'+e[num].transactionno+'" class="view-transaction-details" data-toggle="modal" data-target="#viewTransactionHistory">'+e[num].papeletano+'</a>',
                '<a href="" id="transselect3:'+e[num].transactionno+'" class="view-transaction-details" data-toggle="modal" data-target="#viewTransactionHistory">'+e[num].branchcode+'</a>',
                '<a href="" id="transselect4:'+e[num].transactionno+'" class="view-transaction-details" data-toggle="modal" data-target="#viewTransactionHistory">'+e[num].customername+'</a>',
                e[num].amount,
                numberWithCommas(adv.toFixed(2)),
                numberWithCommas(int.toFixed(2)),
                numberWithCommas(pen.toFixed(2)),
                numberWithCommas(srv.toFixed(2)),
                numberWithCommas(docst.toFixed(2)),
                statusstr,
              ]);
            }
            dataTable.destroy();
            dataTable.draw();
            $('#transactiontable').DataTable({
              "scrollY":"auto",
              keys: true,
              draw: true,
              paging:   false,
              info:     false,
              data: transArray,
              columns: [
                { title: "Transaction Date" },
                { title: "Transaction Code" },
                { title: "Papeleta No." },
                { title: "Branch" },
                { title: "Customer" },
                { title: "Amount" },
                { title: "Ad.Int" },
                { title: "Int" },
                { title: "Pen.Int" },
                { title: "SrvChrge" },
                { title: "DocStamp" },
                { title: "Status" }
              ]}),
              dataTable = $('#transactiontable').DataTable();
          }
        }
    });
  }
  function deletePawnedTransaction(){
    var itemList = '';
    $('#delete-trans-form').html('');
    itemList = itemList + '<input type="text" name="branch" value="'+$('#transaction-branch').val()+'"/>';
    itemList = itemList + '<input type="text" name="request" value="transactions"/>';
    itemList = itemList + '<input type="text" name="type" value="deletetrans"/>';
    $(':checkbox:checked').each(function(){
      var itemListId = $(this).attr('id');
      itemList = itemList + '<input type="hidden" value="'+itemListId+'" name="items[]" />'
      console.log(itemListId);
    });
    $('#delete-trans-form').html(itemList);
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#delete-trans-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            generateTransactionList();
            $('#delete-trans-form').html('');
          }
        }
    });
  }

  $(document).on('click','.get-customer-btn',function(event){
    var customercode = $(this).attr('id');
    console.log(customercode);
    getCustomerDetails(customercode);

  });
  $("#branch-select").on('change',function(){
    var brname = $(this).val();
    console.log(brname);
    getBranchCode(brname);
  });
  function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
</script>

<script>
  var listItemDatatable = $('#itemlisttable').DataTable({
    "scrollY":"auto",
    keys: true,
    draw: true,
    paging:   false,
    info:     false,
    "autoWidth": false,
    "ordering": false,
  });
  $(document).on('click','.view-transaction-details',function(event){
    event.preventDefault();
    var transIDsel = $(this).attr('id');
    console.log(transIDsel);
    var transIDsel2 = transIDsel.split(':');
    $('#edit-new-transaction-view').css('display','block');
    for(num in transactionArray){
      if(transactionArray[num].transactionno == transIDsel2[1]){
        console.log('local-details');
        console.log(transactionArray[num]);
        currentSelectedTrans = transactionArray[num];
        var transData = transactionArray[num];
        $('#trans-transactioncode').val(transData.transactionno);
        $('#trans-papeletanumber').val(transData.papeletano);
        $('#trans-datepawned').val(transData.datepawned2);
        $('#trans-datemature').val(transData.datemature2);
        $('#trans-lastdayredeem').val(transData.datelastredeem2);
        $('#trans-transsummary').val(transData.summary);
        $('#trans-transremarks').val(transData.remarks);
        $('#trans-customercode').val(transData.customercode);
        $('#trans-transstatus').val(transData.statusstr);
        $('#transaction-remarks').val(transData.auditremarks);
        //getTransactionItemsLocal(transData.transactionno, transData.papeletano);
        getTransactionItemsAudit(transData.transactionno, transData.papeletano);
        var iscustcode = transData.customercode;
        console.log(iscustcode);
        iscustcode = iscustcode.split("-");
        if(iscustcode.length > 1) getCustomerDetailsTransLocal(transData.customercode);
        else getCustomerDetailsTransLocal2(transData);
        // computeNewTransDates();
        var rateHtml = "";
        $('#trans-advintrate').html('');
        for(num in rateListTrans){
          if(rateListTrans[num].ratetype == 'AI') {
            var rateval = rateListTrans[num].value * 1;
            console.log(rateval);
            var ratevalueTmp = parseFloat(rateListTrans[num].value);
            if(rateval == transData.advintrate) rateHtml = rateHtml + '<option value="'+rateListTrans[num].ratecode+'-'+ratevalueTmp.toFixed(2)+'" selected="selected">'+ratevalueTmp.toFixed(2)+' %</option>';
            else rateHtml = rateHtml + '<option value="'+rateListTrans[num].ratecode+'-'+ratevalueTmp.toFixed(2)+'">'+ratevalueTmp.toFixed(2)+' %</option>';
          }
        }
        $('#trans-advintrate').html(rateHtml);
        $('#computation-div').css('display','none');
        if(transData.status == 2){
          $('#compute-transaction-btn').prop('disabled',true);
          $('#trans-currentdate').prop('disabled',true);
          $('#renew-transaction-btn').prop('disabled',true);
          $('#redeem-transaction-btn').prop('disabled',true);
          $('#custom-transaction-btn').prop('disabled',true);
          $('#update-transaction-btn').prop('disabled',true);
          $('#void-transaction-btn').prop('disabled',true);
        }
        else {
          $('#compute-transaction-btn').prop('disabled',false);
          $('#trans-currentdate').prop('disabled',false);
          $('#renew-transaction-btn').prop('disabled',false);
          $('#redeem-transaction-btn').prop('disabled',false);
          $('#custom-transaction-btn').prop('disabled',false);
          $('#update-transaction-btn').prop('disabled',false);
          $('#void-transaction-btn').prop('disabled',false);
        }
        $('#viewTransactionHistory').show();
      }
    }
  });
  $(document).on('shown.bs.modal', '#historyTransaction', function () {
      var transcode = $('#trans-transactioncode').val();
      $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'transactions', type: 'history', transcode: transcode },
        success:function(e){
          if(e){
            console.log(e);
            $('.historyTransactionHtml').html('');
            var isShow = "";
            var resLen = e.length;
            itemHistoryArr = [];
            for(num in e){
              if(num == (resLen - 1)) isShow = "show";
              else isShow = "";
              var itemsData = e[num].items;
              var itemHtml = '<table class="history-table" style="text-align:center;"><thead><th style="width:34%;">Description</th><th style="width:8%;">Qty</th><th style="width:8%;">Adv. Int</th><th style="width:8%;">Interest</th><th style="width:8%;">Penalty</th>'+
                             '<th style="width:8%;">Capital</th><th style="width:12%;">New Capital</th><th style="width:8%;">Amort</th><th style="width:8%;">Status</th><th style="width:5%;"></th></thead>';
              for(num1 in itemsData){
                var itemHtmlStr = '<tr>'+
                  '<td style="width:30%;" >'+itemsData[num1].summary+'</td>'+
                  '<td style="width:6%;">'+itemsData[num1].quantity+'</td>'+
                  '<td style="width:8%;">'+itemsData[num1].advint+'</td>'+
                  '<td style="width:8%;">'+itemsData[num1].interest+'</td>'+
                  '<td style="width:8%;">'+itemsData[num1].penalty+'</td>'+
                  '<td style="width:8%;">'+itemsData[num1].amount+'</td>'+
                  '<td style="width:12%;">'+itemsData[num1].capital+'</td>'+
                  '<td style="width:8%;">'+itemsData[num1].amort+'</td>'+
                  '<td style="width:8%;">'+itemsData[num1].status+'</td>'+
                  '<td style="width:8%;"><button id="'+itemsData[num1].id+'" class="select-item-history" type="button">view</button></td>'+
                '</tr>';
                itemHtml = itemHtml + itemHtmlStr;
                itemHistoryArr[itemsData[num1].id] = itemsData[num1];
              }
              itemHtml = itemHtml + '</table>';
              var innerHtmlData = '<div class="card">'+
                '<div class="card-header">'+
                  '<a class="card-link" data-toggle="collapse" href="#'+e[num].transactionno+'-'+e[num].translevel+'">'+
                    '<div class="row">'+
                      '<div class="col-md-3">'+e[num].papeletano+'</div>'+
                      '<div class="col-md-3">'+e[num].transdate+'</div>'+
                      '<div class="col-md-3">'+e[num].amountstr+'</div>'+
                      '<div class="col-md-3">'+e[num].statusstr+'</div>'+
                    '</div>'+
                  '</a>'+
                '</div>'+
                '<div id="'+e[num].transactionno+'-'+e[num].translevel+'" class="collapse '+isShow+'" data-parent="#accordion">'+
                  '<div class="card-body">'+
                    '<div class="row">'+
                      '<div class="col-md-4">'+
                        '<label>Capital: <span class="span-history">'+e[num].amountstr+'</span></label><br>'+
                        '<label>Adv. Interest ('+e[num].advintrate+' %): <span class="span-history">'+e[num].advintamnt+'</span></label><br>'+
                      '</div>'+
                      '<div class="col-md-4">'+
                        '<label>Interest ('+e[num].intrate+' %): <span class="span-history">'+e[num].intamnt+'</span></label><br>'+
                        '<label>Penalty ('+e[num].penrate+' %): <span class="span-history">'+e[num].penamnt+'</span></label><br>'+
                      '</div>'+
                      '<div class="col-md-4">'+
                        '<label>Srv. Charge: <span class="span-history">'+e[num].srvcharge+'</span></label><br>'+
                        '<label>Doc Stamp: <span class="span-history">'+e[num].docstamp+'</span></label><br>'+
                      '</div>'+
                    '</div>'+
                    '<div class="row">'+
                      '<div class="col-md-4">'+
                        '<label>Quantity: <span class="span-history">'+e[num].quantity+'</span></label><br>'+
                      '</div>'+
                      '<div class="col-md-4">'+
                        '<label>Net Proceeds: <span class="span-history">'+e[num].netproceeds+'</span></label><br>'+
                      '</div>'+
                      '<div class="col-md-4">'+
                        '<label>Amnt Collected: <span class="span-history">'+e[num].collected+'</span></label><br>'+
                      '</div>'+
                    '</div>'+
                    '<br>'+
                    '<label>Items</label>'+
                    '<div class="row">'+
                      '<div class="col-md-12">'+itemHtml+'</div>'+
                    '</div>'+

                  '</div>'+
                '</div>';
              $('.historyTransactionHtml').append(innerHtmlData);
            }
            console.log(itemHistoryArr);
          }
        }
      });
  });
  function getTransactionItemsAudit(transcode, papeletano){
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request:'transactions', type:'itemsaudit', param: transcode+":"+papeletano},
        success:function(e){
          if(e){
            console.log(e);
            itemListViewTransAudit(e);
            getTransactionItemCompute();
          }
        }
    });
  }
  function itemListViewTransAudit(e){
    console.log(e);
    var totalAmount = 0;
    var totalQuantity = 0;
    var itemSetList= [];
    itemTransListArr = e;
    for(num in e){
      var amountval = parseFloat(e[num].capital);
      var itmType ="-";
      if(e[num].itemtype == undefined){
        itmType = e[num].itemtype;
        if(itmType != '-'){
          itmType = itmType.split(':');
          itmType = itmType[1];
        }
      }
      itemSetList.push([
        'Audit Check',
        itmType,
        '<a id="'+e[num].transactionno+':'+e[num].code+'" href="" class="view-item-details">'+e[num].description+'</a>',
        e[num].quantity,
        e[num].status,
        amountval.toFixed(2),
        '-',
      ]);
      totalQuantity = parseInt(totalQuantity) + parseInt(e[num].quantity);
      totalAmount = parseFloat(totalAmount) + parseFloat(e[num].amount);
    }
    //console.log(itemSetList);
    listItemDatatable.destroy();
    listItemDatatable.draw();
    $('#itemlisttable').DataTable({
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      "ordering": false,
      data: itemSetList,
      "columnDefs": [
        { "width": "20%", "targets": 0 },
        { "width": "10%", "targets": 1 },
        { "width": "40%", "targets": 2 },
        { "width": "10%", "targets": 3 },
        { "width": "10%", "targets": 4 },
        { "width": "5%", "targets": 5 },
        { "width": "5%", "targets": 6 },
      ],
      columns: [
        { title: "Action" },
        { title: "Type" },
        { title: "Description" },
        { title: "Quantity" },
        { title: "Status" },
        { title: "Value" },
        { title: "" }
      ]}),
    listItemDatatable = $('#itemlisttable').DataTable();
    listItemDatatable.draw();
    listItemDatatable.columns.adjust();
    $('#trans-totalamount').val(totalAmount.toFixed(2));
    $('#trans-totalquantity').val(totalQuantity);
    //computeTransRates();
  }
  function getCustomerDetailsTransLocal(customercode){
    $('#checking-customer-notification').css('display','block');
    resetCustomerDetails();
    console.log('local-cust-details');
    console.log('local-cust-details-' + customercode);
    $.ajax({
        url: '/customer-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'customer', type: 'localcustdetails', code: customercode},
        success:function(e){
          console.log('local-cust-details-result-' + customercode);
          if(e){
            console.log(e);
              var brgy = "";
              var municipality = "";
              var province = "";
              var street = "";
              for(num in e){
                if(num == "municipality") municipality = e[num];
                else if(num == "barangay") brgy = e[num];
                else if(num == "street") street = e[num];
                else if(num == "province") province = e[num];
                else if(num == "mobilenumber")  $('#trans-contactnumber').val(e[num]);
                else if(num == "idtype") {
                  var idPres = e[num];
                  $('#trans-idtype').val(idPres.toLowerCase());
                }
                else $('#trans-'+num).val(e[num]);
              }
              var address = street + " " + brgy + " " + municipality + " " + province;
              $("#trans-address").val(address);
              var custdetails = '<span>Customer Code:</span> <b>'+e.customercode+'</b></br>'+
                '<span style="padding-right:10px;">First Name:</span> <b>'+e.firstname+'</b></br>'+
                '<span style="padding-right:10px;">Middle Name:</span> <b>'+e.middlename+'</b></br>'+
                '<span style="padding-right:10px;">Last Name:</span> <b>'+e.lastname+'</b></br>'+
                '<span style="padding-right:10px;">ID Type:</span> <b>'+e.idtype+'</b></br>'+
                '<span style="padding-right:10px;">ID Number:</span> <b>'+e.idnumber+'</b></br>'+
                '<span style="padding-right:10px;">Date of Birth:</span> <b>'+e.dateofbirth+'</b></br>'+
                '<span style="padding-right:10px;">Nationality:</span> <b>'+e.nationality+'</b></br>'+
                '<span style="padding-right:10px;">Mobile Number:</span> <b>'+e.mobilenumber+'</b></br>'+
                '<span style="padding-right:10px;">Source of Fund:</span> <b>'+e.sourceoffund+'</b></br>'+
                '<span style="padding-right:10px;">Building / Street:</span> <b>'+e.street+'</b></br>'+
                '<span style="padding-right:10px;">Barangay:</span> <b>'+e.barangay+'</b></br>'+
                '<span style="padding-right:10px;">Municipality:</span> <b>'+e.municipality+'</b></br>'+
                '<span style="padding-right:10px;">Province:</span> <b>'+e.province+'</b></br>'+
                '<span style="padding-right:10px;">Employment:</span> <b>'+e.employment+'</b></br>'+
                '<span style="padding-right:10px;">Company Name:</span> <b>'+e.companyname+'</b></br>';
              $('#customer-profile-details').html(custdetails);
              if(e.image){
                $('#trans-customer-image').prop('src',e.image);
              }
              if($('#trans-customercode').val() != ""){
                $('#trans-add-item-transaction-modal-btn').prop('disabled',false);
              }
          }
        }
    });
  }
  function resetCustomerDetails(){
    $('#customercode').val('');
    $('#firstname').val('');
    $('#middlename').val('');
    $('#lastname').val('');
    $('#branchname').val('');
    $('#branchcode').val('');
    $('#idtype').val('');
    $('#idnumber').val('');
    $('#dateofbirth').val('');
    $('#placeofbirth').val('');
    $('#nationality').val('');
    $('#contactnumber').val('');
    $('#address').val('');
    $('#transactioncode').val('');
    $('#customer-image').prop('src',null);
    $('#papeletanumber').val('');
    $('#datepawned').val('');
    $('#datemature').val('');
    $('#lastdayredeem').val('');
  }
  function getTransactionItemCompute(){
    var itemList = '';
    $(':radio:checked').each(function(){
      var itemListId = $(this).attr('id');
      itemListId = itemListId.split(':');
      var itemListValue = $('#itemval-'+itemListId[1]+'-value').val();
      var itemListData = itemListId[1]+':'+itemListId[2]+':'+itemListValue;
      itemList = itemList + '<input type="hidden" value="'+itemListData+'" name="items[]" />'
    });
    itemList = itemList + '<input type="hidden" name="transcode" value="'+$('#trans-transactioncode').val()+'"/>';
    itemList = itemList + '<input type="hidden" name="transdate" value="'+$('#trans-currentdate').val()+'"/>';
    itemList = itemList + '<input type="hidden" name="request" value="transactions"/>';
    itemList = itemList + '<input type="hidden" name="type" value="compute"/>';
    $('#item-trans-table').html(itemList);
    $.ajax({
      url: '/settings-request-test',
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type:'POST',
      data: $('#item-trans-table').serialize(),
      success:function(e){
        if(e){
          //console.log(e);
          var items = e.items;
          var itemHtml = "";
          var subAdvInt = 0;
          var subInt = 0;
          var subPen = 0;
          var subTotal = 0;
          var ispapeleta = false;
          for(num in items){
            var advinterest = items[num].advinterest;
            var interest = items[num].interest;
            var penalty = items[num].penalty;
            subAdvInt = subAdvInt + parseFloat(advinterest.value);
            subInt = subInt + parseFloat(interest.value);
            subPen = subPen + parseFloat(penalty.value);
            subTotal = subTotal + parseFloat(items[num].subTotal);
            var itemHtmlStr = '<tr>'+
              '<td style="width:32%;">'+items[num].description+'</td>'+
              '<td style="text-align:center;width:6%;">'+items[num].transtype+'</td>'+
              '<td style="text-align:right;width:8%;">'+parseFloat(advinterest.value).toFixed(2)+'</td>'+
              '<td style="text-align:right;width:8%;">'+parseFloat(interest.value).toFixed(2)+'</td>'+
              '<td style="text-align:right;width:8%;">'+parseFloat(penalty.value).toFixed(2)+'</td>'+
              '<td style="text-align:right;width:8%;">'+parseFloat(items[num].oldcapital).toFixed(2)+'</td>'+
              '<td style="text-align:right;width:10%;">'+parseFloat(items[num].capital).toFixed(2)+'</td>'+
              '<td style="text-align:right;width:8%;">'+parseFloat(advinterest.amort).toFixed(2)+'</td>'+
              '<td style="text-align:right;width:10%;">'+parseFloat(items[num].subTotal).toFixed(2)+'</td>'+
            '</tr>';
            if(items[num].transtype == "renew") ispapeleta = true;
            itemHtml = itemHtml + itemHtmlStr;
          }
          $('#compute-table-tbody').html(itemHtml);
          $('#trans-quantity').val(e.items.length);
          $('#trans-totalamount').val((parseFloat(subTotal) + parseFloat(e.servicecharge) + parseFloat(e.docstamp)).toFixed(2));
          $('#trans-advintrate').val(e.advintrate + '%');
          $('#trans-advintamnt').val(parseFloat(subAdvInt).toFixed(2));
          $('#trans-tenancy').val(e.tenancy);
          $('#trans-interestrate').val(e.interestrate+'%');
          $('#trans-interestamnt').val(parseFloat(subInt).toFixed(2));
          $('#trans-penaltyrate').val(e.penaltyrate+'%');
          $('#trans-penaltycharge').val(parseFloat(subPen).toFixed(2));
          $('#trans-srvcharge').val(parseFloat(e.servicecharge).toFixed(2));
          $('#trans-docstamp').val(parseFloat(e.docstamp).toFixed(2));
          if(ispapeleta){
            $('#trans-papeleta-no').prop('disabled',false);
            $('#trans-papeleta-no').val('');
          }
          else {
            $('#trans-papeleta-no').prop('disabled',true);
            $('#trans-papeleta-no').val($('#trans-papeletanumber').val());
          }
        }
      }
    });
  }
</script>

@endsection