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

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

    .number-input2 {
      text-align: right;
      font-size: 1em;
      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;
      margin-bottom: 6px;
    }
  </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">
  <link rel="stylesheet" href="/resources/demos/style.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">Jewellery - <b>Gold</b></h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Jewellery</li>
              <li class="breadcrumb-item active">Gold</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-transaction-form">
                      <div style="padding:15px;">
                        <h4 style="font-weight:600;font-size:1.1em;">Customer Details <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-12">
                            <input id="customer-name-search" class="form-control form-control-sm" type="text" value="" placeholder="Search Customer Here..." />
                          </div>
                          <!-- <div class="col-md-2">
                            <a href="https://customer.tambunting.net/customer" class="btn btn-primary btn-sm float-left">Search Customer</a>
                          </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-3">
                            <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-9">
                              <div class="row">
                                <div class="col-md-3">
                                  <div class="form-group">
                                    <label>Papeleta Number</label>
                                    <input type="text" class="form-control form-control-sm trans-input" id="papeletanumber" name="papeletanumber">
                                  </div>
                                </div>
                                <div class="col-md-3">
                                  <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-3">
                                  <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-3">
                                  <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="lastdayredeem" name="lastdayredeem" placeholder="yyyy-mm-dd">
                                    </div>
                                  </div>
                                </div>
                              </div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-6">
                            <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 class="col-md-6">
                            <div class="form-group">
                              <label>Remark</label>
                              <input type="text" class="form-control form-control-sm trans-input" id="transremarks" name="transremarks" />
                            </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 id="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="itemtable" class="table table-bordered" style="font-size:0.9em !important;">
                                  <thead style="background:rgba(3, 144, 252,0.6);">
                                    <tr>
                                      <th>Id</th>
                                      <th>Category</th>
                                      <th>Type</th>
                                      <th>Classification</th>
                                      <th>Color</th>
                                      <th>Description</th>
                                      <th>Purity(K)</th>
                                      <th>Weight</th>
                                      <th>Quantity</th>
                                      <th>Amount</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>Total Amount</label>
                                           </div>
                                           <div class="form-group">
                                             <label>Adv.  Int. Rate</label>
                                           </div>
                                           <div class="form-group">
                                             <label>Adv.  Int. 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="totalquantity" name="totalquantity" value="0" readonly>
                                           </div>
                                           <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">
                                             <select class="form-control form-control-sm number-input trans-input" id="advintrate" name="advintrate">
                                               <option value="2.5">2.5 %</option>
                                               <option value="3">3.0 %</option>
                                               <option value="4">4.0 %</option>
                                               <option value="5">5.0 %</option>
                                             </select>
                                           </div>
                                           <div class="form-group">
                                             <input type="text" class="form-control form-control-sm number-input trans-input" id="advintamnt" name="advintamnt" 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>Service Charge</label>
                                           </div>
                                           <div class="form-group">
                                             <label>Doc Stamp Fee</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="srvcharge" name="srvcharge" value="5.00">
                                           </div>
                                           <div class="form-group">
                                             <input type="text" class="form-control form-control-sm number-input trans-input" id="docstamp" name="docstamp" value="0.00">
                                           </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="save-to-draft-btn" type="button" class="btn btn-warning btn-sm">Save to Draft</button>
                                              <button id="confirm-transaction-btn" type="button" class="btn btn-success btn-sm">Confirm Transaction</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">Find!</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:block;">
                        <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="edititemtable" 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></th>
                                          <th>Category</th>
                                          <th>Type</th>
                                          <th>Classification</th>
                                          <th>Color</th>
                                          <th>Description</th>
                                          <th>Purity(K)</th>
                                          <th>Weight</th>
                                          <th>Qty</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-3">
                                            <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-3">
                                            <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">
                                              </div>
                                            </div>
                                          </div>
                                          <div class="col-md-3">
                                            <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-3">
                                            <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>
                                  </div>
                                  <div class="row">
                                    <div class="col-md-6">
                                      <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-6">
                                      <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>
                                </div>

                                <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>Total Amount</label>
                                             </div>
                                             <div class="form-group">
                                               <label>Adv.  Int. Rate</label>
                                             </div>
                                             <div class="form-group">
                                               <label>Adv.  Int. Amount</label>
                                             </div>
                                             <div class="form-group">
                                               <label>Service Charge</label>
                                             </div>
                                             <div class="form-group" style="display:none;">
                                               <label>Service Fee</label>
                                             </div>
                                             <div class="form-group">
                                               <label>Doc Stamp Fee</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-totalquantity" name="totalquantity" value="0" 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">
                                               <select class="form-control form-control-sm number-input trans-input" id="trans-advintrate" name="advintrate">
                                                 <option value="2.5">2.5 %</option>
                                                 <option value="3">3.0 %</option>
                                                 <option value="4">4.0 %</option>
                                                 <option value="5">5.0 %</option>
                                               </select>
                                             </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.00">
                                             </div>
                                             <div class="form-group">
                                               <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-srvcharge" name="srvcharge" value="5.00">
                                             </div>
                                             <div class="form-group">
                                               <input style="display:none;" type="text" class="form-control form-control-sm number-input trans-input" id="trans-srvfee" name="srvfee" value="0.00">
                                             </div>
                                             <div class="form-group">
                                               <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-docstamp" name="docstamp" value="0.00">
                                             </div>
                                          </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6" style="padding-left:20px;">
                                        <div class="row">
                                          <div class="col-md-6">
                                            <div class="form-group">
                                              <label>Item Tenancy</label>
                                            </div>
                                             <div class="form-group">
                                               <label>Interest Rate</label>
                                             </div>
                                             <div class="form-group">
                                               <label>Interest Amount</label>
                                             </div>
                                             <div class="form-group">
                                               <label>Penalty Rate</label>
                                             </div>
                                             <div class="form-group">
                                               <label>Penalty 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-tenancy" name="tenancy" value="" readonly>
                                            </div>
                                             <div class="form-group">
                                               <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-interestrate" name="interestrate" value="0 %" readonly>
                                             </div>
                                             <div class="form-group">
                                               <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-interestamnt" name="interestamnt" value="0.00" 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 class="row" style="display:none;">
                                          <div class="col-md-6">
                                             <div class="form-group">
                                               <label>Total Charges</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-totalcharges" name="totalcharges" value="0.00" readonly>
                                             </div>
                                          </div>
                                        </div>
                                    </div>
                                  </div>
                                  <hr style="margin-top:0px;">
                                  <div class="row">
                                    <div class="col-md-2">
                                       <div class="form-group">
                                         <button id="renew-transaction-btn" type="button" class="btn btn-warning btn-sm form-control" data-toggle="modal" data-target="#renewTransaction">Renew</button>
                                       </div>
                                    </div>
                                    <div class="col-md-2">
                                       <div class="form-group">
                                          <button id="redeem-transaction-btn" type="button" class="btn btn-success btn-sm form-control" data-toggle="modal" data-target="#redeemTransaction">Redeem</button>
                                       </div>
                                    </div>
                                    <div class="col-md-2">
                                       <div class="form-group">
                                          <button id="custom-transaction-btn" type="button" class="btn btn-default btn-sm form-control" data-toggle="modal" data-target="#customTransaction">Custom</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" data-toggle="modal" data-target="#renewTransaction">History</button>
                                       </div>
                                    </div>
                                    <div class="col-md-2">
                                       <div class="form-group">
                                          <button id="update-transaction-btn" type="button" class="btn btn-info btn-sm form-control">Update</button>
                                       </div>
                                    </div>
                                    <div class="col-md-2">
                                       <div class="form-group">
                                          <button id="void-transaction-btn" type="button" class="btn btn-danger btn-sm form-control">Void</button>
                                       </div>
                                    </div>

                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </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-button" type="button" class="btn btn-warning btn-flat">Find!</button>
                            </span>
                          </div>
                        </div>
                      </div>
                      <hr>
                    </div>
                </div>
              </div>
              <!-- /.card -->
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- Modal -->

  <div id="addItemTransactionModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
      <!-- 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-transaction-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-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Category</label>
                    <select class="form-control form-control-sm" id="itemcategory" name="itemcategory">
                      <option value="Gold">Gold</option>
                      <option value="Stone">Stone</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Item Type</label>
                    <select class="form-control form-control-sm" id="itemtype" name="itemtype"></select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Classification</label>
                    <select class="form-control form-control-sm" id="itemclassification" name="itemclassification"></select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Color</label>
                    <select class="form-control form-control-sm" id="itemcolor" name="itemcolor"></select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Description</label>
                    <input type="text" class="form-control form-control-sm" id="itemdescription" = name="itemdescription">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Purity (k)</label>
                    <input type="text" class="form-control form-control-sm" id="itempurity" name="itempurity">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Weight (gms)</label>
                    <input type="text" class="form-control form-control-sm" id="itemweight" name="itemweight">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Quantity</label>
                    <input type="number" class="form-control form-control-sm" id="itemquantity" name="itemquantity">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Appraised Value</label>
                    <input type="text" class="form-control form-control-sm" id="itemvalue" name="itemvalue">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label style="color:transparent;">x</label><br>
                    <button id="add-item-transaction-btn" class="btn btn-info btn-sm form-control form-control-sm" class="close" data-dismiss="modal">Add Item</button>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <div id="editItemTransaction" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Edit Item</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <form id="edit-item-transaction-form">
            <input id="e-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-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Category</label>
                    <select class="form-control form-control-sm" id="e-itemcategory" name="itemcategory">
                      <option value="Gold">Gold</option>
                      <option value="Stone">Stone</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Item Type</label>
                    <select class="form-control form-control-sm" id="e-itemtype" name="itemtype"></select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Classification</label>
                    <select class="form-control form-control-sm" id="e-itemclassification" name="itemclassification"></select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Item Color</label>
                    <select class="form-control form-control-sm" id="e-itemcolor" name="itemcolor"></select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Description</label>
                    <input type="text" class="form-control form-control-sm" id="e-itemdescription" = name="itemdescription">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Purity (k)</label>
                    <input type="text" class="form-control form-control-sm" id="e-itempurity" name="itempurity">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Weight (gms)</label>
                    <input type="text" class="form-control form-control-sm" id="e-itemweight" name="itemweight">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Quantity</label>
                    <input type="number" class="form-control form-control-sm" id="e-itemquantity" name="itemquantity">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Appraised Value</label>
                    <input type="text" class="form-control form-control-sm" id="e-itemvalue" name="itemvalue">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label style="color:transparent;">x</label><br>
                    <button id="edit-item-transaction-btn" class="btn btn-info btn-sm form-control form-control-sm">Update Item</button>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label style="color:transparent;">x</label><br>
                    <button id="remove-item-transaction-btn" class="btn btn-danger btn-sm form-control form-control-sm">Remove Item</button>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <div id="editItemTransaction2" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Edit Item</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <form id="edit-item-transaction-form">
            <input id="e-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-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Category</label>
                    <select class="form-control form-control-sm" id="e2-itemcategory" name="itemcategory">
                      <option value="Gold">Gold</option>
                      <option value="Stone">Stone</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Item Type</label>
                    <select class="form-control form-control-sm" id="e2-itemtype" name="itemtype"></select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Classification</label>
                    <select class="form-control form-control-sm" id="e2-itemclassification" name="itemclassification"></select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Item Color</label>
                    <select class="form-control form-control-sm" id="e2-itemcolor" name="itemcolor"></select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Description</label>
                    <input type="text" class="form-control form-control-sm" id="e2-itemdescription" = name="itemdescription">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Purity (k)</label>
                    <input type="text" class="form-control form-control-sm" id="e2-itempurity" name="itempurity">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Weight (gms)</label>
                    <input type="text" class="form-control form-control-sm" id="e2-itemweight" name="itemweight">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Quantity</label>
                    <input type="number" class="form-control form-control-sm" id="e2-itemquantity" name="itemquantity">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Appraised Value</label>
                    <input type="text" class="form-control form-control-sm" id="e2-itemvalue" name="itemvalue">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label style="color:transparent;">x</label><br>
                    <button id="edit-item-transaction-btn2" class="btn btn-info btn-sm form-control form-control-sm">Update Item</button>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label style="color:transparent;">x</label><br>
                    <button id="remove-item-transaction-btn2" class="btn btn-danger btn-sm form-control form-control-sm">Remove Item</button>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <div id="editItemTransaction2old" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Edit Item</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <form id="edit-item-transaction-form">
            <input id="e2-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-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Item Type</label>
                    <select class="form-control form-control-sm" id="e2-itemtype" name="itemtype">
                      <option value="Gold">Gold</option>
                      <option value="Stone">Stone</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Item Name</label>
                    <input type="text" class="form-control form-control-sm" id="e2-itemname" name="itemname">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Description</label>
                    <input type="text" class="form-control form-control-sm" id="e2-itemdescription" = name="itemdescription">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Purity (k)</label>
                    <input type="text" class="form-control form-control-sm" id="e2-itempurity" name="itempurity">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Weight (gms)</label>
                    <input type="text" class="form-control form-control-sm" id="e2-itemweight" name="itemweight">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Quantity</label>
                    <input type="number" class="form-control form-control-sm" id="e2-itemquantity" name="itemquantity">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Appraised Value</label>
                    <input type="text" class="form-control form-control-sm" id="e2-itemvalue" name="itemvalue">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label style="color:transparent;">x</label><br>
                    <button id="edit-item-transaction-btn2" class="btn btn-info btn-sm form-control form-control-sm">Update Item</button>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label style="color:transparent;">x</label><br>
                    <button id="remove-item-transaction-btn2" class="btn btn-danger btn-sm form-control form-control-sm">Remove Item</button>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <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;">One fine body</span>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button 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></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="renewTransaction" 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">Transaction Details (Renew)</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-md-6">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label >Transaction No.</label><br>
                      <label >Current Papeleta No.</label><br>
                      <label >New Papeleta No.</label><br>
                      <label >Customer Code</label><br>
                      <label >Customer Name</label><br>
                      <label >Customer Add.</label><br>
                      <label >Contact Number</label><br>
                      <label >Customer Branch</label><br>
                      <label >Current Branch</label><br>
                      <label >No. of Item(s)</label>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <input type="text" class="number-input2 renew-inputs" id="renew-transactionno" name="transactionno"><br>
                      <input type="text" class="number-input2 renew-inputs" id="renew-papeletano" name="oldpapeletano"><br>
                      <input type="text" class="number-input2" id="renew-papeletano-new" name="newpapeletano"><br>
                      <input type="text" class="number-input2 renew-inputs" id="renew-customercode" name="customercode"><br>
                      <input type="text" class="number-input2 renew-inputs" id="renew-customername" name="customername"><br>
                      <input type="text" class="number-input2 renew-inputs" id="renew-customeraddress" name="customeraddress"><br>
                      <input type="text" class="number-input2 renew-inputs" id="renew-customernumber" name="customernumber"><br>
                      <input type="text" class="number-input2 renew-inputs" id="renew-customerbranch" name="customerbranch"><br>
                      <input type="text" class="number-input2 renew-inputs" id="renew-currentbranch" name="currentbranch"><br>
                      <input type="text" class="number-input2 renew-inputs" id="renew-noofitems" name="noofitems">
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div style="padding-left:15px;border-left:1px solid rgba(0,0,0,0.2);">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label >Capital</label><br>
                        <label >Advance Interest <span id="renew-advintrate"></span></label><br>
                        <label >Interest <span id="renew-interestrate"></span></label><br>
                        <label >Penalty <span id="renew-penaltyrate"></span></label><br>
                        <label >Service Charge</label><br>
                        <label style="display:none;">Service Fee</label>
                        <label >Doc. Stamp Fee</label><br>
                        <label >Total Charges</label>
                        <hr style="margin-top:0px;">
                        <label >Total Payable</label><br>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <input type="text" class="number-input renew-inputs" id="renew-totalamount" name="advint"><br>
                        <input type="text" class="number-input renew-inputs" id="renew-advint" name="advint"><br>
                        <input type="text" class="number-input renew-inputs" id="renew-interest" name="interest"><br>
                        <input type="text" class="number-input renew-inputs" id="renew-penalty" name="penalty"><br>
                        <input type="text" class="number-input renew-inputs" id="renew-srvcharge" name="srvcharge"><br>
                        <input style="display:none;" type="text" class="number-input renew-inputs" id="renew-srvfee" name="srvfee">
                        <input type="text" class="number-input renew-inputs" id="renew-docstamp" name="docstamp"><br>
                        <input type="text" class="number-input renew-inputs" id="renew-totalcharges" name="totalcharges">
                        <hr style="margin-top:0px;">
                        <input type="text" class="number-input renew-inputs" id="renew-totalpayable" name="totalcharges">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button id="renew-transaction-cnt-btn" class="btn btn-warning">Renew Transaction</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <div id="redeemTransaction" 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">Transaction Details (Redeem)</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-md-6">
                <div class="row">
                  <div class="col-md-5">
                    <div class="form-group">
                      <label >Transaction No.</label><br>
                      <label >Papeleta No.</label><br>
                      <label >Customer Code</label><br>
                      <label >Customer Name</label><br>
                      <label >Customer Add.</label><br>
                      <label >Contact Number</label><br>
                      <label >Customer Branch</label><br>
                      <label >Current Branch</label><br>
                      <label >No. of Item(s)</label>
                    </div>
                  </div>
                  <div class="col-md-7">
                    <div class="form-group">
                      <input type="text" class="number-input2 renew-inputs" id="redeem-transactionno" name="transactionno"><br>
                      <input type="text" class="number-input2 renew-inputs" id="redeem-papeletano" name="papeletano"><br>
                      <input type="text" class="number-input2 renew-inputs" id="redeem-customercode" name="customercode"><br>
                      <input type="text" class="number-input2 renew-inputs" id="redeem-customername" name="customername"><br>
                      <input type="text" class="number-input2 renew-inputs" id="redeem-customeraddress" name="customeraddress"><br>
                      <input type="text" class="number-input2 renew-inputs" id="redeem-customernumber" name="customernumber"><br>
                      <input type="text" class="number-input2 renew-inputs" id="redeem-customerbranch" name="customerbranch"><br>
                      <input type="text" class="number-input2 renew-inputs" id="redeem-currentbranch" name="currentbranch"><br>
                      <input type="text" class="number-input2 renew-inputs" id="redeem-noofitems" name="noofitems">
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div style="padding-left:15px;border-left:1px solid rgba(0,0,0,0.2);">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label >Capital</label><br>
                        <label >Advance Interest <span id="redeem-advintrate"></span></label><br>
                        <label >Interest <span id="redeem-interestrate"></span></label><br>
                        <label >Penalty <span id="redeem-penaltyrate"></span></label><br>
                        <label >Service Charge</label><br>
                        <label style="display:none;">Service Fee</label>
                        <label >Doc. Stamp Fee</label><br>
                        <label >Total Charges</label>
                        <hr style="margin-top:0px;">
                        <label >Total Payable</label><br>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <input type="text" class="number-input renew-inputs" id="redeem-totalamount" = name="advint"><br>
                        <input type="text" class="number-input renew-inputs" id="redeem-advint" = name="advint"><br>
                        <input type="text" class="number-input renew-inputs" id="redeem-interest" = name="interest"><br>
                        <input type="text" class="number-input renew-inputs" id="redeem-penalty" = name="penalty"><br>
                        <input type="text" class="number-input renew-inputs" id="redeem-srvcharge" = name="srvcharge"><br>
                        <input style="display:none;" type="text" class="number-input renew-inputs" id="redeem-srvfee" = name="srvfee">
                        <input type="text" class="number-input renew-inputs" id="redeem-docstamp" = name="docstamp"><br>
                        <input type="text" class="number-input renew-inputs" id="redeem-totalcharges" = name="totalcharges">
                        <hr style="margin-top:0px;">
                        <input type="text" class="number-input renew-inputs" id="redeem-totalpayable" = name="totalcharges">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button id="redeem-transaction-cnt-btn" class="btn btn-success">Redeem Transaction</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <div id="customTransaction" 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;background:rgba(0,0,0,0.08);">
            <div class="row">
              <div class="col-4">
                <label style="color:maroon;">Customer Details</label><br>
                <div class="row">
                  <div class="col-md-5">
                    <div class="form-group">
                      <label >Transaction No.</label><br>
                      <label >Current Papeleta No.</label><br>
                      <label >New Papeleta No.</label><br>
                      <label >Customer Code</label><br>
                      <label >Customer Name</label><br>
                      <label >Customer Add.</label><br>
                      <label >Contact Number</label><br>
                      <label >Customer Branch</label><br>
                      <label >Current Branch</label><br>
                      <label >No. of Item(s)</label>
                    </div>
                  </div>
                  <div class="col-md-7">
                    <div class="form-group">
                      <input type="text" class="number-input2 renew-inputs" id="cus-transactionno" name="transactionno"><br>
                      <input type="text" class="number-input2 renew-inputs" id="cus-papeletano-current" name="papeletano"><br>
                      <input type="text" class="number-input2" id="cus-papeletano-new" name="papeletano"><br>
                      <input type="text" class="number-input2 renew-inputs" id="cus-customercode" name="customercode"><br>
                      <input type="text" class="number-input2 renew-inputs" id="cus-customername" name="customername"><br>
                      <input type="text" class="number-input2 renew-inputs" id="cus-customeraddress" name="customeraddress"><br>
                      <input type="text" class="number-input2 renew-inputs" id="cus-customernumber" name="customernumber"><br>
                      <input type="text" class="number-input2 renew-inputs" id="cus-customerbranch" name="customerbranch"><br>
                      <input type="text" class="number-input2 renew-inputs" id="cus-currentbranch" name="currentbranch"><br>
                      <input type="text" class="number-input2 renew-inputs" id="cus-noofitems" name="noofitems">
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-4">
                <label style="color:maroon;">Redeemed Items</label><br>
                <div style="padding:15px;border-left:1px solid rgba(0,0,0,0.2);">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label >No. of Items</label><br>
                        <label >Capital</label><br>
                        <label >Adv. Interest <span id="redeem1-advintrate"></span></label><br>
                        <label >Interest <span id="redeem1-interestrate"></span></label><br>
                        <label >Penalty <span id="redeem1-penaltyrate"></span></label><br>
                        <label >Service Charge</label><br>
                        <label style="display:none;">Service Fee</label>
                        <label >Doc. Stamp Fee</label><br>
                        <label >Total Charges</label>
                        <hr style="margin-top:0px;">
                        <label >Sub Total</label><br>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <input type="text" class="number-input renew-inputs" id="redeem1-items" = name="advint"><br>
                        <input type="text" class="number-input renew-inputs" id="redeem1-totalamount" = name="advint"><br>
                        <input type="text" class="number-input renew-inputs" id="redeem1-advint" = name="advint"><br>
                        <input type="text" class="number-input renew-inputs" id="redeem1-interest" = name="interest"><br>
                        <input type="text" class="number-input renew-inputs" id="redeem1-penalty" = name="penalty"><br>
                        <input type="text" class="number-input renew-inputs" id="redeem1-srvcharge" = name="srvcharge"><br>
                        <input style="display:none;" type="text" class="number-input renew-inputs" id="redeem1-srvfee" = name="srvfee">
                        <input type="text" class="number-input renew-inputs" id="redeem1-docstamp" = name="docstamp"><br>
                        <input type="text" class="number-input renew-inputs" id="redeem1-totalcharges" = name="totalcharges">
                        <hr style="margin-top:0px;">
                        <input type="text" class="number-input renew-inputs" id="redeem1-totalpayable" = name="totalcharges">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-4">
                <label style="color:maroon;">Renewed Items</label><br>
                <div style="padding:15px;border-left:1px solid rgba(0,0,0,0.2);">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label >No. of Items</label><br>
                        <label >Capital</label><br>
                        <label >Adv. Interest <span id="renew1-advintrate"></span></label><br>
                        <label >Interest <span id="renew1-interestrate"></span></label><br>
                        <label >Penalty <span id="renew1-penaltyrate"></span></label><br>
                        <label >Service Charge</label><br>
                        <label style="display:none;">Service Fee</label>
                        <label >Doc. Stamp Fee</label><br>
                        <label >Total Charges</label>
                        <hr style="margin-top:0px;">
                        <label >Sub Total</label><br>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <input type="text" class="number-input renew-inputs" id="renew1-items" = name="items"><br>
                        <input type="text" class="number-input renew-inputs" id="renew1-totalamount" = name="advint"><br>
                        <input type="text" class="number-input renew-inputs" id="renew1-advint" = name="advint"><br>
                        <input type="text" class="number-input renew-inputs" id="renew1-interest" = name="interest"><br>
                        <input type="text" class="number-input renew-inputs" id="renew1-penalty" = name="penalty"><br>
                        <input type="text" class="number-input renew-inputs" id="renew1-srvcharge" = name="srvcharge"><br>
                        <input style="display:none;" type="text" class="number-input renew-inputs" id="renew1-srvfee" = name="srvfee">
                        <input type="text" class="number-input renew-inputs" id="renew1-docstamp" = name="docstamp"><br>
                        <input type="text" class="number-input renew-inputs" id="renew1-totalcharges" = name="totalcharges">
                        <hr style="margin-top:0px;">
                        <input type="text" class="number-input renew-inputs" id="renew1-totalpayable" = name="totalcharges">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button id="redeem-transaction-cnt-btn" class="btn btn-success">Continue</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </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>
  <!-- Transaction Add -->
  <script>
    $(function() {
      $("#datepawned").datepicker({
        dateFormat: "yy-mm-dd",
      });
      $("#datemature").datepicker({
        dateFormat: "yy-mm-dd",
      });
      $("#lastdayredeem").datepicker({
        dateFormat: "yy-mm-dd",
      });
      $("#trans-datepawned").datepicker({
        dateFormat: "yy-mm-dd",
      });
      $("#trans-datemature").datepicker({
        dateFormat: "yy-mm-dd",
      });
      $("#trans-lastdayredeem").datepicker({
        dateFormat: "yy-mm-dd",
      });
      $("#trans-currentdate").datepicker({
        dateFormat: "yy-mm-dd",
      });
      $("#trans-datemature").datepicker( "option", "disabled", true );
      $("#trans-lastdayredeem").datepicker( "option", "disabled", true );
    });
    var scheduleList = [];
    var rateList = [];
    var itemDatatable = $('#itemtable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      "autoWidth": false,
      "ordering": false,
        "dom": '<"top"i>rt<"bottom"flp><"clear">',
      });
    $("#customer-name-search").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'customers', locname: $("#customer-name-search").val()},
            success:function(e){
              if(e){
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 3
    });
    $("#customer-name-search").on('keypress',function(e){
      var thisId = $(this).val();
      if(e.which == 13){
        console.log(thisId);
        thisId = thisId.split(' ');
        $('#customercode').val(thisId[0]);
        getCustomerDetails(thisId);
      }
    });
    $("#customer-name-search").on('change',function(e){
      var thisId = $(this).val();
      thisId = thisId.split(' ');
      $('#customercode').val(thisId[0]);
      getCustomerDetails(thisId);
    });
    $('#datepawned').on('change',function(){
      var pawnedDate = $(this).val();
      var date = $('#datepawned').datepicker({ dateFormat: 'mm-dd-yy' }).val();
      console.log(date);
      console.log(pawnedDate);
      var pawnedDateArr = pawnedDate.split('-');
      var redeemMonth = parseInt(pawnedDateArr[1]);
      var redeemDay = parseInt(pawnedDateArr[2]);
      var pawnedMonth = parseInt(pawnedDateArr[1]) + 1;
      var pawnedDay = parseInt(pawnedDateArr[2]);
      var pawnedYear = parseInt(pawnedDateArr[0]);
      var redeemYear = parseInt(pawnedDateArr[0]);
      if(pawnedDay < 10) pawnedDay = '0'+pawnedDay;
      if(pawnedMonth < 10) pawnedMonth = '0'+pawnedMonth;
      else {
        if(pawnedMonth > 12) {
          pawnedMonth = '01';
          pawnedYear = pawnedYear + 1;
        }
      }
      $('#datemature').val(pawnedYear + '-' + pawnedMonth + '-' + pawnedDay);
      console.log(redeemMonth);
      for (num in scheduleList){
        if(parseInt(scheduleList[num].dateloanfrmo) == redeemMonth && parseInt(scheduleList[num].dateloantomo) == redeemMonth){
          if(parseInt(scheduleList[num].dateloanfrday) <= redeemDay && parseInt(scheduleList[num].dateloantoday) >= redeemDay){
            console.log(scheduleList[num]);
            var tmpMonthFrom = scheduleList[num].dateloanfrmo;
            var tmpMonth = scheduleList[num].dateredeemmo;
            var tmpDay = scheduleList[num].dateredeemday;
            var tmpYear = pawnedYear;
            if(parseInt(tmpMonth) < 10) tmpMonth = '0'+tmpMonth;
            if(parseInt(tmpDay) < 10) tmpDay = '0'+tmpDay;
            if(parseInt(redeemMonth) > 7) redeemYear = parseInt(redeemYear) + 1;
            console.log(redeemYear);
            $('#lastdayredeem').val(redeemYear + '-' + tmpMonth + '-' + tmpDay);
          }
        }
      }
    });
    function getCustomerDetails(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);
                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');
            }
          }
      });
    }
    getSettings();
    resetCustomerDetails();
    function getSettings(){
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'schedule', type: 'list'},
          success:function(e){
            if(e){
              scheduleList = e;
            }
          }
      });
      $.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 = e;
              var rateHtml = "";
              $('#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>';
                }
              }
              $('#advintrate').html(rateHtml);
              computeProceeds();
            }
          }
      });
    }
    function generateNewTransCode(){
      var branchcode = $('#userbranch').val();
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'transactions', type: 'newcode', code: branchcode, transtype: 'Jewelry'},
          success:function(e){
            if(e){
              console.log(e);
              $('#transactioncode').val(e.msg);
              $('#checking-customer-notification').css('display','none');
            }
          }
      });
    }
    function resetCustomerDetails(){
      $('#customercode').val('');
      $('#firstname').val('');
      $('#middlename').val('');
      $('#lastname').val('');
      $('#branchname').val('');
      $('#branchcode').val('');
      $('#idtype').val('');
      $('#idnumber').val('');
      $('#dateofbirth').val('');
      $('#placeofbirth').val('');
      $('#nationality').val('');
      $('#contactnumber').val('');
      $('#address').val('');
      $('#transactioncode').val('');
      $('#customer-image').prop('src',null);
      $('#papeletanumber').val('');
      $('#datepawned').val('');
      $('#datemature').val('');
      $('#lastdayredeem').val('');
      $('#add-item-transaction-modal-btn').prop('disabled',true);
    }
    $('#itemcategory').on('change',function(){
      var itemcat = $(this).val();
      console.log(itemcat);
      loadItemColor(itemcat);
      loadItemitemclassification(itemcat);
    });
    function loadItemColor(itmtype){
      $('#itemcolor').html('<option value="">--select--</option>');
      for(num in miscellaneousList){
        if(itmtype == 'Gold'){
          $('#itemcolor').html('<option value="-">NA</option>');
        }
        else if(itmtype == 'Stone'){
          if(miscellaneousList[num].type == "SCR"){
            $('#itemcolor').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'">'+miscellaneousList[num].description+'</option>');
          }
        }
      }
    }
    function loadItemitemclassification(itmtype){
      $('#itemclassification').html('<option value="">--select--</option>');
      for(num in miscellaneousList){
        if(itmtype == 'Stone'){
          if(miscellaneousList[num].type == "SCD"){
            $('#itemclassification').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'">'+miscellaneousList[num].description+'</option>');
          }
        }
        else if(itmtype == 'Gold'){
          if(miscellaneousList[num].type == "GCD"){
            $('#itemclassification').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'">'+miscellaneousList[num].description+'</option>');
          }
        }
      }
    }

  </script>
  <script>
    $("#branch-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: 'branch', locname: $("#branch-select").val()},
            success:function(e){
              if(e){
                console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $("#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 itemListArray = [];
    $('#add-item-transaction-btn').on('click',function(event){
      event.preventDefault();
      $.ajax({
          url: '/add-item-transaction',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: $('#add-item-transaction-form').serialize(),
          success:function(e){
            if(e){
              console.log(e);
              refreshItemList();
            }
          }
      });
    });
    $('#remove-item-transaction-btn').on('click',function(event){
      event.preventDefault();
      $.ajax({
          url: '/remove-item-transaction',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: $('#edit-item-transaction-form').serialize(),
          success:function(e){
            if(e){
              console.log(e);
              refreshItemList();
            }
          }
      });
    });
    refreshItemList();
    function refreshItemList(){
      $.ajax({
          url: '/get-item-transaction',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          success:function(e){
            if(e){
              console.log(e);
              var totalAmount = 0;
              var totalQuantity = 0;
              var itemSet = [];
              itemListArray = e;
              for(num in e){
                var amount = parseFloat(e[num].itemvalue);
                var itmType = e[num].itemtype;
                var itmClass = e[num].itemclassification;
                var itmColor = e[num].itemcolor;
                if(itmType != null){
                  if(itmType != '-'){
                    itmType = itmType.split(':');
                    itmType = itmType[1];
                  }
                }
                if(itmClass != null){
                  if(itmClass != '-'){
                    itmClass = itmClass.split(':');
                    itmClass = itmClass[1];
                  }
                }
                if(itmColor != null){
                  if(itmColor != '-'){
                    itmColor = itmColor.split(':');
                    itmColor = itmColor[1];
                  }
                }
                itemSet.push([
                  e[num].itemcode,
                  e[num].itemcategory,
                  itmType,
                  itmClass,
                  itmColor,
                  e[num].itemdescription,
                  e[num].itempurity + ' k',
                  e[num].itemweight + ' gm',
                  e[num].itemquantity,
                  amount.toFixed(2),
                  '<button type="button" id="itemselected-'+ e[num].itemcode + '" class="btn btn-default btn-sm edit-transaction-class" data-toggle="modal" data-target="#editItemTransaction"><i class="fas fa-pencil-alt"></i></button>',]);
                  totalQuantity = parseInt(totalQuantity) + parseInt(e[num].itemquantity);
                  totalAmount = parseFloat(totalAmount) + parseFloat(e[num].itemvalue);
              }
              itemDatatable.destroy();
              itemDatatable.draw();
              $('#itemtable').DataTable({
                "scrollY":"auto",
                keys: true,
                draw: true,
                paging:   false,
                info:     false,
                "autoWidth": false,
                "ordering": false,
                data: itemSet,
                "dom": '<"top"i>rt<"bottom"flp><"clear">',
                // "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                columns: [
                  { title: "Id" },
                  { title: "Category" },
                  { title: "Type" },
                  { title: "Classification" },
                  { title: "Color" },
                  { title: "Description" },
                  { title: "Purity(K)" },
                  { title: "Weight" },
                  { title: "Quantity" },
                  { title: "Amount" },
                  { title: "" }
                ]}),
              itemDatatable = $('#itemtable').DataTable();
              itemDatatable.draw();
              $('#totalamount').val(totalAmount.toFixed(2));
              $('#totalquantity').val(totalQuantity);
              computeProceeds();
            }
          }
      });
    }
    function computeProceeds(){
      var serviceCharge = $('#srvcharge').val();
      var serviceFee = 0;//$('#srvfee').val();
      var docStampFee = $('#docstamp').val();
      var totalAmount = $('#totalamount').val();
      var totalQuantity = $('#totalquantity').val();
      var aintrateType = $('#advintrate').val();
      if(parseFloat(totalAmount) > 0){
        aintrateType = aintrateType.split('-');
        var aintrate = aintrateType[1];
        var aintval = parseFloat(totalAmount) * parseFloat(aintrate / 100);
        var totalDeductions = parseFloat(serviceCharge) + parseFloat(serviceFee) + parseFloat(docStampFee) + parseFloat(aintval);
        var netProceeds = parseFloat(totalAmount) - parseFloat(totalDeductions);
        $('#netproceeds').val(netProceeds.toFixed(2));
        $('#advintamnt').val(aintval.toFixed(2));
      }
    }
    $("#srvcharge").on('change',function(e){
      var thisval = parseFloat($(this).val());
      $(this).val(thisval.toFixed(2));
      computeProceeds();
    });
    $("#srvfee").on('change',function(e){
      var thisval = parseFloat($(this).val());
      $(this).val(thisval.toFixed(2));
      computeProceeds();
    });
    $("#docstamp").on('change',function(e){
      var thisval = parseFloat($(this).val());
      $(this).val(thisval.toFixed(2));
      computeProceeds();
    });
    $("#advintrate").on('change',function(e){
      computeProceeds();
    });
    $(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];
          $('#e-itemcode').val(itemSelectedEdit.itemcode);
          $('#e-itemdescription').val(itemSelectedEdit.itemdescription);
          $('#e-itempurity').val(itemSelectedEdit.itempurity);
          $('#e-itemweight').val(itemSelectedEdit.itemweight);
          $('#e-itemquantity').val(itemSelectedEdit.itemquantity);
          $('#e-itemvalue').val(itemSelectedEdit.itemvalue);

          var itemcategory = itemSelectedEdit.itemcategory;
          $('#e-itemcategory').val(itemcategory);
          $('#e-itemtype').html('<option value="">--select--</option>');
          $('#e-itemclassification').html('<option value="">--select--</option>');
          $('#e-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){
                $('#e-itemtype').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
              }
              else $('#e-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){
                  $('#e-itemclassification').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
                }
                else $('#e-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){
                    $('#e-itemcolor').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
                  }
                  else $('#e-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){
                  $('#e-itemclassification').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
                }
                else $('#e-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){
                  $('#e-itemcolor').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
                }
                else $('#e-itemcolor').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'">'+miscellaneousList[num].description+'</option>');
              }
            }
          }

        }
      }
    });
    $('#edit-item-transaction-btn').on('click',function(event){
      event.preventDefault();
      $.ajax({
          url: '/update-item-transaction',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: $('#edit-item-transaction-form').serialize(),
          success:function(e){
            if(e){
              console.log(e);
              refreshItemList();
            }
          }
      });
    });
    $(document).on('shown.bs.modal', '#itemtable', function () {
        itemtable.columns.adjust();
    });
  </script>
  <script>
    $('#save-to-draft-btn').on('click',function(event){
      event.preventDefault();
      $.ajax({
          url: '/save-to-draft-transaction',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: $('#add-new-transaction-form').serialize(),
          success:function(e){
            if(e){
              console.log(e);
            }
          }
      });
    });
    $('#confirm-transaction-btn').on('click',function(event){
      event.preventDefault();
      $('.trans-input').css('border','1px solid rgba(0,0,0,0.1)');
      $.ajax({
          url: '/add-new-transaction',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: $('#add-new-transaction-form').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();
                resetCustomerDetails();
                $('#response-transactioncode').text(e.msg);
                $('#confirmationDialog').modal('show');
              }
            }
          }
      });
    });
  </script>
  <!-- Transaction Search -->
  <script>
    var currentSelectedTrans = [];
    var miscellaneousList = [];
    var rateListTrans = [];
    var scheduleListTrans = [];
    var transactionListArray = [];
    var itemTransListArr = [];
    var transDatatable = $('#transactiontable').DataTable({
      keys: true,
      draw: true,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
    var editItemDatatable = $('#edititemtable').DataTable({
      keys: true,
      draw: true,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
    $('#custom-transaction-btn').prop('disabled',true);
    $('#trans-search-button').on('click',function(event){
      event.preventDefault();
      $('#transactionListModal').modal('show');
      searchTransactionQuery();
    });
    function searchTransactionQuery(){
      $.ajax({
          url: '/search-transaction',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {param: $('#trans-search-text').val()},
          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,
                  '<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: "" },
                ]}),
              transDatatable = $('#transactiontable').DataTable();
              transDatatable.draw();
            }

          }
      });
    }
    function getTransactionItems(transcode, papeletano){
      $.ajax({
          url: '/get-transaction-items',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {transcode: transcode, papeletano: papeletano},
          success:function(e){
            if(e){
              console.log(e);
              refreshItemListTrans(e);
              computeProceedsTrans();
            }
          }
      });
    }
    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 refreshItemListTrans(e){
      console.log(e);
      var totalAmount = 0;
      var totalQuantity = 0;
      var itemSet2 = [];
      itemTransListArr = e;
      for(num in e){
        var amountval = parseFloat(e[num].amount);
        var itmType = e[num].itemtype;
        if(itmType != '-'){
          itmType = itmType.split(':');
          itmType = itmType[1];
        }
        var itmClass = e[num].classification;
        if(itmClass != '-'){
          itmClass = itmClass.split(':');
          itmClass = itmClass[1];
        }
        var itmColor = e[num].colorcode;
        if(itmColor != '-'){
          itmColor = itmColor.split(':');
          itmColor = itmColor[1];
        }

        itemSet2.push([
          '<input class="selected-items-class" type="checkbox" name="selecteditems[]" value="'+e[num].id+'-'+amountval.toFixed(2)+'" checked="checked">',
          e[num].category,
          itmType,
          itmClass,
          itmColor,
          e[num].description,
          e[num].purity + ' k',
          e[num].weight + ' gm',
          e[num].quantity,
          amountval.toFixed(2),
          '<button type="button" id="itemselected-'+ e[num].id + '" class="btn btn-default btn-sm edit-transaction-class2" data-toggle="modal" data-target="#editItemTransaction2"><i class="fas fa-pencil-alt"></i></button>',]);
          totalQuantity = parseInt(totalQuantity) + parseInt(e[num].quantity);
          totalAmount = parseFloat(totalAmount) + parseFloat(e[num].amount);
      }
      editItemDatatable.destroy();
      editItemDatatable.draw();
      $('#edititemtable').DataTable({
        "scrollY":"auto",
        keys: true,
        draw: true,
        paging:   false,
        info:     false,
        "autoWidth": false,
        "ordering": false,
        data: itemSet2,
        "dom": '<"top"i>rt<"bottom"flp><"clear">',
        columns: [
          { title: "" },
          { title: "Category" },
          { title: "Type" },
          { title: "Class" },
          { title: "Color" },
          { title: "Description" },
          { title: "Purity(K)" },
          { title: "Weight" },
          { title: "Qty" },
          { title: "Value" },
          { title: "" }
        ]}),
      editItemDatatable = $('#edititemtable').DataTable();
      editItemDatatable.draw();
      editItemDatatable.columns.adjust();
      $('#trans-totalamount').val(totalAmount.toFixed(2));
      $('#trans-totalquantity').val(totalQuantity);
      computeTransRates();
    }
    function computeProceedsTrans(){
      var serviceCharge = $('#trans-srvcharge').val();
      var serviceFee = $('#trans-srvfee').val();
      var docStampFee = $('#trans-docstamp').val();
      var totalAmount = $('#trans-totalamount').val();
      var totalQuantity = $('#trans-totalquantity').val();
      var aintrateType = $('#trans-advintrate').val();
      if(parseFloat(totalAmount) > 0){
        aintrateType = aintrateType.split('-');
        var aintrate = aintrateType[1];
        var aintval = parseFloat(totalAmount) * parseFloat(aintrate / 100);
        var totalDeductions = parseFloat(serviceCharge) + parseFloat(serviceFee) + parseFloat(docStampFee) + parseFloat(aintval);
        var netProceeds = parseFloat(totalAmount) - parseFloat(totalDeductions);
        $('#trans-netproceeds').val(netProceeds.toFixed(2));
        $('#trans-advintamnt').val(aintval.toFixed(2));
      }
    }
    function resetCustomerDetailsTrans(){
      $('#trans-customercode').val('');
      $('#trans-firstname').val('');
      $('#trans-middlename').val('');
      $('#trans-lastname').val('');
      $('#trans-branchname').val('');
      $('#trans-branchcode').val('');
      $('#trans-idtype').val('');
      $('#trans-idnumber').val('');
      $('#trans-dateofbirth').val('');
      $('#trans-placeofbirth').val('');
      $('#trans-nationality').val('');
      $('#trans-contactnumber').val('');
      $('#trans-address').val('');
      $('#trans-transactioncode').val('');
      $('#trans-customer-image').prop('src',null);
      $('#trans-papeletanumber').val('');
      $('#trans-datepawned').val('');
      $('#trans-datemature').val('');
      $('#trans-lastdayredeem').val('');
      $('#trans-add-item-transaction-modal-btn').prop('disabled',true);
    }
    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);
              computeProceeds();
            }
          }
      });
      $.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>');
                }
              }
            }
          }
      });
    }
    function computeTransRates(){
      var transcode = $('#trans-transactioncode').val();
      var transdate = $('#trans-currentdate').val();
      var itemArrLst = $('input:checkbox:checked').map(function() {
          return this.value;
      }).get();
      itemArrLst = JSON.stringify(itemArrLst);
      console.log(itemArrLst);
      console.log(transcode);
      console.log(transdate);
      $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'transactions', type: 'computerates', transcode: transcode, transdate: transdate, items: itemArrLst },
        success:function(e){
          if(e){
            console.log(e);
            var srcchargeval = $('#trans-srvcharge').val();
            var interestResult = e.interest;
            var penaltyResult = e.penalty;
            var interestResultRate = interestResult.rate;
            var penaltyResultRate = penaltyResult.rate;
            var intvalue = interestResult.value;
            var penvalue = penaltyResult.value
            var docstampvalue = e.docstamp
            var totalchargesvalue = parseFloat(intvalue) + parseFloat(penvalue) + parseFloat(docstampvalue) + parseFloat(srcchargeval);
            $('#trans-tenancy').val(e.tenancy);
            $('#trans-interestrate').val(interestResultRate.toFixed(2) + " %");
            $('#trans-interestamnt').val(intvalue.toFixed(2));
            $('#trans-penaltyrate').val(penaltyResultRate.toFixed(2) + " %");
            $('#trans-penaltycharge').val(penvalue.toFixed(2));
            $('#trans-totalcharges').val(totalchargesvalue.toFixed(2));
            $('#trans-docstamp').val(docstampvalue.toFixed(2));
          }
        }
      });
    }
    function getCheckboxValue(){
      var checkedVals = $('input:checkbox:checked').map(function() {
          return this.value;
      }).get();
      console.log(checkedVals);
      var trnsQty = $('#trans-totalquantity').val();
      trnsQty = parseInt(trnsQty);
      var checkedQty = checkedVals.length;
      checkedQty = parseInt(checkedQty);
      console.log(checkedQty + ' ' + trnsQty);
      if(checkedQty != trnsQty){
        $('#redeem-transaction-btn').prop('disabled',true);
        $('#renew-transaction-btn').prop('disabled',true);
        $('#custom-transaction-btn').prop('disabled',false);
        console.log(checkedQty + ' ' + trnsQty + " renew");
      }
      else {
        $('#redeem-transaction-btn').prop('disabled',false);
        $('#renew-transaction-btn').prop('disabled',false);
        $('#custom-transaction-btn').prop('disabled',true);
        console.log(checkedQty + ' ' + trnsQty + " redeem");
      }


      var amountToTrans = 0;
      for(num in checkedVals){
        var tempAmnt = checkedVals[num];
        tempAmnt = tempAmnt.split('-');
        var tmpValue = tempAmnt[1];
        var tmpId = tempAmnt[0];
        amountToTrans = parseFloat(amountToTrans) + parseFloat(tmpValue);
      }
      $('#trans-totalamount').val(amountToTrans.toFixed(2));
      computeProceedsTrans();
    }
    getSettingsTrans();
    $("#trans-srvcharge").on('change',function(e){
      var thisval = parseFloat($(this).val());
      $(this).val(thisval.toFixed(2));
      computeProceedsTrans();
    });
    $("#trans-srvfee").on('change',function(e){
      var thisval = parseFloat($(this).val());
      $(this).val(thisval.toFixed(2));
      computeProceedsTrans();
    });
    $("#trans-docstamp").on('change',function(e){
      var thisval = parseFloat($(this).val());
      $(this).val(thisval.toFixed(2));
      computeProceedsTrans();
    });
    $("#trans-advintrate").on('change',function(e){
      computeProceedsTrans();
    });
    $('#trans-datepawned').on('change',function(){
      var pawnedDate = $(this).val();
      console.log(pawnedDate);
      var pawnedDateArr = pawnedDate.split('-');
      var redeemMonth = parseInt(pawnedDateArr[1]);
      var redeemDay = parseInt(pawnedDateArr[2]);
      var pawnedMonth = parseInt(pawnedDateArr[1]) + 1;
      var pawnedDay = parseInt(pawnedDateArr[2]);
      var pawnedYear = parseInt(pawnedDateArr[0]);
      if(pawnedDay < 10) pawnedDay = '0'+pawnedDay;
      if(pawnedMonth < 10) pawnedMonth = '0'+pawnedMonth;
      else {
        if(pawnedMonth > 12) {
          pawnedMonth = '01';
          pawnedYear = pawnedYear + 1;
        }
      }
      $('#trans-datemature').val(pawnedYear + '-' + pawnedMonth + '-' + pawnedDay);
      console.log(redeemMonth);
      for (num in scheduleList){
        if(parseInt(scheduleList[num].dateloanfrmo) == redeemMonth && parseInt(scheduleList[num].dateloantomo) == redeemMonth){
          if(parseInt(scheduleList[num].dateloanfrday) <= redeemDay && parseInt(scheduleList[num].dateloantoday) >= redeemDay){
            console.log(scheduleList[num]);
            var tmpMonth = scheduleList[num].dateredeemmo;
            var tmpDay = scheduleList[num].dateredeemday;
            var tmpYear = pawnedYear;
            if(parseInt(tmpMonth) < 10) tmpMonth = '0'+tmpMonth;
            if(parseInt(tmpDay) < 10) tmpDay = '0'+tmpDay;
            if(parseInt(tmpMonth) > 7) pawnedYear = pawnedYear + 1;
            $('#trans-lastdayredeem').val(pawnedYear + '-' + tmpMonth + '-' + tmpDay);
          }
        }
      }
    });
    $('#trans-currentdate').on('change',function(){
      computeTransRates();
    });
    $(document).on('shown.bs.modal', '#transactionListModal', function () {
        transDatatable.columns.adjust();
    });
    $(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);
          getTransactionItems(transData.transactionno, transData.papeletano);
          getCustomerDetailsTrans(transData.customercode);
          computeTransRates();
          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);
        }
      }

    });
    $(document).on('shown.bs.modal', '#renewTransaction', function () {
        console.log("test");
        console.log($('#trans-advintrate').val());
        var readvintrate = $('#trans-advintrate').val();
        readvintrate = readvintrate.split('-');
        var totalamountval = $('#trans-totalamount').val();
        var advintvalue = $('#trans-advintamnt').val();
        var reintrate = $('#trans-interestrate').val();
        var reintvalue = $('#trans-interestamnt').val();
        var repenaltyrate = $('#trans-penaltyrate').val();
        var repenaltyval = $('#trans-penaltycharge').val();
        var resrvcharge = $('#trans-srvcharge').val();
        var resrcfee = $('#trans-srvfee').val();
        var redocstamp = $('#trans-docstamp').val();
        var retotalcharges = parseFloat(advintvalue) + parseFloat(reintvalue) + parseFloat(repenaltyval) + parseFloat(resrvcharge) + parseFloat(resrcfee) + parseFloat(redocstamp);
        var totalPayable = parseFloat(retotalcharges);
        $('#renew-advintrate').text('('+readvintrate[1]+' %)');
        $('#renew-advint').val(advintvalue);
        $('#renew-interestrate').text('('+reintrate+')');
        $('#renew-interest').val(reintvalue);
        $('#renew-penaltyrate').text('('+repenaltyrate+')');
        $('#renew-penalty').val(repenaltyval);
        $('#renew-srvcharge').val(resrvcharge);
        $('#renew-srvfee').val(resrcfee);
        $('#renew-docstamp').val(redocstamp);
        $('#renew-totalcharges').val(retotalcharges.toFixed(2));
        $('#renew-totalamount').val(totalamountval);
        $('#renew-totalpayable').val(totalPayable.toFixed(2));

        $('#renew-transactionno').val($('#trans-transactioncode').val());
        $('#renew-papeletano').val($('#trans-papeletanumber').val());
        $('#renew-customercode').val($('#trans-customercode').val());
        $('#renew-customername').val($('#trans-lastname').val() + ', ' + $('#trans-firstname').val());
        $('#renew-customeraddress').val($('#trans-address').val());
        $('#renew-customerbranch').val($('#trans-branchname').val());
        $('#renew-customernumber').val($('#trans-contactnumber').val());
        $('#renew-currentbranch').val($('#trans-userbranch').val());
        $('#renew-noofitems').val($('#trans-totalquantity').val());


    });
    $(document).on('shown.bs.modal', '#redeemTransaction', function () {
        console.log("test");
        console.log($('#trans-advintrate').val());
        var advintvalue = 0;
        var totalamountval = $('#trans-totalamount').val();
        var reintrate = $('#trans-interestrate').val();
        var reintvalue = $('#trans-interestamnt').val();
        var repenaltyrate = $('#trans-penaltyrate').val();
        var repenaltyval = $('#trans-penaltycharge').val();
        var resrvcharge = '0.00';//$('#trans-srvcharge').val();
        var resrcfee = $('#trans-srvfee').val();
        var redocstamp = '0.00';//$('#trans-docstamp').val();
        var retotalcharges = parseFloat(advintvalue) + parseFloat(reintvalue) + parseFloat(repenaltyval) + parseFloat(resrvcharge) + parseFloat(resrcfee) + parseFloat(redocstamp);
        var totalPayable = parseFloat(retotalcharges) + parseFloat(totalamountval);
        $('#redeem-advintrate').text('(0 %)');
        $('#redeem-advint').val(advintvalue);
        $('#redeem-interestrate').text('('+reintrate+')');
        $('#redeem-interest').val(reintvalue);
        $('#redeem-penaltyrate').text('('+repenaltyrate+')');
        $('#redeem-penalty').val(repenaltyval);
        $('#redeem-srvcharge').val(resrvcharge);
        $('#redeem-srvfee').val(resrcfee);
        $('#redeem-docstamp').val(redocstamp);
        $('#redeem-totalcharges').val(retotalcharges.toFixed(2));
        $('#redeem-totalamount').val(totalamountval);
        $('#redeem-totalpayable').val(totalPayable.toFixed(2));

        $('#redeem-transactionno').val($('#trans-transactioncode').val());
        $('#redeem-papeletano').val($('#trans-papeletanumber').val());
        $('#redeem-customercode').val($('#trans-customercode').val());
        $('#redeem-customername').val($('#trans-lastname').val() + ', ' + $('#trans-firstname').val());
        $('#redeem-customeraddress').val($('#trans-address').val());
        $('#redeem-customerbranch').val($('#trans-branchname').val());
        $('#redeem-customernumber').val($('#trans-contactnumber').val());
        $('#redeem-currentbranch').val($('#trans-userbranch').val());
        $('#redeem-noofitems').val($('#trans-totalquantity').val());

    });
    $(document).on('shown.bs.modal', '#customTransaction', function () {
        console.log(currentSelectedTrans);
        console.log($('#trans-advintrate').val());
        getCheckboxValue();
        var transcode = $('#trans-transactioncode').val();
        var transpapeleta = $('#trans-papeletanumber').val();
        var transdate = $('#trans-currentdate').val();
        var itemArrLst = $('input:checkbox:checked').map(function() {
            return this.value;
        }).get();
        itemArrLst = JSON.stringify(itemArrLst);
        $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'transactions', type: 'computerates2', transcode: transcode, transdate: transdate, items: itemArrLst, papeleta: transpapeleta },
          success:function(e){
            if(e){
              console.log(e);
              var redeemData = e.redeem;
              var renewData = e.renew;

              var redeemDataInterest = redeemData.interest;
              var redeemDataPenalty = redeemData.penalty;
              var redeemIntValue = parseFloat(redeemDataInterest.value);
              var redeemPenValue = parseFloat(redeemDataPenalty.value);
              var redeemSrvChrge = parseFloat(redeemData.servicecharge);
              var redeemDocStamp = parseFloat(redeemData.docstamp);
              var redeemCapital = parseFloat(redeemData.capital);
              var redeemAdvIntValue = parseFloat(redeemData.advintamnt);
              var redeemTotalCharges = redeemIntValue + redeemPenValue + redeemSrvChrge + redeemDocStamp;
              var redeemPayable = redeemCapital + redeemTotalCharges;
              $('#redeem1-items').val(redeemData.itemcount);
              $('#redeem1-advintrate').text('('+redeemData.advintrate+' %)');
              $('#redeem1-advint').val(redeemAdvIntValue.toFixed(2));
              $('#redeem1-interestrate').text('('+redeemDataInterest.rate+' %)');
              $('#redeem1-interest').val(redeemIntValue.toFixed(2));
              $('#redeem1-penaltyrate').text('('+redeemDataPenalty.rate+' %)');
              $('#redeem1-penalty').val(redeemPenValue.toFixed(2));
              $('#redeem1-srvcharge').val(redeemSrvChrge.toFixed(2));
              $('#redeem1-docstamp').val(redeemDocStamp.toFixed(2));
              $('#redeem1-totalcharges').val(redeemTotalCharges.toFixed(2));
              $('#redeem1-totalamount').val(redeemCapital.toFixed(2));
              $('#redeem1-totalpayable').val(redeemPayable.toFixed(2));

              var renewDataInterest = renewData.interest;
              var renewDataPenalty = renewData.penalty;
              var renewIntValue = parseFloat(renewDataInterest.value);
              var renewPenValue = parseFloat(renewDataPenalty.value);
              var renewSrvChrge = parseFloat(renewData.servicecharge);
              var renewDocStamp = parseFloat(renewData.docstamp);
              var renewCapital = parseFloat(renewData.capital);
              var renewAdvIntValue = parseFloat(renewData.advintamnt);
              var renewTotalCharges = renewAdvIntValue + renewIntValue + renewPenValue + renewSrvChrge + renewDocStamp;
              var renewPayable = parseFloat(renewTotalCharges);
              console.log(renewIntValue);
              $('#renew1-items').val(renewData.itemcount);
              $('#renew1-advintrate').text('('+renewData.advintrate+' %)');
              $('#renew1-advint').val(renewAdvIntValue.toFixed(2));
              $('#renew1-interestrate').text('('+renewDataInterest.rate+' %)');
              $('#renew1-interest').val(renewIntValue.toFixed(2));
              $('#renew1-penaltyrate').text('('+renewDataPenalty.rate+' %)');
              $('#renew1-penalty').val(renewPenValue.toFixed(2));
              $('#renew1-srvcharge').val(renewSrvChrge.toFixed(2));
              $('#renew1-docstamp').val(renewDocStamp.toFixed(2));
              $('#renew1-totalcharges').val(renewTotalCharges.toFixed(2));
              $('#renew1-totalamount').val(renewCapital.toFixed(2));
              $('#renew1-totalpayable').val(renewPayable.toFixed(2));

              $('#cus-transactionno').val($('#trans-transactioncode').val());
              $('#cus-papeletano-current').val($('#trans-papeletanumber').val());
              $('#cus-customercode').val($('#trans-customercode').val());
              $('#cus-customername').val($('#trans-lastname').val() + ', ' + $('#trans-firstname').val());
              $('#cus-customeraddress').val($('#trans-address').val());
              $('#cus-customerbranch').val($('#trans-branchname').val());
              $('#cus-customernumber').val($('#trans-contactnumber').val());
              $('#cus-currentbranch').val($('#trans-userbranch').val());
              $('#cus-noofitems').val($('#trans-totalquantity').val());

            }
          }
        });
    });
    $(document).on('click','.edit-transaction-class2',function(event){
      event.preventDefault();
      var itemIdEdit = $(this).attr('id');
      itemIdEdit = itemIdEdit.split('-');
      console.log(itemIdEdit);
      console.log(itemTransListArr);
      for (num in itemTransListArr){
        if(itemTransListArr[num].id == itemIdEdit[1]){
          console.log(itemTransListArr[num]);
          var itemSelectedEdit = itemTransListArr[num];
          $('#e2-itemcode').val(itemSelectedEdit.id);
          $('#e2-itemdescription').val(itemSelectedEdit.description);
          $('#e2-itempurity').val(itemSelectedEdit.purity);
          $('#e2-itemweight').val(itemSelectedEdit.weight);
          $('#e2-itemquantity').val(itemSelectedEdit.quantity);
          $('#e2-itemvalue').val(itemSelectedEdit.amount);

          var itemcategory = itemSelectedEdit.category;
          $('#e2-itemcategory').val(itemcategory);
          $('#e2-itemtype').html('<option value="">--select--</option>');
          $('#e2-itemclassification').html('<option value="">--select--</option>');
          $('#e2-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){
                $('#e2-itemtype').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
              }
              else $('#e2-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.classification);
                if(itemSelectedEdit.classification == isMiscSelected){
                  $('#e2-itemclassification').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
                }
                else $('#e2-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.colorcode == "-") $('#e2-itemcolor').html('<option value="-">NA</option>');
                else {
                  var isMiscSelected = miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description;
                  if(itemSelectedEdit.colorcode == isMiscSelected){
                    $('#e2-itemcolor').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
                  }
                  else $('#e2-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.classification == isMiscSelected){
                  $('#e2-itemclassification').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
                }
                else $('#e2-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.colorcode == isMiscSelected){
                  $('#e2-itemcolor').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'" selected="selected">'+miscellaneousList[num].description+'</option>');
                }
                else $('#e2-itemcolor').append('<option value="'+miscellaneousList[num].code+'-'+miscellaneousList[num].type+':'+miscellaneousList[num].description+'">'+miscellaneousList[num].description+'</option>');
              }
            }
          }


        }
      }
    });
    $(document).on('click','.selected-items-class',function(){
      getCheckboxValue();
      computeTransRates();
      console.log("Test");
    });
    $('#change-papeletano-btn').on('click',function(){
      alert('Function not yet available!');
    });
    function computeTransRates2(){
      var transcode = $('#trans-transactioncode').val();
      var transpapeleta = $('#trans-papeletanumber').val();
      var transdate = $('#trans-currentdate').val();
      var itemArrLst = $('input:checkbox:checked').map(function() {
          return this.value;
      }).get();
      itemArrLst = JSON.stringify(itemArrLst);
      $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'transactions', type: 'computerates2', transcode: transcode, transdate: transdate, items: itemArrLst, papeleta: transpapeleta },
        success:function(e){
          if(e){
            console.log(e);
            var srcchargeval = $('#trans-srvcharge').val();
            var interestResult = e.interest;
            var penaltyResult = e.penalty;
            var interestResultRate = interestResult.rate;
            var penaltyResultRate = penaltyResult.rate;
            var intvalue = interestResult.value;
            var penvalue = penaltyResult.value
            var docstampvalue = e.docstamp
            var totalchargesvalue = parseFloat(intvalue) + parseFloat(penvalue) + parseFloat(docstampvalue) + parseFloat(srcchargeval);
            $('#trans-tenancy').val(e.tenancy);
            $('#trans-interestrate').val(interestResultRate.toFixed(2) + " %");
            $('#trans-interestamnt').val(intvalue.toFixed(2));
            $('#trans-penaltyrate').val(penaltyResultRate.toFixed(2) + " %");
            $('#trans-penaltycharge').val(penvalue.toFixed(2));
            $('#trans-totalcharges').val(totalchargesvalue.toFixed(2));
            $('#trans-docstamp').val(docstampvalue.toFixed(2));
          }
        }
      });
    }


  </script>
@endsection