@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;
    }


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

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

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

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

    .modal { overflow: auto !important; }

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

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

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

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

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

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

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

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

    .selected-item-value {
      text-align: right;
      color: blue;
      max-width: 100px;
      font-weight: 600;
    }
  </style>
  <link rel="stylesheet" href="/css/autocomplete-jquery-ui.css">
  <link rel="stylesheet" href="/theme/plugins/datatables-bs4/css/dataTables.bootstrap4.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark"><b>Transactions</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">Transactions</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-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-pullout-tab" data-toggle="pill" href="#custom-tabs-two-pullout" role="tab" aria-controls="custom-tabs-two-pullout" aria-selected="false">Pull Out</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-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="row">
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Date Pawned From</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="from-datepawned" name="datepawned" value="{{date('Y-m-d')}}">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Date Pawned To</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="to-datepawned" name="datemature" value="{{date('Y-m-d')}}">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Transaction Type</label>
                              <select class="form-control form-control-sm trans-input" id="transtype" name="transtype">
                                <option value="all">All</option>
                                <option value="jewelry">Jewelry</option>
                                <option value="silver">Silver</option>
                                <option value="gadget">Gadgets</option>
                                <option value="motor">Motor</option>
                              </select>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Branch</label>
                              <input type="text" class="form-control form-control-sm trans-input" id="branch-select" name="branchcode" value="">
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>-</label><br>
                              <button id="trans-search-button-local" type="button" class="btn btn-info btn-sm"><i class="fas fa-search"></i> Search</button>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Date Audited</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="date-audited" name="dateaudited" value="{{date('Y-m-d')}}">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <hr>
                      <div class="row">
                        <div class="col-md-12">
                          <input type="text" id="searchAccountOption" class="form-control" placeholder="Search Here.." />
                          <br>
                          <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>Capital</th>
                                <th>Date Pawned</th>
                                <th>Date Mature</th>
                                <th>Status</th>
                                <th></th>
                              </tr>
                            </thead>
                            <tbody style="background:#fff;">
                            </tbody>
                          </table>
                        </div>
                      </div>
                      <hr>

                    </div>
                  </div>
                  <div class="tab-pane fade" id="custom-tabs-two-pullout" role="tabpanel" aria-labelledby="custom-tabs-two-pullout-tab">
                    <div style="padding:15px;">
                      <h4 style="font-weight:600;font-size:1.1em;">For Pull Out 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="row">
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Date Pawned From</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="po-from-datepawned" name="datepawned" value="{{date('Y-m-d')}}">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Date Pawned To</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="po-to-datepawned" name="datemature" value="{{date('Y-m-d')}}">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Transaction Type</label>
                              <select class="form-control form-control-sm trans-input" id="po-transtype" name="transtype">
                                <option value="all">All</option>
                                <option value="jewelry">Jewelry</option>
                                <option value="storage">Silver</option>
                              </select>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Branch</label>
                              <input type="text" class="form-control form-control-sm trans-input" id="po-branch-select" name="branchcode" value="">
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>-</label><br>
                              <button id="pullout-search-button" type="button" class="btn btn-info btn-sm"><i class="fas fa-search"></i> Search</button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <hr>
                      <div class="row">
                        <div class="col-md-12">
                          <input type="text" id="posearchAccountOption" class="form-control" placeholder="Search Here.." />
                          <br>
                          <table id="potransactiontable" 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>Capital</th>
                                <th>Date Pawned</th>
                                <th>Date Mature</th>
                                <th>Status</th>
                                <th></th>
                              </tr>
                            </thead>
                            <tbody style="background:#fff;">
                            </tbody>
                          </table>
                        </div>
                      </div>
                      <hr>
                    </div>
                  </div>
                </div>
              </div>
              <!-- /.card -->
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- Modal -->
  <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="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="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="viewTransactionHistory" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content">
        <div class="modal-body">
          <div id="edit-new-transaction-view" style="border:1px solid rgba(0,0,0,0.1);padding:10px;background:rgba(0,0,0,0.04);display:none;">
            <form id="edit-new-transaction-form">
              <div style="padding:15px;">
                <hr>
                <h4 style="font-weight:600;font-size:1.1em;">Customer Details
                  <label class="float-right">Papeleta No.:
                    <input style="width:70px;padding-left:10px;font-weight:600;color:blue;border:none;background:transparent;"type="text" class="trans-input" id="trans-papeletanumber" name="papeletanumber" disabled>
                  </label>
                  <label class="float-right">Transaction Code:
                    <input style="padding-left:10px;font-weight:600;color:red;border:none;background:transparent;"type="text" class="trans-input" id="trans-transactioncode" name="transactioncode" disabled>
                  </label>
                </h4>
                <div class="row" style="margin-top:10px;">
                  <div class="col-md-3">
                      <div class="row" style="padding:10px;border:1px solid rgba(0,0,0,0.2);background:rgba(3, 144, 252,0.2);">
                        <div class="col-md-12" style="padding:0 !important;margin-bottom:10px;">
                          <img id="trans-customer-image" src="" style="width:100%;height:210px;" /><br>
                          <a href="" id="trans-editcustimage" data-toggle="modal" data-target="#customerProfile">View Full Details</a>
                        </div>
                      </div>
                  </div>
                  <div class="col-md-9">
                    <div style="padding:15px;margin-bottom:10px;background:rgba(3, 144, 252,0.2);">
                      <input type="hidden" value="{{$currrentuser['branch']}}" id="trans-userbranch" name="userbranch" />
                      <input type="hidden" value="{{$currrentuser['user']}}" id="trans-usercode" name="usercode" />
                      <div class="row">
                        <div class="col-md-3">
                          <div class="form-group">
                            <label>First Name</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-firstname" name="firstname">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label>Middle Name</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-middlename" name="middlename">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label>Last Name</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-lastname" name="lastname">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label>Customer Code</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-customercode" name="customercode" readonly>
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label>Branch Code</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-branchcode" name="branchcode">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label>Branch Name</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-branchname" name="branchname">
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <label for="customeraddress">Present Address</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-address" = name="address">
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-3">
                          <div class="form-group">
                            <label for="customerbranch">Contact Number</label>
                            <input type="text" class="form-control form-control-sm trans-input trans-input" id="trans-contactnumber" name="contactnumber">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label for="customerbranch">ID Presented</label>
                            <select id="trans-idtype" name="idtype" class="form-control form-control-sm customer-input trans-input">
                              <option value="">--- Select Id ---</option>
                              <option value="sss">SSS</option>
                              <option value="gsis">GSIS</option>
                              <option value="government">Government ID</option>
                              <option value="school">School ID</option>
                              <option value="driverlicense">Driver's License</option>
                              <option value="prclicense">PRC License Card</option>
                              <option value="votersid">Voter's ID</option>
                              <option value="postal">Postal ID</option>
                              <option value="company">Company ID</option>
                              <option value="passport">Passport</option>
                              <option value="others">Others</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label for="customerbranch">ID Number</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-idnumber" name="idnumber">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label for="customerbranch">Employment</label>
                            <select id="trans-employment" name="employment" class="form-control form-control-sm customer-input trans-input">
                              <option value="employed">Employed</option>
                              <option value="self">Self-Employed</option>
                              <option value="business">Business Owner</option>
                              <option value="others">Others</option>
                            </select>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <hr>
                <h4 style="font-weight:600;font-size:1.1em;">Item Details</h4>
                <hr>
                <div class="row">
                  <div class="col-md-12">
                    <div class="row" id="itemlist-table">
                      <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 class="row" id="poitemlist-table" style="display:none;">
                      <div class="col-md-12">
                        <h3 class="card-title">Item List</h3>
                        <br>
                        <table id="poitemlisttable" 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>Description</th>
                                <th>Quantity</th>
                                <th>Status</th>
                                <th>Value</th>
                                <th></th>
                              </tr>
                            </thead>
                            <tbody style="background:#fff;"></tbody>
                          </table>
                        <br>
                      </div>
                    </div>
                    <div style="padding:15px;margin-bottom:10px;background:rgba(3, 144, 252,0.2);">
                      <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                              <div class="col-md-4">
                                <div class="form-group">
                                  <label>Pawned Date</label>
                                  <div class="input-group">
                                    <div class="input-group-prepend">
                                      <span class="input-group-text">
                                        <i class="far fa-calendar-alt"></i>
                                      </span>
                                    </div>
                                    <input type="text" class="form-control form-control-sm float-right trans-input" id="trans-datepawned" name="datepawned" placeholder="yyyy-mm-dd" disabled>
                                    <div class="input-group-append">
                                      <span class="input-group-text">
                                        <i id="change-papeletano-btn" style="color:maroon;cursor:pointer;"class="fas fa-pencil-alt"></i>
                                      </span>
                                    </div>

                                  </div>
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="form-group">
                                  <label>Maturity Date</label>
                                  <div class="input-group">
                                    <div class="input-group-prepend">
                                      <span class="input-group-text">
                                        <i class="far fa-calendar-alt"></i>
                                      </span>
                                    </div>
                                    <input type="text" class="form-control form-control-sm float-right trans-input" id="trans-datemature" name="datemature" placeholder="yyyy-mm-dd" readonly>
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="form-group">
                                  <label>Last Day of Redemption</label>
                                  <div class="input-group">
                                    <div class="input-group-prepend">
                                      <span class="input-group-text">
                                        <i class="far fa-calendar-alt"></i>
                                      </span>
                                    </div>
                                    <input type="text" class="form-control form-control-sm float-right trans-input" id="trans-lastdayredeem" name="lastdayredeem" placeholder="yyyy-mm-dd" readonly>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="row" style="display:none">
                              <div class="col-md-4">
                                <div class="form-group">
                                  <label>New Trans Date</label>
                                  <div class="input-group">
                                    <div class="input-group-prepend">
                                      <span class="input-group-text">
                                        <i class="far fa-calendar-alt"></i>
                                      </span>
                                    </div>
                                    <input type="text" class="form-control form-control-sm float-right trans-input" id="trans-currentdate" name="currentdate" placeholder="yyyy-mm-dd" value="{{date('Y-m-d')}}">
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="form-group">
                                  <label>New Maturity Date</label>
                                  <div class="input-group">
                                    <div class="input-group-prepend">
                                      <span class="input-group-text">
                                        <i class="far fa-calendar-alt"></i>
                                      </span>
                                    </div>
                                    <input type="text" class="form-control form-control-sm float-right trans-input" id="new-trans-datemature" name="datemature" placeholder="yyyy-mm-dd" readonly>
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="form-group">
                                  <label>New Last Day of Redemption</label>
                                  <div class="input-group">
                                    <div class="input-group-prepend">
                                      <span class="input-group-text">
                                        <i class="far fa-calendar-alt"></i>
                                      </span>
                                    </div>
                                    <input type="text" class="form-control form-control-sm float-right trans-input" id="new-trans-lastdayredeem" name="lastdayredeem" placeholder="yyyy-mm-dd" readonly>
                                  </div>
                                </div>
                              </div>
                            </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-4">
                          <div class="form-group">
                            <label>Summary</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-transsummary" name="transsummary" />
                          </div>
                        </div>
                        <div class="col-md-4">
                          <div class="form-group">
                            <label>Remark</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-transremarks" name="transremarks" />
                          </div>
                        </div>
                        <div class="col-md-4">
                          <div class="form-group">
                            <label>Status</label>
                            <input type="text" class="form-control form-control-sm trans-input" id="trans-transstatus" name="transstatus" disabled/>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-2">
                           <div class="form-group">
                             <button id="history-transaction-btn" type="button" class="btn btn-primary btn-sm form-control form-control-sm" data-toggle="modal" data-target="#historyTransaction">History</button>
                           </div>
                        </div>
                        <div class="col-md-10" id="tag-pullout-div" style="display:none;">
                           <div class="form-group">
                             <div class="row">
                               <div class="col-md-7"></div>
                               <div class="col-md-5">
                                 <input id="ispullout" type="checkbox" name="ispullout" value="1" /> <span>Pull Out Item(s)</span>
                                 <button id="pullout-transaction-btn" type="button" class="btn btn-warning btn-sm form-control form-control-sm">Update Status</button>
                               </div>
                             </div>
                           </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <hr>
                <div id="for-audit-only" class="row">
                  <div class="col-md-12">
                    <div class="form-group">
                      <label>Remarks</label>
                      <textarea id="transaction-remarks" rows="10" class="form-control"></textarea>
                    </div>
                  </div>
                  <div class="col-md-2">
                     <div class="form-group">
                       <button id="save-remarks-btn" type="button" class="btn btn-primary btn-sm form-control form-control-sm">Save</button>
                     </div>
                  </div>
                </div>
              </div>
            </form>
            <form id="item-trans-table"></form>
          </div>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

  <div id="viewItemDetails" 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;">Item Details</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body" style="background:#deffff;">
            <div id="item-profile-details"></div>
          </div>
        <hr>
      </div>
    </div>
  </div>

@endsection
@section('js')
  <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-compute.js"></script> -->
  <script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.flash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js"></script>

  <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>
    function isNumberKey(evt){
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode != 46 && charCode > 31
          && (charCode < 48 || charCode > 57))
           return false;

        return true;
     }
    $('#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);
    });
    $('#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 transDatatable = $('#transactiontable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      dom: 'Bfrtip',
      buttons: [
          'copy', 'csv', 'excel', 'pdf', 'print'
      ],
      "autoWidth": false,
      "ordering": false,
    });
    var listItemDatatable = $('#itemlisttable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      "autoWidth": false,
      "ordering": false,
    });
    var polistItemDatatable = $('#poitemlisttable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      "autoWidth": false,
      "ordering": false,
    });
    $(function() {
      $("#from-datepawned").datepicker({
        dateFormat: "yy-mm-dd",
        maxDate: new Date
      });
      $("#to-datepawned").datepicker({
        dateFormat: "yy-mm-dd",
        maxDate: new Date
      });
      $("#date-audited").datepicker({
        dateFormat: "yy-mm-dd",
        maxDate: new Date
      });
    });
    $('#trans-search-button-local').on('click',function(event){
      event.preventDefault();
      console.log('local-search');
      searchTransactionQueryLocal();
    });
    function searchTransactionQueryLocal(){
      var currentbranch = $('#branch-select').val();
      var requestparam = $('#branch-select').val() + ";" + $('#from-datepawned').val() + ";" + $('#to-datepawned').val() + ";" + $('#trans-usercode').val()+";"+$('#transtype').val();
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request:'transactions',type:'search',cat:'all',cattype:'audit',param: requestparam },
          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].amount,
                  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" data-toggle="modal" data-target="#viewTransactionHistory">select</button>',]);
              }
              transDatatable.destroy();
              $('#transactiontable').DataTable({
                "scrollY":"500px",
                keys: true,
                draw: true,
                paging:   false,
                info:     false,
                "autoWidth": false,
                data: transactionList,
                dom: 'Bfrtip',
                buttons: [
                    'copy',
                    {
                      extend: 'csv',
                      title: currentbranch,
                      messageTop: "Report Dates: "+$('#from-datepawned').val()+" To "+$('#to-datepawned').val()
                    },
                    {
                      extend: 'excel',
                      title: currentbranch,
                      messageTop: "Report Dates: "+$('#from-datepawned').val()+" To "+$('#to-datepawned').val()
                    },
                    {
                      extend: 'pdf',
                      title: currentbranch,
                      messageTop: "Report Dates: "+$('#from-datepawned').val()+" To "+$('#to-datepawned').val()
                    },
                    {
                      extend: 'print',
                      title: currentbranch,
                      messageTop: "Report Dates: "+$('#from-datepawned').val()+" To "+$('#to-datepawned').val()
                    },
                ],
                columns: [
                  { title: "Transaction No." },
                  { title: "Papeleta No." },
                  { title: "Customer Name" },
                  { title: "Capital" },
                  { title: "Date Pawned" },
                  { title: "Date Mature" },
                  { title: "Status" },
                  { title: "" },
                ]}),
              transDatatable = $('#transactiontable').DataTable();
              transDatatable.draw();
            }

          }
      });
    }
    $(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('&');
      var isPullout = 0;
      if(transIDsel2[0] == "potransselected") isPullout = 1;
      if(isPullout == 1){
        $('#tag-pullout-div').css('display','block');
        $('#for-audit-only').css('display','none');
      }
      else {
        $('#tag-pullout-div').css('display','none');
        $('#for-audit-only').css('display','block');
      }

      for(num in transactionListArray){
        if(transactionListArray[num].transactionno == transIDsel2[1]){
          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);
          $('#transaction-remarks').val(transData.auditremarks);
          //getTransactionItemsLocal(transData.transactionno, transData.papeletano);
          if(isPullout == 1) {
            if(transData.status == 9) $('#ispullout').prop("checked",true);
            else $('#ispullout').prop("checked",false);
            getTransactionItemsPullout(transData.transactionno, transData.papeletano);
          }
          else getTransactionItemsAudit(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);
          }
          $('#viewTransactionHistory').show();
        }
      }
    });
    function getTransactionItemsAudit(transcode, papeletano){
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request:'transactions', type:'itemsaudit', param: transcode+":"+papeletano},
          success:function(e){
            if(e){
              console.log(e);
              itemListViewTransAudit(e);
              getTransactionItemCompute();
            }
          }
      });
    }
    function getTransactionItemsPullout(transcode, papeletano){
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request:'transactions', type:'items', param: transcode+":"+papeletano},
          success:function(e){
            if(e){
              console.log(e);
              itemListViewTransPullout(e);
              getTransactionItemCompute();
            }
          }
      });
    }
    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();
            }
          }
      });
    }
    function getCustomerDetailsTransLocal(customercode){
      $('#checking-customer-notification').css('display','block');
      resetCustomerDetails();
      console.log('local-cust-details');
      console.log('local-cust-details-' + customercode);
      $.ajax({
          url: '/customer-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'customer', type: 'localcustdetails', code: customercode},
          success:function(e){
            console.log('local-cust-details-result-' + customercode);
            if(e){
              console.log(e);
                var brgy = "";
                var municipality = "";
                var province = "";
                var street = "";
                for(num in e){
                  if(num == "municipality") municipality = e[num];
                  else if(num == "barangay") brgy = e[num];
                  else if(num == "street") street = e[num];
                  else if(num == "province") province = e[num];
                  else if(num == "mobilenumber")  $('#trans-contactnumber').val(e[num]);
                  else if(num == "idtype") {
                    var idPres = e[num];
                    $('#trans-idtype').val(idPres.toLowerCase());
                  }
                  else $('#trans-'+num).val(e[num]);
                }
                var address = street + " " + brgy + " " + municipality + " " + province;
                $("#trans-address").val(address);
                var custdetails = '<span>Customer Code:</span> <b>'+e.customercode+'</b></br>'+
                  '<span style="padding-right:10px;">First Name:</span> <b>'+e.firstname+'</b></br>'+
                  '<span style="padding-right:10px;">Middle Name:</span> <b>'+e.middlename+'</b></br>'+
                  '<span style="padding-right:10px;">Last Name:</span> <b>'+e.lastname+'</b></br>'+
                  '<span style="padding-right:10px;">ID Type:</span> <b>'+e.idtype+'</b></br>'+
                  '<span style="padding-right:10px;">ID Number:</span> <b>'+e.idnumber+'</b></br>'+
                  '<span style="padding-right:10px;">Date of Birth:</span> <b>'+e.dateofbirth+'</b></br>'+
                  '<span style="padding-right:10px;">Nationality:</span> <b>'+e.nationality+'</b></br>'+
                  '<span style="padding-right:10px;">Mobile Number:</span> <b>'+e.mobilenumber+'</b></br>'+
                  '<span style="padding-right:10px;">Source of Fund:</span> <b>'+e.sourceoffund+'</b></br>'+
                  '<span style="padding-right:10px;">Building / Street:</span> <b>'+e.street+'</b></br>'+
                  '<span style="padding-right:10px;">Barangay:</span> <b>'+e.barangay+'</b></br>'+
                  '<span style="padding-right:10px;">Municipality:</span> <b>'+e.municipality+'</b></br>'+
                  '<span style="padding-right:10px;">Province:</span> <b>'+e.province+'</b></br>'+
                  '<span style="padding-right:10px;">Employment:</span> <b>'+e.employment+'</b></br>'+
                  '<span style="padding-right:10px;">Company Name:</span> <b>'+e.companyname+'</b></br>';
                $('#customer-profile-details').html(custdetails);
                if(e.image){
                  $('#trans-customer-image').prop('src',e.image);
                }
                if($('#trans-customercode').val() != ""){
                  $('#trans-add-item-transaction-modal-btn').prop('disabled',false);
                }
            }
          }
      });
    }
    function 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 resetCustomerDetails(){
      $('#customercode').val('');
      $('#firstname').val('');
      $('#middlename').val('');
      $('#lastname').val('');
      $('#branchname').val('');
      $('#branchcode').val('');
      $('#idtype').val('');
      $('#idnumber').val('');
      $('#dateofbirth').val('');
      $('#placeofbirth').val('');
      $('#nationality').val('');
      $('#contactnumber').val('');
      $('#address').val('');
      $('#transactioncode').val('');
      $('#customer-image').prop('src',null);
      $('#papeletanumber').val('');
      $('#datepawned').val('');
      $('#datemature').val('');
      $('#lastdayredeem').val('');
    }
    function saveRemarks(){
      var crrntbranch = $('#branch-select').val();
      crrntbranch = crrntbranch.split(":");
      var requestparam = crrntbranch[0] + "::" + $('#trans-transactioncode').val() + "::" + $('#trans-usercode').val() + "::" + $('#transaction-remarks').val() + "::" + $('#date-audited').val();
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request:'audit',type:'save',param: requestparam },
          success:function(e){
            if(e){
              console.log(e);
              if(e == 0) alert('Remarks added');
              else if(e == 1) alert('Remarks updated');
            }

          }
      });
    }
    $('#save-remarks-btn').on('click',function(event){
      event.preventDefault();
      var istru = confirm('Confirm save');
      if(istru == true){
        saveRemarks();
      }

    });
    function itemListViewTransAudit(e){
      $('#itemlist-table').css('display','block');
      $('#poitemlist-table').css('display','none');
      console.log(e);
      var totalAmount = 0;
      var totalQuantity = 0;
      var itemSetList= [];
      itemTransListArr = e;
      for(num in e){
        var amountval = parseFloat(e[num].capital);
        var itmType ="-";
        if(e[num].itemtype == undefined){
          itmType = e[num].itemtype;
          if(itmType != '-'){
            itmType = itmType.split(':');
            itmType = itmType[1];
          }
        }
        itemSetList.push([
          'Audit Check',
          itmType,
          '<a id="'+e[num].transactionno+':'+e[num].code+'" href="" class="view-item-details">'+e[num].description+'</a>',
          e[num].quantity,
          e[num].status,
          amountval.toFixed(2),
          '-',
        ]);
        totalQuantity = parseInt(totalQuantity) + parseInt(e[num].quantity);
        totalAmount = parseFloat(totalAmount) + parseFloat(e[num].amount);
      }
      //console.log(itemSetList);
      listItemDatatable.destroy();
      listItemDatatable.draw();
      $('#itemlisttable').DataTable({
        keys: true,
        draw: true,
        paging:   false,
        info:     false,
        "ordering": false,
        data: itemSetList,
        "columnDefs": [
          { "width": "20%", "targets": 0 },
          { "width": "10%", "targets": 1 },
          { "width": "40%", "targets": 2 },
          { "width": "10%", "targets": 3 },
          { "width": "10%", "targets": 4 },
          { "width": "5%", "targets": 5 },
          { "width": "5%", "targets": 6 },
        ],
        columns: [
          { title: "Action" },
          { title: "Type" },
          { title: "Description" },
          { title: "Quantity" },
          { title: "Status" },
          { title: "Value" },
          { title: "" }
        ]}),
      listItemDatatable = $('#itemlisttable').DataTable();
      listItemDatatable.draw();
      listItemDatatable.columns.adjust();
      $('#trans-totalamount').val(totalAmount.toFixed(2));
      $('#trans-totalquantity').val(totalQuantity);
      //computeTransRates();
    }
    function itemListViewTransPullout(e){
      $('#itemlist-table').css('display','none');
      $('#poitemlist-table').css('display','block');
      console.log(e);
      var totalAmount = 0;
      var totalQuantity = 0;
      var itemSetList= [];
      itemTransListArr = e;
      for(num in e){
        var amountval = parseFloat(e[num].capital);
        var itmType ="-";
        if(e[num].itemtype == undefined){
          itmType = e[num].itemtype;
          if(itmType != '-'){
            itmType = itmType.split(':');
            itmType = itmType[1];
          }
        }
        itemSetList.push([
          '<a id="'+e[num].transactionno+':'+e[num].code+'" href="" class="view-item-details">'+e[num].description+'</a>',
          e[num].quantity,
          e[num].status,
          amountval.toFixed(2),
          '-',
        ]);
        totalQuantity = parseInt(totalQuantity) + parseInt(e[num].quantity);
        totalAmount = parseFloat(totalAmount) + parseFloat(e[num].amount);
      }
      //console.log(itemSetList);
      polistItemDatatable.destroy();
      polistItemDatatable.draw();
      $('#poitemlisttable').DataTable({
        keys: true,
        draw: true,
        paging:   false,
        info:     false,
        "ordering": false,
        data: itemSetList,
        "columnDefs": [
          { "width": "20%", "targets": 0 },
          { "width": "10%", "targets": 1 },
          { "width": "40%", "targets": 2 },
          { "width": "10%", "targets": 3 },
          { "width": "10%", "targets": 4 },
        ],
        columns: [
          { title: "Description" },
          { title: "Quantity" },
          { title: "Status" },
          { title: "Value" },
          { title: "" }
        ]}),
      polistItemDatatable = $('#poitemlisttable').DataTable();
      polistItemDatatable.draw();
      polistItemDatatable.columns.adjust();
      $('#trans-totalamount').val(totalAmount.toFixed(2));
      $('#trans-totalquantity').val(totalQuantity);
      //computeTransRates();
    }
    $(document).on('click','.view-item-details',function(event){
      event.preventDefault();
      var eparam = $(this).attr('id');
      itemListDetailsAudit(eparam);
    });
    function itemListDetailsAudit(eparam){
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request:'transactions',type:'itemdetails', param: eparam },
          success:function(e){
            if(e){
              console.log(e);
              $('#item-profile-details').html('');
              var itemStr = '';
              for(num in e){
                itemStr = itemStr + '<span>'+num+'</span>: '+'<span style="font-weight:bold;">'+e[num]+'</span><br>'
              }
              $('#item-profile-details').html(itemStr);
              $('#viewItemDetails').modal('toggle');
            }
          }
      });
    }
    $("#branch-select").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'branch', locname: $("#branch-select").val()},
            success:function(e){
              if(e){
                console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });

    $('#searchAccountOption').keyup(function(){
        transDatatable.search($(this).val()).draw();
    });
    $(document).on('shown.bs.modal', '#historyTransaction', function () {
        var transcode = $('#trans-transactioncode').val();
        $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'transactions', type: 'history', transcode: transcode },
          success:function(e){
            if(e){
              console.log(e);
              $('.historyTransactionHtml').html('');
              var isShow = "";
              var resLen = e.length;
              itemHistoryArr = [];
              for(num in e){
                if(num == (resLen - 1)) isShow = "show";
                else isShow = "";
                var itemsData = e[num].items;
                var itemHtml = '<table class="history-table" style="text-align:center;"><thead><th style="width:34%;">Description</th><th style="width:8%;">Qty</th><th style="width:8%;">Adv. Int</th><th style="width:8%;">Interest</th><th style="width:8%;">Penalty</th>'+
                               '<th style="width:8%;">Capital</th><th style="width:12%;">New Capital</th><th style="width:8%;">Amort</th><th style="width:8%;">Status</th><th style="width:5%;"></th></thead>';
                for(num1 in itemsData){
                  var itemHtmlStr = '<tr>'+
                    '<td style="width:30%;" >'+itemsData[num1].summary+'</td>'+
                    '<td style="width:6%;">'+itemsData[num1].quantity+'</td>'+
                    '<td style="width:8%;">'+itemsData[num1].advint+'</td>'+
                    '<td style="width:8%;">'+itemsData[num1].interest+'</td>'+
                    '<td style="width:8%;">'+itemsData[num1].penalty+'</td>'+
                    '<td style="width:8%;">'+itemsData[num1].amount+'</td>'+
                    '<td style="width:12%;">'+itemsData[num1].capital+'</td>'+
                    '<td style="width:8%;">'+itemsData[num1].amort+'</td>'+
                    '<td style="width:8%;">'+itemsData[num1].status+'</td>'+
                    '<td style="width:8%;"><button id="'+itemsData[num1].id+'" class="select-item-history" type="button">view</button></td>'+
                  '</tr>';
                  itemHtml = itemHtml + itemHtmlStr;
                  itemHistoryArr[itemsData[num1].id] = itemsData[num1];
                }
                itemHtml = itemHtml + '</table>';
                var innerHtmlData = '<div class="card">'+
                  '<div class="card-header">'+
                    '<a class="card-link" data-toggle="collapse" href="#'+e[num].transactionno+'-'+e[num].translevel+'">'+
                      '<div class="row">'+
                        '<div class="col-md-3">'+e[num].papeletano+'</div>'+
                        '<div class="col-md-3">'+e[num].transdate+'</div>'+
                        '<div class="col-md-3">'+e[num].amountstr+'</div>'+
                        '<div class="col-md-3">'+e[num].statusstr+'</div>'+
                      '</div>'+
                    '</a>'+
                  '</div>'+
                  '<div id="'+e[num].transactionno+'-'+e[num].translevel+'" class="collapse '+isShow+'" data-parent="#accordion">'+
                    '<div class="card-body">'+
                      '<div class="row">'+
                        '<div class="col-md-4">'+
                          '<label>Capital: <span class="span-history">'+e[num].amountstr+'</span></label><br>'+
                          '<label>Adv. Interest ('+e[num].advintrate+' %): <span class="span-history">'+e[num].advintamnt+'</span></label><br>'+
                        '</div>'+
                        '<div class="col-md-4">'+
                          '<label>Interest ('+e[num].intrate+' %): <span class="span-history">'+e[num].intamnt+'</span></label><br>'+
                          '<label>Penalty ('+e[num].penrate+' %): <span class="span-history">'+e[num].penamnt+'</span></label><br>'+
                        '</div>'+
                        '<div class="col-md-4">'+
                          '<label>Srv. Charge: <span class="span-history">'+e[num].srvcharge+'</span></label><br>'+
                          '<label>Doc Stamp: <span class="span-history">'+e[num].docstamp+'</span></label><br>'+
                        '</div>'+
                      '</div>'+
                      '<div class="row">'+
                        '<div class="col-md-4">'+
                          '<label>Quantity: <span class="span-history">'+e[num].quantity+'</span></label><br>'+
                        '</div>'+
                        '<div class="col-md-4">'+
                          '<label>Net Proceeds: <span class="span-history">'+e[num].netproceeds+'</span></label><br>'+
                        '</div>'+
                        '<div class="col-md-4">'+
                          '<label>Amnt Collected: <span class="span-history">'+e[num].collected+'</span></label><br>'+
                        '</div>'+
                      '</div>'+
                      '<br>'+
                      '<label>Items</label>'+
                      '<div class="row">'+
                        '<div class="col-md-12">'+itemHtml+'</div>'+
                      '</div>'+

                    '</div>'+
                  '</div>';
                $('.historyTransactionHtml').append(innerHtmlData);
              }
              console.log(itemHistoryArr);
            }
          }
        });
    });
  </script>

  <script>
    var potransactionListArray = [];
    var potransDatatable = $('#potransactiontable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      dom: 'Bfrtip',
      buttons: [
          'copy', 'csv', 'excel', 'pdf', 'print'
      ],
      "autoWidth": false,
      "ordering": false,
    });
    $(function() {
      $("#po-from-datepawned").datepicker({
        dateFormat: "yy-mm-dd",
        maxDate: new Date
      });
      $("#po-to-datepawned").datepicker({
        dateFormat: "yy-mm-dd",
        maxDate: new Date
      });
    });
    $("#po-branch-select").autocomplete({
      source: function(request, response){
        $.ajax({
            url: '/get-address-location',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: {loctype: 'branch', locname: $("#po-branch-select").val()},
            success:function(e){
              if(e){
                console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
    $('#pullout-search-button').on('click',function(event){
      event.preventDefault();
      console.log('local-search');
      pullOutTransactionQuery();
    });
    function pullOutTransactionQuery(){
      var currentbranch = $('#po-branch-select').val();
      var requestparam = $('#po-branch-select').val() + ";" + $('#po-from-datepawned').val() + ";" + $('#po-to-datepawned').val() + ";" + $('#trans-usercode').val()+";"+$('#po-transtype').val();
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request:'transactions',type:'search',cat:'all',cattype:'pullout',param: requestparam },
          success:function(e){
            if(e){
              console.log(e);
              transactionListArray = e;
              var potransactionList = [];
              for(num in e){
                var amount = parseFloat(e[num].itemvalue);
                potransactionList.push([
                  e[num].transactionno,
                  e[num].papeletano,
                  e[num].customername,
                  e[num].amount,
                  e[num].datepawned,
                  e[num].datemature,
                  e[num].statusstr,
                  '<button type="button" id="potransselected&'+ e[num].transactionno + '" class="btn btn-warning btn-sm view-transaction-class-local" data-toggle="modal" data-target="#viewTransactionHistory">select</button>',]);
              }
              potransDatatable.destroy();
              $('#potransactiontable').DataTable({
                "scrollY":"500px",
                keys: true,
                draw: true,
                paging:   false,
                info:     false,
                "autoWidth": false,
                data: potransactionList,
                dom: 'Bfrtip',
                buttons: [
                    'copy',
                    {
                      extend: 'csv',
                      title: currentbranch,
                      messageTop: "Report Dates: "+$('#from-datepawned').val()+" To "+$('#to-datepawned').val()
                    },
                    {
                      extend: 'excel',
                      title: currentbranch,
                      messageTop: "Report Dates: "+$('#from-datepawned').val()+" To "+$('#to-datepawned').val()
                    },
                    {
                      extend: 'pdf',
                      title: currentbranch,
                      messageTop: "Report Dates: "+$('#from-datepawned').val()+" To "+$('#to-datepawned').val()
                    },
                    {
                      extend: 'print',
                      title: currentbranch,
                      messageTop: "Report Dates: "+$('#from-datepawned').val()+" To "+$('#to-datepawned').val()
                    },
                ],
                columns: [
                  { title: "Transaction No." },
                  { title: "Papeleta No." },
                  { title: "Customer Name" },
                  { title: "Capital" },
                  { title: "Date Pawned" },
                  { title: "Date Mature" },
                  { title: "Status" },
                  { title: "" },
                ]}),
              potransDatatable = $('#potransactiontable').DataTable();
              potransDatatable.draw();
            }

          }
      });
    }
    $('#pullout-transaction-btn').on('click',function(event){
      event.preventDefault();
      var iscon = confirm("Pull Out Transaction?");
      if(iscon == true){
        var isPO = 0;
        if($("#ispullout").prop('checked') == true) isPO = 9;
        var requestparam = $('#trans-transactioncode').val() + "|" + $('#trans-usercode').val() + "|" + isPO;
        pulloutAction(requestparam);
      }
    });

    function pulloutAction(requestparam){
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request:'transactions',type:'pullout', param: requestparam },
          success:function(e){
            if(e){
              console.log(e);
              alert("Transaction Updated.");
            }
          }
      });
    }
  </script>
@endsection