@extends('layout.master')
@section('pageTitle')
  <title>Pawnshop Management System</title>
@endsection
@section('metaCSRF')
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <link href="/css/multi-select.css" media="screen" rel="stylesheet" type="text/css">
@endsection
@section('contents')
    <style>
    label {
      font-size:0.9em !important;
    }
    .pac-container {
      z-index: 999999 !important;
    }
    .ui-front {
      z-index: 9999 !important;
    }
    #existingCustomerModal {
      z-index: 9999999 !important;
    }
    .modal { overflow: auto !important; }
  </style>
  <link rel="stylesheet" href="/css/autocomplete-jquery-ui.css">
  <link rel="stylesheet" href="/theme/plugins/datatables-bs4/css/dataTables.bootstrap4.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">Customer</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">Customer</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Customer List</h3>
                <input type="hidden" value="0" id="customer-image-selection"/>
                <input type="hidden" value="0" id="document-image-selection"/>
                <input type="hidden" value="{{$currrentuser['level']}}" id="current-user-level"/>
                <input type="hidden" id="current-user-branch" value="{{$currrentuser['branch']}}" />
                <button id="customer-list-search" style="margin-left:10px;"class="btn btn-primary btn-sm float-right" >List Customer</button>
                @if(in_array($currrentuser['user'],$taggedUsers))
                  <a href="/customer-tagging" style="margin-left:10px;"class="btn btn-warning btn-sm float-right">Upload File</a>
                @endif
                <button id="customer-tagged-search" style="margin-left:10px;"class="btn btn-danger btn-sm float-right" data-toggle="modal" data-target="#taggedCustomer">Tagged Customer</button>
                <button id="customer-foreign-search" style="margin-left:10px;"class="btn btn-info btn-sm float-right">Foreign Customer</button>
                <button class="btn btn-success btn-sm float-right" data-toggle="modal" data-target="#newCustomer">New Customer</button>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <div class="row">
                  <div class="col-md-8">
                    <span id="checking-customer-notification" style="display:none;font-weight:normal;font-size:0.9em;color:rgba(0,0,0,0.5);" class="float-right">Checking customer. Please wait...</span></h4>
                    <div class="row">
                      <div class="col-md-2">
                        <label>Last Name: </label>
                      </div>
                      <div class="col-md-9">
                        <input id="customer-name-search-new" class="form-control form-control-sm" type="text" value="" placeholder="Search Last Name Here..." />
                      </div>
		            </div>
                    <div class="row">
                      <div class="col-md-2">
                        <label>First Name: </label>
                      </div>
                      <div class="col-md-9">
                        <input id="searchFirstnameTextField" class="form-control form-control-sm" type="text" value="" placeholder="Search First Name Here..." />
                      </div>
                    </div>
		          </div>
                  <div class="col-md-2">
                    <button id="custom-kyc-name-search-btn" class="btn btn-info btn-sm form-control form-control-sm float-right">Search</button>
                  </div>
                </div>
                <br>
                <h3 id="loading-customer-list" style="display:none;">Gathering Customer List. Please wait...</h3>
                <hr>
                <div style="display:block;">
                  <div style="display: none;" id="tagged-selection">
                    <div class="row">
                      <div class="col-2">
                        <label>Filter Tagging</label><br>
                        <select id="tagged-customer-select" class="form-control form-control-sm">
                          <option value="">--select tagging--</option>
                          <option value="Low Risk">Low Risk</option>
                          <option value="Medium Risk">Medium Risk</option>
                          <option value="High Risk">High Risk</option>
                          <option value="Graylisted">Graylisted</option>
                          <option value="Blacklisted">Blacklisted</option>
                          <option value="BSP Circular Letter">BSP Circular Letter</option>
                          <option value="Child Pornography">Child Pornography</option>
                          <option value="Entity with notice">Entity with notice</option>
                          <option value="Human Trafficking">Human Trafficking</option>
                          <option value="Limit on Amount">Limit on Amount</option>
                          <option value="Limit on Transaction Count">Limit on Transaction Count</option>
                          <option value="Scammer">Scammer</option>
                          <option value="SEC Advisory">SEC Advisory</option>
                          <option value="SEC Alert">SEC Alert</option>
                          <option value="Sexual Exploitation">Sexual Exploitation</option>
                          <option value="Terrorism">Terrorism</option>
                          <option value="Flagged Entities">Flagged Entities</option>
                        </select>
                      </div>
                    </div>
                    <br>
                  </div>
                  <div style="display: none;" id="new-list-selection">
                    <div class="row">
                      <div class="col-md-3">
                        <div class="form-group">
                          <label>Report Dates:</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" id="report-dates">
                          </div>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <label>-</label>
                        <div class="form-group">
                          <button style="margin-left:5px;" id="generate-new-list-btn" type="button" class="btn btn-warning btn-sm form-control-sm"><i class="fas fa-search"></i> Search</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div id="customer-listing">
                    <table id="customertable" class="table table-bordered table-hover">
                      <thead>
                      <tr>
                        <th>Customer Code</th>
                        <th>Customer Name</th>
                        <th>Branch</th>
                        <th></th>
                      </tr>
                      </thead>
                      <tbody>
                      </tbody>
                      <tfoot>
                      <tr>
                        <th>Customer Code</th>
                        <th>Customer Name</th>
                        <th>Branch</th>
                        <th></th>
                      </tr>
                      </tfoot>
                    </table>
                  </div>
                  <div style="display: none;" id="customer-new-listing">
                    <table  id="customerListTable" class="table table-bordered table-hover">
                      <thead>
                      <tr>
                        <th>Date</th>
                        <th>Branch</th>
                        <th>Customer Code</th>
                        <th>Customer Name</th>
                      </tr>
                      </thead>
                      <tbody>
                      </tbody>
                      <tfoot>
                      <tr>
                        <th>Date</th>
                        <th>Branch</th>
                        <th>Customer Code</th>
                        <th>Customer Name</th>
                      </tr>
                      </tfoot>
                    </table>
                  </div>
                </div>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <div class="modal fade" id="newCustomer" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content auto-selector">
        <div class="modal-header">
          <h4 class="modal-title">New Customer</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
          <div class="modal-body" style="padding:20px 30px 30px 30px">
              <div class="review-content-section" style="border:1px solid rgba(0,0,0,0.1);margin-top:0px;padding:20px 20px 20px 20px;background:rgba(0,0,0,0.05);">
                <div id="dropzone1" class="pro-ad">
                  <!-- Customer Type -->
                  <div class="form-group">
                    <label>Customer Type</label>
                    <select id="customerType" class="form-control form-control-sm customer-input">
                      <option value="individual">Individual</option>
                      <option value="corporate">Corporate</option>
                    </select>
                  </div>
                  <hr>
                  <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                      <form id="add-customer-form-individual">
                        <div id="individual-customer">
                          <div class="row">
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                              <!-- Branch Name -->
                              <div class="form-group">
                                <label>Branch Name</label>
                                <input id="branch-select" name="branchname" type="text" class="form-control form-control-sm customer-input" value="">
                              </div>
                              <!-- Branch Code -->
                              <div class="form-group">
                                <label>Branch Code</label>
                                <input id="branchcode" name="branchcode" type="text" class="form-control form-control-sm customer-input" value="" readonly>
                              </div>
                              <!-- Customer Code -->
                              <div class="form-group">
                                <label>Customer Code</label>
                                <input id="customercode" name="customercode" type="text" class="form-control form-control-sm customer-input" value="" readonly>
                              </div>
                              <!-- Risk Management -->
                              <div class="form-group">
                                <label>Customer Risk</label>
                                <select id="verified" name="verified" class="form-control form-control-sm customer-input">
                                  <option value="low">Low Risk</option>
                                  <option value="mid">Medium Risk</option>
                                  <option value="high">High Risk</option>
                                </select>
                              </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                              <div class="row" style="padding:10px;border:1px solid rgba(0,0,0,0.2);background:#fff;">
                                <div class="col-md-12" style="padding:0 !important;">
                                  <canvas class="float-center" id="grabFrameCanvasNew" style="border:1px solid rgba(0,0,0,0.1);width:100%;height:170px;">
                                </div>
                                <div class="col-md-12 float-center">
                                  <button style="width:100%;" class="btn btn-info btn-sm float-center startCameraButton" id="newcustimage" data-toggle="modal" data-target="#getImageForm">Open Camera For Image</button>
                                  <button type="button" style="width:100%;margin-top:5px;"class="btn btn-info btn-sm float-center" id="newcustimagefile">Upload Image from File</button>
                                  <input accept="image/*" type="file" id="inputFromFile" onchange="previewImageCustomer(this);" style="display:none;"/>
                                </div>
                              </div>
                              <div class="row" style="padding:10px;border:1px solid rgba(0,0,0,0.2);background:#fff;">
                                <div class="col-md-12" style="padding:0 !important;">
                                  <canvas class="float-center" id="grabFrameCanvasNewDoc1" style="border:1px solid rgba(0,0,0,0.1);width:100%;height:170px;">
                                </div>
                                <div class="col-md-12 float-center">
                                  <button style="width:100%;" class="btn btn-primary btn-sm float-center startCameraButton" id="newdoccustimage1" data-toggle="modal" data-target="#getImageForm">Open Camera For Document</button>
                                  <button type="button" style="width:100%;margin-top:5px;"class="btn btn-primary btn-sm float-center" id="newdocimagefile1">Upload Image from File</button>
                                  <input accept="image/*" type="file" id="inputFromFileDoc1" onchange="previewImageDocument1(this);" style="display:none;"/>
                                </div>
                              </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                              <div class="row" style="padding:10px;border:1px solid rgba(0,0,0,0.2);background:#fff;">
                                <div class="col-md-12" style="padding:0 !important;">
                                  <canvas class="float-center" id="grabFrameCanvasNewDoc" style="border:1px solid rgba(0,0,0,0.1);width:100%;height:170px;">
                                </div>
                                <div class="col-md-12 float-center">
                                  <button style="width:100%;" class="btn btn-primary btn-sm float-center startCameraButton" id="newdoccustimage" data-toggle="modal" data-target="#getImageForm">Open Camera For Document</button>
                                  <button type="button" style="width:100%;margin-top:5px;"class="btn btn-primary btn-sm float-center" id="newdocimagefile">Upload Image from File</button>
                                  <input accept="image/*" type="file" id="inputFromFileDoc" onchange="previewImageDocument(this);" style="display:none;"/>
                                </div>
                              </div>
                              <div class="row" style="padding:10px;border:1px solid rgba(0,0,0,0.2);background:#fff;">
                                <div class="col-md-12" style="padding:0 !important;">
                                  <canvas class="float-center" id="grabFrameCanvasNewDoc2" style="border:1px solid rgba(0,0,0,0.1);width:100%;height:170px;">
                                </div>
                                <div class="col-md-12 float-center">
                                  <button style="width:100%;" class="btn btn-primary btn-sm float-center startCameraButton" id="newdoccustimage2" data-toggle="modal" data-target="#getImageForm">Open Camera For Document</button>
                                  <button type="button" style="width:100%;margin-top:5px;"class="btn btn-primary btn-sm float-center" id="newdocimagefile2">Upload Image from File</button>
                                  <input accept="image/*" type="file" id="inputFromFileDoc2" onchange="previewImageDocument2(this);" style="display:none;"/>
                                </div>
                              </div>
                            </div>
                          </div>
                          <hr>
                          <label style="color: maroon;">CUSTOMER DETAILS</label>
                          <!-- Personal Details -->
                          <div class="row">
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                              <div class="form-group">
                                  <label>First Name</label>
                                  <input id="firstname" name="firstname" type="text" class="form-control form-control-sm customer-input">
                              </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                              <div class="form-group">
                                  <label>Middle Name</label>
                                  <input id="middlename" name="middlename" type="text" class="form-control form-control-sm customer-input">
                              </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                              <div class="form-group">
                                  <label>Last Name</label>
                                  <input id="lastname" name="lastname" type="text" class="form-control form-control-sm customer-input">
                              </div>
                            </div>
                            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                              <div class="form-group">
                                <label>Suffix</label>
                                <input id="suffix" name="suffix" type="text" class="form-control form-control-sm customer-input">
                              </div>
                            </div>
                          </div>
                          <div class="row">
                            <!-- Nickname -->
                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                              <div class="form-group">
                                <label>Nickname / AKA</label>
                                <input id="nickname" name="nickname" type="text" class="form-control form-control-sm customer-input">
                              </div>
                            </div>
                            <!-- Gender -->
                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                              <div class="form-group">
                                <label>Gender</label>
                                <select id="gender" name="gender" class="form-control form-control-sm customer-input">
                                  <option value="male">Male</option>
                                  <option value="female">Female</option>
                                </select>
                              </div>
                            </div>
                            <!-- Date Of Birth -->
                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                              <div class="form-group">
                                <label>Date of Birth</label>
                                <input id="dateofbirth" name="dateofbirth" type="date" class="form-control form-control-sm customer-input">
                              </div>
                            </div>
                            <!-- Place Of Birth -->
                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                              <div class="form-group">
                                <label>Place of Birth</label>
                                <input id="placeofbirth" name="placeofbirth" type="text" class="form-control form-control-sm customer-input" value="">
                              </div>
                            </div>
                          </div>
                          <!-- Nationality and ID -->
                          <div class="row">
                            <!-- Nationality -->
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                              <div class="form-group">
                                <label>Nationality</label>
                                <input id="nationality-select" name="nationality" type="text" class="form-control form-control-sm customer-input" value="">
                              </div>
                            </div>
                            <!-- ID Type -->
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                              <div class="form-group">
                                <label>ID Type</label>
                                <select id="idtype" name="idtype" class="form-control form-control-sm customer-input">
                                  <option value="">--- Select Id ---</option>
                                  <option value="Company">Company ID</option>
                                  <option value="UMID">UMID</option>
                                  <option value="Postal">Postal ID</option>
                                  <option value="Voters">Voter’s ID</option>
                                  <option value="BarangayCert">Barangay Certification</option>
                                  <option value="DSWD">DSWD Certification</option>
                                  <option value="DriverLicense">Driver’s License</option>
                                  <option value="GSIS">GSIS E-card</option>
                                  <option value="SSS">SSS Card</option>
                                  <option value="SeniorCitizen">Senior Citizen ID</option>
                                  <option value="Student">Student ID</option>
                                  <option value="Passport">Passport</option>
                                  <option value="GOCC">GOCC ID (AFP, HDMF ID)</option>
                                  <option value="NBIClearance">NBI Clearance</option>
                                  <option value="PoliceClearance">Police Clearance</option>
                                  <option value="PWD">PWD/NCWDP</option>
                                  <option value="IBP">IBP</option>
                                  <option value="OFW">OFW/OWWA ID</option>
                                  <option value="SeamansBook">Seaman’s Book</option>
                                  <option value="others">Others</option>
                                </select>
                              </div>

                            </div>
                            <!-- IDNumber -->
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="display: none !important;">
                              <div class="form-group">
                                  <label>ID Number</label>
                                  <input id="idnumber" name="idnumber" type="text" class="form-control form-control-sm customer-input" value="-">
                              </div>
                            </div>
                          </div>
                          <!-- Contact Information -->
                          <div style="border:1px solid rgba(0,0,0,0.1);padding-top: 10px;padding-left:15px;padding-right:15px;margin-top:10px;margin-bottom:20px;">
                            <label style="color: maroon;">CONTACT INFORMATION</label>
                            <div class="row">
                              <!-- Mobile -->
                              <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                <div class="form-group">
                                  <label>Mobile</label>
                                  <input id="mobilenumber" name="mobilenumber" type="text" class="form-control form-control-sm customer-input" value="">
                                </div>
                              </div>
                              <!-- Home -->
                              <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                <div class="form-group">
                                  <label>Home</label>
                                  <input id="homenumber" name="homenumber" type="text" class="form-control form-control-sm customer-input" value="">
                                </div>
                              </div>
                              <!-- Office -->
                              <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                <div class="form-group">
                                  <label>Work</label>
                                  <input id="officenumber" name="officenumber" type="text" class="form-control form-control-sm customer-input" value="">
                                </div>
                              </div>
                              <!-- Email -->
                              <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                                <div class="form-group">
                                  <label>Email Address</label>
                                  <input id="emailaddress" name="emailaddress" type="text" class="form-control form-control-sm customer-input" value="">
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- Address Information -->
                          <div style="border:1px solid rgba(0,0,0,0.1);padding-top: 10px;padding-left:15px;padding-right:15px;margin-top:10px;margin-bottom:20px;">
                            <div class="row">
                              <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                <div class="form-group">
                                    <label>Address Type</label>
                                    <select id="addresstype" name="addresstype" class="form-control form-control-sm customer-input">
                                      <option value="Owned">Owned</option>
                                      <option value="Rented">Rented</option>
                                    </select>
                                </div>
                              </div>
                              <div class="col-md-8 col-sm-8 col-xs-12">
                                <div class="form-group">
                                    <label style="font-size: 0.75em !important;">Room/Unit #/Floor/Building Name/House #/Lot & Blk #/St. /Subd./Village</label>
                                    <input id="address-street" name="street" type="text" class="form-control form-control-sm customer-input" value="">
                                </div>
                              </div>
                              <div class="col-md-4 col-sm-4 col-xs-12">
                                <div class="form-group">
                                    <label>Province</label>
                                    <input id="address-province" name="province" type="text" class="form-control form-control-sm customer-input" value="">
                                </div>
                              </div>
                              <div class="col-md-4 col-sm-4 col-xs-12">
                                <div class="form-group">
                                    <label>City/Municipality</label>
                                    <input id="address-municipality" name="municipality" type="text" class="form-control form-control-sm customer-input" value="">
                                </div>
                              </div>
                              <div class="col-md-4 col-sm-4 col-xs-12">
                                <div class="form-group">
                                    <label>Barangay</label>
                                    <input id="address-barangay" name="barangay" type="text" class="form-control form-control-sm customer-input" value="">
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- Employment -->
                          <div style="border:1px solid rgba(0,0,0,0.1);padding-top: 10px;padding-left:15px;padding-right:15px;margin-top:10px;margin-bottom:20px;">
                            <!-- Employment Type-->
                            <div class="row">
                              <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                <div class="form-group">
                                  <label>Employment</label>
                                  <select id="employment" name="employment" class="form-control form-control-sm customer-input">
                                    <option value="employed">Employed</option>
                                    <option value="self">Self-Employed</option>
                                    <option value="business">Business Owner</option>
                                    <option value="government">Government Employee</option>
                                    <option value="student">Student</option>
                                    <option value="others">Others</option>
                                  </select>
                                </div>
                              </div>
                            </div>
                            <!-- Employment Details-->
                            <div id="employmentEmployed">
                              <div class="row">
                                <!-- Employment Type-->
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                  <div class="form-group">
                                    <label>Name of Business/Employer</label>
                                    <input id="companyname" name="companyname" type="text" class="form-control form-control-sm customer-input" placeholder="" value="-">
                                  </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                  <div class="form-group">
                                    <label>Nature of Business</label>
                                    <input id="businessnature" name="businessnature" type="text" class="form-control form-control-sm customer-input" placeholder="" value="-">
                                  </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                  <div class="form-group">
                                    <label>Address of Business</label>
                                    <input id="businessaddress" name="businessaddress" type="text" class="form-control form-control-sm customer-input" placeholder="" value="-">
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div id="employmentGovernment" style="display: none;">
                              <div class="row">
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                  <div class="form-group">
                                    <label>Position</label>
                                    <input id="governmentposition" name="governmentposition" type="text" class="form-control form-control-sm customer-input" placeholder="" value="-">
                                  </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                  <div class="form-group">
                                    <label>Government Agency</label>
                                    <input id="governmentagency" name="governmentagency" type="text" class="form-control form-control-sm customer-input" placeholder="" value="-">
                                  </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                  <div class="form-group">
                                    <label>Office Address</label>
                                    <input id="governmentaddress" name="governmentaddress" type="text" class="form-control form-control-sm customer-input" placeholder="" value="-">
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div id="employmentSchool" style="display: none;">
                              <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin: 0; padding: 0;">
                                  <div class="form-group">
                                    <label>Name of School</label>
                                    <input id="nameofschool" name="nameofschool" type="text" class="form-control form-control-sm customer-input" placeholder="" value="-">
                                  </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                  <div class="form-group">
                                    <label>School Address</label>
                                    <input id="schooladdress" name="schooladdress" type="text" class="form-control form-control-sm customer-input" placeholder="" value="-">
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div id="employmentOthers" style="display: none;">
                              <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                  <div class="form-group">
                                    <label>Others: Please Specify</label>
                                    <input id="otherspecify" name="otherspecify" type="text" class="form-control form-control-sm customer-input" placeholder="" value="-">
                                  </div>
                                </div>
                              </div>
                            </div>


                          </div>
                          <!-- Source of Fund -->
                          <div class="row">
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                              <div class="form-group">
                                <label>Nature of Work</label>
                                <input id="natureofwork" name="natureofwork" type="text" class="form-control form-control-sm customer-input" value="">
                              </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                              <div class="form-group">
                                <label>Source Of Fund</label>
                                <select id="sourceoffund" name="sourceoffund" class="form-control form-control-sm customer-input">
                                  <option value="salary">Salary</option>
                                  <option value="employment">Employment</option>
                                  <option value="business">Business</option>
                                  <option value="remittances_allowances">Remittances/Allowances</option>
                                  <option value="debt">Debt/Utang</option>
                                  <option value="pension">Pension</option>
                                  <option value="savings">Savings</option>
                                  <option value="gifts">Gifts/Regalo</option>
                                  <option value="rental_income">Rental Income</option>
                                  <option value="relatives_friends">From Relatives/Friends</option>
                                  <option value="sale_of_properties">Sale of Properties</option>
                                  <option value="government">From Government</option>
                                  <option value="others">Others</option>
                                </select>
                              </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                              <div class="form-group">
                                <label>Suki Card # (Palawan Express)</label>
                                <input id="sukicardnumber" name="sukicardnumber" type="text" class="form-control form-control-sm customer-input" value="">
                              </div>
                            </div>
                          </div>
                          <!-- Purpose of Transactions -->
                          <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                              <div class="form-group">
                                <label>Purpose of Transaction</label>
                                <input id="purposeoftransaction" name="purposeoftransaction" type="text" class="form-control form-control-sm customer-input" value="">
                              </div>
                            </div>

                          </div>
                        </div>
                        <input type="hidden" name="customerType" value="individual" />
                        <input type="hidden" id="confirmnew" name="confirmnew" value="No" />
                        <input type="hidden" name="loguser" value="{{$currrentuser['user']}}" />
                      </form>
                      <form id="add-customer-form-corporate">
                        <div id="corporate-customer" style="display: none;">
                          <div class="row">
                            <!-- Branch Name -->
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                              <div class="form-group">
                                <label>Branch Name</label>
                                <input id="corp-branch-select" name="branchname" type="text" class="form-control form-control-sm customer-input" value="">
                              </div>
                            </div>
                            <!-- Branch Code -->
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                              <div class="form-group">
                                <label>Branch Code</label>
                                <input id="corp-branchcode" name="branchcode" type="text" class="form-control form-control-sm customer-input" value="" readonly>
                              </div>
                            </div>
                          </div>
                          <div class="row">
                            <!-- Customer Code -->
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                              <div class="form-group">
                                <label>Customer Code</label>
                                <input id="corp-customercode" name="customercode" type="text" class="form-control form-control-sm customer-input" value="" readonly>
                              </div>
                            </div>
                            <!-- Risk Management -->
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                              <div class="form-group">
                                <label>Customer Risk</label>
                                <select id="corp-verified" name="verified" class="form-control form-control-sm customer-input">
                                  <option value="low">Low Risk</option>
                                  <option value="mid">Medium Risk</option>
                                  <option value="high">High Risk</option>
                                </select>
                              </div>
                            </div>
                          </div>
                          <hr>
                          <label style="color: maroon;">CUSTOMER DETAILS</label>
                          <!-- Business Details -->
                          <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                              <div class="form-group">
                                <label>Name of Business</label>
                                <input id="corp-nameofbusiness" name="nameofbusiness" type="text" class="form-control form-control-sm customer-input"  value="">
                              </div>
                            </div>
                          </div>
                          <div class="row" style="display: none;">
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                              <div class="form-group">
                                <label>First Name</label>
                                <input id="corp-firstname" name="firstname" type="text" class="form-control form-control-sm customer-input" value="-">
                              </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                              <div class="form-group">
                                <label>Middle Name</label>
                                <input id="corp-middlename" name="middlename" type="text" class="form-control form-control-sm customer-input"  value="-">
                              </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                              <div class="form-group">
                                <label>Last Name</label>
                                <input id="corp-lastname" name="lastname" type="text" class="form-control form-control-sm customer-input"  value="-">
                              </div>
                            </div>
                          </div>
                          <!-- Nationality -->
                          <div class="row" style="display: none;">
                            <!-- Nationality -->
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                              <div class="form-group">
                                <label>Nationality</label>
                                <input id="corp-nationality-select" name="nationality" type="text" class="form-control form-control-sm customer-input" value="Filipino">
                              </div>
                            </div>
                          </div>
                          <!-- Address Information -->
                          <div style="border:1px solid rgba(0,0,0,0.1);padding-top: 10px;padding-left:15px;padding-right:15px;margin-top:10px;margin-bottom:20px;">
                            <div class="row">
                              <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                <div class="form-group">
                                  <label>Address Type</label>
                                  <select id="corp-addresstype" name="addresstype" class="form-control form-control-sm customer-input">
                                    <option value="Owned">Owned</option>
                                    <option value="Rented">Rented</option>
                                  </select>
                                </div>
                              </div>
                              <div class="col-md-8 col-sm-8 col-xs-12">
                                <div class="form-group">
                                  <label>House # / Building / Street</label>
                                  <input id="corp-address-street" name="street" type="text" class="form-control form-control-sm customer-input" value="">
                                </div>
                              </div>
                              <div class="col-md-4 col-sm-4 col-xs-12">
                                <div class="form-group">
                                  <label>Province</label>
                                  <input id="corp-address-province" name="province" type="text" class="form-control form-control-sm customer-input" value="">
                                </div>
                              </div>
                              <div class="col-md-4 col-sm-4 col-xs-12">
                                <div class="form-group">
                                  <label>City/Municipality</label>
                                  <input id="corp-address-municipality" name="municipality" type="text" class="form-control form-control-sm customer-input" value="">
                                </div>
                              </div>
                              <div class="col-md-4 col-sm-4 col-xs-12">
                                <div class="form-group">
                                  <label>Barangay</label>
                                  <input id="corp-address-barangay" name="barangay" type="text" class="form-control form-control-sm customer-input" value="">
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- Contact Information -->
                          <div style="border:1px solid rgba(0,0,0,0.1);padding-top: 10px;padding-left:15px;padding-right:15px;margin-top:10px;margin-bottom:20px;">
                            <label style="color: maroon;">CONTACT INFORMATION</label>
                            <div class="row">
                              <!-- Mobile -->
                              <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                <div class="form-group">
                                  <label>Mobile</label>
                                  <input id="corp-mobilenumber" name="mobilenumber" type="text" class="form-control form-control-sm customer-input" value="">
                                </div>
                              </div>
                              <!-- Office -->
                              <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                <div class="form-group">
                                  <label>Office</label>
                                  <input id="corp-officenumber" name="officenumber" type="text" class="form-control form-control-sm customer-input" value="">
                                </div>
                              </div>
                              <!-- Email -->
                              <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                <div class="form-group">
                                  <label>Email Address</label>
                                  <input id="corp-emailaddress" name="emailaddress" type="text" class="form-control form-control-sm customer-input" value="">
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- Nature of Business -->
                          <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                              <div class="form-group">
                                <label>Nature of Business</label>
                                <select id="corp-natureofbusiness" name="natureofbusiness" class="form-control form-control-sm customer-input">
                                  <option value="">--- Select ---</option>
                                  <option value="accounting_practive">Accounting Practice</option>
                                  <option value="agriculture">Agriculture</option>
                                  <option value="arts_and_creatives">Arts and Creatives</option>
                                  <option value="automobile_dealer">Automobile Dealier</option>
                                  <option value="jewelry_dealer">Jewelry Dealer</option>
                                  <option value="media_and_journalism">Media and Journalism</option>
                                  <option value="medical_health_service">Medical/Health Service</option>
                                  <option value="ngo_charity_social_works">NGO/Charity/Social Works</option>
                                  <option value="online_selling">Online Selling</option>
                                  <option value="banking_and_finance">Banking and Finance</option>
                                  <option value="bpo">Business Process Outsourcing (BPO)</option>
                                  <option value="casino">Casino - Internet or Ship Based</option>
                                  <option value="construction_and_engineering">Construction and Engineering</option>
                                  <option value="practice">Practice</option>
                                  <option value="pharmaceutical">Pharmaceutical</option>
                                  <option value="real_estate_broker">Real Estate Broker</option>
                                  <option value="remittance_agent">Remittance Agent</option>
                                  <option value="security">Security / Protective Services</option>
                                  <option value="education_and_research">Education and Research</option>
                                  <option value="food_and_retail">Food and Retail</option>
                                  <option value="foreign_exchange_delear">Foreign Exchange Dealer</option>
                                  <option value="insurance_agency">Insurance Agency</option>
                                  <option value="tourism_hospitality_services">Tourism/Hospitality Services</option>
                                  <option value="transportation_logistics">Transportation / Logistics</option>
                                  <option value="web_and_social_media">Web and Social Media</option>
                                  <option value="others">Others (Please Specify)</option>
                                </select>
                              </div>

                            </div>
                          </div>
                          <!-- Affiliated Companies -->
                          <label>Affiliated Companies</label>
                          <div style="border:1px solid rgba(0,0,0,0.1);padding-top: 10px;padding-left:15px;padding-right:15px;margin-bottom:10px;">
                            <div class="row">
                              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-affiliatedcompany1" name="affiliatedcompany1" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-affiliatedcompany2" name="affiliatedcompany2" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-affiliatedcompany3" name="affiliatedcompany3" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-affiliatedcompany4" name="affiliatedcompany4" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- Beneficial Owner of the Company -->
                          <label>Beneficial Owner of the Company</label>
                          <div style="border:1px solid rgba(0,0,0,0.1);padding-top: 10px;padding-left:15px;padding-right:15px;margin-bottom:10px;">
                            <div class="row">
                              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="form-group">
                                  <label>Last Name</label>
                                  <input id="corp-boc_lastname1" name="boc_lastname1" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <label>First Name</label>
                                  <input id="corp-boc_firstname1" name="boc_firstname1" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <label>Middle Name</label>
                                  <input id="corp-boc_middlename1" name="boc_middlename1" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                                <div class="form-group">
                                  <label>Suffix</label>
                                  <input id="corp-boc_suffix1" name="boc_suffix1" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <label>Position</label>
                                  <input id="corp-boc_position1" name="boc_position1" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <label>Shares</label>
                                  <input id="corp-boc_shares1" name="boc_shares1" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_lastname2" name="boc_lastname2" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_firstname2" name="boc_firstname2" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_middlename2" name="boc_middlename2" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_suffix2" name="boc_suffix2" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_position2" name="boc_position2" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_shares2" name="boc_shares2" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_lastname1" name="boc_lastname1" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_firstname3" name="boc_firstname3" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_middlename3" name="boc_middlename3" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_suffix3" name="boc_suffix3" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_position3" name="boc_position3" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_shares3" name="boc_shares3" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_lastname4" name="boc_lastname4" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_firstname4" name="boc_firstname4" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_middlename4" name="boc_middlename4" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_suffix4" name="boc_suffix4" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_position4" name="boc_position4" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-boc_shares4" name="boc_shares4" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- Representative Information -->
                          <label>Representative Information</label>
                          <div style="border:1px solid rgba(0,0,0,0.1);padding-top: 10px;padding-left:15px;padding-right:15px;margin-bottom:10px;">
                            <div class="row">
                              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="form-group">
                                  <label>Last Name</label>
                                  <input id="corp-representative_lastname1" name="representative_lastname1" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="form-group">
                                  <label>First Name</label>
                                  <input id="corp-representative_firstname1" name="representative_firstname1" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="form-group">
                                  <label>Middle Name</label>
                                  <input id="corp-representative_middlename1" name="representative_middlename1" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                                <div class="form-group">
                                  <label>Suffix</label>
                                  <input id="corp-representative_suffix1" name="representative_suffix1" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-3 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <label>Position</label>
                                  <input id="corp-representative_position1" name="representative_position1" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-representative_lastname2" name="representative_lastname2" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-representative_firstname2" name="representative_firstname2" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-representative_middlename2" name="representative_middlename2" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-representative_suffix2" name="representative_suffix2" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-representative_position2" name="representative_position2" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-representative_lastname3" name="representative_lastname3" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-representative_firstname3" name="representative_firstname3" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-representative_middlename3" name="representative_middlename3" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-representative_suffix3" name="representative_suffix3" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-representative_position3" name="representative_position3" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-representative_lastname4" name="representative_lastname4" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-representative_firstname4" name="representative_firstname4" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-representative_middlename4" name="representative_middlename4" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-representative_suffix4" name="representative_suffix4" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                                <div class="form-group">
                                  <input id="corp-representative_position4" name="representative_position4" type="text" class="form-control form-control-sm customer-input" value="-">
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <input type="hidden" name="customerType" value="corporate" />
                        <input type="hidden" id="corp-confirmnew" name="confirmnew" value="No" />
                        <input type="hidden" name="loguser" value="{{$currrentuser['user']}}" />
                      </form>
                    </div>
                  </div>
                </div>
              </div>
              <br>
              <div class="row">
                  <div class="col-lg-12">
                    <div id="new-cus-error-msg" style="color:red;"></div>
                    <div id="new-cus-success-msg" style="color:green;"></div>
                    <div id="corp-new-cus-error-msg" style="color:red;"></div>
                    <div id="corp-new-cus-success-msg" style="color:green;"></div>
                  </div>
              </div>
          </div>
          <div class="modal-footer">
            <button id="add-customer-btn" type="button" class="btn btn-success">Add New Customer</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        <hr>
      </div>
    </div>
  </div>
  <div class="modal fade" id="existingCustomerModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content auto-selector">
          <div class="modal-header">
            <h4 class="modal-title">Existing Customer List</h4>
            <button id="existingCustomerClose" type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body" >
            <div style="padding:20px;border:1px solid rgba(0,0,0,0.1);background:#deffff;">
              <table id="customertableexist" class="table table-bordered table-hover">
                <thead>
                  <tr>
                    <th>Customer Code</th>
                    <th>Customer Name</th>
                    <th>Branch</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                <tr>
                  <th>Customer Code</th>
                  <th>Customer Name</th>
                  <th>Branch</th>
                  <th></th>
                </tr>
                </tfoot>
              </table>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" id="confirm-new-kyc-transaction-btn" class="btn btn-warning">Confirm Add Customer</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        <hr>
      </div>
    </div>
  </div>
  <div class="modal fade" id="editCustomer" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content auto-selector">
        <div class="modal-header">
          <h4 class="modal-title">Edit Customer</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body" style="padding:20px 30px 30px 30px">
          <input type="hidden" id="edit-customer-type" />
          <h3 id="loading-customer-details" style="display:none;">Gathering Customer Data. Please wait...</h3>
          <form id="edit-customer-form-individual" style="display: none;">
            <h4 id="fake-tag" style="color:red;font-weight:bold;display:none;">Beware! Fake Client</h4>
            <div class="review-content-section" style="border:1px solid rgba(0,0,0,0.1);margin-top:0px;padding:20px 20px 20px 20px;background:rgba(0,0,0,0.05);">
              <div id="dropzone1" class="pro-ad">
                <!-- Risk Management -->
                <div class="row">
                  @if(isset($currrentuser['level']))
                    @if($isHeadOffice == true)
                      @if($currrentuser['user'] !== 'USR000001')
                        <div class="col-lg-7 col-md-7 col-sm-7 col-xs-12">
                          <div class="form-group">
                            <label>Flagged Customer / Type of alert</label>
                            <span id="customer-tagging-btn" class="text-primary" style="font-weight: 500; cursor: pointer;">[ show tagging ]</span>
                            <br>
                            <textarea id="customer-tagging-display" rows="3" class="form-control" disabled></textarea>
                            <div id="risk-watch-customer-tagging" style="display: none;">
                              <hr>
                              <select id="customer-tagging-list" class="form-control" multiple="multiple">
                                <option value="2">Graylisted</option>
                                <option value="3">Blacklisted</option>
                                <option value="4">BSP Circular Letter</option>
                                <option value="5">Child Pornography</option>
                                <option value="6">Entity with notice</option>
                                <option value="7">Human Trafficking</option>
                                <option value="8">Limit on Amount</option>
                                <option value="9">Limit on Transaction Count</option>
                                <option value="10">Scammer</option>
                                <option value="11">SEC Advisory</option>
                                <option value="12">SEC Alert</option>
                                <option value="13">Sexual Exploitation</option>
                                <option value="14">Terrorism</option>
                                <option value="15">Flagged Entities</option>
                              </select>
                            </div>
                            <input type="hidden" id="customer-tagging-text" class="form-control" name="tagged" value="0"/>
                            <input type="hidden" id="risk-watch-tagging" class="form-control" name="risk_watch" />
                          </div>
                        </div>
                        <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
                          <div class="form-group">
                            <label>Remarks</label>
                            <input id="e-remarks" name="remarks" type="text" class="form-control form-control-sm customer-input" placeholder="">
                          </div>
                        </div>
                      @else
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="form-group">
                            <label>Flagged Customer / Type of alert</label>
                            <select id="customer-tagging" class="form-control" name="tagged">
                              <option value="0">--Select Category--</option>
                              {{--                                      <option value="1">Fake Client</option>--}}
                              <option value="2">Graylisted</option>
                              <option value="3">Blacklisted</option>
                              <option value="4">BSP Circular Letter</option>
                              <option value="5">Child Pornography</option>
                              <option value="6">Entity with notice</option>
                              <option value="7">Human Trafficking</option>
                              <option value="8">Limit on Amount</option>
                              <option value="9">Limit on Transaction Count</option>
                              <option value="10">Scammer</option>
                              <option value="11">SEC Advisory</option>
                              <option value="12">SEC Alert</option>
                              <option value="13">Sexual Exploitation</option>
                              <option value="14">Terrorism</option>
                              <option value="15">Flagged Entities</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                          <div class="form-group">
                            <label>Remarks</label>
                            <input id="e-remarks" name="remarks" type="text" class="form-control form-control-sm customer-input" placeholder="">
                          </div>
                        </div>
                      @endif

                    @endif
                  @endif
                </div>
                <hr>
                <div class="row">
                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="row">
                      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        <div class="form-group">
                          <label>Branch Name</label>
                          <input id="e-branch-select" name="branchname" type="text" class="form-control form-control-sm customer-input" readonly>
                        </div>
                        <div class="form-group">
                          <label>Branch Code</label>
                          <input id="e-branchcode" name="branchcode" type="text" class="form-control form-control-sm customer-input" readonly>
                        </div>
                        <div class="form-group">
                          <label>Customer Code</label>
                          <input id="e-customercode" name="customercode" type="text" class="form-control form-control-sm customer-input" readonly>
                        </div>
                        <div class="form-group">
                          <label>Customer Risk</label>
                          <select id="e-verified" name="verified" class="form-control form-control-sm customer-input">
                            <option value="NA">--select risk level--</option>
                            <option value="low">Low Risk</option>
                            <option value="mid">Medium Risk</option>
                            <option value="high">High Risk</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="row" style="padding:10px;border:1px solid rgba(0,0,0,0.2);background:#fff;">
                            <div class="col-md-12" style="padding:0 !important;">
                              <img id="grabFrameCanvasUpdateImg1" />
                              <canvas class="float-center" id="grabFrameCanvasUpdate" style="border:1px solid rgba(0,0,0,0.1);width:100%;;height:170px;cursor: pointer;"
                                      onclick="showEnlargeImage('picture')" data-toggle="modal" data-target="#imageZoom">
                            </div>
                            <div class="col-md-12 float-center">
                              <button style="width:100%;" class="btn btn-info btn-sm float-center startCameraButton" id="editcustimage" data-toggle="modal" data-target="#getImageForm">Open Camera For Image</button>
                              <button type="button" style="width:100%;margin-top:5px;"class="btn btn-info btn-sm float-center" id="editcustimagefile">Upload Image from File</button>
                              <input accept="image/*" type="file" id="editinputFromFile" class="btn btn-info btn-sm float-center" onchange="previewImageCustomerEdit(this);" style="display:none;"/>
                            </div>
                          </div>
                          <div class="row" style="padding:10px;border:1px solid rgba(0,0,0,0.2);background:#fff;">
                            <div class="col-md-12" style="padding:0 !important;">
                              <img id="grabFrameCanvasUpdateDoc_1" />
                              <canvas class="float-center" id="grabFrameCanvasUpdateDoc1" style="border:1px solid rgba(0,0,0,0.1);width:100%;;height:170px;cursor: pointer;"
                                      onclick="showEnlargeImage('document1')" data-toggle="modal" data-target="#imageZoom">
                            </div>
                            <div class="col-md-12 float-center">
                              <button style="width:100%;" class="btn btn-primary btn-sm float-center startCameraButton" id="updatedoccustimage1" data-toggle="modal" data-target="#getImageForm">Open Camera For Document</button>
                              <button type="button" style="width:100%;margin-top:5px;" class="btn btn-primary btn-sm float-center" id="editdocimagefile1">Upload Image from File 1</button>
                              <input accept="image/*" type="file" id="editinputFromFileDoc1" onchange="previewImageDocumentEdit1(this);" style="display:none;"/>
                            </div>
                          </div>
                      </div>
                      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="row" style="padding:10px;border:1px solid rgba(0,0,0,0.2);background:#fff;">
                            <div class="col-md-12" style="padding:0 !important;">
                              <img id="grabFrameCanvasUpdateDoc_0" />
                              <canvas class="float-center" id="grabFrameCanvasUpdateDoc" style="border:1px solid rgba(0,0,0,0.1);width:100%;;height:170px;cursor: pointer;"
                                      onclick="showEnlargeImage('document')" data-toggle="modal" data-target="#imageZoom">
                            </div>
                            <div class="col-md-12 float-center">
                              <button style="width:100%;" class="btn btn-primary btn-sm float-center startCameraButton" id="updatedoccustimage" data-toggle="modal" data-target="#getImageForm">Open Camera For Document</button>
                              <button type="button" style="width:100%;margin-top:5px;"class="btn btn-primary btn-sm float-center" id="editdocimagefile">Upload Image from File</button>
                              <input accept="image/*" type="file" id="editinputFromFileDoc" onchange="previewImageDocumentEdit(this);" style="display:none;"/>
                            </div>
                          </div>
                          <div class="row" style="padding:10px;border:1px solid rgba(0,0,0,0.2);background:#fff;">
                            <div class="col-md-12" style="padding:0 !important;">
                              <img id="grabFrameCanvasUpdateDoc_2" />
                              <canvas class="float-center" id="grabFrameCanvasUpdateDoc2" style="border:1px solid rgba(0,0,0,0.1);width:100%;;height:170px;cursor: pointer;"
                                      onclick="showEnlargeImage('document2')" data-toggle="modal" data-target="#imageZoom">
                            </div>
                            <div class="col-md-12 float-center">
                              <button style="width:100%;" class="btn btn-primary btn-sm float-center startCameraButton" id="updatedoccustimage2" data-toggle="modal" data-target="#getImageForm">Open Camera For Document</button>
                              <button type="button" style="width:100%;margin-top:5px;"class="btn btn-primary btn-sm float-center" id="editdocimagefile2">Upload Image from File 2</button>
                              <input accept="image/*" type="file" id="editinputFromFileDoc2" onchange="previewImageDocumentEdit2(this);" style="display:none;"/>
                            </div>
                          </div>
                      </div>
                    </div>
                    <hr>
                    <label style="color: maroon;" >CUSTOMER DETAILS</label>
                    <!-- Personal Details -->
                    <div class="row">
                      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        <div class="form-group">
                            <label>First Name</label>
                            <input id="e-firstname" name="firstname" type="text" class="form-control form-control-sm customer-input">
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                            <label>Middle Name</label>
                            <input id="e-middlename" name="middlename" type="text" class="form-control form-control-sm customer-input">
                        </div>
                      </div>
                      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        <div class="form-group">
                            <label>Last Name</label>
                            <input id="e-lastname" name="lastname" type="text" class="form-control form-control-sm customer-input">
                        </div>
                      </div>
                      <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                        <div class="form-group">
                          <label>Suffix</label>
                          <input id="e-suffix" name="suffix" type="text" class="form-control form-control-sm customer-input">
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <!-- Nickname -->
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <label>Nickname / AKA</label>
                          <input id="e-nickname" name="nickname" type="text" class="form-control form-control-sm customer-input">
                        </div>
                      </div>
                      <!-- Gender -->
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <label>Gender</label>
                          <select id="e-gender" name="gender" class="form-control form-control-sm customer-input">
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                          </select>
                        </div>
                      </div>
                      <!-- Date Of Birth -->
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <label>Date of Birth</label>
                          <input id="e-dateofbirth" name="dateofbirth" type="date" class="form-control form-control-sm customer-input">
                        </div>
                      </div>
                      <!-- Place Of Birth -->
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <label>Place of Birth</label>
                          <input id="e-placeofbirth" name="placeofbirth" type="text" class="form-control form-control-sm customer-input" value="">
                        </div>
                      </div>
                    </div>
                    <!-- Nationality and ID -->
                    <div class="row">
                      <!-- Nationality -->
                      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        <div class="form-group">
                          <label>Nationality</label>
                          <input id="e-nationality-select" name="nationality" type="text" class="form-control form-control-sm customer-input" value="">
                        </div>
                      </div>
                      <!-- ID Type -->
                      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        <div class="form-group">
                          <label>ID Type</label>
                          <select id="e-idtype" name="idtype" class="form-control form-control-sm customer-input">
                            <option value="">--- Select Id ---</option>
                            <option value="Company">Company ID</option>
                            <option value="UMID">UMID</option>
                            <option value="Postal">Postal ID</option>
                            <option value="Voters">Voter’s ID</option>
                            <option value="BarangayCert">Barangay Certification</option>
                            <option value="DSWD">DSWD Certification</option>
                            <option value="DriverLicense">Driver’s License</option>
                            <option value="GSIS">GSIS E-card</option>
                            <option value="SSS">SSS Card</option>
                            <option value="SeniorCitizen">Senior Citizen ID</option>
                            <option value="Student">Student ID</option>
                            <option value="Passport">Passport</option>
                            <option value="GOCC">GOCC ID (AFP, HDMF ID)</option>
                            <option value="NBIClearance">NBI Clearance</option>
                            <option value="PoliceClearance">Police Clearance</option>
                            <option value="PWD">PWD/NCWDP</option>
                            <option value="IBP">IBP</option>
                            <option value="OFW">OFW/OWWA ID</option>
                            <option value="SeamansBook">Seaman’s Book</option>
                            <option value="others">Others</option>
                          </select>
                        </div>

                      </div>
                      <!-- IDNumber -->
                      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="display: none !important;">
                        <div class="form-group">
                          <label>ID Number</label>
                          <input id="e-idnumber" name="idnumber" type="text" class="form-control form-control-sm customer-input" >
                        </div>
                      </div>
                    </div>
                    <!-- Contact Information -->
                    <div style="border:1px solid rgba(0,0,0,0.1);padding-top: 10px;padding-left:15px;padding-right:15px;margin-top:10px;margin-bottom:20px;">
                      <label style="color: maroon;">CONTACT INFORMATION</label>
                      <hr>
                      <div class="row">
                        <!-- Mobile -->
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                          <div class="form-group">
                            <label>Mobile</label>
                            <input id="e-mobilenumber" name="mobilenumber" type="text" class="form-control form-control-sm customer-input" value="">
                          </div>
                        </div>
                        <!-- Home -->
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                          <div class="form-group">
                            <label>Home</label>
                            <input id="e-homenumber" name="homenumber" type="text" class="form-control form-control-sm customer-input" value="">
                          </div>
                        </div>
                        <!-- Office -->
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                          <div class="form-group">
                            <label>Work</label>
                            <input id="e-officenumber" name="officenumber" type="text" class="form-control form-control-sm customer-input" value="">
                          </div>
                        </div>
                        <!-- Email -->
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                          <div class="form-group">
                            <label>Email Address</label>
                            <input id="e-emailaddress" name="emailaddress" type="text" class="form-control form-control-sm customer-input" value="">
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- Address Information -->
                    <div style="border:1px solid rgba(0,0,0,0.1);padding-top: 10px;padding-left:15px;padding-right:15px;margin-top:10px;margin-bottom:20px;">
                      <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="form-group">
                            <label>Address Type</label>
                            <select id="e-addresstype" name="addresstype" class="form-control form-control-sm customer-input">
                              <option value="Owned">Owned</option>
                              <option value="Rented">Rented</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-md-8 col-sm-8 col-xs-12">
                          <div class="form-group">
                            <label style="font-size: 0.75em !important;">Room/Unit #/Floor/Building Name/House #/Lot & Blk #/St. /Subd./Village</label>
                            <input id="e-address-street" name="street" type="text" class="form-control form-control-sm customer-input" value="">
                          </div>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12">
                          <div class="form-group">
                            <label>Province</label>
                            <input id="e-address-province" name="province" type="text" class="form-control form-control-sm customer-input" value="">
                          </div>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12">
                          <div class="form-group">
                            <label>City/Municipality</label>
                            <input id="e-address-municipality" name="municipality" type="text" class="form-control form-control-sm customer-input" value="">
                          </div>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12">
                          <div class="form-group">
                            <label>Barangay</label>
                            <input id="e-address-barangay" name="barangay" type="text" class="form-control form-control-sm customer-input" value="">
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- Employment -->
                    <div style="border:1px solid rgba(0,0,0,0.1);padding-top: 10px;padding-left:15px;padding-right:15px;margin-top:10px;margin-bottom:20px;">
                      <!-- Employment Type-->
                      <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="form-group">
                            <label>Employment</label>
                            <select id="e-employment" name="employment" class="form-control form-control-sm customer-input">
                              <option value="employed">Employed</option>
                              <option value="self">Self-Employed</option>
                              <option value="business">Business Owner</option>
                              <option value="government">Government Employee</option>
                              <option value="student">Student</option>
                              <option value="others">Others</option>
                            </select>
                          </div>
                        </div>
                      </div>
                      <!-- Employment Details-->
                      <div id="e-employmentEmployed">
                        <div class="row">
                          <!-- Employment Type-->
                          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                            <div class="form-group">
                              <label>Name of Business/Employer</label>
                              <input id="e-companyname" name="companyname" type="text" class="form-control form-control-sm customer-input" placeholder="">
                            </div>
                          </div>
                          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                            <div class="form-group">
                              <label>Nature of Business</label>
                              <input id="e-businessnature" name="businessnature" type="text" class="form-control form-control-sm customer-input" placeholder="">
                            </div>
                          </div>
                          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                            <div class="form-group">
                              <label>Address of Business</label>
                              <input id="e-businessaddress" name="businessaddress" type="text" class="form-control form-control-sm customer-input" placeholder="">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div id="e-employmentGovernment" style="display: none;">
                        <div class="row">
                          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                            <div class="form-group">
                              <label>Position</label>
                              <input id="e-governmentposition" name="governmentposition" type="text" class="form-control form-control-sm customer-input" placeholder="">
                            </div>
                          </div>
                          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                            <div class="form-group">
                              <label>Government Agency</label>
                              <input id="e-governmentagency" name="governmentagency" type="text" class="form-control form-control-sm customer-input" placeholder="">
                            </div>
                          </div>
                          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                            <div class="form-group">
                              <label>Office Address</label>
                              <input id="e-governmentaddress" name="governmentaddress" type="text" class="form-control form-control-sm customer-input" placeholder="">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div id="e-employmentSchool" style="display: none;">
                        <div class="row">
                          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin: 0; padding: 0;">
                            <div class="form-group">
                              <label>Name of School</label>
                              <input id="e-nameofschool" name="nameofschool" type="text" class="form-control form-control-sm customer-input" placeholder="">
                            </div>
                          </div>
                          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                            <div class="form-group">
                              <label>School Address</label>
                              <input id="e-schooladdress" name="schooladdress" type="text" class="form-control form-control-sm customer-input" placeholder="">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div id="e-employmentOthers" style="display: none;">
                        <div class="row">
                          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                            <div class="form-group">
                              <label>Others: Please Specify</label>
                              <input id="e-otherspecify" name="otherspecify" type="text" class="form-control form-control-sm customer-input" placeholder="">
                            </div>
                          </div>
                        </div>
                      </div>


                    </div>
                    <!-- Source of Income -->
                    <div class="row">
                      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        <div class="form-group">
                          <label>Nature of Work</label>
                          <input id="e-natureofwork" name="natureofwork" type="text" class="form-control form-control-sm customer-input" value="">
                        </div>
                      </div>
                      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        <div class="form-group">
                          <label>Source Of Fund</label>
                          <select id="e-sourceoffund" name="sourceoffund" class="form-control form-control-sm customer-input">
                            <option value="salary">Salary</option>
                            <option value="employment">Employment</option>
                            <option value="business">Business</option>
                            <option value="remittances_allowances">Remittances/Allowances</option>
                            <option value="debt">Debt/Utang</option>
                            <option value="pension">Pension</option>
                            <option value="savings">Savings</option>
                            <option value="gifts">Gifts/Regalo</option>
                            <option value="rental_income">Rental Income</option>
                            <option value="relatives_friends">From Relatives/Friends</option>
                            <option value="sale_of_properties">Sale of Properties</option>
                            <option value="government">From Government</option>
                            <option value="others">Others</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        <div class="form-group">
                          <label>Suki Card # (Palawan Express)</label>
                          <input id="e-sukicardnumber" name="sukicardnumber" type="text" class="form-control form-control-sm customer-input" value="">
                        </div>
                      </div>
                    </div>
                    <!-- Purpose of Transactions -->
                    <div class="row">
                      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="form-group">
                          <label>Purpose of Transaction</label>
                          <input id="e-purposeoftransaction" name="purposeoftransaction" type="text" class="form-control form-control-sm customer-input" value="">
                        </div>
                      </div>
                    </div>
                    <input name="request" type="hidden" value="customer" readonly>
                    <input name="type" type="hidden" value="localcustupdate" readonly>
                    <input name="usercode" type="hidden" value="{{$currrentuser['user']}}" readonly>
                  </div>
                </div>
              </div>
            </div>
          </form>
          <form id="edit-customer-form-corporate" style="display: none;">
            <h4 id="corp-fake-tag" style="color:red;font-weight:bold;display:none;">Beware! Fake Client</h4>
            <div class="review-content-section" style="border:1px solid rgba(0,0,0,0.1);margin-top:0px;padding:20px 20px 20px 20px;background:rgba(0,0,0,0.05);">
              <div id="dropzone1" class="pro-ad">
                <!-- Risk Management -->
                <div class="row">
                  @if(isset($currrentuser['level']))
                    @if($isHeadOffice == true)
                      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        <div class="form-group">
                          <label>Flagged Customer / Type of alert</label>
                          <select id="corp-customer-tagging" class="form-control" name="tagged">
                            <option value="0">--Select Category--</option>
                            {{--                                      <option value="1">Fake Client</option>--}}
                            <option value="2">Graylisted</option>
                            <option value="3">Blacklisted</option>
                            <option value="4">BSP Circular Letter</option>
                            <option value="5">Child Pornography</option>
                            <option value="6">Entity with notice</option>
                            <option value="7">Human Trafficking</option>
                            <option value="8">Limit on Amount</option>
                            <option value="9">Limit on Transaction Count</option>
                            <option value="10">Scammer</option>
                            <option value="11">SEC Advisory</option>
                            <option value="12">SEC Alert</option>
                            <option value="13">Sexual Exploitation</option>
                            <option value="14">Terrorism</option>
                            <option value="15">Flagged Entities</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                        <div class="form-group">
                          <label>Remarks</label>
                          <input id="e-corp-remarks" name="remarks" type="text" class="form-control form-control-sm customer-input" placeholder="">
                        </div>
                      </div>
                    @endif
                  @endif
                </div>
                <hr>
                <div>
                  <div class="row">
                    <!-- Branch Name -->
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                      <div class="form-group">
                        <label>Branch Name</label>
                        <input id="e-corp-branch-select" name="branchname" type="text" class="form-control form-control-sm customer-input" value="">
                      </div>
                    </div>
                    <!-- Branch Code -->
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                      <div class="form-group">
                        <label>Branch Code</label>
                        <input id="e-corp-branchcode" name="branchcode" type="text" class="form-control form-control-sm customer-input" value="" readonly>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <!-- Customer Code -->
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                      <div class="form-group">
                        <label>Customer Code</label>
                        <input id="e-corp-customercode" name="customercode" type="text" class="form-control form-control-sm customer-input" value="" readonly>
                      </div>
                    </div>
                    <!-- Risk Management -->
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                      <div class="form-group">
                        <label>Customer Risk</label>
                        <select id="e-corp-verified" name="verified" class="form-control form-control-sm customer-input">
                          <option value="low">Low Risk</option>
                          <option value="mid">Medium Risk</option>
                          <option value="high">High Risk</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <hr>
                  <label style="color: maroon;">CUSTOMER DETAILS</label>
                  <!-- Business Details -->
                  <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                      <div class="form-group">
                        <label>Name of Business</label>
                        <input id="e-corp-nameofbusiness" name="nameofbusiness" type="text" class="form-control form-control-sm customer-input"  value="">
                      </div>
                    </div>
                  </div>
                  <div class="row" style="display: none;">
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                      <div class="form-group">
                        <label>First Name</label>
                        <input id="e-corp-firstname" name="firstname" type="text" class="form-control form-control-sm customer-input" value="-">
                      </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                      <div class="form-group">
                        <label>Middle Name</label>
                        <input id="e-corp-middlename" name="middlename" type="text" class="form-control form-control-sm customer-input"  value="-">
                      </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                      <div class="form-group">
                        <label>Last Name</label>
                        <input id="e-corp-lastname" name="lastname" type="text" class="form-control form-control-sm customer-input"  value="-">
                      </div>
                    </div>
                  </div>
                  <!-- Nationality -->
                  <div class="row" style="display: none;">
                    <!-- Nationality -->
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                      <div class="form-group">
                        <label>Nationality</label>
                        <input id="e-corp-nationality-select" name="nationality" type="text" class="form-control form-control-sm customer-input" value="Filipino">
                      </div>
                    </div>
                  </div>
                  <!-- Address Information -->
                  <div style="border:1px solid rgba(0,0,0,0.1);padding-top: 10px;padding-left:15px;padding-right:15px;margin-top:10px;margin-bottom:20px;">
                    <div class="row">
                      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        <div class="form-group">
                          <label>Address Type</label>
                          <select id="e-corp-addresstype" name="addresstype" class="form-control form-control-sm customer-input">
                            <option value="Owned">Owned</option>
                            <option value="Rented">Rented</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-md-8 col-sm-8 col-xs-12">
                        <div class="form-group">
                          <label>House # / Building / Street</label>
                          <input id="e-corp-address-street" name="street" type="text" class="form-control form-control-sm customer-input" value="">
                        </div>
                      </div>
                      <div class="col-md-4 col-sm-4 col-xs-12">
                        <div class="form-group">
                          <label>Province</label>
                          <input id="e-corp-address-province" name="province" type="text" class="form-control form-control-sm customer-input" value="">
                        </div>
                      </div>
                      <div class="col-md-4 col-sm-4 col-xs-12">
                        <div class="form-group">
                          <label>City/Municipality</label>
                          <input id="e-corp-address-municipality" name="municipality" type="text" class="form-control form-control-sm customer-input" value="">
                        </div>
                      </div>
                      <div class="col-md-4 col-sm-4 col-xs-12">
                        <div class="form-group">
                          <label>Barangay</label>
                          <input id="e-corp-address-barangay" name="barangay" type="text" class="form-control form-control-sm customer-input" value="">
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- Contact Information -->
                  <div style="border:1px solid rgba(0,0,0,0.1);padding-top: 10px;padding-left:15px;padding-right:15px;margin-top:10px;margin-bottom:20px;">
                    <label style="color: maroon;">CONTACT INFORMATION</label>
                    <div class="row">
                      <!-- Mobile -->
                      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <div class="form-group">
                          <label>Mobile</label>
                          <input id="e-corp-mobilenumber" name="mobilenumber" type="text" class="form-control form-control-sm customer-input" value="">
                        </div>
                      </div>
                      <!-- Office -->
                      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <div class="form-group">
                          <label>Office</label>
                          <input id="e-corp-officenumber" name="officenumber" type="text" class="form-control form-control-sm customer-input" value="">
                        </div>
                      </div>
                      <!-- Email -->
                      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <div class="form-group">
                          <label>Email Address</label>
                          <input id="e-corp-emailaddress" name="emailaddress" type="text" class="form-control form-control-sm customer-input" value="">
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- Nature of Business -->
                  <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                      <div class="form-group">
                        <label>Nature of Business</label>
                        <select id="e-corp-natureofbusiness" name="natureofbusiness" class="form-control form-control-sm customer-input">
                          <option value="">--- Select ---</option>
                          <option value="accounting_practive">Accounting Practice</option>
                          <option value="agriculture">Agriculture</option>
                          <option value="arts_and_creatives">Arts and Creatives</option>
                          <option value="automobile_dealer">Automobile Dealier</option>
                          <option value="jewelry_dealer">Jewelry Dealer</option>
                          <option value="media_and_journalism">Media and Journalism</option>
                          <option value="medical_health_service">Medical/Health Service</option>
                          <option value="ngo_charity_social_works">NGO/Charity/Social Works</option>
                          <option value="online_selling">Online Selling</option>
                          <option value="banking_and_finance">Banking and Finance</option>
                          <option value="bpo">Business Process Outsourcing (BPO)</option>
                          <option value="casino">Casino - Internet or Ship Based</option>
                          <option value="construction_and_engineering">Construction and Engineering</option>
                          <option value="practice">Practice</option>
                          <option value="pharmaceutical">Pharmaceutical</option>
                          <option value="real_estate_broker">Real Estate Broker</option>
                          <option value="remittance_agent">Remittance Agent</option>
                          <option value="security">Security / Protective Services</option>
                          <option value="education_and_research">Education and Research</option>
                          <option value="food_and_retail">Food and Retail</option>
                          <option value="foreign_exchange_delear">Foreign Exchange Dealer</option>
                          <option value="insurance_agency">Insurance Agency</option>
                          <option value="tourism_hospitality_services">Tourism/Hospitality Services</option>
                          <option value="transportation_logistics">Transportation / Logistics</option>
                          <option value="web_and_social_media">Web and Social Media</option>
                          <option value="others">Others (Please Specify)</option>
                        </select>
                      </div>

                    </div>
                  </div>
                  <!-- Affiliated Companies -->
                  <label>Affiliated Companies</label>
                  <div style="border:1px solid rgba(0,0,0,0.1);padding-top: 10px;padding-left:15px;padding-right:15px;margin-bottom:10px;">
                    <div class="row">
                      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-affiliatedcompany1" name="affiliatedcompany1" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-affiliatedcompany2" name="affiliatedcompany2" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-affiliatedcompany3" name="affiliatedcompany3" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-affiliatedcompany4" name="affiliatedcompany4" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- Beneficial Owner of the Company -->
                  <label>Beneficial Owner of the Company</label>
                  <div style="border:1px solid rgba(0,0,0,0.1);padding-top: 10px;padding-left:15px;padding-right:15px;margin-bottom:10px;">
                    <div class="row">
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <label>Last Name</label>
                          <input id="e-corp-boc_lastname1" name="boc_lastname1" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <label>First Name</label>
                          <input id="e-corp-boc_firstname1" name="boc_firstname1" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <label>Middle Name</label>
                          <input id="e-corp-boc_middlename1" name="boc_middlename1" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                        <div class="form-group">
                          <label>Suffix</label>
                          <input id="e-corp-boc_suffix1" name="boc_suffix1" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <label>Position</label>
                          <input id="e-corp-boc_position1" name="boc_position1" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <label>Shares</label>
                          <input id="e-corp-boc_shares1" name="boc_shares1" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_lastname2" name="boc_lastname2" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_firstname2" name="boc_firstname2" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_middlename2" name="boc_middlename2" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_suffix2" name="boc_suffix2" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_position2" name="boc_position2" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_shares2" name="boc_shares2" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_lastname3" name="boc_lastname3" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_firstname3" name="boc_firstname3" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_middlename3" name="boc_middlename3" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_suffix3" name="boc_suffix3" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_position3" name="boc_position3" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_shares3" name="boc_shares3" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_lastname4" name="boc_lastname4" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_firstname4" name="boc_firstname4" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_middlename4" name="boc_middlename4" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_suffix4" name="boc_suffix4" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_position4" name="boc_position4" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-boc_shares4" name="boc_shares4" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- Representative Information -->
                  <label>Representative Information</label>
                  <div style="border:1px solid rgba(0,0,0,0.1);padding-top: 10px;padding-left:15px;padding-right:15px;margin-bottom:10px;">
                    <div class="row">
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <label>Last Name</label>
                          <input id="e-corp-representative_lastname1" name="representative_lastname1" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <label>First Name</label>
                          <input id="e-corp-representative_firstname1" name="representative_firstname1" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <label>Middle Name</label>
                          <input id="e-corp-representative_middlename1" name="representative_middlename1" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                        <div class="form-group">
                          <label>Suffix</label>
                          <input id="e-corp-representative_suffix1" name="representative_suffix1" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <label>Position</label>
                          <input id="e-corp-representative_position1" name="representative_position1" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-representative_lastname2" name="representative_lastname2" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-representative_firstname2" name="representative_firstname2" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-representative_middlename2" name="representative_middlename2" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-representative_suffix2" name="representative_suffix2" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-representative_position2" name="representative_position2" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-representative_lastname3" name="representative_lastname3" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-representative_firstname3" name="representative_firstname3" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-representative_middlename3" name="representative_middlename3" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-representative_suffix3" name="representative_suffix3" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-representative_position3" name="representative_position3" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-representative_lastname4" name="representative_lastname4" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-representative_firstname4" name="representative_firstname4" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-representative_middlename4" name="representative_middlename4" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-representative_suffix4" name="representative_suffix4" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
                        <div class="form-group">
                          <input id="e-corp-representative_position4" name="representative_position4" type="text" class="form-control form-control-sm customer-input" value="-">
                        </div>
                      </div>
                    </div>
                  </div>
                  <input name="request" type="hidden" value="customer" readonly>
                  <input name="type" type="hidden" value="localcustupdate" readonly>
                  <input name="usercode" type="hidden" value="{{$currrentuser['user']}}" readonly>
                </div>
              </div>
            </div>
          </form>
          <br>
          <div class="row">
              <div class="col-lg-6">
                <div>Created By: <span id="userfullname" style="font-weight:bold;"></span></div>
                <div>User Branch: <span id="userbranch" style="font-weight:bold;"></span></div>
                <div>Date Created: <span id="datecreated" style="font-weight:bold;"></span></div>
              </div>
              <div class="col-lg-6">
                <div>Updated By: <span id="userupdatefullname" style="font-weight:bold;"></span></div>
                <div>User Branch: <span id="userupdatebranch" style="font-weight:bold;"></span></div>
                <div>Date Updated: <span id="lastupdate" style="font-weight:bold;"></span></div>
              </div>
              <div class="col-lg-12">
                <br>
                <div id="edit-cus-error-msg" style="color:red;"></div>
                <div id="edit-cus-success-msg" style="color:green;"></div>
              </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newTransaction">Add Transactions</button>
          <button id="view-kyc-transaction-list-btn" type="button" class="btn btn-info" data-toggle="modal" data-target="#transactionListAll">View Transactions</button>
          <button id="edit-customer-btn" type="button" class="btn btn-success">Save Customer</button>
          <button id="print-customer-btn" type="button" class="btn btn-warning">Print Profile</button>
          @if($isresetAllowed == true)
            <button id="delete-customer-local-btn" type="button" class="btn btn-danger">Delete Profile</button>
          @endif
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        <hr>
      </div>
    </div>
  </div>
  <div class="modal fade" id="getImageForm">
    <div class="modal-dialog modal-sm">
      <div class="modal-content auto-selector">
          <div class="modal-header">
            <h4 class="modal-title"style="font-size:1em;font-weight:600;">Capture Image</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body">
            <video autoplay="" style="border:1px solid rgba(0,0,0,0.1);width:100%;height:100%;"></video><br>
            <input type="hidden" id="current-user-image-loc" value="" />
            <button id="take-photo-btn" type="button" class="btn btn-warning" data-dismiss="modal">Capture</button>
          </div>
        <hr>
      </div>
    </div>
  </div>
  <div class="modal fade" id="transactionList">
    <div class="modal-dialog modal-xl">
      <div class="modal-content auto-selector">
          <div class="modal-header">
            <h4 class="modal-title"style="font-size:1em;font-weight:600;">Transaction List</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body">
            <table id="transactiontable" class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th>Transaction Date</th>
                  <th>Branch Name</th>
                  <th>Transaction Type</th>
                  <th>Transaction Code</th>
                  <th>Receiver Name</th>
                  <th>Amount</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        <hr>
      </div>
    </div>
  </div>
  <div class="modal fade" id="newTransaction">
    <div class="modal-dialog modal-md">
      <div class="modal-content auto-selector">
          <div class="modal-header">
            <h4 class="modal-title"style="font-size:1em;font-weight:600;">Add Transaction</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body" >
            <div style="padding:20px;border:1px solid rgba(0,0,0,0.1);background:#deffff;">
              <form id="new-kyc-transaction-form">
                <div class="row">
                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="form-group">
                      <label>Transaction Type</label>
                      <select id="t-transaction" name="transaction" class="form-control form-control-sm customer-input">
                        <option value="palawan send out">Palawan Send Out</option>
                        <option value="palawan pay out">Palawan Pay Out</option>
                        <option value="gcash in" style="display: none;">GCash In</option>
                        <option value="gcash out" style="display: none;">GCash Out</option>
                        <option value="smartmoney in" style="display: none;">Smart Money (In)</option>
                        <option value="smartmoney out" style="display: none;">Smart Money (Out)</option>
                        <option value="MC (Buy)" style="display: none;">Money Changer (Buy)</option>
                        <option value="Abra (In)" style="display: none;">Abra (In)</option>
                        <option value="Sendra Direct - Loading (In)" style="display: none;">Sendra Direct - Loading (In)</option>
                        <option value="Sendra Direct - Smart Padala (In)" style="display: none;">Sendra Direct - Smart Padala (In)</option>
                        <option value="Sendra Direct - Smart Padala (Out)" style="display: none;">Sendra Direct - Smart Padala (Out)</option>
                        <option value="Sendra Direct - PayMaya (In)" style="display: none;">Sendra Direct - PayMaya (In)</option>
                        <option value="Peoples Gen Insurance (In)" style="display: none;">Peoples Gen Insurance (In)</option>
                        <option value="Peoples Gen Insurance (Out)" style="display: none;">Peoples Gen Insurance (Out)</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="form-group">
                        <label>Transaction Date</label>
                        <input id="t-transdate" name="transdate" type="date" class="form-control form-control-sm transaction-input" value="{{date('Y-m-d')}}">
                    </div>
                  </div>
                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="form-group">
                        <label>Transaction Code</label>
                        <input id="t-transcode" name="transcode" type="text" class="form-control form-control-sm transaction-input" placeholder="">
                    </div>
                  </div>
                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="form-group">
                        <label id="receiver-label">Sender/Receiver</label>
                        <input id="t-transreceiver" name="transreceiver" type="text" class="form-control form-control-sm transaction-input" placeholder="">
                    </div>
                  </div>
                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="display: none;">
                    <div class="form-group">
                        <label id="relationship-label">Relationship</label>
                        <input id="t-relationship" name="relationship" type="text" class="form-control form-control-sm transaction-input" placeholder="">
                    </div>
                  </div>
                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="form-group">
                        <label id="purpose-label">Purpose of  Transaction</label>
                        <input id="t-purpose" name="purpose" type="text" class="form-control form-control-sm transaction-input" placeholder="">
                    </div>
                  </div>
                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="form-group">
                        <label>Amount</label>
                        <input id="t-transamount" name="transamount" type="text" class="form-control form-control-sm transaction-input" placeholder="">
                    </div>
                  </div>

                </div>
                <input type="hidden" id="new-trans-cust-code" name="customercode" value="" readonly/>
                <input type="hidden" id="new-trans-loguser" name="loguser" value="{{$currrentuser['user']}}" readonly/>
                <input type="hidden" id="new-trans-branch" name="branch" value="{{$currrentuser['branch']}}" readonly/>
                <input name="request" type="hidden" value="customer" readonly>
                <input name="type" type="hidden" value="addtransaction" readonly>
              </form>
              <div id="trans-cus-error-msg" style="color:red;"></div>
              <div id="trans-cus-success-msg" style="color:green;"></div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" id="add-new-kyc-transaction-btn" class="btn btn-success">Add Transaction</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        <hr>
      </div>
    </div>
  </div>
  <div class="modal fade" id="transactionListAll">
    <div class="modal-dialog modal-xl">
      <div class="modal-content auto-selector">
          <div class="modal-header">
            <h4 class="modal-title"style="font-size:1em;font-weight:600;">Transaction List</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-3 col-sm-3 col-xs-6">
                <div class="form-group">
                    <label>Date From</label>
                    <input id="t-datefrom" name="datefrom" type="date" class="form-control form-control-sm" value="{{date('Y-m-d')}}">
                </div>
              </div>
              <div class="col-md-3 col-sm-3 col-xs-6">
                <div class="form-group">
                    <label>Date To</label>
                    <input id="t-dateto" name="dateto" type="date" class="form-control form-control-sm" value="{{date('Y-m-d')}}">
                </div>
              </div>
              <div class="col-md-3 col-sm-3 col-xs-6">
                <div class="form-group">
                    <label>Transaction Type</label>
                    <select id="t-transtype" class="form-control form-control-sm">
                      <option value="ALL">All</option>
                      <option value="PL">Pledge Loan</option>
                      <option value="GC">GCash</option>
                      <option value="MC">Money Changer</option>
                      <option value="OS">Other Services</option>
                    </select>
                </div>
              </div>
              <div class="col-md-2 col-sm-3 col-xs-6">
                <div class="form-group">
                    <label></label><br>
                    <button id="generate-trans-btn" type="button" class="btn btn-info btn-sm">Generate</button>
                </div>
              </div>
            </div>
            <hr>
            <table id="transactiontableall" class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th>Transaction Date</th>
                  <th>Branch Name</th>
                  <th>Transaction Type</th>
                  <th>Transaction Code</th>
                  <th>Receiver Name</th>
                  <th>Amount</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        <hr>
      </div>
    </div>
  </div>
  <div class="modal fade" id="imageZoom">
    <div class="modal-dialog modal-lg">
      <div class="modal-content auto-selector">
        <div class="modal-body">
          <label class="close" data-dismiss="modal" style="font-size: 1em;cursor: pointer;">close [&times;]</label>
          <br/>
          <canvas class="float-center" id="grabFrameCanvasEnlarge" style="border:1px solid rgba(0,0,0,0.1);width:100%;;height:100%;" />
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="riskWatchModal">
    <div class="modal-dialog modal-sm">
      <div class="modal-content auto-selector">
        <div class="modal-body">
          <label class="close" data-dismiss="modal" style="font-size: 1em;cursor: pointer;">close [&times;]</label>
          <h1>
            Selection Here
          </h1>
        </div>
      </div>
    </div>
  </div>
@endsection
@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="/theme/plugins/datatables/jquery.dataTables.js"></script>
<script src="/theme/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>
<!-- bootstrap datepicker -->
<!-- AdminLTE App -->
<script src="/theme/plugins/moment/moment.min.js"></script>
<script src="/theme/plugins/daterangepicker/daterangepicker.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 src="/js/jquery.multi-select.js" type="text/javascript"></script>
<script>
  const riskList = {
    "2" : "Graylisted",
    "3" : "Blacklisted",
    "4" : "BSP Circular Letter",
    "5" : "Child Pornography",
    "6" : "Entity with notice",
    "7" : "Human Trafficking",
    "8" : "Limit on Amount",
    "9" : "Limit on Transaction Count",
    "10" : "Scammer",
    "11" : "SEC Advisory",
    "12" : "SEC Alert",
    "13" : "Sexual Exploitation",
    "14" : "Terrorism",
    "15" : "Flagged Entities",
  }
  $('#report-dates').daterangepicker();
  $('t-datefrom').datepicker({
    dateFormat: "yy-mm-dd",
  });
  $('t-dateto').datepicker({
    dateFormat: "yy-mm-dd",
  });
  var dataTableExist = $('#customertableexist').DataTable({
    keys: true,
    draw: true,
    "dom": '<"top"i>rt<"bottom"flp><"clear">',
  });
  var dataTable = $('#customertable').DataTable({
      keys: true,
      draw: true,
      dom: 'Bfrtip',
      buttons: [
        'copy', 'csv', 'excel', 'pdf', 'print'
      ],
    });
  var dataListTable = $('#customerListTable').DataTable({
    keys: true,
    draw: true,
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ],
  });
  var transTable = $('#transactiontable').DataTable();
  var transTableAll = $('#transactiontableall').DataTable({
      keys: true,
      draw: true,
      dom: 'Bfrtip',
      buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
    });
  function getBranchCode(branchname){
    $.ajax({
        url: '/customer-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'branch', type: 'branchcode', code: branchname},
        success:function(e){
          console.log(e);
          if(e){
            console.log(e);
            $('#branchcode').val(e.branchcode);
            $('#customercode').val(e.customercode);
          }
        }
    });
  }
  function getCorpBranchCode(branchname){
    $.ajax({
      url: '/customer-request',
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type:'POST',
      data: {request: 'branch', type: 'branchcode', code: branchname},
      success:function(e){
        console.log(e);
        if(e){
          console.log(e);
          $('#corp-branchcode').val(e.branchcode);
          $('#corp-customercode').val(e.customercode);
        }
      }
    });
  }
  function getCustomerListDemo(){
    $.ajax({
        url: '/get-address-location',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {loctype: 'customerlist', branchcode: $('#current-user-branch').val()},
        success:function(e){
          if(e){
            console.log(e);
            dataSet = [];
						for(num in e){
							dataSet.push([
								e[num].customercode,
								e[num].customername,
								e[num].customerbranch,
                '<button type="button" id="'+e[num].customercode+'" class="btn btn-info get-customer-btn" data-toggle="modal" data-target="#editCustomer">select</button>']
							);
						}
						dataTable.destroy();
						dataTable.draw();
						$('#customertable').DataTable({
							"scrollY":"360px",
							keys: true,
							data: dataSet,
							"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                            dom: 'Bfrtip',
                            buttons: [
                              'copy', 'csv', 'excel', 'pdf'
                            ],
							columns: [
								{ title: "Customer Code" },
								{ title: "Customer Name" },
                { title: "Branch" },
                { title: "" }
							]}),
							dataTable = $('#customertable').DataTable();
          }
        }
    });
  }
  function getCustomerDetails(customercode){
    console.log(customercode);
    $('#checking-customer-notification').css('display','block');
    $.ajax({
        url: '/get-address-location',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {loctype: 'customerdetails', code: customercode},
        success:function(e){
          if(e){
            console.log(e);
            for(num in e){
              //console.log(e[num]);
              if(num == "branchname") $('#e-branch-select').val(e[num]);
              else if(num == "nationality") $('#e-'+num+'-select').val(e[num]);
              else if(num == "province") $('#e-address-'+num).val(e[num]);
              else if(num == "municipality") $('#e-address-'+num).val(e[num]);
              else if(num == "barangay") $('#e-address-'+num).val(e[num]);
              else if(num == "street") $('#e-address-'+num).val(e[num]);
              else $('#e-'+num).val(e[num]);
            }
            if(parseInt(e.isblocked) == 1) {
              alert("Beware, Fake Client!");
              $('#e-isblocked').prop('checked',true);
              $('#warning-client-text').css('display','block');
            }
            else {
              $('#warning-client-text').css('display','block');
              $('#e-isblocked').prop('checked',false);
            }
            const img = new Image();
            if(e.image){
              img.src = e.image;
              const myCanvas = document.getElementById("grabFrameCanvasUpdate");
              img.onload = () => {
                const myContext = myCanvas.getContext("2d");
                myContext.clearRect(img, 0, 0, 640, 480);
                myContext.drawImage(img, 0, 0, 300, 150, 0, 0, 450, 150);
              }
            } else img.src = null;
            const docimg = new Image();
            const docimg1 = new Image();
            const docimg2 = new Image();
            if(e.docimage){
              docimg.src = e.docimage;
              const myDocCanvas = document.getElementById("grabFrameCanvasUpdateDoc");
              docimg.onload = () => {
                const myDocContext = myDocCanvas.getContext("2d");
                myDocContext.clearRect(docimg, 0, 0, 640, 480);
                myDocContext.drawImage(docimg, 0, 0, 300, 150, 0, 0, 450, 150);
              }
            }  else docimg.src = null;
            if(e.docimage1){
              docimg1.src = e.docimage1;
              const myDocCanvas1 = document.getElementById("grabFrameCanvasUpdateDoc1");
              docimg1.onload = () => {
                const myDocContext1 = myDocCanvas1.getContext("2d");
                myDocContext1.clearRect(docimg1, 0, 0, 640, 480);
                myDocContext1.drawImage(docimg1, 0, 0, 300, 150, 0, 0, 450, 150);
              }
            } else docimg1.src = null;
            if(e.docimage2){
              docimg2.src = e.docimage2;
              const myDocCanvas2 = document.getElementById("grabFrameCanvasUpdateDoc2");
              docimg2.onload = () => {
                const myDocContext2 = myDocCanvas2.getContext("2d");
                myDocContext2.clearRect(docimg2, 0, 0, 640, 480);
                myDocContext2.drawImage(docimg2, 0, 0, 300, 150, 0, 0, 450, 150);
              }
            } else docimg2.src = null;

            console.log('image1  ' + e.docimage);
            console.log('image2  ' + e.docimage1);
            console.log('image3  ' + e.docimage2);
            $('#checking-customer-notification').css('display','none');
          }
        }
    });
  }
  $(document).on('click','.get-customer-btn',function(event){
    var customercode = $(this).attr('id');
    console.log('get customer: ');
    console.log(customercode);

    var imgCanvas = document.getElementById('grabFrameCanvasUpdate');
    imgCanvas.width = this.width;
    imgCanvas.height = this.height;
    const imgContext = imgCanvas.getContext('2d');
    imgContext.clearRect(0, 0, imgCanvas.width, imgCanvas.height);

    var docCanvas = document.getElementById('grabFrameCanvasUpdateDoc');
    docCanvas.width = this.width;
    docCanvas.height = this.height;
    const docContext = docCanvas.getContext('2d');
    docContext.clearRect(0, 0, docCanvas.width, docCanvas.height);

    getCustomerDetailsLocal(customercode);
    $('#new-trans-cust-code').val(customercode);
  });
  $("#branch-select").on('change',function(){
    var brname = $(this).val();
    console.log(brname);
    getBranchCode(brname);
  });

  $("#corp-branch-select").on('change',function(){
    var brname = $(this).val();
    console.log(brname);
    getCorpBranchCode(brname);
  });

  function resetCustomerList(){
    $.ajax({
        url: '/get-address-location',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {loctype: 'customerlistrefresh', branchcode: $('#current-user-branch').val()},
        success:function(e){
          if(e){
            console.log(e);
          }
        }
    });
  }
  // $( document ).ready(function() {
  //   var userlevel = $('#current-user-level').val();
  //   if(userlevel == "headoffice"){
  //     console.log( "HO" );
  //     //getCustomerListLocal();
  //   }
  //   else if(userlevel == "it"){
  //     console.log( "HO" );
  //     //getCustomerListLocal();
  //   }
  //   else {
  //     //getCustomerListLocal();
  //     //getCustomerList();
  //   }
  // });
</script>
<script>
  $(function () {
    $("#jewelleryItems").DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": true,
      "ordering": true,
      "info": true,
      "autoWidth": false,
    });
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": true,
      "ordering": true,
      "info": true,
      "autoWidth": false,
    });
  });
  $("#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
  });
  $("#corp-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: $("#corp-branch-select").val()},
        success:function(e){
          if(e){
            console.log(e);
            response(e);
          }
        }
      });
    },
    classes: {
      "ui-autocomplete": "highlight"
    },
    minLength: 2
  });
  $("#nationality-select").autocomplete({
    source: function(request, response){
      $.ajax({
          url: '/get-address-location',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {loctype: 'countries', locname: $("#nationality-select").val()},
          success:function(e){
            if(e){
              console.log(e);
              response(e);
            }
          }
      });
    },
    classes: {
      "ui-autocomplete": "highlight"
    },
    minLength: 2
  });
  $("#address-province").autocomplete({
    source: function(request, response){
      $.ajax({
          url: '/get-address-location',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {loctype: 'province', locname: $("#address-province").val()},
          success:function(e){
            if(e){
              console.log(e);
              response(e);
            }
          }
      });
    },
    classes: {
      "ui-autocomplete": "highlight"
    },
    minLength: 2
  });
  $("#address-municipality").autocomplete({
    source: function(request, response){
      $.ajax({
          url: '/get-address-location',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {loctype: 'municipality', province: $("#address-province").val(), locname: $("#address-municipality").val()},
          success:function(e){
            if(e){
              console.log(e);
              response(e);
            }
          }
      });
    },
    classes: {
      "ui-autocomplete": "highlight"
    },
    minLength: 2
  });
  $("#address-barangay").autocomplete({
    source: function(request, response){
      $.ajax({
          url: '/get-address-location',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {loctype: 'barangay', province: $("#address-province").val(), municipality: $("#address-municipality").val(), locname: $("#address-barangay").val()},
          success:function(e){
            if(e){
              console.log(e);
              response(e);
            }
          }
      });
    },
    classes: {
      "ui-autocomplete": "highlight"
    },
    minLength: 2
  });
  $("#e-nationality-select").autocomplete({
    source: function(request, response){
      $.ajax({
          url: '/get-address-location',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {loctype: 'countries', locname: $("#e-nationality-select").val()},
          success:function(e){
            if(e){
              console.log(e);
              response(e);
            }
          }
      });
    },
    classes: {
      "ui-autocomplete": "highlight"
    },
    minLength: 2
  });
  $("#e-address-province").autocomplete({
    source: function(request, response){
      $.ajax({
          url: '/get-address-location',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {loctype: 'province', locname: $("#e-address-province").val()},
          success:function(e){
            if(e){
              console.log(e);
              response(e);
            }
          }
      });
    },
    classes: {
      "ui-autocomplete": "highlight"
    },
    minLength: 2
  });
  $("#e-address-municipality").autocomplete({
    source: function(request, response){
      $.ajax({
          url: '/get-address-location',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {loctype: 'municipality', province: $("#e-address-province").val(), locname: $("#e-address-municipality").val()},
          success:function(e){
            if(e){
              console.log(e);
              response(e);
            }
          }
      });
    },
    classes: {
      "ui-autocomplete": "highlight"
    },
    minLength: 2
  });
  $("#e-address-barangay").autocomplete({
    source: function(request, response){
      $.ajax({
          url: '/get-address-location',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {loctype: 'barangay', province: $("#e-address-province").val(), municipality: $("#e-address-municipality").val(), locname: $("#e-address-barangay").val()},
          success:function(e){
            if(e){
              console.log(e);
              response(e);
            }
          }
      });
    },
    classes: {
      "ui-autocomplete": "highlight"
    },
    minLength: 2
  });

  $( ".auto-selector" ).autocomplete({
    appendTo: "#companyname"
  });
  var appendTo = $( ".auto-selector" ).autocomplete( "option", "appendTo" );
  $( ".auto-selector" ).autocomplete( "option", "appendTo", "#companyname" );
</script>
<script>
  var imageCapture;
  var newImageFile;
  var docImageFile;
  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";
        const canvas = document.querySelector('#'+selectorId);
        drawCanvas(canvas, imageBitmap);
        newImageFile = canvas.toDataURL('image/png', 1.0);
        $('#customer-image-selection').val("0");
      }
      else if(imgCaptureID == "editcustimage") {
        selectorId = "grabFrameCanvasUpdate";
        const canvas = document.querySelector('#'+selectorId);
        drawCanvas(canvas, imageBitmap);
        newImageFile = canvas.toDataURL('image/png', 1.0);
        $('#customer-image-selection').val("0");
      }
      else if(imgCaptureID == "newdoccustimage") {
        selectorId = "grabFrameCanvasNewDoc";
        const canvas = document.querySelector('#'+selectorId);
        drawCanvas(canvas, imageBitmap);
        docImageFile = canvas.toDataURL('image/png', 1.0);
        $('#document-image-selection').val("0");
      }
      else if(imgCaptureID == "newdoccustimage1") {
        selectorId = "grabFrameCanvasNewDoc1";
        const canvas = document.querySelector('#'+selectorId);
        drawCanvas(canvas, imageBitmap);
        docImageFile = canvas.toDataURL('image/png', 1.0);
        $('#document-image-selection').val("0");
      }
      else if(imgCaptureID == "newdoccustimage2") {
        selectorId = "grabFrameCanvasNewDoc2";
        const canvas = document.querySelector('#'+selectorId);
        drawCanvas(canvas, imageBitmap);
        docImageFile = canvas.toDataURL('image/png', 1.0);
        $('#document-image-selection').val("0");
      }

      else if(imgCaptureID == "updatedoccustimage") {
        selectorId = "grabFrameCanvasUpdateDoc";
        const canvas = document.querySelector('#'+selectorId);
        drawCanvas(canvas, imageBitmap);
        docImageFile = canvas.toDataURL('image/png', 1.0);
        $('#document-image-selection').val("0");
      }
      else if(imgCaptureID == "updatedoccustimage1") {
        selectorId = "grabFrameCanvasUpdateDoc1";
        const canvas = document.querySelector('#'+selectorId);
        drawCanvas(canvas, imageBitmap);
        docImageFile = canvas.toDataURL('image/png', 1.0);
        $('#document-image-selection').val("0");
      }
      else if(imgCaptureID == "updatedoccustimage2") {
        selectorId = "grabFrameCanvasUpdateDoc2";
        const canvas = document.querySelector('#'+selectorId);
        drawCanvas(canvas, imageBitmap);
        docImageFile = canvas.toDataURL('image/png', 1.0);
        $('#document-image-selection').val("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.");
          }
      });
    }
  function addCustomerDocImage(custcode,branchcode){
      var filedata = [];
      var tempdata = "";
      var dataFile = new FormData();
      for(num in docImageFile){
        tempdata = tempdata + docImageFile[num];
        if((num % 500) == 0){
          dataFile.append('file[]', tempdata);
          tempdata = "";
        }
      }
      dataFile.append('custcode', custcode);
      dataFile.append('branchcode', branchcode);
      $.ajax({
          url: '/add-customer-doc-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");
              const canvas = document.querySelector('#grabFrameCanvasNewDoc');
              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>
  $('#add-new-transaction-btn').on('click',function(event){
    event.preventDefault();
    $('.transaction-input').css('border','1px solid rgba(0,0,0,0.08)');
    $('#trans-cus-error-msg').html('');
    $('#trans-cus-success-msg').html('');
    $.ajax({
        url: '/customer-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        method: 'POST',
        data: $('#new-transaction-form').serialize(),
        success:function(e){
            console.log("TEST");
            console.log(e);
            if(e.code > 0){
              if(e.code > 1){
                $('#trans-cus-error-msg').html(e.msg);
              }
              else {
                var errarr = e.msg;
                for(num in errarr){
                  $('#t-'+errarr[num]).css('border','1px solid red');
                }
                $('#trans-cus-error-msg').html('Error Encountered!');
              }
              $('#trans-cus-error-msg').show();
            }
            else {
              $('#trans-cus-success-msg').text(e.msg);
              $('#trans-cus-success-msg').show();
            }
        },
    });
  });
  $('#view-transaction-list-btn').on('click',function(event){
    var custcode = $('#e-customercode').val();
    getCustomerTransactionList(custcode);
  });
  function getCustomerTransactionList(customercode){
    $.ajax({
        url: '/customer-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'customer', type: 'gettransaction', code: customercode},
        success:function(e){
          if(e){
            console.log(e);
            var transactionSet = [];
						for(num in e){
							transactionSet.push([
								e[num].transdate,
                e[num].branch,
								e[num].transactiontype,
								e[num].transactioncode,
                e[num].receiver,
                e[num].amount]);
						}
						transTable.destroy();
						transTable.draw();
						$('#transactiontable').DataTable({
							"scrollY":"360px",
							keys: true,
              draw: true,
							data: transactionSet,
              "dom": '<"top"i>rt<"bottom"flp><"clear">',
							// "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
							columns: [
								{ title: "Transaction Date" },
								{ title: "Branch Name" },
                { title: "Transaction Type" },
                { title: "Transaction Code" },
                { title: "Receiver Name" },
                { title: "Amount" },
							]}),
							transTable = $('#transactiontable').DataTable();
              //transTable.draw();
          }
        }
    });
  }
</script>
<script>
  $('#t-transaction').on('change',function(event){
    event.preventDefault();
    var transtype = $(this).val();
    if(transtype == "palawan pay out") $('#receiver-label').text("Sender Name");
    else if(transtype == "gcash out") $('#receiver-label').text("Sender Name");
    else $('#receiver-label').text("Receiver Name");
  });
  $('#print-customer-btn').on('click',function(event){
    event.preventDefault();
    var customercode = $('#e-customercode').val();
    var custType = $('#edit-customer-type').val();
    if(custType === 'corporate'){customercode = $('#e-corp-customercode').val();}
    getCustomerProfileLocal(customercode);
  });
  function getCustomerProfile(customercode){
    $.ajax({
        url: '/get-print-report',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {requesttype: 'custprofile', custcode: customercode},
        success:function(e){
          if(e){
            window.open("/reports/print/customer-profile/"+e, "", "width=900,height=700");
          }
        }
    });
  }
  $('#delete-customer-btn').on('click',function(event){
    event.preventDefault();
    var conr = confirm("Please Confirm Delete!");
    if (conr == true) {
      $('#edit-cus-success-msg').text('');
      $('#edit-cus-error-msg').text('');
      $.ajax({
          url: '/delete-customer-details',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {ecode: $('#e-customercode').val()},
          success:function(e){
            if(e){
              console.log(e);
              alert('Customer' + e + ' successfully deleted!');
              resetCustomerList();
          }
        }
      });
    }
  });
</script>
<script>
  var currrentCustCode = '';
  var customerImageData;
  var customerDocumentData;
  var customerDocumentData1;
  var customerDocumentData2;
  $("#customer-name-search-old").autocomplete({
    source: function(request, response){
      $.ajax({
          url: '/get-address-location',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {loctype: 'customersearch', locname: $("#customer-name-search").val()},
          success:function(e){
            console.log(e);
            if(e){
              response(e);
            }
          }
      });
    },
    classes: {
      "ui-autocomplete": "highlight"
    },
    minLength: 2
  });
  $("#customer-name-search-old").on('keypress',function(e){
    var thisId = $(this).val();
    if(thisId != "" || thisId != null){
      if(e.which == 13){
        console.log(thisId);
        thisId = thisId.split(':');
        //$('#customercode').val(thisId[0]);
        getCustomerDetails(thisId[0]);
      }
    }
  });
  $("#customer-name-search-old").on('change',function(e){
    var thisId = $(this).val();
    if(thisId != "" || thisId != null){
      thisId = thisId.split(':');
      $('#customercode').val(thisId[0]);
      getCustomerDetails(thisId[0]);
    }
  });
  $('#custom-kyc-name-search-btn').on('click',function(event){
    event.preventDefault();
    console.log($('#customer-name-search-new').val());
    $('#loading-customer-list').css('display','block');
    $('#tagged-selection').css('display','none');
    $('#new-list-selection').css('display','none');
    $('#customer-new-listing').css('display','none');
    $('#customer-listing').css('display','block');
    getCustomerListCustom();
  });
  $('#customer-tagged-search').on('click',function(event){
    event.preventDefault();
    console.log($('#customer-name-search-new').val());
    $('#new-list-selection').css('display','none');
    $('#customer-new-listing').css('display','none');
    $('#customer-listing').css('display','block');
    getTagggedCustomerList();
  });
  $('#add-customer-btn').on('click',function(event){
    event.preventDefault();
    $('#confirmnew').val("No");
    $('#new-cus-success-msg').text('');
    $('#new-cus-error-msg').text('');
    $('.customer-input').css('border','1px solid rgba(0,0,0,0.08)');
    var customerType = $('#customerType').val();
    if(customerType === 'individual') addCustomerDetailsIndividual();
    else if(customerType === 'corporate') addCustomerDetailsCorporate();
    return
    $.ajax({
        url: '/add-customer-details',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#add-customer-form-individual').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            if(e.code > 0){
              var cCode = $('#customercode').val();
              var errarr = e.msg;
              for(num in errarr){
                if(errarr[num] == "branchname") $('#branch-select').css('border','1px solid red');
                else if(errarr[num] == "nationality") $('#nationality-select').css('border','1px solid red');
                else if(errarr[num] == "street") $('#address-street').css('border','1px solid red');
                else if(errarr[num] == "province") $('#address-province').css('border','1px solid red');
                else if(errarr[num] == "municipality") $('#address-municipality').css('border','1px solid red');
                else if(errarr[num] == "barangay") $('#address-barangay').css('border','1px solid red');
                $('#'+errarr[num]).css('border','1px solid red');
              }

              if(errarr !== cCode){
                $('#new-cus-error-msg').html('Error Encountered!');
                $('#new-cus-error-msg').show();
              }
              else {
                $('#new-cus-success-msg').text('Customer Successfully Added!');
                $('#new-cus-success-msg').show();

                var imgCustSelector = $('#customer-image-selection').val();
                var imgDocSelector = $('#document-image-selection').val();
                imgCustSelector = parseInt(imgCustSelector);
                imgDocSelector = parseInt(imgDocSelector);
                if(imgCustSelector == 1) addCustomerImageFile($('#customercode').val(),$('#branchcode').val());
                else addCustomerImages($('#customercode').val(),$('#branchcode').val());

                if(imgDocSelector == 1) addCustomerDocImageFile($('#customercode').val(),$('#branchcode').val());
                else addCustomerDocImage($('#customercode').val(),$('#branchcode').val());
                resetCustomerList();
              }

            }
            else {
              if(e.exist){
                var edata = e.data;
                getCustomerListCustomExist(edata);
              }
              else {
                $('#new-cus-success-msg').text('Customer Successfully Added!');
                $('#new-cus-success-msg').show();

                var imgCustSelector = $('#customer-image-selection').val();
                var imgDocSelector = $('#document-image-selection').val();
                imgCustSelector = parseInt(imgCustSelector);
                imgDocSelector = parseInt(imgDocSelector);
                if(imgCustSelector == 1) addCustomerImageFile($('#customercode').val(),$('#branchcode').val());
                else addCustomerImages($('#customercode').val(),$('#branchcode').val());

                if(imgDocSelector == 1) addCustomerDocImageFile($('#customercode').val(),$('#branchcode').val());
                else addCustomerDocImage($('#customercode').val(),$('#branchcode').val());
                resetCustomerList();
              }
            }
          }
        }
    });
  });
  function addCustomerDetailsIndividual(){
    $.ajax({
      url: '/add-customer-details',
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type:'POST',
      data: $('#add-customer-form-individual').serialize(),
      success:function(e){
        if(e){
          console.log(e);
          if(e.code > 0){
            var cCode = $('#customercode').val();
            var errarr = e.msg;
            for(num in errarr){
              if(errarr[num] == "branchname") $('#branch-select').css('border','1px solid red');
              else if(errarr[num] == "nationality") $('#nationality-select').css('border','1px solid red');
              else if(errarr[num] == "street") $('#address-street').css('border','1px solid red');
              else if(errarr[num] == "province") $('#address-province').css('border','1px solid red');
              else if(errarr[num] == "municipality") $('#address-municipality').css('border','1px solid red');
              else if(errarr[num] == "barangay") $('#address-barangay').css('border','1px solid red');
              $('#'+errarr[num]).css('border','1px solid red');
            }
            if(errarr !== cCode){
              $('#new-cus-error-msg').html('Error Encountered!');
              $('#new-cus-error-msg').show();
            }
            else {
              $('#new-cus-success-msg').text('Customer Successfully Added!');
              $('#new-cus-success-msg').show();

              var imgCustSelector = $('#customer-image-selection').val();
              var imgDocSelector = $('#document-image-selection').val();
              imgCustSelector = parseInt(imgCustSelector);
              imgDocSelector = parseInt(imgDocSelector);
              if(imgCustSelector == 1) addCustomerImageFile($('#customercode').val(),$('#branchcode').val());
              else addCustomerImages($('#customercode').val(),$('#branchcode').val());

              if(imgDocSelector == 1) addCustomerDocImageFile($('#customercode').val(),$('#branchcode').val());
              else addCustomerDocImage($('#customercode').val(),$('#branchcode').val());
              resetCustomerList();
            }
          }
          else {
            if(e.exist){
              var edata = e.data;
              getCustomerListCustomExist(edata);
            }
            else {
              $('#new-cus-success-msg').text('Customer Successfully Added!');
              $('#new-cus-success-msg').show();

              var imgCustSelector = $('#customer-image-selection').val();
              var imgDocSelector = $('#document-image-selection').val();
              imgCustSelector = parseInt(imgCustSelector);
              imgDocSelector = parseInt(imgDocSelector);
              if(imgCustSelector == 1) addCustomerImageFile($('#customercode').val(),$('#branchcode').val());
              else addCustomerImages($('#customercode').val(),$('#branchcode').val());

              if(imgDocSelector == 1) addCustomerDocImageFile($('#customercode').val(),$('#branchcode').val());
              else addCustomerDocImage($('#customercode').val(),$('#branchcode').val());
              resetCustomerList();
            }
          }
        }
      }
    });
  }
  function addCustomerDetailsCorporate(){
    var corpName = $('#corp-nameofbusiness').val();
    $('#corp-lastname').val(corpName);
    $.ajax({
      url: '/add-customer-details',
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type:'POST',
      data: $('#add-customer-form-corporate').serialize(),
      success:function(e){
        if(e){
          console.log(e);
          if(e.code > 0){
            var cCode = $('#corp-customercode').val();
            var errarr = e.msg;
            for(num in errarr){
              if(errarr[num] == "branchname") $('#corp-branch-select').css('border','1px solid red');
              else if(errarr[num] == "nationality") $('#corp-nationality-select').css('border','1px solid red');
              else if(errarr[num] == "street") $('#corp-address-street').css('border','1px solid red');
              else if(errarr[num] == "province") $('#corp-address-province').css('border','1px solid red');
              else if(errarr[num] == "municipality") $('#corp-address-municipality').css('border','1px solid red');
              else if(errarr[num] == "barangay") $('#corp-address-barangay').css('border','1px solid red');
              $('#corp-'+errarr[num]).css('border','1px solid red');
            }
            if(errarr !== cCode){
              $('#corp-new-cus-error-msg').html('Error Encountered!');
              $('#corp-new-cus-error-msg').show();
            }
            else {
              $('#corp-new-cus-success-msg').text('Customer Successfully Added!');
              $('#corp-new-cus-success-msg').show();
              resetCustomerList();
            }
          }
          else {
            if(e.exist){
              var edata = e.data;
              getCustomerListCustomExist(edata);
            }
            else {
              $('#corp-new-cus-success-msg').text('Customer Successfully Added!');
              $('#corp-new-cus-success-msg').show();
            }
          }
        }
      }
    });
  }

  $('#confirm-new-kyc-transaction-btn').on('click',function(event){
    event.preventDefault();
    $('#confirmnew').val("Yes");
    $('#new-cus-success-msg').text('');
    $('#new-cus-error-msg').text('');
    $('.customer-input').css('border','1px solid rgba(0,0,0,0.08)');
    var customerType = $('#customerType').val();
    if(customerType === 'individual') addCustomerDetailsIndividual();
    else if(customerType === 'corporate') addCustomerDetailsCorporate();
    $('#existingCustomerModal').modal('toggle');
    return;
    $.ajax({
        url: '/add-customer-details',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#add-customer-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            if(e.code > 0){
              var errarr = e.msg;
              for(num in errarr){
                if(errarr[num] == "branchname") $('#branch-select').css('border','1px solid red');
                else if(errarr[num] == "nationality") $('#nationality-select').css('border','1px solid red');
                else if(errarr[num] == "street") $('#address-street').css('border','1px solid red');
                else if(errarr[num] == "province") $('#address-province').css('border','1px solid red');
                else if(errarr[num] == "municipality") $('#address-municipality').css('border','1px solid red');
                else if(errarr[num] == "barangay") $('#address-barangay').css('border','1px solid red');
                $('#'+errarr[num]).css('border','1px solid red');
              }
              $('#new-cus-error-msg').html('Error Encountered!');
              $('#new-cus-error-msg').show();
            }
            else {
                alert("Customer Added Successfully!");
                $('#new-cus-success-msg').text('Customer Successfully Added!');
                $('#new-cus-success-msg').show();
                var imgCustSelector = $('#customer-image-selection').val();
                var imgDocSelector = $('#document-image-selection').val();
                imgCustSelector = parseInt(imgCustSelector);
                imgDocSelector = parseInt(imgDocSelector);
                if(imgCustSelector == 1) addCustomerImageFile($('#customercode').val(),$('#branchcode').val());
                else addCustomerImages($('#customercode').val(),$('#branchcode').val());

                if(imgDocSelector == 1) addCustomerDocImageFile($('#customercode').val(),$('#branchcode').val());
                else addCustomerDocImage($('#customercode').val(),$('#branchcode').val());
                resetCustomerList();
                $('#existingCustomerModal').modal('toggle');
                $('#newCustomer').modal('toggle');
            }
          }
        }
    });
  });
  $(document).on('shown.bs.modal', '#customertableexist', function () {
      dataTableExist.columns.adjust();
  });

  $('#edit-customer-btn').on('click',function(event){
    event.preventDefault();
    $('.customer-input').css('border','1px solid rgba(0,0,0,0.08)');
    $('#edit-cus-success-msg').text('');
    $('#edit-cus-error-msg').text('');
    var custType = $('#edit-customer-type').val();
    if(custType === 'individual') updateCustomerFormIndividual();
    else if(custType === 'corporate') updateCustomerCorporate();
    return
    $.ajax({
        url: '/customer-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#edit-customer-form-individual').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            if(e.code > 0){
              var errarr = e.msg;
              for(num in errarr){
                if(errarr[num] == "branchname") $('#e-branch-select').css('border','1px solid red');
                else if(errarr[num] == "nationality") $('#e-nationality-select').css('border','1px solid red');
                else if(errarr[num] == "street") $('#e-address-street').css('border','1px solid red');
                else if(errarr[num] == "province") $('#e-address-province').css('border','1px solid red');
                else if(errarr[num] == "municipality") $('#e-address-municipality').css('border','1px solid red');
                else if(errarr[num] == "barangay") $('#e-address-barangay').css('border','1px solid red');
                $('#e-'+errarr[num]).css('border','1px solid red');
              }
              $('#edit-cus-error-msg').text('Error Encountered!');
              $('#edit-cus-error-msg').show();
            }
            else {
              $('#edit-cus-success-msg').text('Customer Successfully Updated!');
              $('#edit-cus-success-msg').show();

              var imgCustSelector = $('#customer-image-selection').val();
              var imgDocSelector = $('#document-image-selection').val();
              imgCustSelector = parseInt(imgCustSelector);
              imgDocSelector = parseInt(imgDocSelector);
              if(imgCustSelector == 1) updateCustomerImageFile($('#e-customercode').val(),$('#e-branchcode').val());
              else {
                if(newImageFile != undefined) {
                  addCustomerImages($('#e-customercode').val(),$('#e-branchcode').val());
                }
              }
              if(imgDocSelector == 1) updateCustomerDocImageFile($('#e-customercode').val(),$('#e-branchcode').val());
              else {
                if(docImageFile != undefined) {
                  addCustomerDocImage($('#e-customercode').val(),$('#e-branchcode').val());
                }
              }

            }
        }
      }
    });
  });

  function updateCustomerFormIndividual(){
    $.ajax({
      url: '/customer-request',
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type:'POST',
      data: $('#edit-customer-form-individual').serialize(),
      success:function(e){
        if(e){
          console.log(e);
          if(e.code > 0){
            var errarr = e.msg;
            for(num in errarr){
              if(errarr[num] == "branchname") $('#e-branch-select').css('border','1px solid red');
              else if(errarr[num] == "nationality") $('#e-nationality-select').css('border','1px solid red');
              else if(errarr[num] == "street") $('#e-address-street').css('border','1px solid red');
              else if(errarr[num] == "province") $('#e-address-province').css('border','1px solid red');
              else if(errarr[num] == "municipality") $('#e-address-municipality').css('border','1px solid red');
              else if(errarr[num] == "barangay") $('#e-address-barangay').css('border','1px solid red');
              $('#e-'+errarr[num]).css('border','1px solid red');
            }
            $('#edit-cus-error-msg').text('Error Encountered!');
            $('#edit-cus-error-msg').show();
          }
          else {
            $('#edit-cus-success-msg').text('Customer Successfully Updated!');
            $('#edit-cus-success-msg').show();

            var imgCustSelector = $('#customer-image-selection').val();
            var imgDocSelector = $('#document-image-selection').val();
            imgCustSelector = parseInt(imgCustSelector);
            imgDocSelector = parseInt(imgDocSelector);
            if(imgCustSelector == 1) updateCustomerImageFile($('#e-customercode').val(),$('#e-branchcode').val());
            else {
              if(newImageFile != undefined) {
                addCustomerImages($('#e-customercode').val(),$('#e-branchcode').val());
              }
            }
            if(imgDocSelector == 1) updateCustomerDocImageFile($('#e-customercode').val(),$('#e-branchcode').val());
            else {
              if(docImageFile != undefined) {
                addCustomerDocImage($('#e-customercode').val(),$('#e-branchcode').val());
              }
            }

          }
        }
      }
    });
  }
  function updateCustomerCorporate(){
    var corpName = $('#e-corp-nameofbusiness').val();
    $('#e-corp-lastname').val(corpName);
    $.ajax({
      url: '/customer-request',
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type:'POST',
      data: $('#edit-customer-form-corporate').serialize(),
      success:function(e){
        if(e){
          console.log(e);
          if(e.code > 0){
            var errarr = e.msg;
            for(num in errarr){
              if(errarr[num] == "branchname") $('#e-corp-branch-select').css('border','1px solid red');
              else if(errarr[num] == "nationality") $('#e-corp-nationality-select').css('border','1px solid red');
              else if(errarr[num] == "street") $('#e-corp-address-street').css('border','1px solid red');
              else if(errarr[num] == "province") $('#e-corp-address-province').css('border','1px solid red');
              else if(errarr[num] == "municipality") $('#e-corp-address-municipality').css('border','1px solid red');
              else if(errarr[num] == "barangay") $('#e-corp-address-barangay').css('border','1px solid red');
              $('#e-corp-'+errarr[num]).css('border','1px solid red');
            }
            $('#edit-cus-error-msg').text('Error Encountered!');
            $('#edit-cus-error-msg').show();
          }
          else {
            $('#edit-cus-success-msg').text('Customer Successfully Updated!');
            $('#edit-cus-success-msg').show();
          }
        }
      }
    });
  }
  $('#add-new-kyc-transaction-btn').on('click',function(event){
    event.preventDefault();
    $('.transaction-input').css('border','1px solid rgba(0,0,0,0.08)');
    $('#trans-cus-error-msg').html('');
    $('#trans-cus-success-msg').html('');
    $.ajax({
        url: '/customer-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        method: 'POST',
        data: $('#new-kyc-transaction-form').serialize(),
        success:function(e){
            console.log(e);
            if(e.code > 0){
              if(e.code > 1){
                $('#trans-cus-error-msg').html(e.msg);
              }
              else {
                var errarr = e.msg;
                for(num in errarr){
                  $('#t-'+errarr[num]).css('border','1px solid red');
                }
                $('#trans-cus-error-msg').html('Error Encountered!');
              }
              $('#trans-cus-error-msg').show();
            }
            else {
              $('#trans-cus-success-msg').text(e.msg);
              $('#trans-cus-success-msg').show();
            }
        },
    });
  });
  $('#view-kyc-transaction-list-btn').on('click',function(event){
    var custcode = $('#e-customercode').val();
    //getCustomerTransactionListLocal(custcode);
    //getCustomerTransactionListAllLocal(custcode);
  });
  $('#generate-trans-btn').on('click',function(event){
    var custcode = $('#e-customercode').val();
    currrentCustCode = custcode;
    getCustomerTransactionListAllLocal(custcode);
  });

  function getCustomerListCustom(){
    $.ajax({
        url: '/customer-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'customer', type: 'localsearchindv', customername: $('#customer-name-search-new').val()},
        success:function(e){
          $('#loading-customer-list').css('display','none');
          if(e){
            dataSet = [];
						for(num in e){
                          var isBlocked = parseInt(e[num].isblocked);
                          var riskType = e[num].verified;
                          var isblockedStr = "";
                          if(isBlocked == 1) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Blacklisted</span>';
                          else if(isBlocked == 2) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Graylisted</span>';
                          else if(isBlocked == 3) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Blacklisted</span>';
                          else if(isBlocked == 4) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">BSP Circular Letter</span>';
                          else if(isBlocked == 5) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Child Pornography</span>';
                          else if(isBlocked == 6) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Entity with notice</span>';
                          else if(isBlocked == 7) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Human Trafficking</span>';
                          else if(isBlocked == 8) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Limit on Amount</span>';
                          else if(isBlocked == 9) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Limit on Transaction Count</span>';
                          else if(isBlocked == 10) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Scammer</span>';
                          else if(isBlocked == 11) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">SEC Advisory</span>';
                          else if(isBlocked == 12) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">SEC Alert</span>';
                          else if(isBlocked == 13) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Sexual Exploitation</span>';
                          else if(isBlocked == 14) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Terrorism</span>';
                          else if(isBlocked == 15) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Flagged Entities</span>';
                          else if(isBlocked == 101) isblockedStr = '<span style="padding-left:10px;background-color:#0eed81;font-weight:bold;">Low Risk</span>';
                          else if(isBlocked == 102) isblockedStr = '<span style="padding-left:10px;background-color:yellow;font-weight:bold;">Medium Risk</span>';
                          else if(isBlocked == 103) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">High Risk</span>';
                            console.log(isBlocked + isblockedStr);
                          dataSet.push([
                            e[num].customercode,
                            isblockedStr+'<br>'+e[num].fullname,
                            e[num].branchname,
                            '<button type="button" id="'+e[num].customercode+'" class="btn btn-info get-customer-btn" data-toggle="modal" data-target="#editCustomer">select</button>']
                           );
						}
						dataTable.destroy();
						dataTable.draw();
						$('#customertable').DataTable({
							"scrollY":"360px",
							keys: true,
							data: dataSet,
							"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                            dom: 'Bfrtip',
                            buttons: [
                              'copy', 'csv', 'excel', 'pdf'
                            ],
							columns: [
								{ title: "Customer Code" },
								{ title: "Customer Name" },
                { title: "Branch" },
                { title: "" }
							]}),
							dataTable = $('#customertable').DataTable();
          }
        }
    });
  }
  function getCustomerListCustomExist(e){
    console.log(e);
    var dataSetExist = [];
    for(num in e){
      dataSetExist.push([
        e[num].customercode,
        e[num].fullname,
        e[num].branchname,
        '<button type="button" id="'+e[num].customercode+'" class="btn btn-info get-customer-btn" data-toggle="modal" data-target="#editCustomer">select</button>']
      );
    }
    dataTableExist.destroy();
    dataTableExist.draw();
    $('#customertableexist').DataTable({
      "scrollY":"360px",
      keys: true,
      data: dataSetExist,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
      //"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
      columns: [
        { title: "Customer Code" },
        { title: "Customer Name" },
        { title: "Branch" },
        { title: "" }
      ]}),
      dataTableExist = $('#customertableexist').DataTable();
    $('#existingCustomerModal').modal('toggle');
  }
  function getTagggedCustomerList(){
    $.ajax({
        url: '/customer-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'customer', type: 'tagged', branch: $('#current-user-branch').val()},
        success:function(e){
          console.log('Branch');
          console.log(e);
          if(e){
            $('#tagged-selection').css('display','block');
            dataSet = [];
						for(num in e){
              var isBlocked = parseInt(e[num].isblocked);
              var isblockedStr = "";
              if(isBlocked == 1) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Blacklisted</span>';
              else if(isBlocked == 2) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Graylisted</span>';
              else if(isBlocked == 3) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Blacklisted</span>';
              else if(isBlocked == 4) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">BSP Circular Letter</span>';
              else if(isBlocked == 5) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Child Pornography</span>';
              else if(isBlocked == 6) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Entity with notice</span>';
              else if(isBlocked == 7) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Human Trafficking</span>';
              else if(isBlocked == 8) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Limit on Amount</span>';
              else if(isBlocked == 9) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Limit on Transaction Count</span>';
              else if(isBlocked == 10) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Scammer</span>';
              else if(isBlocked == 11) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">SEC Advisory</span>';
              else if(isBlocked == 12) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">SEC Alert</span>';
              else if(isBlocked == 13) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Sexual Exploitation</span>';
              else if(isBlocked == 14) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Terrorism</span>';
              else if(isBlocked == 15) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">Flagged Entities</span>';
              else if(isBlocked == 101) isblockedStr = '<span style="padding-left:10px;background-color:#0eed81;font-weight:bold;">Low Risk</span>';
              else if(isBlocked == 102) isblockedStr = '<span style="padding-left:10px;background-color:yellow;font-weight:bold;">Medium Risk</span>';
              else if(isBlocked == 103) isblockedStr = '<span style="padding-left:10px;background-color:#ff4c38;font-weight:bold;">High Risk</span>';
              console.log(isblockedStr);
              dataSet.push([
                e[num].customercode,
								isblockedStr+'<br>'+e[num].fullname,
								e[num].branchname,
                '<button type="button" id="'+e[num].customercode+'" class="btn btn-info get-customer-btn" data-toggle="modal" data-target="#editCustomer">select</button>']
							);
						}
						dataTable.destroy();
						dataTable.draw();
						$('#customertable').DataTable({
							"scrollY":"360px",
							keys: true,
							data: dataSet,
							"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                            dom: 'Bfrtip',
                            buttons: [
                              'copy', 'csv', 'excel', 'pdf'
                            ],
							columns: [
								{ title: "Customer Code" },
								{ title: "Customer Name" },
                { title: "Branch" },
                { title: "" }
							]}),
							dataTable = $('#customertable').DataTable();
          }
        }
    });
  }
  function getCustomerListLocal(){
    $.ajax({
        url: '/customer-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'customer', type: 'localsearch', branchcode: $('#current-user-branch').val()},
        success:function(e){
          if(e){
            console.log(e);
            console.log("test");
            dataSet = [];
						for(num in e){
							dataSet.push([
								e[num].customercode,
								e[num].fullname,
								e[num].branchname,
                '<button type="button" id="'+e[num].customercode+'" class="btn btn-info get-customer-btn" data-toggle="modal" data-target="#editCustomer">select</button>']
							);
						}
						dataTable.destroy();
						dataTable.draw();
						$('#customertable').DataTable({
							"scrollY":"360px",
							keys: true,
							data: dataSet,
							"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                            dom: 'Bfrtip',
                            buttons: [
                              'copy', 'csv', 'excel', 'pdf'
                            ],
							columns: [
								{ title: "Customer Code" },
								{ title: "Customer Name" },
                { title: "Branch" },
                { title: "" }
							]}),
							dataTable = $('#customertable').DataTable();
          }
        }
    });
  }
  function getCustomerDetailsLocal(customercode){
    console.log(customercode);
    $('#loading-customer-details').css('display','block');
    $('#checking-customer-notification').css('display','block');

    $('#edit-customer-form-corporate').css('display','none');
    $('#edit-customer-form-individual').css('display','none');

    $.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(e);
          $('#loading-customer-details').css('display','none');
          $('#existingCustomerClose').click();
          if(e){
            var eCustType = e.customerType
            console.log(eCustType)
            if(eCustType){
              if(eCustType === 'corporate') {
                $('#edit-customer-form-individual').css('display','none');
                $('#edit-customer-form-corporate').css('display','block');
                getCustomerDetailsLocalCorporate(e);
              }
              else if(eCustType === 'individual') {
                $('#edit-customer-form-corporate').css('display','none');
                $('#edit-customer-form-individual').css('display','block');
                getCustomerDetailsLocalIndividual(e);
              }
            }
            else {
              if(e.nameofbusiness){
                $('#edit-customer-form-individual').css('display','none');
                $('#edit-customer-form-corporate').css('display','block');
                getCustomerDetailsLocalCorporate(e);
              }
              else {
                $('#edit-customer-form-corporate').css('display','none');
                $('#edit-customer-form-individual').css('display','block');
                getCustomerDetailsLocalIndividual(e);
              }
            }
            return;

            for(num in e){
              if(num == "branchname") $('#e-branch-select').val(e[num]);
              else if(num == "nationality") $('#e-'+num+'-select').val(e[num]);
              else if(num == "province") $('#e-address-'+num).val(e[num]);
              else if(num == "municipality") $('#e-address-'+num).val(e[num]);
              else if(num == "barangay") $('#e-address-'+num).val(e[num]);
              else if(num == "street") $('#e-address-'+num).val(e[num]);
              else $('#e-'+num).val(e[num]);
            }
            if(parseInt(e.tagged) == 1) {
              $('#fake-tag').css('display','block');
              $('#fake-tag').text('Beware! Scammer!');
              $('#e-isblocked').prop('checked',true);
            }
            else if(parseInt(e.tagged) == 2) {
              $('#fake-tag').css('display','block');
              $('#fake-tag').text('Verify to SL or COMPLIANCE!');
              $('#e-isblocked').prop('checked',true);
            }
            else if(parseInt(e.tagged) == 3) {
              $('#fake-tag').css('display','block');
              $('#fake-tag').text('Do NOT Accept!');
              $('#e-isblocked').prop('checked',true);
            }
            else if(parseInt(e.tagged) == 4) {
              $('#fake-tag').css('display','block');
              $('#fake-tag').text('Do NOT Accept!');
              $('#e-isblocked').prop('checked',true);
            }
            else if(parseInt(e.tagged) == 5) {
              $('#fake-tag').css('display','block');
              $('#fake-tag').text('Do NOT Accept!');
              $('#e-isblocked').prop('checked',true);
            }
            else {
              $('#fake-tag').css('display','none');
              $('#e-isblocked').prop('checked',false);
            }
            $('#customer-tagging').val(e.tagged);
            $('#e-remarks').val("");
            if(e.remarks){
              $('#e-remarks').val(e.remarks);
            }
            const img = new Image();
            if(e.image){
              customerImageData = e.image;
              img.src = e.image;
              img.onload = custImageDrawUpdate;
            }
            const docimg = new Image();
            if(e.docimage){
              customerDocumentData = e.docimage;
              docimg.src = e.docimage;
              docimg.onload = docImageDrawUpdate;
            }
            $('#checking-customer-notification').css('display','none');
            $('#datecreated').text(e.datecreated);
            $('#userfullname').text(e.userfullname);
            $('#userupdatefullname').text(e.userupdatefullname);
            $('#userbranch').text(e.userbranch);
            $('#userupdatebranch').text(e.userupdatebranch);
            if(e.userupdatefullname != "") $('#lastupdate').text(e.lastupdate);
            $('#e-verified').val(e.verified);
            console.log('Create Doc verified');
            fillEmploymentType(e.employment);
          }
        }
    });
  }

  function getCustomerDetailsLocalIndividual(e){
    $('#edit-customer-type').val('individual');
    for(num in e){
      if(num == "branchname") $('#e-branch-select').val(e[num]);
      else if(num == "nationality") $('#e-'+num+'-select').val(e[num]);
      else if(num == "province") $('#e-address-'+num).val(e[num]);
      else if(num == "municipality") $('#e-address-'+num).val(e[num]);
      else if(num == "barangay") $('#e-address-'+num).val(e[num]);
      else if(num == "street") $('#e-address-'+num).val(e[num]);
      else $('#e-'+num).val(e[num]);
    }
    if(parseInt(e.tagged) == 1) {
      $('#fake-tag').css('display','block');
      $('#fake-tag').text('Beware! Scammer!');
      $('#e-isblocked').prop('checked',true);
    }
    else if(parseInt(e.tagged) == 2) {
      $('#fake-tag').css('display','block');
      $('#fake-tag').text('Verify to SL or COMPLIANCE!');
      $('#e-isblocked').prop('checked',true);
    }
    else if(parseInt(e.tagged) == 3) {
      $('#fake-tag').css('display','block');
      $('#fake-tag').text('Do NOT Accept!');
      $('#e-isblocked').prop('checked',true);
    }
    else if(parseInt(e.tagged) == 4) {
      $('#fake-tag').css('display','block');
      $('#fake-tag').text('Do NOT Accept!');
      $('#e-isblocked').prop('checked',true);
    }
    else if(parseInt(e.tagged) == 5) {
      $('#fake-tag').css('display','block');
      $('#fake-tag').text('Do NOT Accept!');
      $('#e-isblocked').prop('checked',true);
    }
    else {
      $('#fake-tag').css('display','none');
      $('#e-isblocked').prop('checked',false);
    }
    $('#fake-tag').css('display','none');
    $('#e-isblocked').prop('checked',false);
    parseRiskWatch(e.risk_watch, e.tagged);
    $('#customer-tagging').val(e.tagged);
    $('#e-remarks').val("");
    if(e.remarks){
      $('#e-remarks').val(e.remarks);
    }
    const img = new Image();
    if(e.image){
      customerImageData = e.image;
      img.src = e.image;
      img.onload = custImageDrawUpdate;
    }
    const docimg = new Image();
    const docimg1 = new Image();
    const docimg2 = new Image();
    if(e.docimage){
      customerDocumentData = e.docimage;
      docimg.src = e.docimage;
      docimg.onload = docImageDrawUpdate;
    }
    if(e.docimage1){
      customerDocumentData1 = e.docimage1;
      docimg1.src = e.docimage1;
      docimg1.onload = docImageDrawUpdate1;
    }
    if(e.docimage2){
      customerDocumentData2 = e.docimage2;
      docimg2.src = e.docimage2;
      docimg2.onload = docImageDrawUpdate2;
    }

    $('#checking-customer-notification').css('display','none');

    $('#datecreated').text(e.datecreated);
    $('#userfullname').text(e.userfullname);
    $('#userupdatefullname').text(e.userupdatefullname);
    $('#userbranch').text(e.userbranch);
    $('#userupdatebranch').text(e.userupdatebranch);
    if(e.userupdatefullname != "") $('#lastupdate').text(e.lastupdate);
    $('#e-verified').val(e.verified);
    console.log('Create Doc verified');
    fillEmploymentType(e.employment);
  }
  function getCustomerDetailsLocalCorporate(e){
    $('#edit-customer-type').val('corporate');
    for(num in e){
      if(num == "branchname") $('#e-corp-branch-select').val(e[num]);
      else if(num == "nationality") $('#e-corp-'+num+'-select').val(e[num]);
      else if(num == "province") $('#e-corp-address-'+num).val(e[num]);
      else if(num == "municipality") $('#e-corp-address-'+num).val(e[num]);
      else if(num == "barangay") $('#e-corp-address-'+num).val(e[num]);
      else if(num == "street") $('#e-corp-address-'+num).val(e[num]);
      else $('#e-corp-'+num).val(e[num]);
    }
    if(parseInt(e.tagged) == 1) {
      $('#corp-fake-tag').css('display','block');
      $('#corp-fake-tag').text('Beware! Scammer!');
      $('#e-corp-isblocked').prop('checked',true);
    }
    else if(parseInt(e.tagged) == 2) {
      $('#corp-fake-tag').css('display','block');
      $('#corp-fake-tag').text('Verify to SL or COMPLIANCE!');
      $('#e-corp-isblocked').prop('checked',true);
    }
    else if(parseInt(e.tagged) == 3) {
      $('#corp-fake-tag').css('display','block');
      $('#corp-fake-tag').text('Do NOT Accept!');
      $('#e-corp-isblocked').prop('checked',true);
    }
    else if(parseInt(e.tagged) == 4) {
      $('#corp-fake-tag').css('display','block');
      $('#corp-fake-tag').text('Do NOT Accept!');
      $('#e-corp-isblocked').prop('checked',true);
    }
    else if(parseInt(e.tagged) == 5) {
      $('#corp-fake-tag').css('display','block');
      $('#fcorp-ake-tag').text('Do NOT Accept!');
      $('#e-corp-isblocked').prop('checked',true);
    }
    else {
      $('#corp-fake-tag').css('display','none');
      $('#e-corp-isblocked').prop('checked',false);
    }
    $('#corp-customer-tagging').val(e.tagged);
    $('#e-corp-remarks').val("");
    if(e.remarks){
      $('#e-corp-remarks').val(e.remarks);
    }
    $('#checking-customer-notification').css('display','none');
    $('#datecreated').text(e.datecreated);
    $('#userfullname').text(e.userfullname);
    $('#userupdatefullname').text(e.userupdatefullname);
    $('#userbranch').text(e.userbranch);
    $('#userupdatebranch').text(e.userupdatebranch);
    if(e.userupdatefullname != "") $('#lastupdate').text(e.lastupdate);
    $('#e-verified').val(e.verified);
    console.log('Create Doc verified');
  }

  function getCustomerTransactionListLocal(customercode){
    $.ajax({
        url: '/customer-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'customer', type: 'getkyctransaction', code: customercode},
        success:function(e){
          if(e){
            console.log(e);
            var transactionSet = [];
						for(num in e){
							transactionSet.push([
								e[num].transdate,
                e[num].branch,
								e[num].transactiontype,
								e[num].transactioncode,
                e[num].receiver,
                e[num].amount,
                '<button type="button" id="'+e[num].id+':'+e[num].transactioncode+'" class="btn btn-danger btn-sm delete-kyc-transaction"><i class="fa fa-trash"></i></button>'
              ]);
						}
						transTable.destroy();
						transTable.draw();
						$('#transactiontable').DataTable({
							"scrollY":"360px",
              keys: true,
              draw: true,
              paging:   false,
              info:     true,
              "autoWidth": true,
              "ordering": true,
							data: transactionSet,
              "dom": '<"top"i>rt<"bottom"flp><"clear">',
							columns: [
								{ title: "Transaction Date" },
								{ title: "Branch Name" },
                { title: "Transaction Type" },
                { title: "Transaction Code" },
                { title: "Receiver Name" },
                { title: "Amount" },
                { title: "" },
							]}),
							transTable = $('#transactiontable').DataTable();
              transTable.draw();
          }
        }
    });
  }
  function getCustomerTransactionListAllLocal(customercode){
    $.ajax({
        url: '/customer-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'customer', type: 'getalltransaction', code: customercode, datefrom: $('#t-datefrom').val(), dateto: $('#t-dateto').val(), option: $('#t-transtype').val()},
        success:function(e){
          if(e){
            console.log(e);
            var transactionSet = [];
						for(num in e){
              var transamnt = parseFloat(e[num].amount);
              if(e[num].category == "OTHER SERVICES"){
                transactionSet.push([
  								e[num].transdate,
                  e[num].branch,
  								e[num].category+' - '+e[num].transtype,
  								e[num].transcode,
                  e[num].receiver,
                  numberWithCommas(transamnt.toFixed(2)),
                  '<button type="button" id="'+e[num].id+':'+e[num].transactioncode+'" class="btn btn-danger btn-sm delete-kyc-transaction"><i class="fa fa-trash"></i></button>'
                ]);
              }
              else {
                transactionSet.push([
  								e[num].transdate,
                  e[num].branch,
  								e[num].category+' - '+e[num].transtype,
  								e[num].transcode,
                  e[num].receiver,
                  numberWithCommas(transamnt.toFixed(2)),
                  '<button type="button" class="btn btn-default btn-sm" disabled><i class="fa fa-trash"></i></button>'
                ]);
              }
						}
						transTableAll.destroy();
						transTableAll.draw();
						$('#transactiontableall').DataTable({
							"scrollY":"360px",
              keys: true,
              draw: true,
              paging:   false,
              info:     true,
              "autoWidth": true,
              "ordering": true,
							data: transactionSet,
              dom: 'Bfrtip',
              buttons: [
                  'copy', 'csv', 'excel', 'pdf', 'print'
              ],
							columns: [
								{ title: "Transaction Date" },
								{ title: "Branch Name" },
                { title: "Transaction Type" },
                { title: "Transaction Code" },
                { title: "Receiver Name" },
                { title: "Amount" },
                { title: "" },
							]}),
							transTableAll = $('#transactiontableall').DataTable();
              transTableAll.draw();
          }
        }
    });
  }
  $(document).on('shown.bs.modal', '#transactiontable', function () {
      transTable.columns.adjust();
  });
  $(document).on('click', '.delete-kyc-transaction', function (event) {
    event.preventDefault();
    var transId = $(this).attr('id');
    transId = transId.split(':')
    console.log(transId);
    var con = confirm("Are your sure to delete this transaction?");
    if(con === true){
      deleteKYCTransaction(transId[0]);
    }
    else alert("Action cancelled");

  });
  function deleteKYCTransaction(transId){
    $.ajax({
      url: '/customer-request',
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type:'POST',
      data: {request: 'customer', type: 'deleteKYCtransaction', code: transId },
      success:function(e){
        if(e){
          console.log(e);
          alert(e.msg);
          getCustomerTransactionListAllLocal(currrentCustCode);
        }
      }
    });
  }
  function getCustomerListCustomBranch(){
    console.log('localbranch');
    $.ajax({
        url: '/customer-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'customer', type: 'localsearchbranch', branch: $('#current-user-branch').val()},
        success:function(e){
          console.log('Branch');
          console.log(e);
          $('#loading-customer-list').css('display','none');
          if(e){
            dataSet = [];
						for(num in e){
              //var isVerified = parseInt(e[num].isblocked);
              var isBlocked = parseInt(e[num].isblocked);
              var isblockedStr = "";
              //if(isVerified == 9) isblockedStr = '<span style="padding-left:10px;color:green;font-weight:bold;">Verified!</span>';
              if(isBlocked > 0){
                if(isBlocked == 9) isblockedStr = '<span style="padding-left:10px;color:green;font-weight:bold;">Verified!</span>';
                if(isBlocked == 1) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Fake Client!</span>';
                else if(isBlocked == 2) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Graylisted!</span>';
                else if(isBlocked == 3) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Blacklisted!</span>';
                else if(isBlocked == 4) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Flagged Entities!</span>';
                else if(isBlocked == 5) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Flagged Individual!</span>';
              }
              console.log(isBlocked);
              console.log(isblockedStr);
              dataSet.push([
                e[num].customercode,
								isblockedStr+'<br>'+e[num].fullname,
								e[num].branchname,
                '<button type="button" id="'+e[num].customercode+'" class="btn btn-info get-customer-btn" data-toggle="modal" data-target="#editCustomer">select</button>']
							);
						}
						dataTable.destroy();
						dataTable.draw();
						$('#customertable').DataTable({
							"scrollY":"360px",
							keys: true,
							data: dataSet,
							"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                            dom: 'Bfrtip',
                            buttons: [
                              'copy', 'csv', 'excel', 'pdf'
                            ],
							columns: [
								{ title: "Customer Code" },
								{ title: "Customer Name" },
                { title: "Branch" },
                { title: "" }
							]}),
							dataTable = $('#customertable').DataTable();
          }
        }
    });
  }
  function getCustomerProfileLocal(customercode){
    $.ajax({
        url: '/customer-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {request: 'customer', type: 'printdata', option: 'custprofile', custcode: customercode},
        success:function(e){
          if(e){
            console.log(e);
            window.open("/reports/print/customer-profile/"+e, "", "width=900,height=700");
          }
        }
    });
  }
  $( document ).ready(function() {
    $('#loading-customer-list').css('display','block');
    getCustomerListCustomBranch();
  });
  $('#delete-customer-local-btn').on('click',function(event){
    event.preventDefault();
    var conr = confirm("Please Confirm Delete!");
    if (conr == true) {
      $('#edit-cus-success-msg').text('');
      $('#edit-cus-error-msg').text('');
      $.ajax({
          url: '/customer-request',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          data: {request: 'customer', type: 'localdeletecust', customercode: $('#e-customercode').val(), branchcode: $('#e-branchcode').val() },
          success:function(e){
            if(e){
              console.log(e);
              if(e.code == 0){
                alert('Customer ' + e.msg + ' successfully deleted!');
                resetCustomerList();
              }
              else alert(e.msg);

          }
        }
      });
    }
  });
</script>

<script>
  $('#newcustimagefile').on('click',function(event){
    event.preventDefault();
    $('#inputFromFile').click();
    $('#customer-image-selection').val("1");
  });
  $('#newdocimagefile').on('click',function(event){
    event.preventDefault();
    $('#inputFromFileDoc').click();
    $('#document-image-selection').val("1");
  });
  $('#newdocimagefile1').on('click',function(event){
    event.preventDefault();
    $('#inputFromFileDoc1').click();
    $('#document-image-selection').val("1");
  });
  $('#newdocimagefile2').on('click',function(event){
    event.preventDefault();
    $('#inputFromFileDoc2').click();
    $('#document-image-selection').val("1");
  });
  function previewImageCustomer(input){
    var img = new Image();
    img.onload = custImageDraw;
    img.onerror = drawFailed;
    img.src = URL.createObjectURL(input.files[0]);
  }
  function previewImageDocument(input){
    var img = new Image();
    img.onload = docImageDraw;
    img.onerror = drawFailed;
    img.src = URL.createObjectURL(input.files[0]);
  }
  function previewImageDocument1(input){
    var img = new Image();
    img.onload = docImageDraw1;
    img.onerror = drawFailed;
    img.src = URL.createObjectURL(input.files[0]);
  }
  function previewImageDocument2(input){
    var img = new Image();
    img.onload = docImageDraw2;
    img.onerror = drawFailed;
    img.src = URL.createObjectURL(input.files[0]);
  }
  function custImageDraw() {
    var canvas = document.getElementById('grabFrameCanvasNew');
    canvas.width = this.width;
    canvas.height = this.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(this, 0,0);
  }
  function docImageDraw() {
    var canvas = document.getElementById('grabFrameCanvasNewDoc');
    canvas.width = this.width;
    canvas.height = this.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(this, 0,0);
  }
  function docImageDraw1() {
    var canvas = document.getElementById('grabFrameCanvasNewDoc1');
    canvas.width = this.width;
    canvas.height = this.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(this, 0,0);
  }
  function docImageDraw2() {
    var canvas = document.getElementById('grabFrameCanvasNewDoc2');
    canvas.width = this.width;
    canvas.height = this.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(this, 0,0);
  }
  function custImageDrawUpdate() {
    var canvas = document.getElementById('grabFrameCanvasUpdate');
    canvas.width = this.width;
    canvas.height = this.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(this, 0,0);
  }
  function docImageDrawUpdate() {
    var canvas = document.getElementById('grabFrameCanvasUpdateDoc');
    canvas.width = this.width;
    canvas.height = this.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(this, 0,0);
  }
  function docImageDrawUpdate1() {
    var canvas1 = document.getElementById('grabFrameCanvasUpdateDoc1');
    canvas1.width = this.width;
    canvas1.height = this.height;
    var ctx1 = canvas1.getContext('2d');
    ctx1.drawImage(this, 0,0);
  }
  function docImageDrawUpdate2() {
    var canvas2 = document.getElementById('grabFrameCanvasUpdateDoc2');
    canvas2.width = this.width;
    canvas2.height = this.height;
    var ctx2 = canvas2.getContext('2d');
    ctx2.drawImage(this, 0,0);
  }

  function drawFailed() {
    alert("The provided file couldn't be loaded as an Image media");
  }
  function addCustomerImageFile(custcode,branchcode){
      var filedata = [];
      var tempdata = "";
      var dataCustFile = new FormData();
      dataCustFile.append('file[]', $("#inputFromFile").get(0).files[0]);
      dataCustFile.append('custcode', custcode);
      dataCustFile.append('branchcode', branchcode);
      $.ajax({
          url: '/add-customer-image-file',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          method: 'POST',
          data: dataCustFile,
          processData: false,
          contentType: false,
          cache:false,
          enctype: 'multipart/form-data',
          error:function(err){
            console.error(err);
          },
          success:function(data){
              console.log(data);
              newImageFile = undefined;
          },
          complete:function(e){
              console.log(e);
              console.log("Request finished.");
          }
      });
    }
  function addCustomerDocImageFile(custcode,branchcode){
      var filedata = [];
      var tempdata = "";
      var dataDocFile = new FormData();
      dataDocFile.append('file[0]', $("#inputFromFileDoc").get(0).files[0]);
      dataDocFile.append('file[1]', $("#inputFromFileDoc1").get(0).files[0]);
      dataDocFile.append('file[2]', $("#inputFromFileDoc2").get(0).files[0]);
      dataDocFile.append('custcode', custcode);
      dataDocFile.append('branchcode', branchcode);
      $.ajax({
          url: '/add-customer-doc-image-file',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          method: 'POST',
          data: dataDocFile,
          processData: false,
          contentType: false,
          cache:false,
          enctype: 'multipart/form-data',
          error:function(err){
            console.error(err);
          },
          success:function(data){
              console.log(data);
              newImageFile = undefined;
          },
          complete:function(e){
              console.log(e);
              console.log("Request finished.");
          }
      });
    }
</script>
<script>
  $('#editcustimagefile').on('click',function(event){
    event.preventDefault();
    $('#editinputFromFile').click();
    $('#customer-image-selection').val("1");
  });
  $('#editdocimagefile').on('click',function(event){
    event.preventDefault();
    $('#editinputFromFileDoc').click();
    $('#document-image-selection').val("1");
  });
  $('#editdocimagefile1').on('click',function(event){
    event.preventDefault();
    $('#editinputFromFileDoc1').click();
    $('#document-image-selection').val("1");
  });
  $('#editdocimagefile2').on('click',function(event){
    event.preventDefault();
    $('#editinputFromFileDoc2').click();
    $('#document-image-selection').val("1");
  });
  function previewImageCustomerEdit(input){
    var img = new Image();
    img.onload = custImageDrawUpdate;
    img.onerror = drawFailed;
    img.src = URL.createObjectURL(input.files[0]);
  }
  function previewImageDocumentEdit(input){
    var img = new Image();
    img.onload = docImageDrawUpdate;
    img.onerror = drawFailed;
    img.src = URL.createObjectURL(input.files[0]);
  }
  function previewImageDocumentEdit1(input){
    var img1 = new Image();
    img1.onload = docImageDrawUpdate1;
    img1.onerror = drawFailed;
    img1.src = URL.createObjectURL(input.files[0]);
  }
  function previewImageDocumentEdit2(input){
    var img2 = new Image();
    img2.onload = docImageDrawUpdate2;
    img2.onerror = drawFailed;
    img2.src = URL.createObjectURL(input.files[0]);
  }
  function getImageForZoom(input){
    console.log(input);
  }
  function updateCustomerImageFile(custcode,branchcode){
      var filedata = [];
      var tempdata = "";
      var dataUpdateFile = new FormData();
      dataUpdateFile.append('file[]', $("#editinputFromFile").get(0).files[0]);
      dataUpdateFile.append('custcode', custcode);
      dataUpdateFile.append('branchcode', branchcode);
      $.ajax({
          url: '/add-customer-image-file',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          method: 'POST',
          data: dataUpdateFile,
          processData: false,
          contentType: false,
          cache:false,
          enctype: 'multipart/form-data',
          error:function(err){
            console.error(err);
          },
          success:function(data){
              console.log(data);
              newImageFile = undefined;
          },
          complete:function(e){
              console.log(e);
              console.log("Request finished.");
          }
      });
    }
  function updateCustomerDocImageFile(custcode,branchcode){
      var filedata = [];
      var tempdata = "";
      var dataFile = new FormData();
      dataFile.append('file[0]', $("#editinputFromFileDoc").get(0).files[0]);
      dataFile.append('file[1]', $("#editinputFromFileDoc1").get(0).files[0]);
      dataFile.append('file[2]', $("#editinputFromFileDoc2").get(0).files[0]);
      dataFile.append('custcode', custcode);
      dataFile.append('branchcode', branchcode);
      $.ajax({
          url: '/add-customer-doc-image-file',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          method: 'POST',
          data: dataFile,
          processData: false,
          contentType: false,
          cache:false,
          enctype: 'multipart/form-data',
          error:function(err){
            console.error(err);
          },
          success:function(data){
              console.log(data);
              newImageFile = undefined;
          },
          complete:function(e){
              console.log(e);
              console.log("Request finished.");
          }
      });
    }
  function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
</script>
<script>
   function enlargeCustomerImage(){
     var canvas = document.getElementById('grabFrameCanvasEnlarge');
     canvas.width = this.width;
     canvas.height = this.height;
     var ctx = canvas.getContext('2d');
     ctx.drawImage(this, 0,0);
   }

   function showEnlargeImage(imgType){
     var imgCanvas = document.getElementById('grabFrameCanvasEnlarge');
     imgCanvas.width = this.width;
     imgCanvas.height = this.height;
     const imgContext = imgCanvas.getContext('2d');
     imgContext.clearRect(0, 0, imgCanvas.width, imgCanvas.height);
     const img = new Image();
     if(imgType === 'picture') img.src = customerImageData;
     else if(imgType === 'document') img.src = customerDocumentData;
     else if(imgType === 'document1') img.src = customerDocumentData1;
     else if(imgType === 'document2') img.src = customerDocumentData2;
     img.onload = enlargeCustomerImage;
   }
</script>
<script>

  $('#tagged-customer-select').on('change',function(e){
    e.preventDefault();
    dataTable.search($(this).val()).draw();
  });
  $('#customer-foreign-search').on('click',function(e){
    e.preventDefault();
    getForeignCustomer();
  });

  function getForeignCustomer(){
    $.ajax({
      url: '/customer-request',
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type:'POST',
      data: {request: 'customer', type: 'foreignCustomer', branch: $('#current-user-branch').val()},
      success:function(e){
        console.log('Foreign');
        console.log(e);
        if(e){
          dataSet = [];
          for(num in e){
            var isBlocked = parseInt(e[num].isblocked);
            var isblockedStr = "";
            if(isBlocked == 1) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Blacklisted</span>';
            else if(isBlocked == 2) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Graylisted</span>';
            else if(isBlocked == 3) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Blacklisted</span>';
            else if(isBlocked == 4) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">BSP Circular Letter</span>';
            else if(isBlocked == 5) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Child Pornography</span>';
            else if(isBlocked == 6) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Entity with notice</span>';
            else if(isBlocked == 7) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Human Trafficking</span>';
            else if(isBlocked == 8) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Limit on Amount</span>';
            else if(isBlocked == 9) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Limit on Transaction Count</span>';
            else if(isBlocked == 10) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Scammer</span>';
            else if(isBlocked == 11) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">SEC Advisory</span>';
            else if(isBlocked == 12) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">SEC Alert</span>';
            else if(isBlocked == 13) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Sexual Exploitation</span>';
            else if(isBlocked == 14) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Terrorism</span>';
            else if(isBlocked == 15) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Flagged Entities</span>';
            else if(isBlocked == 101) isblockedStr = '<span style="padding-left:10px;color:green;font-weight:bold;">Low Risk</span>';
            else if(isBlocked == 102) isblockedStr = '<span style="padding-left:10px;color:yellow;font-weight:bold;">Medium Risk</span>';
            else if(isBlocked == 103) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">High Risk</span>';
            dataSet.push([
              e[num].customercode,
              isblockedStr+'<br>'+e[num].fullname,
              e[num].branchname,
              '<button type="button" id="'+e[num].customercode+'" class="btn btn-info get-customer-btn" data-toggle="modal" data-target="#editCustomer">select</button>']
            );
          }
          dataTable.destroy();
          dataTable.draw();
          $('#customertable').DataTable({
            "scrollY":"360px",
            keys: true,
            data: dataSet,
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            dom: 'Bfrtip',
            buttons: [
              'copy', 'csv', 'excel', 'pdf'
            ],
            columns: [
              { title: "Customer Code" },
              { title: "Customer Name" },
              { title: "Branch" },
              { title: "" }
            ]}),
                  dataTable = $('#customertable').DataTable();
        }
      }
    });
  }
</script>
<script>
  $('#customer-list-search').on('click',function(e){
    e.preventDefault();
    $('#new-list-selection').css('display','block');
    $('#customer-new-listing').css('display','block');
    $('#customer-listing').css('display','none');
  });

  $('#generate-new-list-btn').on('click',function(e){
    e.preventDefault();
    getNewListCustomer();
  });

  function getNewListCustomer(){
    $.ajax({
      url: '/customer-request',
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      type:'POST',
      data: {request: 'customer', type: 'newListing', dates: $('#report-dates').val()},
      success:function(e){
        console.log('NewListing');
        console.log(e);
        if(e){
          dataSet = [];
          for(num in e){
            var isBlocked = parseInt(e[num].isblocked);
            var isblockedStr = "";
            if(isBlocked == 1) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Blacklisted</span>';
            else if(isBlocked == 2) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Graylisted</span>';
            else if(isBlocked == 3) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Blacklisted</span>';
            else if(isBlocked == 4) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">BSP Circular Letter</span>';
            else if(isBlocked == 5) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Child Pornography</span>';
            else if(isBlocked == 6) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Entity with notice</span>';
            else if(isBlocked == 7) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Human Trafficking</span>';
            else if(isBlocked == 8) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Limit on Amount</span>';
            else if(isBlocked == 9) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Limit on Transaction Count</span>';
            else if(isBlocked == 10) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Scammer</span>';
            else if(isBlocked == 11) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">SEC Advisory</span>';
            else if(isBlocked == 12) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">SEC Alert</span>';
            else if(isBlocked == 13) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Sexual Exploitation</span>';
            else if(isBlocked == 14) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Terrorism</span>';
            else if(isBlocked == 15) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">Flagged Entities</span>';
            else if(isBlocked == 101) isblockedStr = '<span style="padding-left:10px;color:green;font-weight:bold;">Low Risk</span>';
            else if(isBlocked == 102) isblockedStr = '<span style="padding-left:10px;color:yellow;font-weight:bold;">Medium Risk</span>';
            else if(isBlocked == 103) isblockedStr = '<span style="padding-left:10px;color:red;font-weight:bold;">High Risk</span>';
            dataSet.push([
              e[num].date,
              e[num].branch,
              e[num].code,
              isblockedStr+'<br>'+e[num].name]
            );
          }
          dataListTable.destroy();
          dataListTable.draw();
          $('#customerListTable').DataTable({
            "scrollY":"360px",
            keys: true,
            data: dataSet,
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            dom: 'Bfrtip',
            buttons: [
              'copy', 'csv', 'excel', 'pdf'
            ],
            columns: [
              { title: "Date" },
              { title: "Branch" },
              { title: "Customer Code" },
              { title: "Customer Name" },
            ]}),
                  dataListTable = $('#customerListTable').DataTable();
        }
      }
    });
  }

  $('#searchFirstnameTextField').keyup(function(){
      dataTable.search($(this).val()).draw();
  });

</script>
<script>
  $('#employment').on('change',function(e){
    e.preventDefault();
    var empVal = $(this).val();
    if(empVal === 'employed' || empVal === 'self'|| empVal === 'business'){
      $('#employmentEmployed').css('display','block');
      $('#employmentGovernment').css('display','none');
      $('#employmentSchool').css('display','none');
      $('#employmentOthers').css('display','none');
    }
    else if(empVal === 'government'){
      $('#employmentEmployed').css('display','none');
      $('#employmentGovernment').css('display','block');
      $('#employmentSchool').css('display','none');
      $('#employmentOthers').css('display','none');
    }
    else if(empVal === 'student'){
      $('#employmentEmployed').css('display','none');
      $('#employmentGovernment').css('display','none');
      $('#employmentSchool').css('display','block');
      $('#employmentOthers').css('display','none');
    }
    else if(empVal === 'others'){
      $('#employmentEmployed').css('display','none');
      $('#employmentGovernment').css('display','none');
      $('#employmentSchool').css('display','none');
      $('#employmentOthers').css('display','block');
    }
  });
  $('#e-employment').on('change',function(e){
    e.preventDefault();
    var empVal = $(this).val();
    if(empVal === 'employed' || empVal === 'self'|| empVal === 'business'){
      $('#e-employmentEmployed').css('display','block');
      $('#e-employmentGovernment').css('display','none');
      $('#e-employmentSchool').css('display','none');
      $('#e-employmentOthers').css('display','none');
    }
    else if(empVal === 'government'){
      $('#e-employmentEmployed').css('display','none');
      $('#e-employmentGovernment').css('display','block');
      $('#e-employmentSchool').css('display','none');
      $('#e-employmentOthers').css('display','none');
    }
    else if(empVal === 'student'){
      $('#e-employmentEmployed').css('display','none');
      $('#e-employmentGovernment').css('display','none');
      $('#e-employmentSchool').css('display','block');
      $('#e-employmentOthers').css('display','none');
    }
    else if(empVal === 'others'){
      $('#e-employmentEmployed').css('display','none');
      $('#e-employmentGovernment').css('display','none');
      $('#e-employmentSchool').css('display','none');
      $('#e-employmentOthers').css('display','block');
    }
  });

  $('#customerType').on('change',function(e){
    e.preventDefault();
    var custTypeVal = $(this).val();
    if(custTypeVal === 'individual'){
      $('#individual-customer').css('display','block');
      $('#corporate-customer').css('display','none');
    }
    else if(custTypeVal === 'corporate'){
      $('#individual-customer').css('display','none');
      $('#corporate-customer').css('display','block');
    }
  });

  function fillEmploymentType(empVal){
    if(empVal === 'employed' || empVal === 'self'|| empVal === 'business'){
      $('#e-employmentEmployed').css('display','block');
      $('#e-employmentGovernment').css('display','none');
      $('#e-employmentSchool').css('display','none');
      $('#e-employmentOthers').css('display','none');
    }
    else if(empVal === 'government'){
      $('#e-employmentEmployed').css('display','none');
      $('#e-employmentGovernment').css('display','block');
      $('#e-employmentSchool').css('display','none');
      $('#e-employmentOthers').css('display','none');
    }
    else if(empVal === 'student'){
      $('#e-employmentEmployed').css('display','none');
      $('#e-employmentGovernment').css('display','none');
      $('#e-employmentSchool').css('display','block');
      $('#e-employmentOthers').css('display','none');
    }
    else if(empVal === 'others'){
      $('#e-employmentEmployed').css('display','none');
      $('#e-employmentGovernment').css('display','none');
      $('#e-employmentSchool').css('display','none');
      $('#e-employmentOthers').css('display','block');
    }
  }
</script>
<script>
  var riskWatchToggle = 0;
  $('#customer-tagging-list').multiSelect();
  $('#customer-tagging-btn').on('click', function (e){
    e.preventDefault();
    if(riskWatchToggle === 0){
      $(this).text("[ hide tagging ]");
      $('#risk-watch-customer-tagging').css('display','block');
      riskWatchToggle = 1;
    }
    else {
      $(this).text("[ show tagging ]");
      $('#risk-watch-customer-tagging').css('display','none');
      riskWatchToggle = 0;
    }
  });
  $('#customer-tagging-list').on('change', function (e){
    var data = $(this).val();
    let textData = '';
    let textValue = '';
    for(let x in data){
      if(textData === '') {
        textValue = data[x];
        textData = riskList[data[x]];
      }
      else {
        textValue = textValue + ':' + data[x];
        textData = textData + ' | ' + riskList[data[x]];
      }
    }
    $('#customer-tagging-display').text(textData);
    $('#risk-watch-tagging').val(textValue);
    console.log($('#customer-tagging-list').val());
  });

  function parseRiskWatch(codes, tagged){
    $('#customer-tagging-display').text('');
    $('#risk-watch-tagging').val('');
    if(codes !== undefined){
      data = codes.split(':');
      let textData = '';
      let textValue = '';
      for(let x in data){
        if(textData === '') {
          textValue = data[x];
          textData = riskList[data[x]];
        }
        else {
          textValue = textValue + ':' + data[x];
          textData = textData + ' | ' + riskList[data[x]];
        }
      }
      $('#customer-tagging-display').text(textData);
      $('#risk-watch-tagging').val(textValue);
      $('#fake-tag').css('display','block');
      $('#fake-tag').text('Do NOT Accept!');
      $('#e-isblocked').prop('checked',true);
      $('#customer-tagging-list').multiSelect('select', data);
    }
    else {
      if(parseInt(tagged) !== 0){
        data = ["" + tagged + ""];
        let textData = '';
        let textValue = '';
        for(let x in data){
          if(textData === '') {
            textValue = data[x];
            textData = riskList[data[x]];
          }
          else {
            textValue = textValue + ':' + data[x];
            textData = textData + ' | ' + riskList[data[x]];
          }
        }
        $('#customer-tagging-display').text(textData);
        $('#risk-watch-tagging').val(textValue);
        $('#customer-tagging-list').multiSelect('select', data);
        if(textData === '' || textData === undefined || textData === "undefined"){
          $('#fake-tag').css('display','none');
          $('#e-isblocked').prop('checked',false);
        }
        else {
          $('#fake-tag').css('display','block');
          $('#fake-tag').text('Do NOT Accept!');
          $('#e-isblocked').prop('checked',true);
        }
        console.log('textData', textData);
      }
      else {
        $('#fake-tag').css('display','none');
        $('#e-isblocked').prop('checked',false);
      }
    }
  }
</script>
@endsection