@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>Other Services 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">Reports</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-insurance-tab" data-toggle="pill" href="#custom-tabs-two-insurance" role="tab" aria-controls="custom-tabs-two-insurance" aria-selected="false">Insurance Report</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="custom-tabs-two-sukicard-tab" data-toggle="pill" href="#custom-tabs-two-sukicard" role="tab" aria-controls="custom-tabs-two-sukicard" aria-selected="false">Suki Card 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-insurance" role="tabpanel" aria-labelledby="custom-tabs-two-insurance-tab">
                    <div style="padding:15px;">
                      <h4 style="font-weight:600;font-size:1.2em;">Insurance Transactions<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>
                      <hr>
                      <div class="row">
                        <div class="row">
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Date 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-datetrans" name="fromdatetrans" value="{{date('Y-m-d')}}">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Date 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-datetrans" name="todatetrans" value="{{date('Y-m-d')}}">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Insurance Type</label>
                              <select class="form-control form-control-sm trans-input" id="transtype" name="transtype">
                                <option value="all">All</option>
                                <option value="INSBPI3">BPI PhilAm Insurance (30)</option>
                                <option value="INSBPI6">BPI PhilAm Insurance (60)</option>
                                <option value="INSBPI9">BPI PhilAm Insurance (90)</option>
                                <option value="INSNLG">SunLife Insurance</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="insurance-search-button-local" 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">
                          <br>
                          <table id="insurancetable" class="table table-bordered table-hover" style="  font-size:0.9em !important;">
                            <thead style="width:100% !important;">
                              <tr>
                                <th>Branch</th>
                                <th>Date</th>
                                <th>Policy No.</th>
                                <th>Insurance</th>
                                <th>Customer Type</th>
                                <th>Customer Name</th>
                                <th>C.Status</th>
                                <th>Birthdate</th>
                                <th>Amount</th>
                              </tr>
                            </thead>
                            <tbody style="background:#fff;">
                            </tbody>
                          </table>
                        </div>
                      </div>
                      <hr>

                    </div>
                  </div>
                  <div class="tab-pane fade" id="custom-tabs-two-sukicard" role="tabpanel" aria-labelledby="custom-tabs-two-sukicard-tab">
                    <div style="padding:15px;">
                      <h4 style="font-weight:600;font-size:1.2em;">Suki Card Transactions<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>
                      <hr>
                      <div class="row">
                        <div class="row">
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Date 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-sdatetrans" name="fromdatetrans" value="{{date('Y-m-d')}}">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>Date 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-sdatetrans" name="todatetrans" value="{{date('Y-m-d')}}">
                              </div>
                            </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="sbranch-select" name="branchcode" value="">
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label>-</label><br>
                              <button id="sukicard-search-button-local" 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">
                          <br>
                          <table id="sukicardtable" class="table table-bordered table-hover" style="  font-size:0.9em !important;">
                            <thead style="width:100% !important;">
                              <tr>
                                <th>Date</th>
                                <th>Transaction No.</th>
                                <th>Customer Name</th>
                                <th>C.Status</th>
                                <th>Birthdate</th>
                                <th>Amount</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>

    $("#from-datetrans").datepicker({
      dateFormat: "yy-mm-dd",
      maxDate: new Date
    });
    $("#to-datetrans").datepicker({
      dateFormat: "yy-mm-dd",
      maxDate: new Date
    });
    $("#from-sdatetrans").datepicker({
      dateFormat: "yy-mm-dd",
      maxDate: new Date
    });
    $("#to-sdatetrans").datepicker({
      dateFormat: "yy-mm-dd",
      maxDate: new Date
    });
    var insDatatable = $('#insurancetable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      "ordering": false,
      dom: 'Bfrtip',
      buttons: [
          'copy', 'csv', 'excel', 'pdf', 'print'
      ],
      "autoWidth": false,
      "ordering": false,
    });
    var sukiDatatable = $('#sukicardtable').DataTable({
      "scrollY":"auto",
      keys: true,
      draw: true,
      paging:   false,
      info:     false,
      "ordering": false,
      dom: 'Bfrtip',
      buttons: [
          'copy', 'csv', 'excel', 'pdf', 'print'
      ],
      "autoWidth": false,
      "ordering": false,
    });
    $('#insurance-search-button-local').on('click',function(event){
      event.preventDefault();
      console.log('local-search');
      searchInsuranceTrans();
    });
    $('#sukicard-search-button-local').on('click',function(event){
      event.preventDefault();
      console.log('local-search');
      searchSukiCardTrans();
    });
    function searchInsuranceTrans(){
      var currentbranch = $('#branch-select').val();
      var instype = $('#transtype').val();
      var requestparam = $('#branch-select').val() + "|" + $('#from-datetrans').val() + "|" + $('#to-datetrans').val() + "|" + $('#trans-usercode').val()+"|"+$('#transtype').val();
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request:'otherservices',type:'reports', param: requestparam },
          success:function(e){
            if(e){
              console.log(e);
              var insuranceName = '';
              if(instype == "INSBPI3"){
                insuranceName = "BPI PhilAm Insurance (30)";
                amnt = 30;
              }
              else if(instype == "INSBPI6"){
                insuranceName = "BPI PhilAm Insurance (60)";
                amnt = 60;
              }
              else if(instype == "INSBPI9"){
                insuranceName = "BPI PhilAm Insurance (90)";
                amnt = 90;
              }
              else if(instype == "INSNLG"){
                insuranceName = "SunLife Insurance";
                amnt = 20;
              }

              transactionListArray = e;
              var transactionList = [];
              for(num in e){
                var amount = parseFloat(e[num].itemvalue);
                transactionList.push([
                  e[num].branchcode,
                  e[num].transdate,
                  e[num].code,
                  e[num].insurance,
                  e[num].customertype,
                  e[num].customername,
                  e[num].civilstatus,
                  e[num].birthday,
                  e[num].amountstr,
                ]);
              }
              insDatatable.destroy();
              $('#insurancetable').DataTable({
                "scrollY":"500px",
                keys: true,
                draw: true,
                paging:   false,
                info:     false,
                "ordering": false,
                "autoWidth": false,
                data: transactionList,
                dom: 'Bfrtip',
                buttons: [
                    'copy',
                    {
                      extend: 'csv',
                      title: insuranceName + ' | ' + currentbranch,
                      messageTop: "Report Dates: "+$('#from-datetrans').val()+" To "+$('#to-datetrans').val()
                    },
                    {
                      extend: 'excel',
                      title: insuranceName + ' | ' + currentbranch,
                      messageTop: "Report Dates: "+$('#from-datetrans').val()+" To "+$('#to-datetrans').val()
                    },
                    {
                      extend: 'pdf',
                      title: insuranceName + ' | ' + currentbranch,
                      messageTop: "Report Dates: "+$('#from-datetrans').val()+" To "+$('#to-datetrans').val()
                    },
                    {
                      extend: 'print',
                      title: insuranceName + ' | ' + currentbranch,
                      messageTop: "Report Dates: "+$('#from-datetrans').val()+" To "+$('#to-datetrans').val()
                    },
                ],
                columns: [
                  { title: "Branch" },
                  { title: "Date" },
                  { title: "Policy No." },
                  { title: "Insurance" },
                  { title: "Customer Type" },
                  { title: "Customer Name" },
                  { title: "C.Status" },
                  { title: "Birthdate" },
                  { title: "Amount" },
                ]}),
              insDatatable = $('#insurancetable').DataTable();
              insDatatable.draw();
            }
          }
      });
    }
    function searchSukiCardTrans(){
      var currentbranch = $('#sbranch-select').val();
      var instype = $('#stranstype').val();
      var requestparam = $('#sbranch-select').val() + "|" + $('#from-sdatetrans').val() + "|" + $('#to-sdatetrans').val() + "|" + $('#trans-usercode').val()+"|SUKIC";
      $.ajax({
          url: '/settings-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request:'otherservices',type:'reports', param: requestparam },
          success:function(e){
            if(e){
              console.log(e);
              var transactionList = [];
              for(num in e){
                var amount = parseFloat(e[num].itemvalue);
                transactionList.push([
                  e[num].transdate,
                  e[num].code,
                  e[num].customername,
                  e[num].civilstatus,
                  e[num].birthday,
                  e[num].amountstr,
                ]);
              }
              sukiDatatable.destroy();
              $('#sukicardtable').DataTable({
                "scrollY":"500px",
                keys: true,
                draw: true,
                paging:   false,
                info:     false,
                "ordering": false,
                "autoWidth": false,
                data: transactionList,
                dom: 'Bfrtip',
                buttons: [
                    'copy',
                    {
                      extend: 'csv',
                      title: 'Suki Card | ' + currentbranch,
                      messageTop: "Report Dates: "+$('#from-datetrans').val()+" To "+$('#to-datetrans').val()
                    },
                    {
                      extend: 'excel',
                      title: 'Suki Card | ' + currentbranch,
                      messageTop: "Report Dates: "+$('#from-datetrans').val()+" To "+$('#to-datetrans').val()
                    },
                    {
                      extend: 'pdf',
                      title: 'Suki Card | ' + currentbranch,
                      messageTop: "Report Dates: "+$('#from-datetrans').val()+" To "+$('#to-datetrans').val()
                    },
                    {
                      extend: 'print',
                      title: 'Suki Card | ' + currentbranch,
                      messageTop: "Report Dates: "+$('#from-datetrans').val()+" To "+$('#to-datetrans').val()
                    },
                ],
                columns: [
                  { title: "Date" },
                  { title: "Transaction No." },
                  { title: "Customer Name" },
                  { title: "C.Status" },
                  { title: "Birthdate" },
                  { title: "Amount" },
                ]}),
              sukiDatatable = $('#sukicardtable').DataTable();
              sukiDatatable.draw();
            }
          }
      });
    }
    $("#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
    });
    $("#sbranch-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: $("#sbranch-select").val()},
            success:function(e){
              if(e){
                console.log(e);
                response(e);
              }
            }
        });
      },
      classes: {
        "ui-autocomplete": "highlight"
      },
      minLength: 2
    });
  </script>
@endsection