@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>Audit Branch Report</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">Audit Branch Report</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-create-link" data-toggle="pill" href="#custom-tabs-two-create-tab" role="tab" aria-controls="custom-tabs-two-create-tab" aria-selected="false">Create Report</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="custom-tabs-two-search-link" data-toggle="pill" href="#custom-tabs-two-search-tab" role="tab" aria-controls="custom-tabs-two-search-tab" aria-selected="false">Search Report</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-create-tab" role="tabpanel" aria-labelledby="custom-tabs-two-create-tab">
                    <div style="padding:15px;">
                      <div style="border:1px solid rgba(0,0,0,0.2);padding:20px;">
                        <form id="audit-report-form">
                          <input type="hidden" name="request" value="audit">
                          <input type="hidden" name="type" value="savereport">
                          <input type="hidden" id="auditparam" name="auditparam" value="">
                          <input type="hidden" name="auditorname" value="{{$currrentuser['name']}}"/>
                          <div class="row">
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Report Number</label>
                                <input type="text" class="form-control form-control-sm trans-input" id="reportnumber" name="reportnumber" value="{{$reportnum}}">
                                <input type="hidden" class="form-control form-control-sm trans-input" id="reportnumberprint" value="">
                              </div>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Report Date</label>
                                <input type="text" class="form-control form-control-sm trans-input" id="reportdate" name="reportdate" value="{{date('Y-m-d')}}">
                              </div>
                            </div>
                          </div>
                          <hr>
                          <div class="row">
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Last Pawned Ticket Audited</label>
                                <input type="text" class="form-control form-control-sm trans-input" id="lastpawnedticket" name="lastpawnedticket" value="">
                              </div>
                              <div class="form-group">
                                <label>Last Pawned Ticket Audited (Date)</label>
                                <input type="text" class="form-control form-control-sm trans-input" id="lastpawnedticketdate" name="lastpawnedticketdate" value="">
                              </div>
                            </div>
                            <div class="col-md-8">
                              <div class="row">
                                <div class="col-md-6">
                                  <div class="form-group">
                                    <label>Did you finished all up to date of audit?</label>
                                    <select class="form-control" id="isauditfinish" name="isauditfinish">
                                      <option value="YES">YES</option>
                                      <option value="NO">NO</option>
                                    </select>
                                  </div>
                                </div>
                                <div class="col-md-6">
                                  <label>If not, State what number not inspected</label>
                                  <div class="row">
                                    <div class="col-md-6">
                                      <div class="form-group">
                                        <label>Ticket From</label>
                                        <input type="text" class="form-control form-control-sm trans-input" id="inspectedticketfrom" name="inspectedticketfrom" value="">
                                      </div>
                                    </div>
                                    <div class="col-md-6">
                                      <div class="form-group">
                                        <label>Ticket To</label>
                                        <input type="text" class="form-control form-control-sm trans-input" id="inspectedticketto" name="inspectedticketto" value="">
                                      </div>
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-md-6">
                                      <div class="form-group">
                                        <label>Date From</label>
                                        <input type="text" class="form-control form-control-sm trans-input" id="inspecteddatefrom" name="inspecteddatefrom" value="">
                                      </div>
                                    </div>
                                    <div class="col-md-6">
                                      <div class="form-group">
                                        <label>Date To</label>
                                        <input type="text" class="form-control form-control-sm trans-input" id="inspecteddateto" name="inspecteddateto" value="">
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <hr>
                          <div class="row">
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Did you inspect/audit all storage-meaning tira and items?</label>
                                <select class="form-control" id="isaudittira" name="isaudittira">
                                  <option value="YES">YES</option>
                                  <option value="NO">NO</option>
                                </select>
                              </div>
                            </div>
                            <div class="col-md-8">
                              <div class="form-group">
                                <label>If not, why?</label>
                                <textarea class="form-control" id="isaudittirareason" name="isaudittirareason"></textarea>
                              </div>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-4">
                              <div class="form-group">
                                <button id="reset-button" type="reset" class="btn btn-default">Reset Values</button>
                              </div>
                            </div>
                          </div>
                        </form>
                      </div>
                      <br>
                      <h4 style="font-weight:600;font-size:1.1em;">FINDINGS: OVER APPRAISED / FAKE</h4>
                      <input type="hidden" value="{{$currrentuser['user']}}" id="usercode" name="usercode" />
                      <input type="hidden" value="{{$currrentuser['name']}}" id="username" name="username" />
                      <div style="border:1px solid rgba(0,0,0,0.2);padding:20px;">
                        <div class="row">
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Date Audit 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="fromdateaudit" name="fromdateaudit" value="{{date('Y-m-d')}}">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Date Audit 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="todateaudit" name="todateaudit" 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="search-audit-trans-btn" type="button" class="btn btn-info btn-sm"><i class="fas fa-search"></i> Search</button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div style="border:1px solid rgba(0,0,0,0.2);padding:20px;">
                        <div class="row">
                          <div class="col-md-12">
                            <input type="hidden" id="searchAccountOption" class="form-control" placeholder="Search Here.." />
                            <br>
                            <table id="audittransactiontable" class="table table-bordered table-hover" style="  font-size:0.9em !important;">
                              <thead style="width:100% !important;">
                                <tr>
                                  <th>Date Audited</th>
                                  <th>Customer</th>
                                  <th>Date Pawned</th>
                                  <th>Papeleta No.</th>
                                  <th>Capital</th>
                                  <th>Description</th>
                                  <th>Appraised By</th>
                                  <th>Status</th>
                                  <th>Remarks</th>
                                </tr>
                              </thead>
                              <tbody style="background:#fff;">
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </div>
                      <hr>
                      <div class="row">
                        <div class="col-md-4">
                          <div class="form-group">
                            <button id="save-audit-report-btn" type="button" class="btn btn-success btn-sm"><i class="fas fa-save"></i> Save</button>
                            <a href="" id="print-audit-report-btn" type="button" class="btn btn-danger btn-sm" download><i class="fas fa-file"></i> Download</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="custom-tabs-two-search-tab" role="tabpanel" aria-labelledby="custom-tabs-two-search-tab">
                    <div style="border:1px solid rgba(0,0,0,0.2);padding:20px;">
                      <div class="row">
                        <div class="col-md-12">
                          <input type="text" id="searchAccountOption" class="form-control" placeholder="Search Here.." />
                          <br>
                          <table id="auditreporttable" class="table table-bordered table-hover" style="  font-size:0.9em !important;">
                            <thead style="width:100% !important;">
                              <tr>
                                <th>Report Date</th>
                                <th>Report Branch</th>
                                <th>Report Number</th>
                                <th>Audited By</th>
                              </tr>
                            </thead>
                            <tbody style="background:#fff;">
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                    <hr>
                  </div>
                </div>
              </div>
              <!-- /.card -->
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- Modal -->
  <div id="viewAuditReportModal" 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;">
            <div style="border:1px solid rgba(0,0,0,0.2);padding:20px;">
              <form id="update-audit-report-form">
                <input type="hidden" name="request" value="audit">
                <input type="hidden" name="type" value="savereport">
                <input type="hidden" id="e-auditparam" name="auditparam" value="">
                <div class="row">
                  <div class="col-md-4">
                    <div class="form-group">
                      <label>Report Number</label>
                      <input type="text" class="form-control form-control-sm trans-input" id="e-reportnumber" name="reportnumber" value="" readonly>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label>Report Date</label>
                      <input type="text" class="form-control form-control-sm trans-input" id="e-reportdate" name="reportdate" value="{{date('Y-m-d')}}">
                    </div>
                  </div>
                </div>
                <hr>
                <div class="row">
                  <div class="col-md-4">
                    <div class="form-group">
                      <label>Last Pawned Ticket Audited</label>
                      <input type="text" class="form-control form-control-sm trans-input" id="e-lastpawnedticket" name="lastpawnedticket" value="">
                    </div>
                    <div class="form-group">
                      <label>Last Pawned Ticket Audited (Date)</label>
                      <input type="text" class="form-control form-control-sm trans-input" id="e-lastpawnedticketdate" name="lastpawnedticketdate" value="">
                    </div>
                  </div>
                  <div class="col-md-8">
                    <div class="row">
                      <div class="col-md-6">
                        <div class="form-group">
                          <label>Did you finished all up to date of audit?</label>
                          <select class="form-control" id="e-isauditfinish" name="isauditfinish">
                            <option value="YES">YES</option>
                            <option value="NO">NO</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-md-6">
                        <label>If not, State what number not inspected</label>
                        <div class="row">
                          <div class="col-md-6">
                            <div class="form-group">
                              <label>Ticket From</label>
                              <input type="text" class="form-control form-control-sm trans-input" id="e-inspectedticketfrom" name="inspectedticketfrom" value="">
                            </div>
                          </div>
                          <div class="col-md-6">
                            <div class="form-group">
                              <label>Ticket To</label>
                              <input type="text" class="form-control form-control-sm trans-input" id="e-inspectedticketto" name="inspectedticketto" value="">
                            </div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-6">
                            <div class="form-group">
                              <label>Date From</label>
                              <input type="text" class="form-control form-control-sm trans-input" id="e-inspecteddatefrom" name="inspecteddatefrom" value="">
                            </div>
                          </div>
                          <div class="col-md-6">
                            <div class="form-group">
                              <label>Date To</label>
                              <input type="text" class="form-control form-control-sm trans-input" id="e-inspecteddateto" name="inspecteddateto" value="">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <hr>
                <div class="row">
                  <div class="col-md-4">
                    <div class="form-group">
                      <label>Did you inspect/audit all storage-meaning tira and items?</label>
                      <select class="form-control" id="e-isaudittira" name="isaudittira">
                        <option value="YES">YES</option>
                        <option value="NO">NO</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-8">
                    <div class="form-group">
                      <label>If not, why?</label>
                      <textarea class="form-control" id="e-isaudittirareason" name="isaudittirareason"></textarea>
                    </div>
                  </div>
                </div>
              </form>
            </div>
            <br>
            <h4 style="font-weight:600;font-size:1.1em;">FINDINGS: OVER APPRAISED / FAKE</h4>
            <input type="hidden" value="{{$currrentuser['user']}}" id="e-usercode" name="usercode" />
            <input type="hidden" value="{{$currrentuser['name']}}" id="e-username" name="username" />
            <div style="border:1px solid rgba(0,0,0,0.2);padding:20px;">
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">
                    <label>Date Audit 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="e-fromdateaudit" name="fromdateaudit" value="{{date('Y-m-d')}}">
                    </div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label>Date Audit 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="e-todateaudit" name="todateaudit" 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="e-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="e-branch-select" name="branchcode" value="">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label>-</label><br>
                    <button id="e-search-audit-trans-btn" type="button" class="btn btn-info btn-sm"><i class="fas fa-search"></i> Search</button>
                  </div>
                </div>
              </div>
            </div>
            <div style="border:1px solid rgba(0,0,0,0.2);padding:20px;">
              <div class="row">
                <div class="col-md-12">
                  <input type="text" id="e-searchAccountOption" class="form-control" placeholder="Search Here.." />
                  <br>
                  <table id="e-audittransactiontable" class="table table-bordered table-hover" style="  font-size:0.9em !important;">
                    <thead style="width:100% !important;">
                      <tr>
                        <th>Date Pawned</th>
                        <th>Papeleta No.</th>
                        <th>Capital</th>
                        <th>Description</th>
                        <th>Appraised By</th>
                        <th>Status</th>
                        <th>Remarks</th>
                      </tr>
                    </thead>
                    <tbody style="background:#fff;">
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-md-4">
                <div class="form-group">
                  <button id="update-audit-report-btn" type="button" class="btn btn-success btn-sm"><i class="fas fa-save"></i> Update</button>
                  <a href="" id="e-print-audit-report-btn" type="button" class="btn btn-danger btn-sm" download><i class="fas fa-file"></i> Download</a>
                </div>
              </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>

@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 auditTransDatatable = $('#audittransactiontable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      dom: 'Bfrtip',
      buttons: [
          'copy', 'csv', 'excel', 'pdf', 'print'
      ],
      "autoWidth": false,
      "ordering": false,
    });
    var auditRepDatatable = $('#auditreporttable').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
      });
    });
    $('#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('&');
      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);
          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 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 requestparam = $('#trans-userbranch').val() + "::" + $('#trans-transactioncode').val() + "::" + $('#trans-usercode').val() + "::" + $('#transaction-remarks').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){
      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();
    }
    $(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();
    });
  </script>

  <script>
    $("#reportdate").datepicker({
      dateFormat: "yy-mm-dd",
      maxDate: new Date
    });
    $("#fromdateaudit").datepicker({
      dateFormat: "yy-mm-dd",
      maxDate: new Date
    });
    $("#todateaudit").datepicker({
      dateFormat: "yy-mm-dd",
      maxDate: new Date
    });
    $("#lastpawnedticketdate").datepicker({
      dateFormat: "yy-mm-dd",
      maxDate: new Date
    });
    $("#inspecteddatefrom").datepicker({
      dateFormat: "yy-mm-dd",
      maxDate: new Date
    });
    $("#inspecteddateto").datepicker({
      dateFormat: "yy-mm-dd",
      maxDate: new Date
    });
    $('#search-audit-trans-btn').on('click',function(event){
      event.preventDefault();
      searchAuditTrans();
    });
    $('#save-audit-report-btn').on('click',function(event){
      event.preventDefault();
      var issave = confirm('Confirm Save');
      if(issave == true){
        var param = $('#branch-select').val()+";"+$('#transtype').val()+";"+$('#fromdateaudit').val()+";"+$('#todateaudit').val()+";"+$('#usercode').val()+":"+$('#username').val();
        $('#auditparam').val(param);
        $.ajax({
            url: '/settings-request',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type:'POST',
            data: $('#audit-report-form').serialize(),
            success:function(e){
              if(e){
                console.log(e);
                var hrefdata = '/AuditFiles/'+e;
                $('#print-audit-report-btn').attr('href',hrefdata);
                $('#reportnumberprint').val($('#reportnumber').val());
                getAuditTransCode();
                $('#reset-button').click();
                $('#search-audit-trans-btn').click();
                alert('Report Saved!');
              }
            }
        });
      }
    });
    function getAuditTransByUser(){
      var param = $('#usercode').val();
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request:'audit', type:'search', param: param },
          success:function(e){
            if(e){
              console.log(e);
              var transReportList = [];
              for(num in e){
                transReportList.push([
                  '<a href="" id="'+e[num].reportno+':date" class="report-selected-option">'+e[num].reportdate+'</a>',
                  '<a href="" id="'+e[num].reportno+':branch" class="report-selected-option">'+e[num].reportbranch+'</a>',
                  '<a href="" id="'+e[num].reportno+':number" class="report-selected-option">'+e[num].reportno+'</a>',
                  e[num].auditor
                ]);
              }
              auditRepDatatable.destroy();
              $('#auditreporttable').DataTable({
                "scrollY":"500px",
                keys: true,
                draw: true,
                paging:   false,
                info:     false,
                "autoWidth": false,
                data: transReportList,
                columns: [
                  { title: "Report Date" },
                  { title: "Report Branch" },
                  { title: "Report Number" },
                  { title: "Audited By" },
                ]}),
              auditRepDatatable = $('#auditreporttable').DataTable();
              auditRepDatatable.draw();
            }
          }
      });
    }
    function getAuditTransCode(){
      var param = $('#usercode').val();
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request:'audit', type:'code', param: param },
          success:function(e){
            if(e){
              console.log(e);
              $('#reportnumber').val(e.code);
              $('#transtype').val('all');
              $('#branch-select').val('');
            }
          }
      });
    }
    function searchAuditTrans(){
      // $('#usercode').val('USR-00789');
      var param = $('#branch-select').val()+";"+$('#transtype').val()+";"+$('#fromdateaudit').val()+";"+$('#todateaudit').val()+";"+$('#usercode').val()+":"+$('#username').val();
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request:'audit', type:'get', param: param },
          success:function(e){
            if(e){
              console.log(e);
              var transactionList = [];
              for(num in e){
                var amount = parseFloat(e[num].itemvalue);
                transactionList.push([
                  e[num].auditdate,
                  e[num].customer,
                  e[num].transdate,
                  e[num].papeletano,
                  e[num].capital,
                  e[num].description,
                  e[num].appraisedby,
                  e[num].status,
                  e[num].remarks,
                ]);
              }
              auditTransDatatable.destroy();
              $('#audittransactiontable').DataTable({
                "scrollY":"500px",
                keys: true,
                draw: true,
                paging:   false,
                info:     false,
                "autoWidth": false,
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                data: transactionList,
                columns: [
                  { title: "Date Audited" },
                  { title: "Customer" },
                  { title: "Date Pawned" },
                  { title: "Papeleta No." },
                  { title: "Capital" },
                  { title: "Description" },
                  { title: "Appraised By" },
                  { title: "Status" },
                  { title: "Remarks" },
                ]}),
              auditTransDatatable = $('#audittransactiontable').DataTable();
              auditTransDatatable.draw();
            }
          }
      });
    }
    getAuditTransByUser();
    $(document).on('click','.report-selected-option',function(event){
      event.preventDefault();
      var thisID = $(this).attr('id');
      thisID = thisID.split(':');
      thisID = thisID[0];
      console.log(thisID);
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request:'audit', type:'details', param: thisID },
          success:function(e){
            if(e){
              console.log(e);
              $('#e-reportnumber').val(e.reportno);
              var hrefdata = '/AuditFiles/AF-'+e.reportno+'.pdf';
              $('#e-print-audit-report-btn').attr('href',hrefdata);
              $('#viewAuditReportModal').modal('toggle');
            }
          }
      });

    });
    $('#reset-button').on('click',function(event){
      getAuditTransCode();
    });
  </script>
@endsection