@extends('layout.master')
@section('pageTitle')
  <title>Pawnshop Management System</title>
@endsection
@section('metaCSRF')
  <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('contents')
  <style>
    label {
      font-size:0.9em !important;
    }
    .pac-container {
      z-index: 99999999 !important;
    }
    .ui-front {
      z-index: 9999 !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">User</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">User</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">Users List</h3>
                <button class="btn btn-success btn-sm float-right" data-toggle="modal" data-target="#newUser">New User</button>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <table id="userstable" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>User Code</th>
                      <th>User Name</th>
                      <th>Branch</th>
                      <th>User Level</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
                  <tfoot>
                  <tr>
                    <th>User Code</th>
                    <th>User Name</th>
                    <th>Branch</th>
                    <th>User Level</th>
                    <th></th>
                  </tr>
                  </tfoot>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <div class="modal fade" id="newUser" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content auto-selector">
        <div class="modal-header">
          <h4 class="modal-title">New User</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
          <form id="add-user-form">
            <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">
                  <label>USER DETAILS</label>
                  <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="branch-select" name="branchname" type="text" class="form-control form-control-sm user-input" value="">
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="form-group">
                            <label>Branch Code</label>
                            <input id="branchcode" name="branchcode" type="text" class="form-control form-control-sm user-input" value="" readonly>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="form-group">
                            <label>User Code</label>
                            <input id="usercode" name="usercode" type="text" class="form-control form-control-sm user-input" value="" readonly>
                          </div>
                        </div>
                      </div>
                      <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 user-input">
                          </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="middlename" name="middlename" type="text" class="form-control form-control-sm user-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 user-input">
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="form-group">
                            <label>User Level</label>
                            <select id="userlevel" name="userlevel" class="form-control form-control-sm user-input">
                              <option value="branch">Branch</option>
                              <option value="appraiser">Appraiser</option>
                              <option value="accounting">Accounting</option>
                              <option value="treasury">Treasury</option>
                              <option value="audit">Audit</option>
                              <option value="rematado">Rematado</option>
                              <option value="sales">Sales</option>
                              <option value="it">IT</option>
                              <option value="headoffice">Head Office</option>
                              <option value="administrator">Administrator</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="form-group">
                              <label>Email Address</label>
                              <input id="email" name="email" type="text" class="form-control form-control-sm user-input" placeholder="">
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="form-group">
                              <label>Contact Number</label>
                              <input id="contact" name="contact" type="text" class="form-control form-control-sm user-input" placeholder="">
                          </div>
                        </div>
                        <div class="col-lg-12">
                          <div class="form-group">
                              <label>Comment</label>
                              <input id="comment" name="comment" type="text" class="form-control form-control-sm user-input" placeholder="">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <br>
              <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">
                  <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                      <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                          <div class="form-group">
                              <label>Password</label>
                              <input id="password1" name="password1" type="password" class="form-control form-control-sm user-input">
                          </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                          <div class="form-group">
                              <label>Confirm Password</label>
                              <input id="password2" name="password2" type="password" class="form-control form-control-sm user-input">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <br>
              <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">
                  <label>RESTRICTIONS</label>
                  <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="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[gold]" type="checkbox" id="gold">
                            <label for="gold" class="custom-control-label">Gold</label>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[appliance]" type="checkbox" id="appliance">
                            <label for="appliance" class="custom-control-label">Appliance</label>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[branch]" type="checkbox" id="branch">
                            <label for="branch" class="custom-control-label">Branch</label>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[watch]" type="checkbox" id="watch">
                            <label for="watch" class="custom-control-label">Watch</label>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[vehicle]" type="checkbox" id="vehicle">
                            <label for="vehicle" class="custom-control-label">Motor / Vehicle</label>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[customer]" type="checkbox" id="customer">
                            <label for="customer" class="custom-control-label">Customer</label>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[silver]" type="checkbox" id="silver">
                            <label for="silver" class="custom-control-label">Silver</label>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[otherstorage]" type="checkbox" id="otherstorage">
                            <label for="otherstorage" class="custom-control-label">Other Storage</label>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[users]" type="checkbox" id="users">
                            <label for="users" class="custom-control-label">Users</label>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[gadgets]" type="checkbox" id="gadgets">
                            <label for="gadgets" class="custom-control-label">Gadgets</label>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[otherservices]" type="checkbox" id="otherservices">
                            <label for="otherservices" class="custom-control-label">Other Services</label>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[users]" type="checkbox" id="settings">
                            <label for="settings" class="custom-control-label">Settings</label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <br>
              <div class="row">
                  <div class="col-lg-12">
                    <div id="new-user-error-msg" style="color:red;"></div>
                    <div id="new-user-success-msg" style="color:green;"></div>
                  </div>
              </div>
            </div>
          </form>
          <div class="modal-footer">
            <button id="add-user-btn" type="button" class="btn btn-success">Add New User</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>

        <hr>
      </div>
    </div>
  </div>
  <div class="modal fade" id="editUser" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content auto-selector">
        <div class="modal-header">
          <h4 class="modal-title">Edit User</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
          <form id="edit-user-form">
            <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">
                  <label>USER DETAILS</label>
                  <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 user-input" value="">
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="form-group">
                            <label>Branch Code</label>
                            <input id="e-branchcode" name="branchcode" type="text" class="form-control form-control-sm user-input" value="" readonly>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="form-group">
                            <label>User Code</label>
                            <input id="e-usercode" name="usercode" type="text" class="form-control form-control-sm user-input" value="" readonly>
                          </div>
                        </div>
                      </div>
                      <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 user-input">
                          </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-middlename" name="middlename" type="text" class="form-control form-control-sm user-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 user-input">
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="form-group">
                            <label>User Level</label>
                            <select id="e-userlevel" name="userlevel" class="form-control form-control-sm user-input">
                              <option value="branch">Branch</option>
                              <option value="appraiser">Appraiser</option>
                              <option value="accounting">Accounting</option>
                              <option value="treasury">Treasury</option>
                              <option value="audit">Audit</option>
                              <option value="rematado">Rematado</option>
                              <option value="sales">Sales</option>
                              <option value="it">IT</option>
                              <option value="headoffice">Head Office</option>
                              <option value="administrator">Administrator</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="form-group">
                              <label>Email Address</label>
                              <input id="e-email" name="email" type="text" class="form-control form-control-sm user-input" placeholder="">
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="form-group">
                              <label>Contact Number</label>
                              <input id="e-contact" name="contact" type="text" class="form-control form-control-sm user-input" placeholder="">
                          </div>
                        </div>
                        <div class="col-lg-12">
                          <div class="form-group">
                              <label>Comment</label>
                              <input id="e-comment" name="comment" type="text" class="form-control form-control-sm user-input" placeholder="">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <br>

              <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">
                  <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                      <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                          <div class="form-group">
                              <label>Password</label>
                              <input id="e-password1" name="password1" type="password" class="form-control form-control-sm user-input">
                          </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                          <div class="form-group">
                              <label>Confirm Password</label>
                              <input id="e-password2" name="password2" type="password" class="form-control form-control-sm user-input">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <br>
              <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">
                  <label>RESTRICTIONS</label>
                  <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="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[gold]" type="checkbox" id="e-gold">
                            <label for="e-gold" class="custom-control-label">Gold</label>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[appliance]" type="checkbox" id="e-appliance">
                            <label for="e-appliance" class="custom-control-label">Appliance</label>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[branch]" type="checkbox" id="e-branch">
                            <label for="e-branch" class="custom-control-label">Branch</label>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[watch]" type="checkbox" id="e-watch">
                            <label for="e-watch" class="custom-control-label">Watch</label>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[vehicle]" type="checkbox" id="e-vehicle">
                            <label for="e-vehicle" class="custom-control-label">Motor / Vehicle</label>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[customer]" type="checkbox" id="e-customer">
                            <label for="e-customer" class="custom-control-label">Customer</label>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[silver]" type="checkbox" id="e-silver">
                            <label for="e-silver" class="custom-control-label">Silver</label>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[otherstorage]" type="checkbox" id="e-otherstorage">
                            <label for="e-otherstorage" class="custom-control-label">Other Storage</label>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[users]" type="checkbox" id="e-users">
                            <label for="e-users" class="custom-control-label">Users</label>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[gadgets]" type="checkbox" id="e-gadgets">
                            <label for="e-gadgets" class="custom-control-label">Gadgets</label>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[otherservices]" type="checkbox" id="e-otherservices">
                            <label for="e-otherservices" class="custom-control-label">Other Services</label>
                          </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                          <div class="custom-control custom-checkbox">
                            <input class="custom-control-input restriction-class" name="restrictions[settings]" type="checkbox" id="e-settings">
                            <label for="e-settings" class="custom-control-label">Settings</label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <br>
              <div class="row">
                  <div class="col-lg-12">
                    <div id="edit-user-error-msg" style="color:red;"></div>
                    <div id="edit-user-success-msg" style="color:green;"></div>
                  </div>
              </div>
            </div>
          </form>
          <div class="modal-footer">
            <button id="edit-user-btn" type="button" class="btn btn-success">Update User</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>

        <hr>
      </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>
  var dataTable = $('#userstable').DataTable({
      keys: true,
      draw: true,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
  $('#add-user-btn').on('click',function(event){
    event.preventDefault();
    $('#new-user-success-msg').text('');
    $('#new-user-error-msg').text('');
    $('.user-input').css('border','1px solid rgba(0,0,0,0.08)');
    $.ajax({
        url: '/add-user-details',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#add-user-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            if(e.code > 0){
              var errmsg = "";
              if(e.code == 1){
                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');
                  $('#'+errarr[num]).css('border','1px solid red');
                  errmsg = errmsg + errarr[num] + ",";
                }
              }
              else errmsg = errmsg + " " + e.msg;
              $('#new-user-error-msg').html('Error Encountered!<br>'+errmsg);
              $('#new-user-error-msg').show();
            }
            else {
              $('#new-user-success-msg').text(e.msg);
              $('#new-user-success-msg').show();
              generateNewID();
            }
          }
        }
    });
  });
  $('#edit-user-btn').on('click',function(event){
    event.preventDefault();
    $('.user-input').css('border','1px solid rgba(0,0,0,0.08)');
    $('#edit-user-success-msg').html('');
    $('#edit-user-error-msg').html('');
    $.ajax({
        url: '/update-user-details',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#edit-user-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            if(e.code > 0){
              var errarr = e.msg;
              if(e.code == 1){
                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-user-error-msg').html('Error Encountered!<br>'+errarr);
              $('#edit-user-error-msg').show();
            }
            else {
              $('#edit-user-success-msg').text('User Successfully Updated!');
              $('#edit-user-success-msg').show();
            }
        }
      }
    });
  });
  function getBranchCode(branchname){
    $.ajax({
        url: '/get-address-location',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {loctype: 'branchcode', locname: branchname},
        success:function(e){
          if(e){
            console.log(e);
            $('#branchcode').val(e.branchcode);
            $('#customercode').val(e.customercode);
          }
        }
    });
  }
  function getUserList(){
    $.ajax({
        url: '/get-address-location',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {loctype: 'userlist'},
        success:function(e){
          if(e){
            console.log(e);
            dataSet = [];
						for(num in e){
							dataSet.push([
								e[num].usercode,
								e[num].firstname + ' ' + e[num].middlename + ' ' +e[num].lastname,
                e[num].branchname,
								e[num].userlevel,
                '<button type="button" id="'+e[num].usercode+'" class="btn btn-info get-user-btn" data-toggle="modal" data-target="#editUser">select</button>']
							);
						}
						dataTable.destroy();
						dataTable.draw();
						$('#userstable').DataTable({
							"scrollY":"360px",
							keys: true,
							data: dataSet,
							"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
							columns: [
								{ title: "User Code" },
								{ title: "User Name" },
                { title: "Branch" },
                { title: "User Level" },
                { title: "" }
							]}),
							dataTable = $('#userstable').DataTable();
          }
        }
    });
  }
  function getUserDetails(usercode){
    $('#edit-user-success-msg').text('');
    $('#edit-user-error-msg').text('');
    $('.restriction-class').prop('checked',false);
    $.ajax({
        url: '/get-address-location',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {loctype: 'userdetails', code: usercode},
        success:function(e){
          if(e){
            console.log(e);
              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 if(num == "restrictions"){
                  var restrct = e[num];

                  for(num1 in restrct){
                    console.log(restrct[num1]);
                    $('#e-'+restrct[num1]).prop('checked',true);
                  }
                }
                else if(num == "password") {
                  $('#e-password1').val(e[num]);
                  $('#e-password2').val(e[num]);
                }
                else $('#e-'+num).val(e[num]);
              }
          }
        }
    });
  }
  $(document).on('click','.get-user-btn',function(event){
    var usercode = $(this).attr('id');
    console.log(usercode);
    getUserDetails(usercode);

  });
  $("#branch-select").on('change',function(){
    var brname = $(this).val();
    console.log(brname);
    getBranchCode(brname);
  });
  getUserList();
  generateNewID();
  function generateNewID(){
    $.ajax({
        url: '/get-user-id',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        success:function(e){
          if(e){
            console.log(e);
            $('#usercode').val(e);
        }
      }
    });
  }
</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
  });
  $("#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>

@endsection