@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: 99 !important;
    }

    .ui-front {
      z-index: 9999 !important;
    }

    #confirmationDialog {
      z-index: 9999 !important;
    }

    #registrationdate {
      z-index: 9999 !important;
    }


    #editItemListModal {
      z-index: 9999 !important;
    }

    #viewItemListArrayModal {
      z-index: 9999 !important;
    }

    .modal { overflow: auto !important; }

    .number-input {
      text-align: right;
      font-size: 0.9em;
      font-weight: 600;
      color: blue;
    }

    .number-input2 {
      text-align: right;
      font-size: 0.9em;
      color: blue;
      width: 100%;
    }

    .trans-input {
      border: 1px solid rgba(0,0,0,0.1);
    }

    .dataTables_filter {
      display: none;
    }
    .renew-inputs {
      border: none;
      background: transparent;
    }
    .span-history {
      font-size:1.1em;
      color: maroon;
      padding-left:10px;
    }
    .history-table td {
      width: 11%;
      padding: 5px;
      border:1px solid rgba(0,0,0,0.1);
    }
    .history-table th {
      width: 11%;
      padding: 5px;
      border:1px solid rgba(0,0,0,0.1);
    }
    .history-table {
      padding: 10px;
    }
    .history-table thead {
      width: 100%;
      border:2px solid rgba(0,0,0,0.1);
    }

    .history-table tr {
      border:1px solid rgba(0,0,0,0.1);
    }

    .transaction-view-class {
      font-size:0.9em;
    }
    .transaction-view-class input {
      padding-left:5px;
    }
    .transaction-view-class span {
      color: #0791db;
    }

    .transaction-post-details span {
      color: #0791db;
    }

    .renew-inputs-text {
      color: #000 !important;
      font-weight: 600;
      float:right;
      font-size:0.9em;
    }

    .selected-item-value {
      text-align: right;
      color: blue;
      max-width: 100px;
      font-weight: 600;
    }
  </style>
  <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"><b>Storage</b> (Vehicle)</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">Storage</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card card-primary card-outline card-tabs">
              <div class="card-header p-0 pt-1 border-bottom-0">
                <ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" id="custom-tabs-two-new-tab" data-toggle="pill" href="#custom-tabs-two-new" role="tab" aria-controls="custom-tabs-two-new" aria-selected="true">New Transaction</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link " id="custom-tabs-two-search-tab" data-toggle="pill" href="#custom-tabs-two-search" role="tab" aria-controls="custom-tabs-two-search" aria-selected="false">Transaction Search</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="custom-tabs-two-draft-tab" data-toggle="pill" href="#custom-tabs-two-draft" role="tab" aria-controls="custom-tabs-two-draft" aria-selected="false">Draft</a>
                  </li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content" id="custom-tabs-two-tabContent">
                  <div class="tab-pane fade show active" id="custom-tabs-two-new" role="tabpanel" aria-labelledby="custom-tabs-two-new-tab">
                    <form id="add-new-vehicle-form">
                      <div style="padding:15px;">
                        <h4 style="font-weight:600;font-size:1.1em;">Customer Details <span id="warning-client-text" style="padding-left:50px;font-weight:600;color:red;display:none;">!Beware, Fake Client!</span>
                          <span id="checking-customer-notification" style="display:none;font-weight:normal;font-size:0.9em;color:rgba(0,0,0,0.5);" class="float-right">Checking customer. Please wait...</span></h4>
                        <div class="row">
                          <div class="col-md-3" style="display:none;">
                            <button id="refresh-customer-btn" type="button" class="btn btn-success btn-sm form-control form-control-sm">Refresh Customer List</button>
                          </div>
                          <div class="col-md-9">
                            <input id="customer-name-search" class="form-control form-control-sm" type="text" value="" placeholder="Search Customer Name" />
                          </div>
                          <div class="col-md-2">
                            <button id="search-customer-btn-local" type="button" class="btn btn-success btn-sm form-control form-control-sm" data-toggle="modal" data-target="#cusomerSearchList">Search</button>
                          </div>
                        </div>

                        <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="customer-image" src="" style="width:100%;height:210px;" /><br>
                                  <a href="" id="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="userbranch" name="userbranch" />
                              <input type="hidden" value="{{$currrentuser['user']}}" id="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="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="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="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="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="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="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="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="contactnumber" name="contactnumber">
                                  </div>
                                </div>
                                <div class="col-md-3">
                                  <div class="form-group">
                                    <label for="customerbranch">ID Presented</label>
                                    <select id="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="idnumber" name="idnumber">
                                  </div>
                                </div>
                                <div class="col-md-3">
                                  <div class="form-group">
                                    <label for="customerbranch">Employment</label>
                                    <select id="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>

                        <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-2">
                                    <div class="form-group">
                                      <label>Transaction Code</label>
                                      <input type="text" class="form-control form-control-sm trans-input" id="transactioncode" name="transactioncode" readonly>
                                    </div>
                                  </div>
                                  <div class="col-md-2">
                                    <div class="form-group">
                                      <label>Papeleta</label>
                                      <input type="text" class="form-control form-control-sm trans-input" id="papeletanumber" name="papeletanumber" onkeypress="return isNumberKey(event)">
                                    </div>
                                  </div>
                                  <div class="col-md-2">
                                    <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="datepawned" name="datepawned" placeholder="yyyy-mm-dd">
                                      </div>
                                    </div>
                                  </div>
                                  <div class="col-md-2">
                                    <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="datemature" name="datemature" placeholder="yyyy-mm-dd">
                                      </div>
                                    </div>
                                  </div>
                                  <div class="col-md-4">
                                    <div class="form-group">
                                      <label>Summary</label>
                                      <input type="text" class="form-control form-control-sm trans-input" id="transsummary" name="transsummary" />
                                    </div>
                                  </div>
                                </div>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-2">
                              <div class="form-group">
                                <label for="isoldtrans">Is Old Trans?</label>
                                <select id="isoldtrans" name="isoldtrans" class="form-control form-control-sm customer-input trans-input">
                                  <option value="Yes">Yes</option>
                                  <option value="No">No</option>
                                </select>
                              </div>
                            </div>
                            <div class="col-md-2">
                              <div class="form-group">
                                <label>Old Papeleta No.</label>
                                <input type="text" class="form-control form-control-sm trans-input" id="controlno" name="controlno" />
                              </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">
                                <div class="row">
                                  <div class="col-md-3">
                                    <div class="form-group">
                                      <button id="add-item-storage-modal-btn" type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addItemStorageVehicleModal">Add New Item</button>
                                      <a href="" id="refresh-item-list" class="btn btn-success btn-sm" style="margin-left:10px;"><i class="fas fa-1x fa-sync-alt"></i></a>
                                    </div>
                                  </div>
                                </div>
                                <table id="storageItemTable" class="table table-bordered" style="font-size:0.9em !important;">
                                  <thead style="background:rgba(3, 144, 252,0.6);">
                                    <tr>
                                      <th>Id</th>
                                      <th>Type</th>
                                      <th>Description</th>
                                      <th>Plate No.</th>
                                      <th>Amount</th>
                                      <th>Incentive</th>
                                      <th></th>
                                    </tr>
                                  </thead>
                                  <tbody style="background:#fff;">
                                  </tbody>
                                </table>
                              </div>
                              <div class="col-md-12">
                                <div style="border:1px solid rgba(0,0,0,0.1);padding:25px;background: rgba(0,0,0,0.08);">
                                  <div class="row">
                                    <div class="col-md-6">
                                      <div class="row">
                                        <div class="col-md-6">
                                           <div class="form-group">
                                             <label>Total Quantity</label>
                                           </div>
                                           <div class="form-group">
                                             <label>Interest (<span id="interest-rate"></span>%)</label>
                                           </div>
                                           <div class="form-group">
                                             <label>Service Charge (<span id="srvcharge-rate"></span>%)</label>
                                           </div>
                                        </div>
                                        <div class="col-md-6">
                                           <div class="form-group">
                                             <input type="text" class="form-control form-control-sm number-input trans-input" id="totalquantity" name="totalquantity" value="0" readonly>
                                           </div>
                                           <div class="form-group">
                                             <input type="hidden" class="form-control form-control-sm number-input trans-input" id="interestrate" name="interestrate" value="0.00" readonly>
                                             <input type="text" class="form-control form-control-sm number-input trans-input" id="interestamnt" name="interestamnt" value="0.00" readonly>
                                           </div>
                                           <div class="form-group">
                                             <input type="hidden" class="form-control form-control-sm number-input trans-input" id="srvchargerate" name="srvchargerate" value="0.00" readonly>
                                             <input type="text" class="form-control form-control-sm number-input trans-input" id="srvcharge" name="srvcharge" value="0.00" readonly>
                                           </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="col-md-6">
                                      <div class="row" style="padding-left:20px;">
                                        <div class="col-md-6">
                                          <div class="form-group">
                                            <label>Total Amount</label>
                                          </div>
                                           <div class="form-group">
                                             <label>Processing Fee (<span id="processfee-rate"></span>%)</label>
                                           </div>
                                           <div class="form-group">
                                             <label>Net Proceeds</label>
                                           </div>
                                        </div>
                                        <div class="col-md-6">
                                           <div class="form-group">
                                             <input type="text" class="form-control form-control-sm number-input trans-input" id="totalamount" name="totalamount" value="0.00" readonly>
                                           </div>
                                           <div class="form-group">
                                             <input type="hidden" class="form-control form-control-sm number-input trans-input" id="processfeerate" name="processfeerate" value="0.00" readonly>
                                             <input type="text" class="form-control form-control-sm number-input trans-input" id="processfee" name="processfee" value="0.00" readonly>
                                           </div>
                                           <div class="form-group">
                                             <input type="text" class="form-control form-control-sm number-input trans-input" id="netproceeds" name="netproceeds" value="0.00" readonly>
                                           </div>
                                        </div>
                                      </div>
                                      <hr style="margin-top:0px;">
                                      <div class="row" style="padding-left:20px;">
                                        <div class="col-md-6"></div>
                                        <div class="col-md-6">
                                           <div class="form-group">
                                              <button id="confirm-transaction-btn" type="button" class="btn btn-success btn-sm form-control form-control-sm">Confirm Transaction</button>
                                              <button id="save-to-draft-btn" type="button" style="margin-top:5px;" class="btn btn-warning btn-sm form-control form-control-sm">Save to Draft</button>
                                           </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>
                  <div class="tab-pane fade " id="custom-tabs-two-search" role="tabpanel" aria-labelledby="custom-tabs-two-search-tab">
                    <div style="padding:15px;">
                      <h4 style="font-weight:600;font-size:1.1em;">Search Transaction <span id="checking-customer-notification" style="display:none;font-weight:normal;font-size:0.9em;color:rgba(0,0,0,0.5);" class="float-right">Checking customer. Please wait...</span></h4>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="input-group input-group-sm">
                            <input id="trans-search-text" type="text" class="form-control" placeholder="Search Here...">
                            <span class="input-group-append">
                              <button id="trans-search-button" type="button" class="btn btn-info btn-flat"><i class="fas fa-search"></i></button>
                            </span>
                          </div>
                        </div>
                      </div>
                      <hr>
                      <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>
                                <i id="change-papeletano-btn" style="color:maroon;cursor:pointer;"class="fas fa-pencil-alt"></i>
                              </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>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">
                                          <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="compute-transaction-btn" type="button" class="btn btn-success btn-sm form-control form-control-sm" data-toggle="modal" data-target="#computeTransactionRates">Compute</button>
                                       </div>
                                    </div>
                                    <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>
                                    @if($currrentuser['level'] =='it')
                                      <div class="col-md-2">
                                         <div class="form-group">
                                            <button id="edit-transaction-btn" type="button" class="btn btn-info btn-sm form-control form-control-sm" data-toggle="modal" data-target="#updateTransactionDetails">Change</button>
                                         </div>
                                      </div>
                                    @endif
                                    <div class="col-md-2">
                                       <div class="form-group">
                                          <button id="void-transaction-btn" type="button" class="btn btn-danger btn-sm form-control form-control-sm">Void</button>
                                       </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </form>
                        <form id="item-trans-table"></form>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="custom-tabs-two-draft" role="tabpanel" aria-labelledby="custom-tabs-two-draft-tab">
                    <div style="padding:15px;">
                      <h4 style="font-weight:600;font-size:1.1em;">Draft Transaction <span id="checking-customer-notification" style="display:none;font-weight:normal;font-size:0.9em;color:rgba(0,0,0,0.5);" class="float-right">Checking customer. Please wait...</span></h4>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="input-group input-group-sm">
                            <input id="trans-search-text" type="text" class="form-control" placeholder="Search Here...">
                            <span class="input-group-append">
                              <button id="trans-search-draft-button" type="button" class="btn btn-warning btn-flat"><i class="fas fa-search"></i></button>
                            </span>
                          </div>
                        </div>
                      </div>
                      <hr>
                      <div class="row">
                        <div class="col-md-12">
                          <table id="drafttable" class="table table-bordered table-hover" style="  font-size:0.9em !important;">
                            <thead style="width:100% !important;">
                              <tr>
                                <th>Customer Code</th>
                                <th>Customer Name</th>
                                <th>Item Count</th>
                                <th>Papeleta No.</th>
                                <th>User Code</th>
                                <th>Date Created</th>
                                <th></th>
                              </tr>
                            </thead>
                            <tbody style="background:#fff;">
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                </div>
              </div>
              <!-- /.card -->
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- Modal -->

  <div id="addItemStorageVehicleModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Add Item</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <form id="add-item-vehicle-form">
            <input id="itemcode" name="itemcode" value="" type="hidden" />
            <div style="padding:15px;margin-bottom:10px;background:rgba(0,0,0,0.08);">
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemtype">Vehicle Type</label>
                    <input type="hidden" id="vehicle-type" = name="storagetype" value="SRV:Vehicle">
                    <select class="form-control form-control-sm" id="vehiclecategory" name="vehiclecategory"></select>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemtype">Vehicle Brand</label>
                    <select class="form-control form-control-sm" id="vehiclebrand" name="vehiclebrand"></select>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">Model/Series</label>
                    <input type="text" class="form-control form-control-sm" id="modelseries" name="modelseries">
                  </div>
                </div>

                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">MV Number</label>
                    <input type="text" class="form-control form-control-sm" id="mvnumber" name="mvnumber">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">Chasis Number</label>
                    <input type="text" class="form-control form-control-sm" id="chasisnumber" name="chasisnumber">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">Plate Number</label>
                    <input type="text" class="form-control form-control-sm" id="platenumber" name="platenumber">
                  </div>
                </div>

                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">OR Number</label>
                    <input type="text" class="form-control form-control-sm" id="ornumber" name="ornumber">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">CR Number</label>
                    <input type="text" class="form-control form-control-sm" id="crnumber" name="crnumber">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">Registration 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="registrationdate" name="registrationdate" placeholder="yyyy-mm-dd">
                    </div>
                  </div>
                </div>

                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">Owners Name</label>
                    <input type="text" class="form-control form-control-sm" id="ownersname" name="ownersname">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">Drivers License</label>
                    <input type="text" class="form-control form-control-sm" id="driverlicense" name="driverlicense">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">With Vehicle</label>
                    <select class="form-control form-control-sm" id="withvehicle" name="withvehicle">
                      <option value="Yes">Yes</option>
                      <option value="No">No</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemvalue">Appraised Value</label>
                    <input type="text" class="form-control form-control-sm" id="vehiclevalue" name="vehiclevalue" onkeypress="return isNumberKey(event)">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemvalue">Incentives</label>
                    <input type="text" class="form-control form-control-sm" id="incentives" name="incentives" onkeypress="return isNumberKey(event)" readonly>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button id="add-item-vehicle-btn" class="btn btn-info btn-sm" class="close" data-dismiss="modal">Add Item</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <div id="editItemStorageVehicleModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Add Item</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <form id="add-item-vehicle-form">
            <input id="itemcode" name="itemcode" value="" type="hidden" />
            <div style="padding:15px;margin-bottom:10px;background:rgba(0,0,0,0.08);">
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemtype">Vehicle Type</label>
                    <input type="hidden" id="vehicle-type" = name="storagetype" value="SRV:Vehicle">
                    <select class="form-control form-control-sm" id="vehiclecategory" name="vehiclecategory"></select>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemtype">Vehicle Brand</label>
                    <select class="form-control form-control-sm" id="vehiclebrand" name="vehiclebrand"></select>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">Model/Series</label>
                    <input type="text" class="form-control form-control-sm" id="modelseries" = name="modelseries">
                  </div>
                </div>

                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">MV Number</label>
                    <input type="text" class="form-control form-control-sm" id="mvnumber" = name="mvnumber">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">Chasis Number</label>
                    <input type="text" class="form-control form-control-sm" id="chasisnumber" = name="chasisnumber">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">Plate Number</label>
                    <input type="text" class="form-control form-control-sm" id="platenumber" = name="platenumber">
                  </div>
                </div>

                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">OR Number</label>
                    <input type="text" class="form-control form-control-sm" id="ornumber" = name="ornumber">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">CR Number</label>
                    <input type="text" class="form-control form-control-sm" id="crnumber" = name="crnumber">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">Registration Date</label>
                    <input type="text" class="form-control form-control-sm" id="registrationdate" = name="registrationdate">
                  </div>
                </div>

                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">Owners Name</label>
                    <input type="text" class="form-control form-control-sm" id="ownersname" = name="ownersname">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">Drivers License</label>
                    <input type="text" class="form-control form-control-sm" id="driverlicense" = name="driverlicense">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemdescription">With Vehicle</label>
                    <select class="form-control form-control-sm" id="withvehicle" name="withvehicle">
                      <option value="Yes">Yes</option>
                      <option value="No">No</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="itemvalue">Appraised Value</label>
                    <input type="text" class="form-control form-control-sm" id="vehiclevalue" name="vehiclevalue" onkeypress="return isNumberKey(event)">
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button id="add-item-vehicle-btn" class="btn btn-info btn-sm" class="close" data-dismiss="modal">Add Item</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <div id="editItemStorageModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Edit Item <b id="edit-storage-category-text"></b></h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <form id="edit-item-storage-form">
            <input id="edit-itemcode" name="itemcode" value="" type="hidden" />
            <div style="padding:15px;margin-bottom:10px;background:rgba(0,0,0,0.08);">
              <div class="row">
                <div class="col-md-3">
                  <div class="form-group">
                    <label for="itemtype">Item Type</label>
                    <input type="hidden" id="edit-storage-type" = name="storagetype" value="SRV:Vehicle">
                    <select class="form-control form-control-sm" id="edit-storagecategory" name="storagecategory"></select>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label for="itemtype">Item Brand</label>
                    <select class="form-control form-control-sm" id="edit-storagebrand" name="storagebrand"></select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="itemdescription">Description</label>
                    <input type="text" class="form-control form-control-sm" id="edit-storagedescription" = name="storagedescription">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label for="itemquantity">Quantity</label>
                    <input type="number" class="form-control form-control-sm" id="edit-storagequantity" name="storagequantity" onkeypress="return isNumberKey(event)" value="1">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label for="itemvalue">Appraised Value</label>
                    <input type="text" class="form-control form-control-sm" id="edit-storagevalue" name="storagevalue" onkeypress="return isNumberKey(event)">
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button id="edit-item-storage-btn" class="btn btn-info btn-sm" class="close" data-dismiss="modal">Update Item</button>
          <button id="delete-item-storage-btn" class="btn btn-danger btn-sm" class="close" data-dismiss="modal">Delete Item</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <div id="customerProfile" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
      <div class="modal-content auto-selector">
          <div class="modal-header" style="background:#fffef0;">
            <h4 class="modal-title"style="font-size:1em;font-weight:600;">Customer Details</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body" style="background:#deffff;">
            <div id="customer-profile-details"></div>
          </div>
        <hr>
      </div>
    </div>
  </div>

  <div id="confirmationDialog" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" style="color:green;" >Successful</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <label style="font-weight:500;">Transaction Code:</label> <span id="response-transactioncode" style="color:rgba(0,0,0,0.6);font-size:1.1em;font-weight:600;"></span>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button id="print-document-btn" type="button" class="btn btn-primary">Print Documents</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

  <div id="transactionListModal" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content">
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <table id="transactiontable" class="table table-bordered table-hover" style="  font-size:0.9em !important;">
                <thead style="width:100% !important;">
                  <tr>
                    <th>Transaction No.</th>
                    <th>Papeleta No.</th>
                    <th>Customer Name</th>
                    <th>Net Proceeds</th>
                    <th>Date Pawned</th>
                    <th>Date Mature</th>
                    <th>Status</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody style="background:#fff;">
                </tbody>
              </table>
            </div>
          </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>

  <div id="computeTransactionRates" 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 Details</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div style="padding:15px;margin-bottom:10px;">
            <div class="row">
              <div class="col-12">
                <div id="computation-div">
                  <div class="row">
                    <div class="col-md-12">
                      <table style="font-size:0.9em;width:100%;background:#fff;border:1px solid rgba(0,0,0,1);" class="history-table">
                        <thead style="background:rgba(3, 144, 252,0.2);">
                          <th style="width:32% !important;">Description</th>
                          <th style="text-align:center;width:8%;">Action</th>
                          <th style="text-align:center;width:8%;">Interest</th>
                          <th style="text-align:center;width:8%;">Proc.Fee</th>
                          <th style="text-align:center;width:8%;">Penalty</th>
                          <th style="text-align:center;width:8%;">Capital</th>
                          <th style="text-align:center;width:10%;">New Capital</th>
                          <th style="text-align:center;width:8%;">Amort</th>
                          <th style="text-align:center;width:10%;">Sub Total</th>
                        </thead>
                        <tbody id="compute-table-tbody">
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <br>
                  <div style="border:1px solid rgba(0,0,0,0.1);padding:20px;">
                    <div class="row">
                      <div class="col-md-4">
                          <div class="row">
                            <div class="col-md-6">
                               <div class="form-group">
                                 <label>Int. Rate</label>
                               </div>
                               <div class="form-group">
                                 <label>Int. Value</label>
                               </div>
                               <div class="form-group">
                                 <label>Penalty Rate</label>
                               </div>
                               <div class="form-group">
                                 <label>Penalty Value</label>
                               </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group">
                                <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-advintrate" name="advintrate" value="0" readonly>
                              </div>
                               <div class="form-group">
                                 <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-advintamnt" name="advintamnt" value="0" readonly>
                               </div>
                               <div class="form-group">
                                 <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-penaltyrate" name="penaltyrate" value="0" readonly>
                               </div>
                               <div class="form-group">
                                 <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-penaltycharge" name="penaltycharge" value="0.00" readonly>
                               </div>
                            </div>
                          </div>
                      </div>
                      <div class="col-md-4" style="padding-left:20px;">
                          <div class="row">
                            <div class="col-md-6">
                               <div class="form-group">
                                 <label>Proc. Fee Rate</label>
                               </div>
                               <div class="form-group">
                                 <label>Proc. Fee Value</label>
                               </div>
                               <div class="form-group">
                                 <label>Quantity</label>
                               </div>
                               <div class="form-group">
                                 <label>Service Charge</label>
                               </div>
                            </div>
                            <div class="col-md-6">
                               <div class="form-group">
                                 <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-processfeerate" name="processfeerate" value="0" readonly>
                               </div>
                               <div class="form-group">
                                 <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-processfeeamnt" name="processfeeamnt" value="0.00" readonly>
                               </div>
                               <div class="form-group">
                                 <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-quantity" name="quantity" value="" readonly>
                               </div>
                               <div class="form-group">
                                 <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-srvcharge" name="srvcharge" value="0.00" onkeypress="return isNumberKey(event)">
                               </div>
                            </div>
                          </div>
                      </div>
                      <div class="col-md-4" style="padding-left:20px;">
                          <div class="row">
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Papeleta No.</label>
                              </div>
                               <div class="form-group">
                                 <label>Tenancy</label>
                               </div>
                               <div class="form-group">
                                 <label>Incentive</label>
                               </div>
                               <div class="form-group">
                                 <label>Total Amount</label>
                               </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group">
                                <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-papeleta-no" name="papeletano" value="">
                              </div>

                               <div class="form-group">
                                 <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-tenancy" name="tenancy" value="0 %" readonly>
                               </div>
                               <div class="form-group">
                                 <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-incentive" name="incentive" value="0.00" readonly>
                               </div>
                               <div class="form-group">
                                 <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-totalamount" name="totalamount" value="0.00" readonly>
                               </div>
                               <div class="form-group">
                                  <button id="confirm-update-transaction-btn" type="button" class="btn btn-warning btn-sm form-control form-control-sm">Confirm</button>
                                  <button style="margin-top:10px;" type="button" class="btn btn-default btn-sm form-control form-control-sm" data-dismiss="modal">Close</button>
                               </div>
                            </div>
                          </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="cusomerSearchList" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content">
        <div class="modal-body">
          <h2 id="searching-text">Searching.. Please Wait..</h2>
          <input type="text" class="form-control" id="myInputTextField" placeholder="Search Name">
          <hr>
          <div class="row">
            <div class="col-md-12">
              <table id="customersearchtable" class="table table-bordered table-hover" style="  font-size:0.9em !important;">
                <thead style="width:100% !important;">
                  <tr>
                    <th>Customer Code</th>
                    <th>Customer Name</th>
                    <th>Branch Code</th>
                    <th>Branch Name</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody style="background:#fff;"></tbody>
              </table>
            </div>
          </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="updateTransactionDetails" class="modal fade">
    <div class="modal-dialog modal-md" style="width:100%;">
      <div class="modal-content">
        <div class="modal-header">
          <label class="modal-title">Transaction No: </label>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div style="padding:15px;margin-bottom:10px;">
            <form id="edit-transaction-frorm">
              <input type="hidden" id="edit-transactioncode" name="transactionno" value="">
              <input type="hidden" id="edit-oldpapeletano" name="oldpapeletano" value="">
              <input type="hidden" name="request" value="transactions">
              <input type="hidden" name="type" value="edit">
              <input type="hidden" name="transtype" value="Storage">
              <input type="hidden" name="storagetype" value="Gadgets">
              <div class="row">
                <div class="col-md-6">
                  <label>Papeleta No.</label>
                   <div class="form-group">
                     <input type="text" class="form-control form-control-sm float-right trans-input" id="edit-papeletano" name="papeletano" placeholder="yyyy-mm-dd" value="">
                   </div>
                </div>
                <div class="col-md-6">
                  <label>Date Pawned</label>
                   <div class="form-group">
                     <input type="text" class="form-control form-control-sm float-right trans-input" id="edit-datepawned" name="datepawned" placeholder="yyyy-mm-dd" value="">
                   </div>
                </div>
                <div class="col-md-6">
                  <label>Date Mature</label>
                   <div class="form-group">
                     <input type="text" class="form-control form-control-sm float-right trans-input" id="edit-datemature" name="datemature" placeholder="yyyy-mm-dd" value="">
                   </div>
                </div>
                <div class="col-md-6">
                  <label>Date Redeem</label>
                   <div class="form-group">
                     <input type="text" class="form-control form-control-sm float-right trans-input" id="edit-dateredeem" name="dateredeem" placeholder="yyyy-mm-dd" value="{{date('Y-m-d')}}">
                   </div>
                </div>
                <div class="col-md-6">
                  <label>-</label>
                   <div class="form-group">
                     <button id="change-transaction-btn" type="button" class="btn btn-warning btn-sm form-control form-control-sm">Update</button>
                   </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection
@section('js')
  <!-- <script src="/theme/plugins/jquery/jquery.min.js"></script>
  <script src="/theme/plugins/jquery-ui/jquery-ui.min.js"></script>
  <script src="/theme/plugins/bootstrap/js/bootstrap.bundle.min.js"></script> -->
  <!-- <script src="/theme/dist/js/adminlte.js"></script> -->
  <script src="/theme/dist/js/pages/dashboard.js"></script>
  <script src="/theme/dist/js/demo.js"></script>
  <script src="/theme/plugins/datatables/jquery.dataTables.js"></script>
  <script src="/theme/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>
  <script src="/js/storage-vehicle-add.js"></script>
  <!-- <script src="/js/storage-compute.js"></script> -->
  <!-- <script src="/js/transaction-update.js"></script> -->
  <!-- Transaction Add -->
  <script>
    function isNumberKey(evt){
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode != 46 && charCode > 31
          && (charCode < 48 || charCode > 57))
           return false;

        return true;
     }
    $("#nationality-select").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'countries', locname: $("#nationality-select").val()},
            success:function(e){
              if(e){
                console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $("#address-province").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'province', locname: $("#address-province").val()},
            success:function(e){
              if(e){
                console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $("#address-municipality").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'municipality', province: $("#address-province").val(), locname: $("#address-municipality").val()},
            success:function(e){
              if(e){
                console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $("#address-barangay").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'barangay', province: $("#address-province").val(), municipality: $("#address-municipality").val(), locname: $("#address-barangay").val()},
            success:function(e){
              if(e){
                console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $("#e-nationality-select").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'countries', locname: $("#e-nationality-select").val()},
            success:function(e){
              if(e){
                console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $("#e-address-province").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'province', locname: $("#e-address-province").val()},
            success:function(e){
              if(e){
                console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $("#e-address-municipality").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'municipality', province: $("#e-address-province").val(), locname: $("#e-address-municipality").val()},
            success:function(e){
              if(e){
                console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $("#e-address-barangay").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'barangay', province: $("#e-address-province").val(), municipality: $("#e-address-municipality").val(), locname: $("#e-address-barangay").val()},
            success:function(e){
              if(e){
                console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $( ".auto-selector" ).autocomplete({
      appendTo: "#companyname"
    });
    var appendTo = $( ".auto-selector" ).autocomplete( "option", "appendTo" );
    $( ".auto-selector" ).autocomplete( "option", "appendTo", "#companyname" );
  </script>
  <script>
    var imageCapture;
    var newImageFile;
    var imagewidth = 640;
    var imageheight = 480;
    var ximagewidth = 640;
    var yimageheight = 480;
    function onGetUserMediaButtonClick() {
      navigator.mediaDevices.getUserMedia({video: true, audio: false})
      .then(mediaStream => {
        document.querySelector('video').srcObject = mediaStream;
        const track = mediaStream.getVideoTracks()[0];
        imageCapture = new ImageCapture(track);
      })
      .catch(error => ChromeSamples.log(error));
    }
    function onGrabFrameButtonClick(imgCaptureID) {
      imageCapture.grabFrame()
      .then(imageBitmap => {
        var selectorId = "grabFrameCanvasNew";
        if(imgCaptureID == "newcustimage") selectorId = "grabFrameCanvasNew";
        else if(imgCaptureID == "editcustimage") selectorId = "grabFrameCanvasUpdate";
        const canvas = document.querySelector('#'+selectorId);
        drawCanvas(canvas, imageBitmap);
        newImageFile = canvas.toDataURL('image/png', 1.0);
      })
      .catch(error => ChromeSamples.log(error));
    }
    function onTakePhotoButtonClick() {
      imageCapture.takePhoto()
      .then(blob => createImageBitmap(blob))
      .then(imageBitmap => {
        const canvas = document.querySelector('#takePhotoCanvas');
        console.log(imageBitmap);
        drawCanvas(canvas, imageBitmap);
      })
      .catch(error => ChromeSamples.log(error));
      player.srcObject.getVideoTracks().forEach(track => track.stop());
    }
    /* Utils */
    function drawCanvas(canvas, img) {
      canvas.width = getComputedStyle(canvas).width.split('px')[0];
      canvas.height = getComputedStyle(canvas).height.split('px')[0];
      let ratio  = Math.min(canvas.width / img.width, canvas.height / img.height);
      let x = (canvas.width - img.width * ratio) / 2;
      let y = (canvas.height - img.height * ratio) / 2;
      canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
      canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,
          x, y, img.width * ratio, img.height * ratio);
      console.log("cwidth:"+canvas.width);
      console.log("cheight:"+canvas.height);
      console.log("iwidth:"+img.width);
      console.log("iheight:"+img.height);
      console.log("rwidth:"+(img.width));
      console.log("rheight:"+(img.height));
      console.log("ratio:"+ratio);
      console.log("x:"+x);
      console.log("y:"+y);
      imagewidth = img.width;
      imageheight = img.height;
    }
    function addCustomerImages(custcode,branchcode){
        var filedata = [];
        var tempdata = "";
        var dataFile = new FormData();
        for(num in newImageFile){
          tempdata = tempdata + newImageFile[num];
          if((num % 500) == 0){
            dataFile.append('file[]', tempdata);
            tempdata = "";
          }
        }
        dataFile.append('custcode', custcode);
        dataFile.append('branchcode', branchcode);
        $.ajax({
            url: '/add-customer-image',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            method: 'POST',
            data: dataFile,
            processData: false,
            contentType: false,
            cache:false,
            enctype: 'multipart/form-data',
            error:function(err){
              console.error(err);
            },
            success:function(data){
                console.log(data);
                newImageFile = undefined;
                console.log("test");
                var selectorId = "grabFrameCanvasNew";
                const canvas = document.querySelector('#grabFrameCanvasUpdate');
                canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
            },
            complete:function(e){
                console.log(e);
                console.log("Request finished.");
            }
        });
      }
    $('#captureImage').on('click',function(event){
      event.preventDefault();
      //onTakePhotoButtonClick();
      onGrabFrameButtonClick();
    });
    $('#take-photo-btn').on('click',function(event){
      event.preventDefault();
      var imgCaptureID = $('#current-user-image-loc').val();
      onGrabFrameButtonClick(imgCaptureID);
    });
    $('.startCameraButton').on('click',function(event){
      event.preventDefault();
      var imgCaptureID = $(this).attr('id');
      $('#current-user-image-loc').val(imgCaptureID);
      onGetUserMediaButtonClick();
    });
  </script>

  <script>
    var rateListTrans = [];
    var itemArrayList = [];
    var itemTransListArr = [];
    var itemListDatatable = $('#itembreakdowntable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      "autoWidth": false,
      "ordering": false,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
    var itemEditListDatatable = $('#edit-itembreakdowntable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      "autoWidth": false,
      "ordering": false,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
    var updateEditListDatatable = $('#update-itembreakdowntable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      "autoWidth": false,
      "ordering": false,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
    $('#add-new-item-list-btn').on('click',function(){
      event.preventDefault();
      $.ajax({
          url: '/add-item-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: $('#add-item-list-form').serialize(),
          success:function(e){
            if(e){
              console.log(e);
              getItemListDetails();
            }
          }
      });
    });
    $('#delete-item-list-btn').on('click',function(){
      event.preventDefault();
      $.ajax({
          url: '/delete-item-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {itemcode: $('#edit-itemid').val()},
          success:function(e){
            if(e){
              console.log(e);
              getItemListDetails();
            }
          }
      });
    });
    $(document).on('click','.edit-item-details-class',function(event){
      event.preventDefault();
      var itemIdEdit = $(this).attr('id');
      itemIdEdit = itemIdEdit.split('-');
      console.log(itemIdEdit);
      console.log(itemArrayList);
      for (num in itemArrayList){
        if(itemArrayList[num].itemid == itemIdEdit[1]){
          console.log(itemArrayList[num]);
          var itemSelectedEdit = itemArrayList[num];
          $('#edit-itemid').val(itemSelectedEdit.itemid);
          $('#edit-itempurity').val(itemSelectedEdit.itempurity);
          $('#edit-itemweight').val(itemSelectedEdit.itemweight);
          $('#edit-itemquantity').val(itemSelectedEdit.itemquantity);
          $('#edit-itemvalue').val(itemSelectedEdit.itemvalue);

          var itemcategory = itemSelectedEdit.itemcategory;
          $('#edit-itemcategory').val(itemcategory);
          $('#edit-itemclassification').html('<option value="">--select--</option>');
          $('#edit-itemcolor').html('<option value="">--select--</option>');
          for(num in miscellaneousList){
            if(miscellaneousList[num].type == "ITT"){
              var isMiscSelected = miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description;
              if(itemSelectedEdit.itemtype == isMiscSelected){
                $('#edit-itemtype').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
              }
              else $('#edit-itemtype').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'">'+miscellaneousList[num].description+'</option>');
            }
            if(itemcategory == "Gold"){
              if(miscellaneousList[num].type == "GCD"){
                var isMiscSelected = miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description;
                console.log(isMiscSelected + " & " + itemSelectedEdit.itemclassification);
                if(itemSelectedEdit.itemclassification == isMiscSelected){
                  $('#edit-itemclassification').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
                }
                else $('#edit-itemclassification').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'">'+miscellaneousList[num].description+'</option>');
              }
              else if(miscellaneousList[num].type == "GCR"){
                if(itemSelectedEdit.itemcolor == "-") $('#e-itemcolor').html('<option value="-">NA</option>');
                else {
                  var isMiscSelected = miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description;
                  if(itemSelectedEdit.itemcolor == isMiscSelected){
                    $('#edit-itemcolor').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
                  }
                  else $('#edit-itemcolor').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'">'+miscellaneousList[num].description+'</option>');
                }
              }
            }
            else if(itemcategory == "Stone"){
              if(miscellaneousList[num].type == "SCD"){
                var isMiscSelected = miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description;
                if(itemSelectedEdit.itemclassification == isMiscSelected){
                  $('#edit-itemclassification').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
                }
                else $('#edit-itemclassification').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'">'+miscellaneousList[num].description+'</option>');
              }
              else if(miscellaneousList[num].type == "SCR"){
                var isMiscSelected = miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description;
                if(itemSelectedEdit.itemcolor == isMiscSelected){
                  $('#edit-itemcolor').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
                }
                else $('#edit-itemcolor').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'">'+miscellaneousList[num].description+'</option>');
              }
            }
          }
        }
      }
    });
    $(document).on('shown.bs.modal', '#addItemTransactionModal', function () {
        getItemListDetails();
        itemListDatatable.columns.adjust();
    });
    $(document).on('shown.bs.modal', '#editItemTransactionModal', function () {
        itemEditListDatatable.columns.adjust();
    });
    $(document).on('click','.edit-transaction-class',function(event){
      event.preventDefault();
      var itemIdEdit = $(this).attr('id');
      itemIdEdit = itemIdEdit.split('-');
      console.log(itemIdEdit);
      console.log(itemListArray);
      for (num in itemListArray){
        if(itemListArray[num].itemcode == itemIdEdit[1]){
          console.log(itemListArray[num]);

          var itemSelectedEdit = itemListArray[num];
          getEditItemListDetails(itemSelectedEdit.itemdata);

          $('#edit-itemcode').val(itemSelectedEdit.itemcode);
          $('#edit-itemdescription').val(itemSelectedEdit.itemdescription);
          $('#edit-itempurity').val(itemSelectedEdit.itempurity);
          $('#edit-itemweight').val(itemSelectedEdit.itemweight);
          $('#edit-totalitemquantity').val(itemSelectedEdit.totalitemquantity);
          $('#edit-totalitemvalue').val(itemSelectedEdit.totalitemvalue);

          var itemcategory = itemSelectedEdit.itemcategory;
          $('#edit-itemcategory').val(itemcategory);
          $('#edit-itemtype').html('<option value="">--select--</option>');
          $('#edit-itemclassification').html('<option value="">--select--</option>');
          $('#edit-itemcolor').html('<option value="">--select--</option>');
          for(num in miscellaneousList){
            if(miscellaneousList[num].type == "ITT"){
              var isMiscSelected = miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description;
              if(itemSelectedEdit.itemtype == isMiscSelected){
                $('#edit-itemtype').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
              }
              else $('#edit-itemtype').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'">'+miscellaneousList[num].description+'</option>');
            }
            if(itemcategory == "Gold"){
              if(miscellaneousList[num].type == "GCD"){
                var isMiscSelected = miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description;
                console.log(isMiscSelected + " & " + itemSelectedEdit.itemclassification);
                if(itemSelectedEdit.itemclassification == isMiscSelected){
                  $('#edit-itemclassification').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
                }
                else $('#edit-itemclassification').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'">'+miscellaneousList[num].description+'</option>');
              }
              else if(miscellaneousList[num].type == "GCR"){
                if(itemSelectedEdit.itemcolor == "-") $('#e-itemcolor').html('<option value="-">NA</option>');
                else {
                  var isMiscSelected = miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description;
                  if(itemSelectedEdit.itemcolor == isMiscSelected){
                    $('#edit-itemcolor').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
                  }
                  else $('#edit-itemcolor').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'">'+miscellaneousList[num].description+'</option>');
                }
              }
            }
            else if(itemcategory == "Stone"){
              if(miscellaneousList[num].type == "SCD"){
                var isMiscSelected = miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description;
                if(itemSelectedEdit.itemclassification == isMiscSelected){
                  $('#edit-itemclassification').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
                }
                else $('#edit-itemclassification').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'">'+miscellaneousList[num].description+'</option>');
              }
              else if(miscellaneousList[num].type == "SCR"){
                var isMiscSelected = miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description;
                if(itemSelectedEdit.itemcolor == isMiscSelected){
                  $('#edit-itemcolor').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
                }
                else $('#edit-itemcolor').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'">'+miscellaneousList[num].description+'</option>');
              }
            }
          }

        }
      }
    });
    function getEditItemListDetails(data){
      //console.log(data);
      var itemListSet = [];
      var appraiseVal = 0
      var e = data;
      itemArrayList = e;
      var totalqty = 0;
      for(num in e){
        var amount = parseFloat(e[num].itemvalue);
        appraiseVal = parseFloat(appraiseVal) + parseFloat(amount);
        totalqty = parseFloat(totalqty) + parseFloat(e[num].itemquantity);
        var itmClass = e[num].itemclassification;
        var itmColor = e[num].itemcolor;
        if(itmClass != null){
          if(itmClass != '-'){
            itmClass = itmClass.split(':');
            itmClass = itmClass[1];
          }
        }
        if(itmColor != null){
          if(itmColor != '-'){
            itmColor = itmColor.split(':');
            itmColor = itmColor[1];
          }
        }


        var itempurity = e[num].itempurity;
        var itemweight = e[num].itemweight;
        if(e[num].itemcategory == "Stone"){
          itempurity = itempurity.split(':');
          itempurity = itempurity[1];
          itemweight = itemweight + '(c)';
        }
        else {
          itemweight = itemweight + ' gms';
          itempurity = itempurity + 'k';
        }


        itemListSet.push([
          e[num].itemid,
          e[num].itemcategory,
          itmClass,
          itmColor,
          itempurity,
          itemweight,
          e[num].itemquantity,
          amount.toFixed(2),
          '<button type="button" id="itemselected-'+ e[num].itemid + '" class="btn btn-default btn-sm edit-item-details-class" data-toggle="modal" data-target="#editItemListModal"><i class="fas fa-pencil-alt"></i></button>',]);
      }
      itemEditListDatatable.destroy();
      itemEditListDatatable.draw();
      $('#edit-itembreakdowntable').DataTable({
        "scrollY":"auto",
        keys: true,
        draw: true,
        paging:   false,
        info:     false,
        "autoWidth": false,
        "ordering": false,
        data: itemListSet,
        "dom": '<"top"i>rt<"bottom"flp><"clear">',
        // "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        columns: [
          { title: "Id" },
          { title: "Category" },
          { title: "Classification" },
          { title: "Color" },
          { title: "Purity(K)" },
          { title: "Weight" },
          { title: "Quantity" },
          { title: "Amount" },
          { title: "" }
        ]}),
      itemEditListDatatable = $('#edit-itembreakdowntable').DataTable();
      itemEditListDatatable.draw();
      $('#totalitemvalue').val(appraiseVal.toFixed(2));
      $('#totalitemquantity').val(totalqty);
      itemListSet = [];
      itemEditListDatatable.columns.adjust();
    }
    $('#refresh-item-breakdown').on('click',function(){
      getItemListDetails();
      console.log("Refresh");
    });
    $('#remove-edit-item-transaction-btn').on('click',function(){
      event.preventDefault();
      $.ajax({
          url: '/delete-item-transaction',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {itemcode: $('#edit-itemcode').val()},
          success:function(e){
            if(e){
              console.log(e);
              refreshItemList();
            }
          }
      });
    });
    $('#itemcategory').on('change',function(event){
      event.preventDefault();
      var valdata = $(this).val();
      $('#div-itempurity').html("");
      if(valdata == "Stone"){
        var stoneClassStr = '<select class="form-control form-control-sm" id="itempurity" name="itempurity"><option value="">--Select--</option>';
        for(num in stoneClassArray){
          stoneClassStr = stoneClassStr + '<option value="'+stoneClassArray[num].code+':'+stoneClassArray[num].description+'">'+stoneClassArray[num].description+'</option>';
        }
        stoneClassStr =  stoneClassStr + '</select>';
        $('#div-itempurity').html(stoneClassStr);
        $('#label-itempurity').text("Stone Class");
        $('#label-itemweight').text("Carat");
      }
      else {
        var stoneClassStr = '<input type="text" class="form-control form-control-sm" id="itempurity" name="itempurity" onkeypress="return isNumberKey(event)" value="0">';
        $('#div-itempurity').html(stoneClassStr);
        $('#label-itemweight').text("Weight (gms)");
        $('#label-itempurity').text("Purity (k)");
        computePawnValue();
      }
    });

    $(document).on('change','#itempurity',function(){
      var valdata = $('#itemcategory').val();
      if(valdata == "Stone") computeStoneValue();
      else computePawnValue();
    });
    $('#itemtype').on('change',function(){
      var valdata = $('#itemcategory').val();
      if(valdata == "Stone") computeStoneValue();
      else computePawnValue();
    });
    $(document).on('change','#itemweight',function(){
      var valdata = $('#itemcategory').val();
      if(valdata == "Stone") computeStoneValue();
      else computePawnValue();
    });
    $('#itemquantity').on('change',function(){
      var valdata = $('#itemcategory').val();
      if(valdata == "Stone") computeStoneValue();
      else computePawnValue();
    });
    function computeStoneValue(){
      var classStoneArr = $('#itempurity').val();
      var caratStone = $('#itemweight').val();
      var qtyStone = $('#itemquantity').val();
      classStoneArr = classStoneArr.split(':');
      var classStone = classStoneArr[0];
      console.log(caratStone);
      var stoneCost = 0;
      for(num in stoneCaratArray){
        if((stoneCaratArray[num].class == classStone) && (parseFloat(stoneCaratArray[num].weight) == parseFloat(caratStone))){
          console.log(stoneCaratArray[num]);
          stoneCost = parseFloat(stoneCaratArray[num].value) * parseFloat(qtyStone);
        }
      }
      $('#itemvalue').val(stoneCost.toFixed(2));
    }
  </script>
  <script>
    var storageItemDatatable = $('#storageItemTable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      "autoWidth": false,
      "ordering": false,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
    var storageItemArray = [];
    $('#add-item-storage-btn').on('click',function(){
      event.preventDefault();
      $.ajax({
          url: '/add-item-storage-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: $('#add-item-storage-form').serialize(),
          success:function(e){
            if(e){
              console.log(e);
              getItemListDetails();
            }
          }
      });
    });
    $('#add-item-vehicle-btn').on('click',function(){
      event.preventDefault();
      $.ajax({
          url: '/add-item-vehicle-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: $('#add-item-vehicle-form').serialize(),
          success:function(e){
            if(e){
              console.log(e);
              getItemListDetails();
            }
          }
      });
    });
    function getItemListDetails(){
      $.ajax({
          url: '/get-item-vehicle-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          success:function(data){
            if(data){
              console.log(data);
              var appraiseVal = 0
              var totalqty = 0;
              var storageListSet = [];
              var e = data.items;
              storageItemArray = e;
              for(num in e){
                //console.log(e[num]);
                var incentive = parseFloat(e[num].incentives);
                var amount = parseFloat(e[num].vehiclevalue);
                appraiseVal = parseFloat(appraiseVal) + parseFloat(amount);
                totalqty = parseFloat(totalqty) + 1;
                var stgType = e[num].storagetype;
                stgType = stgType.split(':');
                var stgBrand = e[num].vehiclebrand;
                stgBrand = stgBrand.split(':');
                var stgCategory = e[num].vehiclecategory;
                stgCategory = stgCategory.split(':');
                storageListSet.push([
                  e[num].itemcode,
                  stgCategory[1],
                  stgBrand[1] + ' ' + e[num].modelseries,
                  e[num].platenumber,
                  amount.toFixed(2),
                  incentive.toFixed(2),
                  '<button type="button" id="itemselected-'+ e[num].itemcode + '" class="btn btn-default btn-sm edit-item-storage-details-class"><i class="fas fa-pencil-alt"></i></button>',
                ]);
              }
              storageItemDatatable.destroy();
              storageItemDatatable.draw();
              $('#storageItemTable').DataTable({
                "scrollY":"auto",
                keys: true,
                draw: true,
                paging:   false,
                info:     false,
                "autoWidth": false,
                "ordering": false,
                data: storageListSet,
                "dom": '<"top"i>rt<"bottom"flp><"clear">',
                // "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                columns: [
                  { title: "Id" },
                  { title: "Type" },
                  { title: "Description" },
                  { title: "Plate No." },
                  { title: "Amount" },
                  { title: "Incentive" },
                  { title: "" }
                ]}),
              storageItemDatatable = $('#storageItemTable').DataTable();
              storageItemDatatable.draw();
              $('#totalquantity').val(totalqty);
              $('#totalamount').val(appraiseVal.toFixed(2));
              computeVehicleProceeds();
            }
          }
      });
    }
    function computeVehicleProceeds(){
      console.log(rateListTrans);
      var totalAmnt = $('#totalamount').val();
      var interestRate = 0;
      var processingFeeRate = 0;
      var serviceChargeRate = 0;
      for(num in rateListTrans){
        if(rateListTrans[num].rategroup == "ST" && rateListTrans[num].ratetype == "VI") interestRate = rateListTrans[num].value;
        else if(rateListTrans[num].rategroup == "ST" && rateListTrans[num].ratetype == "VF") processingFeeRate = rateListTrans[num].value;
        else if(rateListTrans[num].rategroup == "ST" && rateListTrans[num].ratetype == "SC") serviceChargeRate = rateListTrans[num].value;
      }
      console.log(totalAmnt);

      $('#processfee-rate').text(processingFeeRate);
      $('#srvcharge-rate').text(serviceChargeRate);
      $('#interest-rate').text(interestRate);
      $('#processfeerate').val(processingFeeRate);
      $('#srvchargerate').val(serviceChargeRate);
      $('#interestrate').val(interestRate);
      interestRate = parseFloat(interestRate) / 100;
      processingFeeRate = parseFloat(processingFeeRate) / 100;
      serviceChargeRate = parseFloat(serviceChargeRate) / 100;
      var advInterest = parseFloat(totalAmnt) * parseFloat(interestRate);
      var processingFee = parseFloat(totalAmnt) * parseFloat(processingFeeRate);
      var serviceCharge = parseFloat(totalAmnt) * parseFloat(serviceChargeRate);

      $('#advintamnt').val(advInterest.toFixed(2));
      $('#srvcharge').val(serviceCharge.toFixed(2));
      $('#processfee').val(processingFee.toFixed(2));
      $('#interestamnt').val(advInterest.toFixed(2));
      var totalDeduct = parseFloat(advInterest) + parseFloat(serviceCharge) + parseFloat(processingFee);
      var netproceeds = parseFloat(totalAmnt) - parseFloat(totalDeduct);
      $('#netproceeds').val(netproceeds.toFixed(2));
      storageItemDatatable.columns.adjust();

    }
    $(document).on('click','.edit-item-storage-details-class',function(event){
      event.preventDefault();
      var stgID = $(this).attr('id');
      stgID = stgID.split('-');
      console.log(stgID);
      for(num in storageItemArray){
        if(storageItemArray[num].itemcode == stgID[1]){
          console.log(storageItemArray[num]);
          var estrgType = storageItemArray[num].storagetype;
          estrgType = estrgType.split(':');
          $('#edit-itemcode').val(storageItemArray[num].itemcode);
          $('#edit-storage-category-text').text(estrgType[1]);
          $('#edit-storage-type').val(storageItemArray[num].storagetype);
          $('#edit-storagedescription').val(storageItemArray[num].storagedescription);
          $('#edit-storagequantity').val(storageItemArray[num].storagequantity);
          $('#edit-storagevalue').val(parseFloat(storageItemArray[num].storagevalue).toFixed(2));
          var strgBrnd = storageItemArray[num].storagebrand;
          var strgCat = storageItemArray[num].storagecategory;
          $('#edit-storagecategory').html('');
          $('#edit-storagebrand').html('');
          var storagebrand = '<option value="">--select--</option>';
          var storagecategory = '<option value="">--select--</option>';
          for(num in storageList){
            if(storageList[num].type == estrgType[0] && storageList[num].category == "ST"){
              storagecategory = storagecategory + '<option value="'+storageList[num].code+':'+storageList[num].description+'">'+storageList[num].description+'</option>';
            }
            else if(storageList[num].type == estrgType[0] && storageList[num].category == "BRND"){
              storagebrand = storagebrand + '<option value="'+storageList[num].code+':'+storageList[num].description+'">'+storageList[num].description+'</option>';
            }
          }
          $('#edit-storagecategory').html(storagecategory);
          $('#edit-storagebrand').html(storagebrand);
          $('#edit-storagecategory').val(strgCat);
          $('#edit-storagebrand').val(strgBrnd);;
          $('#editItemStorageVehicleModal').modal();
        }
      }
    });
    $('#edit-item-storage-btn').on('click',function(){
      $.ajax({
          url: '/update-item-storage-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: $('#edit-item-storage-form').serialize(),
          success:function(data){
            if(data){
              console.log(data);
              getItemListDetails();
            }
          }
      });
    });
    $('#delete-item-storage-btn').on('click',function(){
      $.ajax({
          url: '/delete-item-storage-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {itemcode: $('#edit-itemcode').val()},
          success:function(data){
            if(data){
              console.log(data);
              getItemListDetails();
            }
          }
      });
    });
  </script>
  <script>
    var incentiveArray = [];
    var transDatatable = $('#transactiontable').DataTable({
      keys: true,
      draw: true,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
    var listItemDatatable = $('#itemlisttable').DataTable({
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      "ordering": false,
    });
    $('#trans-search-button').on('click',function(event){
      event.preventDefault();
      $('#transactionListModal').modal('show');
      searchTransactionQuery();
    });
    function searchTransactionQuery(){
      $.ajax({
          url: '/search-storage-transaction',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {param: $('#trans-search-text').val(),type: 'Vehicle'},
          success:function(e){
            if(e){
              console.log(e);
              transactionListArray = e;
              var transactionList = [];
              for(num in e){
                var amount = parseFloat(e[num].itemvalue);
                transactionList.push([
                  e[num].transactionno,
                  e[num].papeletano,
                  e[num].customername,
                  e[num].proceeds,
                  e[num].datepawned,
                  e[num].datemature,
                  e[num].statusstr,
                  '<button type="button" id="transselected&'+ e[num].transactionno + '" class="btn btn-warning btn-sm view-transaction-class">select</button>',]);
              }
              transDatatable.destroy();
              $('#transactiontable').DataTable({
                "scrollY":"250px",
                keys: true,
                draw: true,
                paging:   false,
                info:     false,
                "autoWidth": false,
                data: transactionList,
                columns: [
                  { title: "Transaction No." },
                  { title: "Papeleta No." },
                  { title: "Customer Name" },
                  { title: "Net Proceeds" },
                  { title: "Date Pawned" },
                  { title: "Date Mature" },
                  { title: "Status" },
                  { title: "" },
                ]}),
              transDatatable = $('#transactiontable').DataTable();
              transDatatable.draw();
            }
          }
      });
    }
    $(document).on('click','.view-transaction-class',function(event){
      event.preventDefault();
      var transIDsel = $(this).attr('id');
      $('#edit-new-transaction-view').css('display','block');
      var transIDsel2 = transIDsel.split('&');
      for(num in transactionListArray){
        if(transactionListArray[num].transactionno == transIDsel2[1]){
          //console.log(transactionListArray[num]);
          currentSelectedTrans = transactionListArray[num];
          $('#transactionListModal').modal('toggle');
          var transData = transactionListArray[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);
          getTransactionItems(transData.transactionno, transData.papeletano);
          getCustomerDetailsTrans(transData.customercode);
          //computeNewTransDates();
          //computeTransRates();
          //computeNewTransDates($('#trans-currentdate').val());
          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);
          }
        }
      }
    });
    function getTransactionItems(transcode, papeletano){
      $.ajax({
          url: '/get-storage-transaction-items',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {transcode: transcode, papeletano: papeletano, transtype: 'Storage'},
          success:function(e){
            if(e){
              console.log(e);
              itemListViewTrans(e);
              //getTransactionItemCompute();
            }
          }
      });
    }
    function itemListViewTrans(e){
      console.log(e);
      var totalAmount = 0;
      var totalQuantity = 0;
      var itemSetList= [];
      itemTransListArr = e;
      for(num in e){
        var amountval = parseFloat(e[num].capital);
        itemSetList.push([
          '<div class="icheck-primary d-inline"><input type="radio" id="itemval:'+e[num].code+':renew" name="selectedItemValue'+e[num].code+'" checked><label for="itemval:'+e[num].code+':renew">Renew</label></div>'+
          '<div class="icheck-success d-inline" style="padding-left:10px;"><input type="radio" id="itemval:'+e[num].code+':redeem" name="selectedItemValue'+e[num].code+'"><label for="itemval:'+e[num].code+':redeem">Redeem</label></div>',
          e[num].details + ' ' + e[num].description,
          e[num].quantity,
          e[num].status,
          '<input id="itemval-'+e[num].code+'-value" class="selected-item-value" name="updated_item_value_'+e[num].code+'" type="text" value="'+amountval.toFixed(2)+'" />'+
          '<input id="itemval-'+e[num].code+'-amount" class="selected-item-value" name="original_item_value_'+e[num].code+'" type="hidden" value="'+amountval.toFixed(2)+'" />',
          '<button type="button" id="itemselected-'+ e[num].code + '" class="btn btn-default btn-sm update-transaction-class" data-toggle="modal" data-target="#updateItemTransactionModal"><i class="fas fa-arrow-circle-right"></i></button>',
        ]);
        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": "40%", "targets": 1 },
          { "width": "10%", "targets": 2 },
          { "width": "10%", "targets": 3 },
          { "width": "10%", "targets": 4 },
          { "width": "5%", "targets": 5 },
        ],
        columns: [
          { title: "Action" },
          { title: "Description" },
          { title: "Quantity" },
          { title: "Status" },
          { title: "Value" },
          { title: "" }
        ]}),
      listItemDatatable = $('#itemlisttable').DataTable();
      listItemDatatable.draw();
      listItemDatatable.columns.adjust();
      //computeTransRates();
    }
    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="computevehicle"/>';
      $('#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 subProcees = 0;
            var subPenalty = 0;
            var subSrvChrg = 0;
            var subTotal = 0;
            var subIncentives = 0;
            var ispapeleta = false;
            for(num in items){
              var interest = items[num].interest;
              var processfee = items[num].processfee;
              var penalty = items[num].penalty;
              var servicecharge = items[num].servicecharge;
              subAdvInt = subAdvInt + parseFloat(interest.value);
              subProcees = subProcees + parseFloat(processfee.value);
              subPenalty = subPenalty + parseFloat(penalty.value);
              subSrvChrg = subSrvChrg + parseFloat(servicecharge.value);
              subTotal = subTotal + parseFloat(items[num].subTotal);
              subIncentives = subIncentives + parseFloat(items[num].incentive);
              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(interest.value).toFixed(2)+'</td>'+
                '<td style="text-align:right;width:8%;">'+parseFloat(processfee.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(interest.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.interestrate + '%');
            $('#trans-advintamnt').val(parseFloat(subAdvInt).toFixed(2));
            $('#trans-tenancy').val(e.tenancy);
            $('#trans-processfeerate').val(e.processfeerate+'%');
            $('#trans-processfeeamnt').val(parseFloat(subProcees).toFixed(2));
            $('#trans-penaltyrate').val(e.penaltyrate+'%');
            $('#trans-penaltycharge').val(parseFloat(subPenalty).toFixed(2));
            $('#trans-srvcharge').val(parseFloat(subSrvChrg).toFixed(2));
            $('#trans-incentive').val(parseFloat(subIncentives).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());
            }
          }
        }
      });
    }
    $(document).on('shown.bs.modal', '#transactionListModal', function () {
        transDatatable.columns.adjust();
    });
    function getCustomerDetailsTrans(customercode){
      $('#checking-customer-notification').css('display','block');
      resetCustomerDetails();
      $.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 == "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 getSettingsTrans(){
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'rates', type: 'list'},
          success:function(e){
            if(e){
              //rateList = [];
              rateListTrans = e;
              var rateHtml = "";
              $('#trans-advintrate').html('');
              for(num in e){
                if(e[num].ratetype == 'AI') {
                  rateList.push(e[num]);
                  rateHtml = rateHtml + '<option value="'+e[num].ratecode+'-'+e[num].value+'">'+e[num].value+' %</option>';
                }
              }
              $('#trans-advintrate').html(rateHtml);
              //console.log(rateListTrans);
              getItemListDetails();
            }
          }
      });
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'misc', type: 'list'},
          success:function(e){
            if(e){
              //console.log(e);
              miscellaneousList = e;
              $('#itemtype').html('<option value="">--select--</option>');
              for(num in miscellaneousList){
                if(miscellaneousList[num].type == "ITT"){
                  $('#itemtype').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'">'+miscellaneousList[num].description+'</option>');
                }
              }
            }
          }
      });
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'incentives', type: 'list'},
          success:function(e){
            if(e){
              incentiveArray = e;
            }
          }
      });
    }
    getSettingsTrans();
    $('#compute-transaction-btn').on('click',function(event){
      console.log('Compute Transaction');
      $('#computation-div').css('display','block');
      getTransactionItemCompute();
    });
    $(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){
                console.log(e[num].rebate);
                var incntv = e[num].incentives;
                var incntvAmnt = 0;
                for(num1 in incntv){
                  incntvAmnt = parseFloat(incntvAmnt) + parseFloat(incntv[num1].amount);
                }
                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:38%;">Description</th><th style="width:8%;">Qty</th><th style="width:8%;">Charges</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></thead>';
                for(num1 in itemsData){
                  var itemHtmlStr = '<tr>'+
                    '<td style="width:38%;" >'+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].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>'+
                  '</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>Interest ('+e[num].intrate+' %): <span class="span-history">'+e[num].intamnt+'</span></label><br>'+
                        '</div>'+
                        '<div class="col-md-4">'+
                          '<label>Processing Fee ('+e[num].processfeerate+' %): <span class="span-history">'+e[num].processfeeamnt+'</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>Incentives: <span class="span-history">'+incntvAmnt.toFixed(2)+'</span></label><br>'+
                          '<label>Srv. Charge: <span class="span-history">'+e[num].srvcharge+'</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);
            }
          }
        });
    });
    $(document).on('shown.bs.modal', '#addItemStorageVehicleModal', function () {
      $('#vehiclecategory').html('');
      $('#vehiclebrand').html('');
      var vehiclebrand = '<option value="">--select--</option>';
      var vehiclecategory = '<option value="">--select--</option>';
      for(num in storageList){
        if(storageList[num].type == "SRV" && storageList[num].category == "ST"){
          vehiclecategory = vehiclecategory + '<option value="'+storageList[num].code+':'+storageList[num].description+'">'+storageList[num].description+'</option>';
        }
        else if(storageList[num].type == "SRV" && storageList[num].category == "BRND"){
          vehiclebrand = vehiclebrand + '<option value="'+storageList[num].code+':'+storageList[num].description+'">'+storageList[num].description+'</option>';
        }
      }
      $('#vehiclecategory').html(vehiclecategory);
      $('#vehiclebrand').html(vehiclebrand);
    });
    $('#confirm-update-transaction-btn').on('click',function(event){
      event.preventDefault();
      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="text" value="'+itemListData+'" name="items[]" />'
      });
      itemList = itemList + '<input type="hidden" name="transcode" value="'+$('#trans-transactioncode').val()+'"/>';
      itemList = itemList + '<input type="hidden" name="papeletano" value="'+$('#trans-papeleta-no').val()+'"/>';
      itemList = itemList + '<input type="hidden" name="transdate" value="'+$('#trans-currentdate').val()+'"/>';
      itemList = itemList + '<input type="hidden" name="maturity" value="'+$('#new-trans-datemature').val()+'"/>';
      itemList = itemList + '<input type="hidden" name="redemption" value="'+$('#new-trans-lastdayredeem').val()+'"/>';
      itemList = itemList + '<input type="hidden" name="usercode" value="'+$('#trans-usercode').val()+'"/>';
      itemList = itemList + '<input type="hidden" name="request" value="transactions"/>';
      itemList = itemList + '<input type="hidden" name="transtype" value="Storage"/>';
      itemList = itemList + '<input type="hidden" name="type" value="confirmvehicle"/>';
      $('#item-trans-table').html(itemList);
      $('#trans-papeleta-no').css('border','1px solid rgba(0,0,0,0.1)');
      // console.log(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);
            if(e.code > 0){
              var errormsg = e.msg;
              for(num in errormsg){
                $('#'+errormsg[num]).css('border','1px solid red');
              }
              alert('Error! Please check highlighted fields.');
            }
            else {
              // refreshItemList();
              // computeProceeds();
              //getTransactionItemCompute();
              $('#response-transactioncode').text(e.msg);
              $('#confirmationDialog').modal('show');
            }
          }
        }
      });

    });
    $('#vehiclevalue').on('change',function(){
      incentiveCompute();
    });

    function incentiveCompute(){
      var withvehicle = $('#withvehicle').val();
      var vtype = $('#vehiclecategory').val();
      var appraiseAmnt = $('#vehiclevalue').val();
      var incentiveAmnt = 0;
      console.log(vtype);
      console.log(incentiveArray);
      vtype = vtype.split(':');
      if(vtype[0] == "SVM"){
        for(num in incentiveArray){
          if(incentiveArray[num].category == "MC" && incentiveArray[num].loantype == "New" && incentiveArray[num].withvehicle == withvehicle){
            if(parseFloat(appraiseAmnt) >= parseFloat(incentiveArray[num].amountfrom) && parseFloat(appraiseAmnt) <= parseFloat(incentiveArray[num].amountto)){
              console.log(incentiveArray[num].amount);
              incentiveAmnt = incentiveArray[num].amount;
            }
          }
        }
      }
      else {
        for(num in incentiveArray){
          if(incentiveArray[num].category == "VC" && incentiveArray[num].loantype == "New" && incentiveArray[num].withvehicle == withvehicle){
            if(parseFloat(appraiseAmnt) >= parseFloat(incentiveArray[num].amountfrom) && parseFloat(appraiseAmnt) <= parseFloat(incentiveArray[num].amountto)){
              console.log(incentiveArray[num].amount);
              incentiveAmnt = incentiveArray[num].amount;
            }
          }
        }
      }
      $('#incentives').val(incentiveAmnt);
    }
  </script>

  <script>
    $('#print-document-btn').on('click',function(){
      $.ajax({
          url: '/print-transactions-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {code: $('#transactioncode').val()},
          success:function(e){
            if(e){
              console.log(e);
              let params = 'scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=700,height=500,left=-10,top=-10';
              window.open(e,"_blank",params);
              return false;
            }
          }
      });
    });
    $('#void-transaction-btn').on('click',function(){
      $.ajax({
          url: '/print-transactions-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {code: $('#trans-transactioncode').val()},
          success:function(e){
            if(e){
              console.log(e);
              let params = 'scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=700,height=500,left=-10,top=-10';
              window.open(e,"_blank",params);
              return false;
            }
          }
      });
    });
  </script>

  <script>
    $('#refresh-customer-btn').on('click',function(event){
      event.preventDefault();
      $('#refresh-customer-btn').text('Please wait...');
      $('#refresh-customer-btn').prop('disabled',true);
      $.ajax({
          url: '/refresh-customer',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {branch: $('#trans-userbranch').val()},
          success:function(e){
            if(e){
              console.log(e);
              $('#refresh-customer-btn').text('Refresh Customer List');
              $('#refresh-customer-btn').prop('disabled',false);
              alert(e);
            }
          }
      });
    });
  </script>
  <script>
    var customersearchDataTable = $('#customersearchtable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      "autoWidth": true,
    });
    $('#search-customer-btn').on('click',function(event){
      event.preventDefault();
      $('#searching-text').css('display','block');
      $('#customersearchtable').css('display','none');
      $.ajax({
          url: '/search-customer-list',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'customer', type: 'searchlist', customername: $('#customer-name-search').val()},
          success:function(e){
            if(e){
              console.log(e);
              $('#searching-text').css('display','none');
              $('#customersearchtable').css('display','block');
              customerSetTable(e);
            }
          }
      });
    });
    function customerSetTable(e){
      var customerSetList = [];
      for(num in e){
        customerSetList.push([
          e[num].customercode,
          e[num].customername,
          e[num].branchcode,
          e[num].customerbranch,
          '<button type="button" id="'+ e[num].customercode + '" class="btn btn-default btn-sm select-customer-class" data-dismiss="modal"><i class="fas fa-arrow-circle-right"></i> Select</button>',
        ]);
      }
      customersearchDataTable.destroy();
      customersearchDataTable.draw();
      $('#customersearchtable').DataTable({
        "scrollY":"500px",
        keys: true,
        draw: true,
        paging:   false,
        info:     false,
        "autoWidth": false,
        data: customerSetList,
        "columnDefs": [
          { "width": "20%", "targets": 0 },
          { "width": "35%", "targets": 1 },
          { "width": "15%", "targets": 2 },
          { "width": "20%", "targets": 3 },
          { "width": "10%", "targets": 4 },
        ],
        columns: [
          { title: "Customer Code" },
          { title: "Customer Name" },
          { title: "Branch Code" },
          { title: "Branch Name" },
          { title: "" }
        ]}),
      customersearchDataTable = $('#customersearchtable').DataTable();
    }
    $('#myInputTextField').keyup(function(){
    		customersearchDataTable.search($(this).val()).draw();
    });
    $(document).on('click', '.select-customer-class', function () {
      var custID = $(this).attr('id');
      console.log(custID);
      $('#customercode').val(custID);
      getCustomerDetailsNew(custID);
    });
    function getCustomerDetailsNew(customercode){
      $('#checking-customer-notification').css('display','block');
      resetCustomerDetails();
      $.ajax({
          url: '/search-customer-list',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'customer', type: 'searchlistdetails', customercode: customercode},
          success:function(e){
            if(e){
              console.log(e);
                generateNewTransCode(e.branchcode,'Jewelry');
                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")  $('#contactnumber').val(e[num]);
                  else if(num == "idtype") {
                    var idPres = e[num];
                    $('#idtype').val(idPres.toLowerCase());
                  }
                  else $('#'+num).val(e[num]);
                }

                var address = street + " " + brgy + " " + municipality + " " + province;
                $("#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){
                  $('#customer-image').prop('src',e.image);
                }
                if($('#customercode').val() != ""){
                  $('#add-item-transaction-modal-btn').prop('disabled',false);
                }
                if(parseInt(e.isblocked) == 1){
                  alert("Beware, Fake Client!");
                  $('#warning-client-text').css('display','block');
                }
                else $('#warning-client-text').css('display','none');
                loadItemColor('Gold');
                loadItemitemclassification('Gold');
            }
          }
      });
    }
    function initNewPawnedDate(){
      var curDate = new Date();
      var pawnedDate = curDate.getFullYear() + '-' + (curDate.getMonth() + 1) + '-' + curDate.getDate();
      console.log(pawnedDate);
      var tempmaturedate = new Date();
      tempmaturedate.setDate(tempmaturedate.getDate() + 30);
      var pawnedDateArr = pawnedDate.split('-');
      var pawnedMonth = parseInt(pawnedDateArr[1]) + 1;
      var pawnedDay = parseInt(pawnedDateArr[2]);
      var pawnedYear = parseInt(pawnedDateArr[0]);
      var newlastday = new Date(pawnedYear, pawnedMonth, 0).getDate();
      if(pawnedDay > newlastday) pawnedDay = newlastday;
      if(pawnedDay < 10) pawnedDay = '0'+pawnedDay;
      if(pawnedMonth < 10) pawnedMonth = '0'+pawnedMonth;
      else {
        if(pawnedMonth > 12) {
          pawnedMonth = '01';
          pawnedYear = pawnedYear + 1;
        }
      }
      $('#new-trans-datemature').val(pawnedYear + '-' + pawnedMonth + '-' + pawnedDay);
      var tempmaturedate = new Date($('#new-trans-datemature').val());
      tempmaturedate.setDate(tempmaturedate.getDate() + 1);
      var dd = tempmaturedate.getDate();
      var mm = tempmaturedate.getMonth() + 1;
      var yy = tempmaturedate.getFullYear();
      if(dd < 10) dd = '0'+dd;
      if(mm < 10) mm = '0'+mm;
      $('#new-trans-lastdayredeem').val(yy + '-' + mm + '-' + dd);
      console.log($('#new-trans-datemature').val());
    }
    initNewPawnedDate();

    $('#search-customer-btn-local').on('click',function(event){
      event.preventDefault();
      $('#searching-text').css('display','block');
      $('#customersearchtable').css('display','none');
      $.ajax({
          url: '/search-customer-list-local',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'customer', type: 'localsearchindv', customername: $('#customer-name-search').val()},
          success:function(e){
            if(e){
              console.log(e);
              console.log('Local');
              $('#searching-text').css('display','none');
              $('#customersearchtable').css('display','block');
              customerSetTableLocal(e);
            }
          }
      });
    });
    function customerSetTableLocal(e){
      var customerSetList = [];
      for(num in e){
        customerSetList.push([
          e[num].customercode,
          e[num].fullname,
          e[num].branchcode,
          e[num].branchname,
          '<button type="button" id="'+ e[num].customercode + '" class="btn btn-default btn-sm select-customer-class-local" data-dismiss="modal"><i class="fas fa-arrow-circle-right"></i> Select</button>',
        ]);
      }
      customersearchDataTable.destroy();
      customersearchDataTable.draw();
      $('#customersearchtable').DataTable({
        "scrollY":"500px",
        keys: true,
        draw: true,
        paging:   false,
        info:     false,
        "autoWidth": false,
        data: customerSetList,
        "columnDefs": [
          { "width": "20%", "targets": 0 },
          { "width": "35%", "targets": 1 },
          { "width": "15%", "targets": 2 },
          { "width": "20%", "targets": 3 },
          { "width": "10%", "targets": 4 },
        ],
        columns: [
          { title: "Customer Code" },
          { title: "Customer Name" },
          { title: "Branch Code" },
          { title: "Branch Name" },
          { title: "" }
        ]}),
      customersearchDataTable = $('#customersearchtable').DataTable();
    }
    $(document).on('click', '.select-customer-class-local', function () {
      var custID = $(this).attr('id');
      console.log(custID);
      $('#customercode').val(custID);
      getCustomerDetailsNewLocal(custID);
    });
    function getCustomerDetailsNewLocal(customercode){
      $('#checking-customer-notification').css('display','block');
      resetCustomerDetails();
      $.ajax({
          url: '/search-customer-list-local',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'customer', type: 'localcustdetails', code: customercode},
          success:function(e){
            if(e){
              console.log(e);
                generateNewTransCode(e.branchcode,'Jewelry');
                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")  $('#contactnumber').val(e[num]);
                  else if(num == "idtype") {
                    var idPres = e[num];
                    $('#idtype').val(idPres.toLowerCase());
                  }
                  else $('#'+num).val(e[num]);
                }
                var address = street + " " + brgy + " " + municipality + " " + province;
                $("#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){
                  $('#customer-image').prop('src',e.image);
                }
                if($('#customercode').val() != ""){
                  $('#add-item-transaction-modal-btn').prop('disabled',false);
                }
                //loadItemColor('Gold');
                //loadItemitemclassification('Gold');
                if(parseInt(e.isblocked) == 1){
                  alert("Beware, Fake Client!");
                  $('#warning-client-text').css('display','block');
                }
                else $('#warning-client-text').css('display','none');
            }
          }
      });
    }
  </script>

  <script>
    $("#edit-datepawned").datepicker({
      dateFormat: "yy-mm-dd",
    });
    $('#edit-datepawned').on('change',function(){
      var pawnedDate = $(this).val();
      updateTransDates(pawnedDate);
    });
    function updateTransDates(pawnedDate){
      var date = $('#edit-datepawned').datepicker({ dateFormat: 'mm-dd-yy' }).val();
      var pawnedDateArr = pawnedDate.split('-');
      var pawnedMonth = parseInt(pawnedDateArr[1]) + 1;
      var pawnedDay = parseInt(pawnedDateArr[2]);
      var pawnedYear = parseInt(pawnedDateArr[0]);
      var newlastday = new Date(pawnedYear, pawnedMonth, 0).getDate();
      console.log(newlastday);
      if(pawnedDay > newlastday) pawnedDay = newlastday;
      if(pawnedDay < 10) pawnedDay = '0'+pawnedDay;
      if(pawnedMonth < 10) pawnedMonth = '0'+pawnedMonth;
      else {
        if(pawnedMonth > 12) {
          pawnedMonth = '01';
          pawnedYear = pawnedYear + 1;
        }
      }
      $('#edit-datemature').val(pawnedYear + '-' + pawnedMonth + '-' + pawnedDay);
      var tempmaturedate = new Date($('#edit-datemature').val());
      tempmaturedate.setDate(tempmaturedate.getDate() + 1);
      var dd = tempmaturedate.getDate();
      var mm = tempmaturedate.getMonth() + 1;
      var yy = tempmaturedate.getFullYear();
      if(dd < 10) dd = '0'+dd;
      if(mm < 10) mm = '0'+mm;
      $('#edit-dateredeem').val(yy + '-' + mm + '-' + dd);
    }
    $('#edit-transaction-btn').on('click',function(){
      console.log("Test");
      console.log($('#trans-transactioncode').val());
      $('#edit-papeletano').val($('#trans-papeletanumber').val());
      $('#edit-oldpapeletano').val($('#trans-papeletanumber').val());
      console.log($('#trans-datepawned').val());
      $('#edit-transactioncode').val($('#trans-transactioncode').val());
      $("#edit-datepawned").val($('#trans-datepawned').val());
      updateTransDates($('#trans-datepawned').val());
    });
    $('#change-transaction-btn').on('click',function(event){
      event.preventDefault();
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: $('#edit-transaction-frorm').serialize(),
          success:function(e){
            if(e){
              console.log(e);
              alert(e.msg);
              // refreshTransactionDetails($('#edit-transactioncode').val());
            }
          }
      });
    });
    function refreshTransactionDetails(transId){
      for(num in transactionListArray){
        if(transactionListArray[num].transactionno == transId){
          console.log('local-details');
          console.log(transactionListArray[num]);
          currentSelectedTrans = transactionListArray[num];
          var transData = transactionListArray[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);
          getTransactionItemsLocal(transData.transactionno, transData.papeletano);
          var iscustcode = transData.customercode;
          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);
          }
        }
      }
    }
  </script>
@endsection