@extends('layout.master')
@section('pageTitle')
  <title>Pawnshop Management System</title>
@endsection
@section('metaCSRF')
  <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('contents')
    <style>
    label {
      font-size:0.9em !important;
    }

    .pac-container {
      z-index: 99 !important;
    }

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

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


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

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

    .modal { overflow: auto !important; }

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

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

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

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

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

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

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

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

    .selected-item-value {
      text-align: right;
      color: blue;
      max-width: 100px;
      font-weight: 600;
    }
  </style>
  <link rel="stylesheet" href="/css/autocomplete-jquery-ui.css">
  <link rel="stylesheet" href="/theme/plugins/datatables-bs4/css/dataTables.bootstrap4.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <input type="hidden" value="{{$currrentuser['level']}}" id="userlevel" />
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark"><b>Jewelry</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">
                    @if($currrentuser['user'] == "USR-00001")
                      <button id="print-close-btn-test" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    @endif
                    <form id="add-new-transaction-form">
                      <div style="padding:15px;">
                        <h4 style="font-weight:600;font-size:1.1em;">Customer Details <span id="warning-client-text" style="padding-left:50px;font-weight:600;color:red;display:none;">!Beware, Fake Client!</span>
                          <span id="checking-customer-notification" style="display:none;font-weight:normal;font-size:0.9em;color:rgba(0,0,0,0.5);" class="float-right">Checking customer. Please wait...</span></h4>
                        <div class="row">
                          <div class="col-md-3" style="display:none;">
                            <button id="refresh-customer-btn" type="button" class="btn btn-success btn-sm form-control form-control-sm">Refresh Customer List</button>
                          </div>
                          <div class="col-md-9">
                            <input id="customer-name-search" class="form-control form-control-sm" type="text" value="" placeholder="Search Customer Name" />
                          </div>
                          <div class="col-md-2">
                            <button id="search-customer-btn-local" type="button" class="btn btn-success btn-sm form-control form-control-sm" data-toggle="modal" data-target="#cusomerSearchList">Search</button>
                          </div>
                        </div>

                        <div class="row" style="margin-top:10px;">
                          <div class="col-md-3">
                              <div class="row" style="padding:10px;border:1px solid rgba(0,0,0,0.2);background:rgba(3, 144, 252,0.2);">
                                <div class="col-md-12" style="padding:0 !important;margin-bottom:10px;">
                                  <img id="customer-image" src="" style="width:100%;height:210px;" /><br>
                                  <a href="" id="editcustimage" data-toggle="modal" data-target="#customerProfile">View Full Details</a>
                                </div>
                              </div>
                          </div>
                          <div class="col-md-9">
                            <div style="padding:15px;margin-bottom:10px;background:rgba(3, 144, 252,0.2);">
                              <input type="hidden" value="{{$currrentuser['branch']}}" id="userbranch" name="userbranch" />
                              @if($currrentuser['user'] == "USR00000")
                                <input type="text" value="{{$currrentuser['user']}}" id="usercode" name="usercode" />
                              @else
                                <input type="hidden" value="{{$currrentuser['user']}}" id="usercode" name="usercode" />
                              @endif
                              <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" onkeypress="return isNumberKey(event)">
                                  </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-2">
                            <div class="form-group">
                              <label for="isoldtrans">Is Old Trans?</label>
                              <select id="isoldtrans" name="isoldtrans" class="form-control form-control-sm customer-input trans-input">
                                <option value="No">No</option>
                                <option value="Yes">Yes</option>
                              </select>
                            </div>
                          </div>
                          <div class="col-md-2">
                            <div class="form-group">
                              <label>Old Papeleta No.</label>
                              <input type="text" class="form-control form-control-sm trans-input" id="controlno" name="controlno" />
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Summary</label>
                              <input type="text" class="form-control form-control-sm trans-input" id="transsummary" name="transsummary" />
                            </div>
                          </div>
                          <div class="col-md-4">
                            <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>
                                <a href="" id="refresh-item-list" class="btn btn-success btn-sm float-right" style="margin-left:10px;"><i class="fas fa-1x fa-sync-alt"></i></a>
                                <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>Type</th>
                                      <th>Description</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" onkeypress="return isNumberKey(event)">
                                           </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" onkeypress="return isNumberKey(event)">
                                           </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">
                                             <div class="form-group">
                                               <label for="isoldtrans">Appraised By:</label>
                                               <select id="appraised-usercode" class="form-control form-control-sm">
                                                 @if(isset($branchusers))
                                                  @foreach($branchusers as $branchuser)
                                                    @if($currrentuser['user'] == $branchuser['usercode'])
                                                      <option value="{{$branchuser['usercode']}}" selected="selected">{{$branchuser['firstname']}} {{$branchuser['lastname']}}</option>
                                                    @else
                                                      <option value="{{$branchuser['usercode']}}">{{$branchuser['firstname']}} {{$branchuser['lastname']}}</option>
                                                    @endif
                                                  @endforeach
                                                 @endif
                                               </select>
                                             </div>
                                             <button id="confirm-transaction-btn" type="button" class="btn btn-success btn-sm form-control form-control-sm" disabled>Confirm Transaction</button>
                                             <button id="save-to-draft-btn" type="button" style="margin-top:5px;" class="btn btn-warning btn-sm form-control form-control-sm">Save to Draft</button>
                                           </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>
                  <div class="tab-pane fade " id="custom-tabs-two-search" role="tabpanel" aria-labelledby="custom-tabs-two-search-tab">
                    <div style="padding:15px;">
                      <h4 style="font-weight:600;font-size:1.1em;">Search Transaction <span id="checking-customer-notification" style="display:none;font-weight:normal;font-size:0.9em;color:rgba(0,0,0,0.5);" class="float-right">Checking customer. Please wait...</span></h4>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="input-group input-group-sm">
                            <input id="trans-search-text" type="text" class="form-control" placeholder="Search Here...">
                            <span class="input-group-append">
                              <button id="trans-search-button-local" type="button" class="btn btn-info btn-flat"><i class="fas fa-search"></i></button>
                            </span>
                          </div>
                        </div>
                      </div>
                      <hr>
                      <div id="edit-new-transaction-view" style="border:1px solid rgba(0,0,0,0.1);padding:10px;background:rgba(0,0,0,0.04);display:none;">
                        <form id="edit-new-transaction-form">
                          <div style="padding:15px;">
                            <hr>
                            <h4 style="font-weight:600;font-size:1.1em;">Customer Details
                              <label class="float-right">Papeleta No.:
                                <input style="width:70px;padding-left:10px;font-weight:600;color:blue;border:none;background:transparent;"type="text" class="trans-input" id="trans-papeletanumber" name="papeletanumber" disabled>
                                <i id="change-papeletano-btn" style="color:maroon;cursor:pointer;"class="fas fa-pencil-alt"></i>
                              </label>
                              <label class="float-right">Transaction Code:
                                <input style="padding-left:10px;font-weight:600;color:red;border:none;background:transparent;"type="text" class="trans-input" id="trans-transactioncode" name="transactioncode" disabled>
                              </label>
                            </h4>

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

                                              </div>
                                            </div>
                                          </div>
                                          <div class="col-md-4">
                                            <div class="form-group">
                                              <label>Maturity Date</label>
                                              <div class="input-group">
                                                <div class="input-group-prepend">
                                                  <span class="input-group-text">
                                                    <i class="far fa-calendar-alt"></i>
                                                  </span>
                                                </div>
                                                <input type="text" class="form-control form-control-sm float-right trans-input" id="trans-datemature" name="datemature" placeholder="yyyy-mm-dd" readonly>
                                              </div>
                                            </div>
                                          </div>
                                          <div class="col-md-4">
                                            <div class="form-group">
                                              <label>Last Day of Redemption</label>
                                              <div class="input-group">
                                                <div class="input-group-prepend">
                                                  <span class="input-group-text">
                                                    <i class="far fa-calendar-alt"></i>
                                                  </span>
                                                </div>
                                                <input type="text" class="form-control form-control-sm float-right trans-input" id="trans-lastdayredeem" name="lastdayredeem" placeholder="yyyy-mm-dd" readonly>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="row">
                                          <div class="col-md-4">
                                            <div class="form-group">
                                              <label>New Trans Date</label>
                                              <div class="input-group">
                                                <div class="input-group-prepend">
                                                  <span class="input-group-text">
                                                    <i class="far fa-calendar-alt"></i>
                                                  </span>
                                                </div>
                                                <input type="text" class="form-control form-control-sm float-right trans-input" id="trans-currentdate" name="currentdate" placeholder="yyyy-mm-dd" value="{{date('Y-m-d')}}">
                                              </div>
                                            </div>
                                          </div>
                                          <div class="col-md-4">
                                            <div class="form-group">
                                              <label>New Maturity Date</label>
                                              <div class="input-group">
                                                <div class="input-group-prepend">
                                                  <span class="input-group-text">
                                                    <i class="far fa-calendar-alt"></i>
                                                  </span>
                                                </div>
                                                <input type="text" class="form-control form-control-sm float-right trans-input" id="new-trans-datemature" name="datemature" placeholder="yyyy-mm-dd" readonly>
                                              </div>
                                            </div>
                                          </div>
                                          <div class="col-md-4">
                                            <div class="form-group">
                                              <label>New Last Day of Redemption</label>
                                              <div class="input-group">
                                                <div class="input-group-prepend">
                                                  <span class="input-group-text">
                                                    <i class="far fa-calendar-alt"></i>
                                                  </span>
                                                </div>
                                                <input type="text" class="form-control form-control-sm float-right trans-input" id="new-trans-lastdayredeem" name="lastdayredeem" placeholder="yyyy-mm-dd" readonly>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-md-4">
                                      <div class="form-group">
                                        <label>Summary</label>
                                        <input type="text" class="form-control form-control-sm trans-input" id="trans-transsummary" name="transsummary" />
                                      </div>
                                    </div>
                                    <div class="col-md-4">
                                      <div class="form-group">
                                        <label>Remark</label>
                                        <input type="text" class="form-control form-control-sm trans-input" id="trans-transremarks" name="transremarks" />
                                      </div>
                                    </div>
                                    <div class="col-md-4">
                                      <div class="form-group">
                                        <label>Status</label>
                                        <input type="text" class="form-control form-control-sm trans-input" id="trans-transstatus" name="transstatus" disabled/>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-md-2">
                                       <div class="form-group">
                                          <button id="compute-transaction-btn" type="button" class="btn btn-success btn-sm form-control form-control-sm" data-toggle="modal" data-target="#computeTransactionRates">Compute</button>
                                       </div>
                                    </div>
                                    <div class="col-md-2">
                                       <div class="form-group">
                                         <button id="history-transaction-btn" type="button" class="btn btn-primary btn-sm form-control form-control-sm" data-toggle="modal" data-target="#historyTransaction">History</button>
                                       </div>
                                    </div>
                                    @if($isresetAllowed == true)
                                      <div class="col-md-2">
                                         <div class="form-group">
                                            <button id="edit-transaction-btn" type="button" class="btn btn-info btn-sm form-control form-control-sm" data-toggle="modal" data-target="#updateTransactionDetails">Change</button>
                                         </div>
                                      </div>
                                    @endif
                                    <div class="col-md-2">
                                       <div class="form-group">
                                          <button id="void-transaction-btn" type="button" class="btn btn-warning btn-sm form-control form-control-sm">Re-Print</button>
                                       </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </form>
                        <form id="item-trans-table"></form>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="custom-tabs-two-draft" role="tabpanel" aria-labelledby="custom-tabs-two-draft-tab">
                    <div style="padding:15px;">
                      <h4 style="font-weight:600;font-size:1.1em;">Draft Transaction <span id="checking-customer-notification" style="display:none;font-weight:normal;font-size:0.9em;color:rgba(0,0,0,0.5);" class="float-right">Checking customer. Please wait...</span></h4>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="input-group input-group-sm">
                            <input id="trans-search-text" type="text" class="form-control" placeholder="Search Here...">
                            <span class="input-group-append">
                              <button id="trans-search-button" type="button" class="btn btn-warning btn-flat"><i class="fas fa-search"></i></button>
                            </span>
                          </div>
                        </div>
                      </div>
                      <hr>
                      <div class="row">
                        <div class="col-md-12">
                          <table id="drafttable" class="table table-bordered table-hover" style="  font-size:0.9em !important;">
                            <thead style="width:100% !important;">
                              <tr>
                                <th>Customer Code</th>
                                <th>Customer Name</th>
                                <th>Item Count</th>
                                <th>Papeleta No.</th>
                                <th>User Code</th>
                                <th>Date Created</th>
                                <th></th>
                              </tr>
                            </thead>
                            <tbody style="background:#fff;">
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                </div>
              </div>
              <!-- /.card -->
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- Modal -->

  <div id="addItemTransactionModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Add Item</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <form id="add-item-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-3">
                  <div class="form-group">
                    <label for="itemtype">Item Type</label>
                    <select class="form-control form-control-sm" id="itemtype" name="itemtype"></select>
                  </div>
                </div>
                <div class="col-md-5">
                  <div class="form-group">
                    <label for="itemdescription">Description</label>
                    <input type="text" class="form-control form-control-sm" id="itemdescription" = name="itemdescription">
                  </div>
                </div>
                <div class="col-md-2">
                  <div class="form-group">
                    <label for="itemquantity">Quantity</label>
                    <input type="number" class="form-control form-control-sm" id="totalitemquantity" name="totalitemquantity" readonly>
                  </div>
                </div>
                <div class="col-md-2">
                  <div class="form-group">
                    <label for="itemvalue">Appraised Value</label>
                    <input type="text" class="form-control form-control-sm" id="totalitemvalue" name="totalitemvalue" onkeypress="return isNumberKey(event)" readonly>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <label>Item Breakdown</label>
                  <button id="refresh-item-breakdown" class="btn btn-success btn-sm float-right" type="button" style="margin-left:5px;"><i class="fas fa-1x fa-sync-alt"></i></button>
                  <button class="btn btn-info btn-sm float-right" type="button" data-toggle="modal" data-target="#addItemListModal"><i class="fas fa-plus"></i></button>
                  <table id="itembreakdowntable" class="table table-bordered" style="font-size:0.9em !important;">
                    <thead style="background:rgba(103, 120, 252,0.6);">
                      <tr>
                        <th>Id</th>
                        <th>Category</th>
                        <th>Classification</th>
                        <th>Color</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>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button id="add-item-transaction-btn" class="btn btn-info btn-sm" class="close" data-dismiss="modal">Add Item</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <div id="addItemListModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-body">
          <form id="add-item-list-form">
            <input id="itemid" name="itemid" 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="">--Select--</option>
                      <option value="Gold">Gold</option>
                      <option value="Stone">Stone</option>
                      <option value="Platinum">Platinum</option>
                    </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 id="label-itempurity" for="itempurity">Purity (k)</label>
                    <div id="div-itempurity">
                      <input type="text" class="form-control form-control-sm" id="itempurity" name="itempurity" onkeypress="return isNumberKey(event)" value="0">
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label id="label-itemweight" for="itemweight">Weight (gms)</label>
                    <input type="text" class="form-control form-control-sm" id="itemweight" name="itemweight" onkeypress="return isNumberKey(event)" value="0">
                  </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" value="1">
                  </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" onkeypress="return isNumberKey(event)" value="0.00">
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button id="add-new-item-list-btn" type="button" class="btn btn-warning btn-sm float-right" data-dismiss="modal">Add</button>
          <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <div id="editItemListModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-body">
          <form id="edit-item-list-form">
            <input id="edit-itemid" name="itemid" value="" type="text" />
            <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="edit-itemcategory" name="itemcategory">
                      <option value="">--Select--</option>
                      <option value="Gold">Gold</option>
                      <option value="Stone">Stone</option>
                      <option value="Platinum">Platinum</option>
                      <option value="Silver">Silver</option>
                    </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="edit-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="edit-itemcolor" name="itemcolor"></select>
                  </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="edit-itempurity" name="itempurity" onkeypress="return isNumberKey(event)" value="0">
                  </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="edit-itemweight" name="itemweight" onkeypress="return isNumberKey(event)" value="0">
                  </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="edit-itemquantity" name="itemquantity" value="1">
                  </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="edit-itemvalue" name="itemvalue" onkeypress="return isNumberKey(event)" value="0.00">
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button id="update-item-list-btn" type="button" class="btn btn-warning btn-sm float-right" data-dismiss="modal">Update</button>
          <button id="delete-item-list-btn" type="button" class="btn btn-danger btn-sm float-right" data-dismiss="modal">Delete</button>
          <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <div id="editItemTransactionModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Edit Item</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <form id="edit-item-transaction-form">
            <input id="edit-itemcode" name="itemcode" value="" type="hidden" />
            <div style="padding:15px;margin-bottom:10px;background:rgba(0,0,0,0.08);">
              <div class="row">
                <div class="col-md-3">
                  <div class="form-group">
                    <label for="itemtype">Item Type</label>
                    <select class="form-control form-control-sm" id="edit-itemtype" name="itemtype"></select>
                  </div>
                </div>
                <div class="col-md-5">
                  <div class="form-group">
                    <label for="itemdescription">Description</label>
                    <input type="text" class="form-control form-control-sm" id="edit-itemdescription" = name="itemdescription">
                  </div>
                </div>
                <div class="col-md-2">
                  <div class="form-group">
                    <label for="itemquantity">Quantity</label>
                    <input type="number" class="form-control form-control-sm" id="edit-totalitemquantity" name="totalitemquantity" readonly>
                  </div>
                </div>
                <div class="col-md-2">
                  <div class="form-group">
                    <label for="itemvalue">Appraised Value</label>
                    <input type="text" class="form-control form-control-sm" id="edit-totalitemvalue" name="totalitemvalue" onkeypress="return isNumberKey(event)" readonly>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <label>Item Breakdown</label>
                  <button class="btn btn-success btn-sm float-right" type="button" data-toggle="modal" data-target="#addItemListModal"><i class="fas fa-plus"></i></button>
                  <table id="edit-itembreakdowntable" class="table table-bordered" style="font-size:0.9em !important;">
                    <thead style="background:rgba(103, 120, 252,0.6);">
                      <tr>
                        <th>Id</th>
                        <th>Category</th>
                        <th>Classification</th>
                        <th>Color</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>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button id="update-item-transaction-btn" class="btn btn-info btn-sm" class="close" data-dismiss="modal">Update Item</button>
          <button id="remove-edit-item-transaction-btn" class="btn btn-danger btn-sm" class="close" data-dismiss="modal">Delete Item</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <div id="updateItemTransactionModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-body">
          <form id="edit-item-transaction-desc-form">
            <div style="padding:15px;margin-bottom:10px;background:rgba(0,0,0,0.08);">
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Item Description</label>
                    <input type="hidden" id="update-itemcode" = name="itemcode">
                    <input type="text" class="form-control form-control-sm" id="update-itemdescription" = name="itemdescription">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label style="color:transparent;">x</label><br>
                    <button id="update-item-description" class="btn btn-info btn-sm form-control form-control-sm">Update</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="viewItemListArrayModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-body">
          <div style="padding:15px;margin-bottom:10px;background:rgba(0,0,0,0.08);">
            <div id="item-list-array-div"></div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default btn-sm" 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" onkeypress="return isNumberKey(event)">
                  </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" onkeypress="return isNumberKey(event)">
                  </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" onkeypress="return isNumberKey(event)">
                  </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" onkeypress="return isNumberKey(event)">
                  </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>
              <hr>
              <label id="update-items-msg" style="font-size:1.2em;color:green"></label>
            </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="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">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" onkeypress="return isNumberKey(event)">
                  </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" onkeypress="return isNumberKey(event)">
                  </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" onkeypress="return isNumberKey(event)">
                  </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" onkeypress="return isNumberKey(event)">
                  </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>
            </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;"></span>
        </div>
        <div class="modal-footer justify-content-between">
          <button id="print-close-btn" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button id="print-document-btn" type="button" class="btn btn-primary">Print Documents</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

  <div id="transactionListModal" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content">
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <table id="transactiontable" class="table table-bordered table-hover" style="  font-size:0.9em !important;">
                <thead style="width:100% !important;">
                  <tr>
                    <th>Transaction No.</th>
                    <th>Papeleta No.</th>
                    <th>Customer Name</th>
                    <th>Net Proceeds</th>
                    <th>Date Pawned</th>
                    <th>Date Mature</th>
                    <th>Status</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody style="background:#fff;">
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

  <div id="historyTransaction" class="modal fade">
    <div class="modal-dialog modal-xl" style="width:100%;">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Transaction History</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div style="padding:15px;margin-bottom:10px;background:rgba(0,0,0,0.08);">
            <div class="row">
              <div class="col-12">
                <div class="row">
                  <div class="col-md-3">
                    <label style="color:rgba(0,0,0,0.7);">Papeleta No.</label>
                  </div>
                  <div class="col-md-3">
                    <label style="color:rgba(0,0,0,0.7);">Transaction Date</label>
                  </div>
                  <div class="col-md-3">
                    <label style="color:rgba(0,0,0,0.7);">Amount</label>
                  </div>
                  <div class="col-md-3">
                    <label style="color:rgba(0,0,0,0.7);">Status</label>
                  </div>
                </div>
                <div id="accordion" class="historyTransactionHtml"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <div id="computeTransactionRates" class="modal fade">
    <div class="modal-dialog modal-xl" style="width:100%;">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Transaction Details</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div style="padding:15px;margin-bottom:10px;">
            <div class="row">
              <div class="col-12">
                <div id="computation-div">
                  <div class="row">
                    <div class="col-md-12">
                      <table style="font-size:0.9em;width:100%;background:#fff;border:1px solid rgba(0,0,0,1);" class="history-table">
                        <thead style="background:rgba(3, 144, 252,0.2);">
                          <th style="width:32% !important;">Description</th>
                          <th style="text-align:center;width:8%;">Action</th>
                          <th style="text-align:center;width:8%;">Adv. Int</th>
                          <th style="text-align:center;width:8%;">Interest</th>
                          <th style="text-align:center;width:8%;">Penalty</th>
                          <th style="text-align:center;width:8%;">Capital</th>
                          <th style="text-align:center;width:10%;">New Capital</th>
                          <th style="text-align:center;width:8%;">Amort Amt</th>
                          <th style="text-align:center;width:10%;">Sub Total</th>
                        </thead>
                        <tbody id="compute-table-tbody">
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <br>
                  <div style="border:1px solid rgba(0,0,0,0.1);padding:20px;">
                    <div class="row">
                      <div class="col-md-4">
                          <div class="row">
                            <div class="col-md-6">
                               <div class="form-group">
                                 <label>Adv.  Int. Rate</label>
                               </div>
                               <div class="form-group">
                                 <label>Adv.  Int. Value</label>
                               </div>
                               <div class="form-group">
                                 <label>Int. Rate</label>
                               </div>
                               <div class="form-group">
                                 <label>Int. Value</label>
                               </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group">
                                <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-advintrate" name="advintrate" value="0" readonly>
                              </div>
                               <div class="form-group">
                                 <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-advintamnt" name="advintamnt" value="0" readonly>
                               </div>
                               <div class="form-group">
                                 <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-interestrate" name="interestrate" value="0.00" 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>
                          </div>
                      </div>
                      <div class="col-md-4" style="padding-left:20px;">
                          <div class="row">
                            <div class="col-md-6">
                               <div class="form-group">
                                 <label>Penalty Rate</label>
                               </div>
                               <div class="form-group">
                                 <label>Penalty Value</label>
                               </div>
                               <div class="form-group">
                                 <label>Service Charge</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-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 class="form-group">
                                 <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-srvcharge" name="srvcharge" value="0.00" onkeypress="return isNumberKey(event)">
                               </div>
                               <div class="form-group">
                                 <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-docstamp" name="docstamp" value="0.00" onkeypress="return isNumberKey(event)">
                               </div>
                            </div>
                          </div>
                      </div>
                      <div class="col-md-4" style="padding-left:20px;">
                          <div class="row">
                            <div class="col-md-6">
                              <div class="form-group">
                                <label>Papeleta No.</label>
                              </div>
                              <div class="form-group">
                                <label>Quantity</label>
                              </div>
                               <div class="form-group">
                                 <label>Tenancy</label>
                               </div>
                               <div class="form-group">
                                 <label>Total Amount</label>
                               </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group">
                                <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-papeleta-no" name="papeletano" value="">
                              </div>
                              <div class="form-group">
                                <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-quantity" name="quantity" value="" readonly>
                              </div>
                               <div class="form-group">
                                 <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-tenancy" name="tenancy" value="0 %" readonly>
                               </div>
                               <div class="form-group">
                                 <input type="text" class="form-control form-control-sm number-input trans-input" id="trans-totalamount" name="totalamount" value="0.00" readonly>
                               </div>
                               <div class="form-group">
                                  <div class="form-group">
                                   <label for="isoldtrans">Appraised By:</label>
                                   <select id="trans-appraised-usercode" class="form-control form-control-sm">
                                     @if(isset($branchusers))
                                      @foreach($branchusers as $branchuser)
                                        @if($currrentuser['user'] == $branchuser['usercode'])
                                          <option value="{{$branchuser['usercode']}}" selected="selected">{{$branchuser['firstname']}} {{$branchuser['lastname']}}</option>
                                        @else
                                          <option value="{{$branchuser['usercode']}}">{{$branchuser['firstname']}} {{$branchuser['lastname']}}</option>
                                        @endif
                                      @endforeach
                                     @endif
                                   </select>
                                  </div>
                                  <button id="confirm-update-transaction-btn" type="button" class="btn btn-warning btn-sm form-control form-control-sm" disabled>Confirm</button>
                                  <button style="margin-top:10px;" type="button" class="btn btn-default btn-sm form-control form-control-sm" data-dismiss="modal">Close</button>
                               </div>
                            </div>
                          </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="cusomerSearchList" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content">
        <div class="modal-body">
          <h2 id="searching-text">Searching.. Please Wait..</h2>
          <input type="text" class="form-control" id="myInputTextField" placeholder="Search Name">
          <hr>
          <div class="row">
            <div class="col-md-12">
              <table id="customersearchtable" class="table table-bordered table-hover" style="  font-size:0.9em !important;">
                <thead style="width:100% !important;">
                  <tr>
                    <th>Customer Code</th>
                    <th>Customer Name</th>
                    <th>Branch Code</th>
                    <th>Branch Name</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody style="background:#fff;"></tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

  <div id="updateTransactionDetails" class="modal fade">
    <div class="modal-dialog modal-md" style="width:100%;">
      <div class="modal-content">
        <div class="modal-header">
          <label class="modal-title">Transaction No: </label>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div style="padding:15px;margin-bottom:10px;">
            <form id="edit-transaction-frorm">
              <input type="hidden" id="edit-transactioncode" name="transactionno" value="">
              <input type="hidden" id="edit-oldpapeletano" name="oldpapeletano" value="">
              <input type="hidden" name="request" value="transactions">
              <input type="hidden" name="type" value="edit">
              <input type="hidden" name="transtype" value="Jewelry">
              <div class="row">
                <div class="col-md-6">
                  <label>Papeleta No.</label>
                   <div class="form-group">
                     <input type="text" class="form-control form-control-sm float-right trans-input" id="edit-papeletano" name="papeletano" placeholder="yyyy-mm-dd" value="">
                   </div>
                </div>
                <div class="col-md-6">
                  <label>Date Pawned</label>
                   <div class="form-group">
                     <input type="text" class="form-control form-control-sm float-right trans-input" id="edit-datepawned" name="datepawned" placeholder="yyyy-mm-dd" value="">
                   </div>
                </div>
                <div class="col-md-6">
                  <label>Date Mature</label>
                   <div class="form-group">
                     <input type="text" class="form-control form-control-sm float-right trans-input" id="edit-datemature" name="datemature" placeholder="yyyy-mm-dd" value="">
                   </div>
                </div>
                <div class="col-md-6">
                  <label>Date Redeem</label>
                   <div class="form-group">
                     <input type="text" class="form-control form-control-sm float-right trans-input" id="edit-dateredeem" name="dateredeem" placeholder="yyyy-mm-dd" value="{{date('Y-m-d')}}">
                   </div>
                </div>
                <div class="col-md-12">
                  <label>Description</label>
                   <div class="form-group">
                     <input type="text" class="form-control form-control-sm float-right trans-input" id="edit-description" name="description" placeholder="yyyy-mm-dd" value="{{date('Y-m-d')}}">
                   </div>
                </div>
                <div class="col-md-6">
                  <label>-</label>
                   <div class="form-group">
                     <button id="change-transaction-btn" type="button" class="btn btn-warning btn-sm form-control form-control-sm">Update</button>
                   </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="editItemTransactionDesc" 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 Description</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <form id="edit-item-transaction-desc-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-12">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Description</label>
                    <input type="text" class="form-control form-control-sm" id="update-itemcode" = name="itemcode">
                    <input type="text" class="form-control form-control-sm" id="update-itemdescription" = name="itemdescription">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label style="color:transparent;">x</label><br>
                    <button id="update-item-description-btn" class="btn btn-info btn-sm form-control form-control-sm">Update 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="transactionImageModal" 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">Item Image</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="row" style="padding:10px;border:1px solid rgba(0,0,0,0.2);background:#fff;">
            <div class="col-md-12" style="padding:0 !important;">
              <canvas class="float-center" id="grabFrameCanvasNew" style="border:1px solid rgba(0,0,0,0.1);width:100%;height:280px;">
              <img src="" id="imgFrameCanvasNew" style="border:1px solid rgba(0,0,0,0.1);width:100%;height:300px;">
            </div>
            <div class="col-md-12 float-center">
              <button type="button" style="width:100%;margin-top:5px;"class="btn btn-info btn-sm float-center" id="newItemImagefile">Upload Image from File</button>
              <input accept="image/*" type="file" id="inputFromFile" onchange="previewImageTransaction(this);" name="item_image[]" style="display:none;"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="viewTransactionImageModal" 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">Item Image</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="row" style="padding:10px;border:1px solid rgba(0,0,0,0.2);background:#fff;">
            <div class="col-md-12" style="padding:0 !important;">
              <canvas class="float-center" id="grabFrameCanvasUpdate" style="border:1px solid rgba(0,0,0,0.1);width:100%;height:280px;">
            </div>
            <div class="col-md-12 float-center">
              <button type="button" style="width:100%;margin-top:5px;"class="btn btn-info btn-sm float-center" id="uploadItemImagefile">Upload Image from File</button>
              <button type="button" style="width:100%;margin-top:5px;"class="btn btn-success btn-sm float-center" id="updateItemImagefile">Update Image</button>
              <input accept="image/*" type="file" id="inputFromFileUpdate" onchange="previewImageTransactionUpdate(this);" name="item_image[]" style="display:none;"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

@endsection
@section('js')
  <!-- <script src="/theme/plugins/jquery/jquery.min.js"></script>
  <script src="/theme/plugins/jquery-ui/jquery-ui.min.js"></script>
  <script src="/theme/plugins/bootstrap/js/bootstrap.bundle.min.js"></script> -->
  <!-- <script src="/theme/dist/js/adminlte.js"></script> -->
  <script src="/theme/dist/js/pages/dashboard.js"></script>
  <script src="/theme/dist/js/demo.js"></script>
  <script src="/theme/plugins/datatables/jquery.dataTables.js"></script>
  <script src="/theme/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>
  <script src="/js/transaction-add.js"></script>
  <script src="/js/transaction-compute.js"></script>
  <script src="/js/transaction-draft.js"></script>
  <!-- <script src="/js/transaction-update.js"></script> -->
  <!-- Transaction Add -->
  <script>
    $( document ).ready(function() {
      console.log( "ready!" );
      $('#confirm-transaction-btn').prop('disabled',false);
    });
  </script>
  <script>
    function isNumberKey(evt){
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode != 46 && charCode > 31
          && (charCode < 48 || charCode > 57))
           return false;

        return true;
     }
    $("#nationality-select").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'countries', locname: $("#nationality-select").val()},
            success:function(e){
              if(e){
                //console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $("#address-province").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'province', locname: $("#address-province").val()},
            success:function(e){
              if(e){
                //console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $("#address-municipality").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'municipality', province: $("#address-province").val(), locname: $("#address-municipality").val()},
            success:function(e){
              if(e){
                //console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $("#address-barangay").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'barangay', province: $("#address-province").val(), municipality: $("#address-municipality").val(), locname: $("#address-barangay").val()},
            success:function(e){
              if(e){
                //console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $("#e-nationality-select").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'countries', locname: $("#e-nationality-select").val()},
            success:function(e){
              if(e){
                //console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $("#e-address-province").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'province', locname: $("#e-address-province").val()},
            success:function(e){
              if(e){
                //console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $("#e-address-municipality").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'municipality', province: $("#e-address-province").val(), locname: $("#e-address-municipality").val()},
            success:function(e){
              if(e){
                //console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $("#e-address-barangay").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'barangay', province: $("#e-address-province").val(), municipality: $("#e-address-municipality").val(), locname: $("#e-address-barangay").val()},
            success:function(e){
              if(e){
                //console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $( ".auto-selector" ).autocomplete({
      appendTo: "#companyname"
    });
    var appendTo = $( ".auto-selector" ).autocomplete( "option", "appendTo" );
    $( ".auto-selector" ).autocomplete( "option", "appendTo", "#companyname" );
  </script>
  <script>
    var imageCapture;
    var newImageFile;
    var imagewidth = 640;
    var imageheight = 480;
    var ximagewidth = 640;
    var yimageheight = 480;
    function onGetUserMediaButtonClick() {
      navigator.mediaDevices.getUserMedia({video: true, audio: false})
      .then(mediaStream => {
        document.querySelector('video').srcObject = mediaStream;
        const track = mediaStream.getVideoTracks()[0];
        imageCapture = new ImageCapture(track);
      })
      .catch(error => ChromeSamples.log(error));
    }
    function onGrabFrameButtonClick(imgCaptureID) {
      imageCapture.grabFrame()
      .then(imageBitmap => {
        var selectorId = "grabFrameCanvasNew";
        if(imgCaptureID == "newcustimage") selectorId = "grabFrameCanvasNew";
        else if(imgCaptureID == "editcustimage") selectorId = "grabFrameCanvasUpdate";
        const canvas = document.querySelector('#'+selectorId);
        drawCanvas(canvas, imageBitmap);
        newImageFile = canvas.toDataURL('image/png', 1.0);
      })
      .catch(error => ChromeSamples.log(error));
    }
    function onTakePhotoButtonClick() {
      imageCapture.takePhoto()
      .then(blob => createImageBitmap(blob))
      .then(imageBitmap => {
        const canvas = document.querySelector('#takePhotoCanvas');
        //console.log(imageBitmap);
        drawCanvas(canvas, imageBitmap);
      })
      .catch(error => ChromeSamples.log(error));
      player.srcObject.getVideoTracks().forEach(track => track.stop());
    }
    /* Utils */
    function drawCanvas(canvas, img) {
      canvas.width = getComputedStyle(canvas).width.split('px')[0];
      canvas.height = getComputedStyle(canvas).height.split('px')[0];
      let ratio  = Math.min(canvas.width / img.width, canvas.height / img.height);
      let x = (canvas.width - img.width * ratio) / 2;
      let y = (canvas.height - img.height * ratio) / 2;
      canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
      canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,
          x, y, img.width * ratio, img.height * ratio);
      //console.log("cwidth:"+canvas.width);
      //console.log("cheight:"+canvas.height);
      //console.log("iwidth:"+img.width);
      //console.log("iheight:"+img.height);
      //console.log("rwidth:"+(img.width));
      //console.log("rheight:"+(img.height));
      //console.log("ratio:"+ratio);
      //console.log("x:"+x);
      //console.log("y:"+y);
      imagewidth = img.width;
      imageheight = img.height;
    }
    function addCustomerImages(custcode,branchcode){
        var filedata = [];
        var tempdata = "";
        var dataFile = new FormData();
        for(num in newImageFile){
          tempdata = tempdata + newImageFile[num];
          if((num % 500) == 0){
            dataFile.append('file[]', tempdata);
            tempdata = "";
          }
        }
        dataFile.append('custcode', custcode);
        dataFile.append('branchcode', branchcode);
        $.ajax({
            url: '/add-customer-image',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            method: 'POST',
            data: dataFile,
            processData: false,
            contentType: false,
            cache:false,
            enctype: 'multipart/form-data',
            error:function(err){
              console.error(err);
            },
            success:function(data){
                //console.log(data);
                newImageFile = undefined;
                //console.log("test");
                var selectorId = "grabFrameCanvasNew";
                const canvas = document.querySelector('#grabFrameCanvasUpdate');
                canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
            },
            complete:function(e){
                //console.log(e);
                //console.log("Request finished.");
            }
        });
      }
    $('#captureImage').on('click',function(event){
      event.preventDefault();
      //onTakePhotoButtonClick();
      onGrabFrameButtonClick();
    });
    $('#take-photo-btn').on('click',function(event){
      event.preventDefault();
      var imgCaptureID = $('#current-user-image-loc').val();
      onGrabFrameButtonClick(imgCaptureID);
    });
    $('.startCameraButton').on('click',function(event){
      event.preventDefault();
      var imgCaptureID = $(this).attr('id');
      $('#current-user-image-loc').val(imgCaptureID);
      onGetUserMediaButtonClick();
    });
  </script>
  <script>
    var itemArrayList = [];
    var itemListDatatable = $('#itembreakdowntable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      "autoWidth": false,
      "ordering": false,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
    var itemEditListDatatable = $('#edit-itembreakdowntable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      "autoWidth": false,
      "ordering": false,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
    var updateEditListDatatable = $('#update-itembreakdowntable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      "autoWidth": false,
      "ordering": false,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
    $('#add-new-item-list-btn').on('click',function(){
      $.ajax({
          url: '/add-item-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: $('#add-item-list-form').serialize(),
          success:function(e){
            if(e){
              //console.log(e);
              getItemListDetails();
            }
          }
      });
    });
    $('#delete-item-list-btn').on('click',function(){
      event.preventDefault();
      $.ajax({
          url: '/delete-item-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {itemcode: $('#edit-itemid').val()},
          success:function(e){
            if(e){
              //console.log(e);
              getItemListDetails();
            }
          }
      });
    });
    function getItemListDetails(){
      $.ajax({
          url: '/get-item-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          success:function(data){
            //console.log(data);
            var itemListSet = [];
            var appraiseVal = 0
            var e = data.items;
            itemArrayList = e;
            var totalqty = 0;
            for(num in e){
              //console.log(e[num]);
              var amount = parseFloat(e[num].itemvalue);
              appraiseVal = parseFloat(appraiseVal) + parseFloat(amount);
              totalqty = parseFloat(totalqty) + parseFloat(e[num].itemquantity);
              var itmClass = e[num].itemclassification;
              var itmColor = e[num].itemcolor;
              if(itmClass != null){
                if(itmClass != '-'){
                  itmClass = itmClass.split(':');
                  itmClass = itmClass[1];
                }
              }
              if(itmColor != null){
                if(itmColor != '-'){
                  itmColor = itmColor.split(':');
                  itmColor = itmColor[1];
                }
              }
              var itempurity = e[num].itempurity;
              var itemweight = e[num].itemweight;
              if(e[num].itemcategory == "Stone"){
                itempurity = itempurity.split(':');
                itempurity = itempurity[1];
                itemweight = itemweight + '(c)';
              }
              else {
                itemweight = itemweight + ' gms';
                itempurity = itempurity + 'k';
              }
              itemListSet.push([
                e[num].itemid,
                e[num].itemcategory,
                itmClass,
                itmColor,
                itempurity,
                itemweight,
                e[num].itemquantity,
                amount.toFixed(2),
                '<button type="button" id="itemselected-'+ e[num].itemid + '" class="btn btn-default btn-sm edit-item-details-class" data-toggle="modal" data-target="#editItemListModal"><i class="fas fa-pencil-alt"></i></button>',]);
            }
            itemListDatatable.destroy();
            itemListDatatable.draw();
            $('#itembreakdowntable').DataTable({
              "scrollY":"auto",
              keys: true,
              draw: true,
              paging:   false,
              info:     false,
              "autoWidth": false,
              "ordering": false,
              data: itemListSet,
              "dom": '<"top"i>rt<"bottom"flp><"clear">',
              // "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
              columns: [
                { title: "Id" },
                { title: "Category" },
                { title: "Classification" },
                { title: "Color" },
                { title: "Purity(K)" },
                { title: "Weight" },
                { title: "Quantity" },
                { title: "Amount" },
                { title: "" }
              ]}),
            itemListDatatable = $('#itembreakdowntable').DataTable();
            itemListDatatable.draw();
            $('#totalitemvalue').val(appraiseVal.toFixed(2));
            $('#totalitemquantity').val(totalqty);
            itemListSet = [];
          }
      });
    }
    $(document).on('click','.edit-item-details-class',function(event){
      event.preventDefault();
      var itemIdEdit = $(this).attr('id');
      itemIdEdit = itemIdEdit.split('-');
      //console.log(itemIdEdit);
      //console.log(itemArrayList);
      for (num in itemArrayList){
        if(itemArrayList[num].itemid == itemIdEdit[1]){
          //console.log(itemArrayList[num]);
          var itemSelectedEdit = itemArrayList[num];
          $('#edit-itemid').val(itemSelectedEdit.itemid);
          $('#edit-itempurity').val(itemSelectedEdit.itempurity);
          $('#edit-itemweight').val(itemSelectedEdit.itemweight);
          $('#edit-itemquantity').val(itemSelectedEdit.itemquantity);
          $('#edit-itemvalue').val(itemSelectedEdit.itemvalue);

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

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

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

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

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


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


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

    $(document).on('change','#itempurity',function(){
      var valdata = $('#itemcategory').val();
      if(valdata == "Stone") computeStoneValue();
      else computePawnValue();
    });
    $('#itemtype').on('change',function(){
      var valdata = $('#itemcategory').val();
      if(valdata == "Stone") computeStoneValue();
      else computePawnValue();
    });
    $(document).on('change','#itemweight',function(){
      var valdata = $('#itemcategory').val();
      if(valdata == "Stone") computeStoneValue();
      else computePawnValue();
    });
    $('#itemquantity').on('change',function(){
      var valdata = $('#itemcategory').val();
      if(valdata == "Stone") computeStoneValue();
      else computePawnValue();
    });
    function computeStoneValue(){
      var classStoneArr = $('#itempurity').val();
      var caratStone = $('#itemweight').val();
      var qtyStone = $('#itemquantity').val();
      classStoneArr = classStoneArr.split(':');
      var classStone = classStoneArr[0];
      //console.log(caratStone);
      var stoneCost = 0;
      for(num in stoneCaratArray){
        if((stoneCaratArray[num].class == classStone) && (parseFloat(stoneCaratArray[num].weight) == parseFloat(caratStone))){
          //console.log(stoneCaratArray[num]);
          stoneCost = parseFloat(stoneCaratArray[num].value) * parseFloat(qtyStone);
        }
      }
      $('#itemvalue').val(stoneCost.toFixed(2));
    }

  </script>
  <script>
    $('#print-document-btn').on('click',function(){
      $.ajax({
          url: '/print-transactions-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {code: $('#response-transactioncode').text()},
          success:function(e){
            if(e){
              //console.log(e);
              let params = 'scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=700,height=500,left=-10,top=-10';
              window.open(e,"_blank",params);
              return false;
            }
          }
      });
    });
    $('#void-transaction-btn').on('click',function(){
      $.ajax({
          url: '/print-transactions-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {code: $('#trans-transactioncode').val()},
          success:function(e){
            if(e){
              //console.log(e);
              let params = 'scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=700,height=500,left=-10,top=-10';
              window.open(e,"_blank",params);
              return false;
            }
          }
      });
    });
    $(document).on('shown.bs.modal', '#computeTransactionRates', function () {
      //$('#confirm-update-transaction-btn').prop('disabled',false);
    });
  </script>
  <script>
    $('#refresh-customer-btn').on('click',function(event){
      event.preventDefault();
      $('#refresh-customer-btn').text('Please wait...');
      $('#refresh-customer-btn').prop('disabled',true);
      $.ajax({
          url: '/refresh-customer',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {branch: $('#trans-userbranch').val()},
          success:function(e){
            if(e){
              //console.log(e);
              $('#refresh-customer-btn').text('Refresh Customer List');
              $('#refresh-customer-btn').prop('disabled',false);
              alert(e);
            }
          }
      });
    });
  </script>
  <script>
    var customersearchDataTable = $('#customersearchtable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      "autoWidth": true,
    });
    $('#search-customer-btn').on('click',function(event){
      event.preventDefault();
      $('#searching-text').css('display','block');
      $('#customersearchtable').css('display','none');
      $.ajax({
          url: '/search-customer-list',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'customer', type: 'searchlist', customername: $('#customer-name-search').val()},
          success:function(e){
            if(e){
              //console.log(e);
              $('#searching-text').css('display','none');
              $('#customersearchtable').css('display','block');
              customerSetTable(e);
            }
          }
      });
    });
    $('#search-customer-btn-local').on('click',function(event){
      event.preventDefault();
      $('#searching-text').css('display','block');
      $('#customersearchtable').css('display','none');
      $.ajax({
          url: '/search-customer-list-local',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'customer', type: 'localsearchindv', customername: $('#customer-name-search').val()},
          success:function(e){
            if(e){
              //console.log(e);
              //console.log('Local');
              $('#searching-text').css('display','none');
              $('#customersearchtable').css('display','block');
              customerSetTableLocal(e);
            }
          }
      });
    });
    $('#myInputTextField').keyup(function(){
    		customersearchDataTable.search($(this).val()).draw();
    });
    $(document).on('click', '.select-customer-class', function () {
      var custID = $(this).attr('id');
      //console.log(custID);
      $('#customercode').val(custID);
      getCustomerDetailsNew(custID);
    });
    $(document).on('click', '.select-customer-class-local', function () {
      var custID = $(this).attr('id');
      //console.log(custID);
      $('#customercode').val(custID);
      getCustomerDetailsNewLocal(custID);
    });
    function customerSetTable(e){
      var customerSetList = [];
      for(num in e){
        customerSetList.push([
          e[num].customercode,
          e[num].customername,
          e[num].branchcode,
          e[num].customerbranch,
          '<button type="button" id="'+ e[num].customercode + '" class="btn btn-default btn-sm select-customer-class" data-dismiss="modal"><i class="fas fa-arrow-circle-right"></i> Select</button>',
        ]);
      }
      customersearchDataTable.destroy();
      customersearchDataTable.draw();
      $('#customersearchtable').DataTable({
        "scrollY":"500px",
        keys: true,
        draw: true,
        paging:   false,
        info:     false,
        "autoWidth": false,
        data: customerSetList,
        "columnDefs": [
          { "width": "20%", "targets": 0 },
          { "width": "35%", "targets": 1 },
          { "width": "15%", "targets": 2 },
          { "width": "20%", "targets": 3 },
          { "width": "10%", "targets": 4 },
        ],
        columns: [
          { title: "Customer Code" },
          { title: "Customer Name" },
          { title: "Branch Code" },
          { title: "Branch Name" },
          { title: "" }
        ]}),
      customersearchDataTable = $('#customersearchtable').DataTable();
    }
    function customerSetTableLocal(e){
      var customerSetList = [];
      for(num in e){
        customerSetList.push([
          e[num].customercode,
          e[num].fullname,
          e[num].branchcode,
          e[num].branchname,
          '<button type="button" id="'+ e[num].customercode + '" class="btn btn-default btn-sm select-customer-class-local" data-dismiss="modal"><i class="fas fa-arrow-circle-right"></i> Select</button>',
        ]);
      }
      customersearchDataTable.destroy();
      customersearchDataTable.draw();
      $('#customersearchtable').DataTable({
        "scrollY":"500px",
        keys: true,
        draw: true,
        paging:   false,
        info:     false,
        "autoWidth": false,
        data: customerSetList,
        "columnDefs": [
          { "width": "20%", "targets": 0 },
          { "width": "35%", "targets": 1 },
          { "width": "15%", "targets": 2 },
          { "width": "20%", "targets": 3 },
          { "width": "10%", "targets": 4 },
        ],
        columns: [
          { title: "Customer Code" },
          { title: "Customer Name" },
          { title: "Branch Code" },
          { title: "Branch Name" },
          { title: "" }
        ]}),
      customersearchDataTable = $('#customersearchtable').DataTable();
    }
    function getCustomerDetailsNew(customercode){
      $('#checking-customer-notification').css('display','block');
      resetCustomerDetails();
      $.ajax({
          url: '/search-customer-list',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'customer', type: 'searchlistdetails', customercode: customercode},
          success:function(e){
            if(e){
              //console.log(e);
                generateNewTransCode(e.branchcode,'Jewelry');
                var brgy = "";
                var municipality = "";
                var province = "";
                var street = "";
                for(num in e){
                  if(num == "municipality") municipality = e[num];
                  else if(num == "barangay") brgy = e[num];
                  else if(num == "street") street = e[num];
                  else if(num == "province") province = e[num];
                  else if(num == "mobilenumber")  $('#contactnumber').val(e[num]);
                  else if(num == "idtype") {
                    var idPres = e[num];
                    $('#idtype').val(idPres);
                  }
                  else $('#'+num).val(e[num]);
                }
                var address = street + " " + brgy + " " + municipality + " " + province;
                $("#address").val(address);
                var custdetails = '<span>Customer Code:</span> <b>'+e.customercode+'</b></br>'+
                  '<span style="padding-right:10px;">First Name:</span> <b>'+e.firstname+'</b></br>'+
                  '<span style="padding-right:10px;">Middle Name:</span> <b>'+e.middlename+'</b></br>'+
                  '<span style="padding-right:10px;">Last Name:</span> <b>'+e.lastname+'</b></br>'+
                  '<span style="padding-right:10px;">ID Type:</span> <b>'+e.idtype+'</b></br>'+
                  '<span style="padding-right:10px;">ID Number:</span> <b>'+e.idnumber+'</b></br>'+
                  '<span style="padding-right:10px;">Date of Birth:</span> <b>'+e.dateofbirth+'</b></br>'+
                  '<span style="padding-right:10px;">Nationality:</span> <b>'+e.nationality+'</b></br>'+
                  '<span style="padding-right:10px;">Mobile Number:</span> <b>'+e.mobilenumber+'</b></br>'+
                  '<span style="padding-right:10px;">Source of Fund:</span> <b>'+e.sourceoffund+'</b></br>'+
                  '<span style="padding-right:10px;">Building / Street:</span> <b>'+e.street+'</b></br>'+
                  '<span style="padding-right:10px;">Barangay:</span> <b>'+e.barangay+'</b></br>'+
                  '<span style="padding-right:10px;">Municipality:</span> <b>'+e.municipality+'</b></br>'+
                  '<span style="padding-right:10px;">Province:</span> <b>'+e.province+'</b></br>'+
                  '<span style="padding-right:10px;">Employment:</span> <b>'+e.employment+'</b></br>'+
                  '<span style="padding-right:10px;">Company Name:</span> <b>'+e.companyname+'</b></br>';
                $('#customer-profile-details').html(custdetails);
                if(e.image){
                  $('#customer-image').prop('src',e.image);
                }
                if($('#customercode').val() != ""){
                  $('#add-item-transaction-modal-btn').prop('disabled',false);
                }
                if(parseInt(e.isblocked) == 1){
                  alert("Beware, Fake Client!");
                  $('#warning-client-text').css('display','block');
                }
                else $('#warning-client-text').css('display','none');
                loadItemColor('Gold');
                loadItemitemclassification('Gold');
            }
          }
      });
    }
    function getCustomerDetailsNewLocal(customercode){
      $('#checking-customer-notification').css('display','block');
      resetCustomerDetails();
      $.ajax({
          url: '/search-customer-list-local',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'customer', type: 'localcustdetails', code: customercode},
          success:function(e){
            if(e){
              //console.log(e);
                generateNewTransCode(e.branchcode,'Jewelry');
                var brgy = "";
                var municipality = "";
                var province = "";
                var street = "";
                for(num in e){
                  if(num == "municipality") municipality = e[num];
                  else if(num == "barangay") brgy = e[num];
                  else if(num == "street") street = e[num];
                  else if(num == "province") province = e[num];
                  else if(num == "mobilenumber")  $('#contactnumber').val(e[num]);
                  else if(num == "idtype") {
                    var idPres = e[num];
                    if(idPres){
                      $('#idtype').val(idPres);
                    }
                  }
                  else $('#'+num).val(e[num]);
                }
                var address = street + " " + brgy + " " + municipality + " " + province;
                $("#address").val(address);
                var custdetails = '<span>Customer Code:</span> <b>'+e.customercode+'</b></br>'+
                  '<span style="padding-right:10px;">First Name:</span> <b>'+e.firstname+'</b></br>'+
                  '<span style="padding-right:10px;">Middle Name:</span> <b>'+e.middlename+'</b></br>'+
                  '<span style="padding-right:10px;">Last Name:</span> <b>'+e.lastname+'</b></br>'+
                  '<span style="padding-right:10px;">ID Type:</span> <b>'+e.idtype+'</b></br>'+
                  '<span style="padding-right:10px;">ID Number:</span> <b>'+e.idnumber+'</b></br>'+
                  '<span style="padding-right:10px;">Date of Birth:</span> <b>'+e.dateofbirth+'</b></br>'+
                  '<span style="padding-right:10px;">Nationality:</span> <b>'+e.nationality+'</b></br>'+
                  '<span style="padding-right:10px;">Mobile Number:</span> <b>'+e.mobilenumber+'</b></br>'+
                  '<span style="padding-right:10px;">Source of Fund:</span> <b>'+e.sourceoffund+'</b></br>'+
                  '<span style="padding-right:10px;">Building / Street:</span> <b>'+e.street+'</b></br>'+
                  '<span style="padding-right:10px;">Barangay:</span> <b>'+e.barangay+'</b></br>'+
                  '<span style="padding-right:10px;">Municipality:</span> <b>'+e.municipality+'</b></br>'+
                  '<span style="padding-right:10px;">Province:</span> <b>'+e.province+'</b></br>'+
                  '<span style="padding-right:10px;">Employment:</span> <b>'+e.employment+'</b></br>'+
                  '<span style="padding-right:10px;">Company Name:</span> <b>'+e.companyname+'</b></br>';
                $('#customer-profile-details').html(custdetails);
                if(e.image){
                  $('#customer-image').prop('src',e.image);
                }
                if($('#customercode').val() != ""){
                  $('#add-item-transaction-modal-btn').prop('disabled',false);
                }
                loadItemColor('Gold');
                loadItemitemclassification('Gold');
                if(parseInt(e.isblocked) == 1){
                  alert("Beware, Fake Client!");
                  $('#warning-client-text').css('display','block');
                }
                else $('#warning-client-text').css('display','none');
            }
          }
      });
    }
  </script>
  <script>
    var currentItemImageCodes = [];
    $('#trans-search-button-local').on('click',function(event){
      event.preventDefault();
      $('#transactionListModal').modal('show');
      //console.log('local-search');
      searchTransactionQueryLocal();
    });
    $(document).on('click','.view-transaction-class-local',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('local-details');
          //console.log(transactionListArray[num]);
          currentSelectedTrans = transactionListArray[num];
          $('#transactionListModal').modal('toggle');
          var transData = transactionListArray[num];
          $('#trans-transactioncode').val(transData.transactionno);
          $('#trans-papeletanumber').val(transData.papeletano);
          $('#trans-datepawned').val(transData.datepawned2);
          $('#trans-datemature').val(transData.datemature2);
          $('#trans-lastdayredeem').val(transData.datelastredeem2);
          $('#trans-transsummary').val(transData.summary);
          $('#trans-transremarks').val(transData.remarks);
          $('#trans-customercode').val(transData.customercode);
          $('#trans-transstatus').val(transData.statusstr);
          getTransactionItemsLocal(transData.transactionno, transData.papeletano);
          var iscustcode = transData.customercode;
          iscustcode = iscustcode.split("-");
          if(iscustcode.length > 1) getCustomerDetailsTransLocal(transData.customercode);
          else getCustomerDetailsTransLocal2(transData);
          computeNewTransDates();
          //computeTransRates();
          //computeNewTransDates($('#trans-currentdate').val());
          var rateHtml = "";
          $('#trans-advintrate').html('');
          for(num in rateListTrans){
            if(rateListTrans[num].ratetype == 'AI') {
              var rateval = rateListTrans[num].value * 1;
              //console.log(rateval);
              var ratevalueTmp = parseFloat(rateListTrans[num].value);
              if(rateval == transData.advintrate) rateHtml = rateHtml + '<option value="'+rateListTrans[num].ratecode+'-'+ratevalueTmp.toFixed(2)+'" selected="selected">'+ratevalueTmp.toFixed(2)+' %</option>';
              else rateHtml = rateHtml + '<option value="'+rateListTrans[num].ratecode+'-'+ratevalueTmp.toFixed(2)+'">'+ratevalueTmp.toFixed(2)+' %</option>';
            }
          }
          $('#trans-advintrate').html(rateHtml);
          $('#computation-div').css('display','none');
          if(transData.status == 2){
            $('#compute-transaction-btn').prop('disabled',true);
            $('#trans-currentdate').prop('disabled',true);
            $('#renew-transaction-btn').prop('disabled',true);
            $('#redeem-transaction-btn').prop('disabled',true);
            $('#custom-transaction-btn').prop('disabled',true);
            $('#update-transaction-btn').prop('disabled',true);
            $('#void-transaction-btn').prop('disabled',true);
          }
          else if(transData.status == 9){
            $('#compute-transaction-btn').prop('disabled',true);
          }
          else {
            $('#compute-transaction-btn').prop('disabled',false);
            $('#trans-currentdate').prop('disabled',false);
            $('#renew-transaction-btn').prop('disabled',false);
            $('#redeem-transaction-btn').prop('disabled',false);
            $('#custom-transaction-btn').prop('disabled',false);
            $('#update-transaction-btn').prop('disabled',false);
            $('#void-transaction-btn').prop('disabled',false);
          }
          if(transData.itemcodes){
            currentItemImageCodes = transData.itemcodes;
            console.log(currentItemImageCodes);
          }

        }
      }
    });
    function getCustomerDetailsTransLocal(customercode){
      $('#checking-customer-notification').css('display','block');
      resetCustomerDetails();
      //console.log('local-cust-details');
      //console.log('local-cust-details-' + customercode);
      $.ajax({
          url: '/customer-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'customer', type: 'localcustdetails', code: customercode},
          success:function(e){
            //console.log('local-cust-details-result-' + customercode);
            if(e){
              console.log(e);
                var brgy = "";
                var municipality = "";
                var province = "";
                var street = "";
                for(num in e){
                  if(num == "municipality") municipality = e[num];
                  else if(num == "barangay") brgy = e[num];
                  else if(num == "street") street = e[num];
                  else if(num == "province") province = e[num];
                  else if(num == "mobilenumber")  $('#trans-contactnumber').val(e[num]);
                  else if(num == "idtype") {
                    var idPres = e[num];
                    $('#trans-idtype').val(idPres);
                  }
                  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 getCustomerDetailsTransLocal2(transData){
      var custname = transData.customername;
      custname = custname.split(",");
      $('#trans-firstname').val(custname[1]);
      $('#trans-lastname').val(custname[0]);
      $('#trans-branchcode').val(transData.branchcode);
      $('#trans-address').val(transData.customeradd);
      $('#trans-contactnumber').val(transData.customercontact);
    }
    function searchTransactionQueryLocal(){
      $.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,
                  e[num].statusstr,
                  '<button type="button" id="transselected&'+ e[num].transactionno + '" class="btn btn-warning btn-sm view-transaction-class-local">select</button>',]);
              }
              transDatatable.destroy();
              $('#transactiontable').DataTable({
                "scrollY":"250px",
                keys: true,
                draw: true,
                paging:   false,
                info:     false,
                "autoWidth": false,
                data: transactionList,
                columns: [
                  { title: "Transaction No." },
                  { title: "Papeleta No." },
                  { title: "Customer Name" },
                  { title: "Net Proceeds" },
                  { title: "Date Pawned" },
                  { title: "Date Mature" },
                  { title: "Status" },
                  { title: "" },
                ]}),
              transDatatable = $('#transactiontable').DataTable();
              transDatatable.draw();
            }

          }
      });
    }
    function getTransactionItemsLocal(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);
              itemListViewTrans(e);
              getTransactionItemCompute();
              $('#confirm-update-transaction-btn').prop('disabled',false);
            }
          }
      });
    }
  </script>
  <script>
    $("#edit-datepawned").datepicker({
      dateFormat: "yy-mm-dd",
    });
    $('#edit-datepawned').on('change',function(){
      var pawnedDate = $(this).val();
      var date = $('#edit-datepawned').datepicker({ dateFormat: 'mm-dd-yy' }).val();
      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]);

      var newlastday = new Date(pawnedYear, pawnedMonth, 0).getDate();
      //console.log(newlastday);
      if(pawnedDay > newlastday) pawnedDay = newlastday;

      if(pawnedDay < 10) pawnedDay = '0'+pawnedDay;
      if(pawnedMonth < 10) pawnedMonth = '0'+pawnedMonth;
      else {
        if(pawnedMonth > 12) {
          pawnedMonth = '01';
          pawnedYear = pawnedYear + 1;
        }
      }
      $('#edit-datemature').val(pawnedYear + '-' + pawnedMonth + '-' + pawnedDay);
      //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) {
              if(parseInt(tmpMonth) < 7)
              tmpMonth = '0'+tmpMonth;
            }
            if(parseInt(tmpDay) < 10) tmpDay = '0'+tmpDay;
            if(parseInt(redeemMonth) > 7) redeemYear = parseInt(redeemYear) + 1;
            //console.log(redeemYear);
            $('#edit-dateredeem').val(redeemYear + '-' + tmpMonth + '-' + tmpDay);
          }
        }
      }
    });
    function updateTransDates(pawnedDate){
      //var pawnedDate = $(this).val();
      var date = $('#edit-datepawned').datepicker({ dateFormat: 'mm-dd-yy' }).val();
      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]);

      var newlastday = new Date(pawnedYear, pawnedMonth, 0).getDate();
      //console.log(newlastday);
      if(pawnedDay > newlastday) pawnedDay = newlastday;

      if(pawnedDay < 10) pawnedDay = '0'+pawnedDay;
      if(pawnedMonth < 10) pawnedMonth = '0'+pawnedMonth;
      else {
        if(pawnedMonth > 12) {
          pawnedMonth = '01';
          pawnedYear = pawnedYear + 1;
        }
      }
      $('#edit-datemature').val(pawnedYear + '-' + pawnedMonth + '-' + pawnedDay);
      //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) {
              if(parseInt(tmpMonth) < 7)
              tmpMonth = '0'+tmpMonth;
            }
            if(parseInt(tmpDay) < 10) tmpDay = '0'+tmpDay;
            if(parseInt(redeemMonth) > 7) redeemYear = parseInt(redeemYear) + 1;
            //console.log(redeemYear);
            $('#edit-dateredeem').val(redeemYear + '-' + tmpMonth + '-' + tmpDay);
          }
        }
      }
    }
    $('#edit-transaction-btn').on('click',function(){
      //console.log("Test");
      //console.log($('#trans-transactioncode').val());
      $('#edit-papeletano').val($('#trans-papeletanumber').val());
      $('#edit-oldpapeletano').val($('#trans-papeletanumber').val());
      //console.log($('#trans-datepawned').val());
      $('#edit-transactioncode').val($('#trans-transactioncode').val());
      $("#edit-datepawned").val($('#trans-datepawned').val());
      updateTransDates($('#trans-datepawned').val());
    });
    $('#change-transaction-btn').on('click',function(event){
      event.preventDefault();
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: $('#edit-transaction-frorm').serialize(),
          success:function(e){
            if(e){
              //console.log(e);
              alert(e.msg);
              // refreshTransactionDetails($('#edit-transactioncode').val());
            }
          }
      });
    });
    function refreshTransactionDetails(transId){
      for(num in transactionListArray){
        if(transactionListArray[num].transactionno == transId){
          //console.log('local-details');
          //console.log(transactionListArray[num]);
          currentSelectedTrans = transactionListArray[num];
          var transData = transactionListArray[num];
          $('#trans-transactioncode').val(transData.transactionno);
          $('#trans-papeletanumber').val(transData.papeletano);
          $('#trans-datepawned').val(transData.datepawned2);
          $('#trans-datemature').val(transData.datemature2);
          $('#trans-lastdayredeem').val(transData.datelastredeem2);
          $('#trans-transsummary').val(transData.summary);
          $('#trans-transremarks').val(transData.remarks);
          $('#trans-customercode').val(transData.customercode);
          $('#trans-transstatus').val(transData.statusstr);
          getTransactionItemsLocal(transData.transactionno, transData.papeletano);
          var iscustcode = transData.customercode;
          iscustcode = iscustcode.split("-");
          if(iscustcode.length > 1) getCustomerDetailsTransLocal(transData.customercode);
          else getCustomerDetailsTransLocal2(transData);
          computeNewTransDates();
          var rateHtml = "";
          $('#trans-advintrate').html('');
          for(num in rateListTrans){
            if(rateListTrans[num].ratetype == 'AI') {
              var rateval = rateListTrans[num].value * 1;
              //console.log(rateval);
              var ratevalueTmp = parseFloat(rateListTrans[num].value);
              if(rateval == transData.advintrate) rateHtml = rateHtml + '<option value="'+rateListTrans[num].ratecode+'-'+ratevalueTmp.toFixed(2)+'" selected="selected">'+ratevalueTmp.toFixed(2)+' %</option>';
              else rateHtml = rateHtml + '<option value="'+rateListTrans[num].ratecode+'-'+ratevalueTmp.toFixed(2)+'">'+ratevalueTmp.toFixed(2)+' %</option>';
            }
          }
          $('#trans-advintrate').html(rateHtml);
          $('#computation-div').css('display','none');
          if(transData.status == 2){
            $('#compute-transaction-btn').prop('disabled',true);
            $('#trans-currentdate').prop('disabled',true);
            $('#renew-transaction-btn').prop('disabled',true);
            $('#redeem-transaction-btn').prop('disabled',true);
            $('#custom-transaction-btn').prop('disabled',true);
            $('#update-transaction-btn').prop('disabled',true);
            $('#void-transaction-btn').prop('disabled',true);
          }
          else {
            $('#compute-transaction-btn').prop('disabled',false);
            $('#trans-currentdate').prop('disabled',false);
            $('#renew-transaction-btn').prop('disabled',false);
            $('#redeem-transaction-btn').prop('disabled',false);
            $('#custom-transaction-btn').prop('disabled',false);
            $('#update-transaction-btn').prop('disabled',false);
            $('#void-transaction-btn').prop('disabled',false);
          }
        }
      }
    }
  </script>
  <script>
    $(document).on('click','.update-transaction-class',function(event){
      event.preventDefault();
      var thisItemId = $(this).attr('id');
      thisItemId = thisItemId.split('idcode');
      //console.log(thisItemId);
      thisItemId = thisItemId[0];
      thisItemId = thisItemId.split('-');
      thisItemId = thisItemId[1];
      //console.log(thisItemId);
      $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'transactions', type: 'itemdescription', itemcode: thisItemId },
        success:function(e){
          if(e){
            //console.log(e);
            $('#update-itemcode').val(e.itemcode);
            $('#update-itemdescription').val(e.description);
          }
        }
      });

    });
    $('#update-item-description').on('click',function(event){
      event.preventDefault();
      var iscon = confirm('Confirm Update');
      if(iscon == true){
        $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'transactions', type: 'itemdescriptionupdate', itemcode: $('#update-itemcode').val(), itemdesc: $('#update-itemdescription').val() },
          success:function(e){
            if(e){
              //console.log(e);
              if(e.code == 0){
                alert(e.msg);
              }
            }
          }
        });
      }
    });
  </script>
  <script>
    $('#print-close-btn').on('click',function(){
      location.reload();
    });
    $('#print-close-btn-test').on('click',function(){
      location.reload();
    });
    $('#appraised-usercode').on('change',function(){
      $('#usercode').val($('#appraised-usercode').val());
    });
    $('#trans-appraised-usercode').on('change',function(){
      $('#trans-usercode').val($('#trans-appraised-usercode').val());
    });
  </script>
  <script>
    var currentImageCode = "";
    var transImageCodes = [];
    var transImageFiles = [];
    var transImageViewFiles = [];
    var cntr = 0;
    $(document).on('click','.item-upload-image',function(event){
      var itemname = $(this).attr('id');
      itemname = itemname.split("-")
      cntr = parseInt(itemname[1]) - 1;
      var imgview = new Image();
      imgview.onload = custImageDraw;
      imgview.src = "";
      if(transImageViewFiles[cntr]) imgview.src = transImageViewFiles[cntr];
    });
    $('#newItemImagefile').on('click',function(event){
      event.preventDefault();
      $('#inputFromFile').click();
    });
    $('#uploadItemImagefile').on('click',function(event){
      event.preventDefault();
      console.log(transImageCodes);
      $('#inputFromFileUpdate').click();
    });
    function previewImageTransaction(input){
      var img = new Image();
      img.onload = custImageDraw;
      img.onerror = drawFailed;
      img.src = URL.createObjectURL(input.files[0]);
      transImageViewFiles[cntr] = URL.createObjectURL(input.files[0]);
      transImageFiles[cntr] = $("#inputFromFile").get(0).files[0];
    }
    function previewImageTransactionUpdate(input){
      var img = new Image();
      img.onload = custImageDrawUpdate;
      img.onerror = drawFailed;
      img.src = URL.createObjectURL(input.files[0]);
      // transImageFilesUpdate[cntr] = $("#inputFromFileUpdate").get(0).files[0];
    }
    function custImageDraw() {
      var canvas = document.getElementById('grabFrameCanvasNew');
      canvas.width = this.width;
      canvas.height = this.height;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(this, 0,0);
    }
    function custImageDrawUpdate() {
      var canvas = document.getElementById('grabFrameCanvasUpdate');
      canvas.width = this.width;
      canvas.height = this.height;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(this, 0,0);
    }
    function drawFailed() {
      alert("The provided file couldn't be loaded as an Image media");
    }
    function addTransactionImageFile(transcode){
        var filedata = [];
        var tempdata = "";
        var dataFile = new FormData();
        for(num in transImageFiles){
          dataFile.append('file[]', transImageFiles[num]);
        }
        dataFile.append('itemcodes', transImageCodes);
        dataFile.append('transcode', transcode);
        dataFile.append('type', 'JW');
        $.ajax({
            url: '/add-transaction-image-file',
            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);
            },
            complete:function(e){
                console.log(e);
                console.log("Request finished.");
            }
        });
      }

    function updateTransactionImageFile(transcode){
      var filedata = [];
      var tempdata = "";
      var dataFile = new FormData();
      dataFile.append('file[]', $('#inputFromFileUpdate').get(0).files[0]);
      dataFile.append('itemcodes', currentImageCode);
      dataFile.append('transcode', transcode);
      dataFile.append('type', 'JW');
      $.ajax({
          url: '/update-transaction-image-file',
          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);
              alert(data.msg);
          },
          complete:function(e){
              console.log(e);
              console.log("Request finished.");
          }
      });
    }

    $(document).on('click','.edit-item-upload-image',function(event){
      var itemname = $(this).attr('id');
      itemname = itemname.split("view-");
      itemname = itemname[1];
      currentImageCode = itemname;
      console.log(itemname);
      var imgsrc = currentItemImageCodes[itemname];
      var imgview = new Image();
      imgview.onload = custImageDrawUpdate;
      imgview.src = imgsrc;
      console.log(imgsrc);
    });
    $('#updateItemImagefile').on('click',function(event){
      event.preventDefault();
      console.log(currentImageCode);
      updateTransactionImageFile($('#trans-transactioncode').val());
    });
  </script>

@endsection