@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;
    }
    .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">Jewellery - <b>Gold</b></h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Jewellery</li>
              <li class="breadcrumb-item active">Gold</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>
                <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">
                <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>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>

        <div class="row" style="display:none;">
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-info">
              <div class="inner">
                <h3>150</h3>

                <p>New Orders</p>
              </div>
              <div class="icon">
                <i class="ion ion-bag"></i>
              </div>
              <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-success">
              <div class="inner">
                <h3>53<sup style="font-size: 20px">%</sup></h3>

                <p>Bounce Rate</p>
              </div>
              <div class="icon">
                <i class="ion ion-stats-bars"></i>
              </div>
              <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-warning">
              <div class="inner">
                <h3>44</h3>

                <p>User Registrations</p>
              </div>
              <div class="icon">
                <i class="ion ion-person-add"></i>
              </div>
              <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-danger">
              <div class="inner">
                <h3>65</h3>

                <p>Unique Visitors</p>
              </div>
              <div class="icon">
                <i class="ion ion-pie-graph"></i>
              </div>
              <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
        </div>
        <!-- /.row -->
        <!-- Main row -->
        <div class="row" style="display:none;">
          <!-- Left col -->
          <section class="col-lg-7 connectedSortable">
            <!-- Custom tabs (Charts with tabs)-->
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">
                  <i class="fas fa-chart-pie mr-1"></i>
                  Sales
                </h3>
                <div class="card-tools">
                  <ul class="nav nav-pills ml-auto">
                    <li class="nav-item">
                      <a class="nav-link active" href="#revenue-chart" data-toggle="tab">Area</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#sales-chart" data-toggle="tab">Donut</a>
                    </li>
                  </ul>
                </div>
              </div><!-- /.card-header -->
              <div class="card-body">
                <div class="tab-content p-0">
                  <!-- Morris chart - Sales -->
                  <div class="chart tab-pane active" id="revenue-chart"
                       style="position: relative; height: 300px;">
                      <canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>
                   </div>
                  <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;">
                    <canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>
                  </div>
                </div>
              </div><!-- /.card-body -->
            </div>
            <!-- /.card -->

            <!-- DIRECT CHAT -->
            <div class="card direct-chat direct-chat-primary">
              <div class="card-header">
                <h3 class="card-title">Direct Chat</h3>

                <div class="card-tools">
                  <span data-toggle="tooltip" title="3 New Messages" class="badge badge-primary">3</span>
                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts"
                          data-widget="chat-pane-toggle">
                    <i class="fas fa-comments"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <!-- Conversations are loaded here -->
                <div class="direct-chat-messages">
                  <!-- Message. Default to the left -->
                  <div class="direct-chat-msg">
                    <div class="direct-chat-infos clearfix">
                      <span class="direct-chat-name float-left">Alexander Pierce</span>
                      <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
                    </div>
                    <!-- /.direct-chat-infos -->
                    <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
                    <!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                      Is this template really for free? That's unbelievable!
                    </div>
                    <!-- /.direct-chat-text -->
                  </div>
                  <!-- /.direct-chat-msg -->

                  <!-- Message to the right -->
                  <div class="direct-chat-msg right">
                    <div class="direct-chat-infos clearfix">
                      <span class="direct-chat-name float-right">Sarah Bullock</span>
                      <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
                    </div>
                    <!-- /.direct-chat-infos -->
                    <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
                    <!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                      You better believe it!
                    </div>
                    <!-- /.direct-chat-text -->
                  </div>
                  <!-- /.direct-chat-msg -->

                  <!-- Message. Default to the left -->
                  <div class="direct-chat-msg">
                    <div class="direct-chat-infos clearfix">
                      <span class="direct-chat-name float-left">Alexander Pierce</span>
                      <span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
                    </div>
                    <!-- /.direct-chat-infos -->
                    <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
                    <!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                      Working with AdminLTE on a great new app! Wanna join?
                    </div>
                    <!-- /.direct-chat-text -->
                  </div>
                  <!-- /.direct-chat-msg -->

                  <!-- Message to the right -->
                  <div class="direct-chat-msg right">
                    <div class="direct-chat-infos clearfix">
                      <span class="direct-chat-name float-right">Sarah Bullock</span>
                      <span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
                    </div>
                    <!-- /.direct-chat-infos -->
                    <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
                    <!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                      I would love to.
                    </div>
                    <!-- /.direct-chat-text -->
                  </div>
                  <!-- /.direct-chat-msg -->

                </div>
                <!--/.direct-chat-messages-->

                <!-- Contacts are loaded here -->
                <div class="direct-chat-contacts">
                  <ul class="contacts-list">
                    <li>
                      <a href="#">
                        <img class="contacts-list-img" src="dist/img/user1-128x128.jpg">

                        <div class="contacts-list-info">
                          <span class="contacts-list-name">
                            Count Dracula
                            <small class="contacts-list-date float-right">2/28/2015</small>
                          </span>
                          <span class="contacts-list-msg">How have you been? I was...</span>
                        </div>
                        <!-- /.contacts-list-info -->
                      </a>
                    </li>
                    <!-- End Contact Item -->
                    <li>
                      <a href="#">
                        <img class="contacts-list-img" src="dist/img/user7-128x128.jpg">

                        <div class="contacts-list-info">
                          <span class="contacts-list-name">
                            Sarah Doe
                            <small class="contacts-list-date float-right">2/23/2015</small>
                          </span>
                          <span class="contacts-list-msg">I will be waiting for...</span>
                        </div>
                        <!-- /.contacts-list-info -->
                      </a>
                    </li>
                    <!-- End Contact Item -->
                    <li>
                      <a href="#">
                        <img class="contacts-list-img" src="dist/img/user3-128x128.jpg">

                        <div class="contacts-list-info">
                          <span class="contacts-list-name">
                            Nadia Jolie
                            <small class="contacts-list-date float-right">2/20/2015</small>
                          </span>
                          <span class="contacts-list-msg">I'll call you back at...</span>
                        </div>
                        <!-- /.contacts-list-info -->
                      </a>
                    </li>
                    <!-- End Contact Item -->
                    <li>
                      <a href="#">
                        <img class="contacts-list-img" src="dist/img/user5-128x128.jpg">

                        <div class="contacts-list-info">
                          <span class="contacts-list-name">
                            Nora S. Vans
                            <small class="contacts-list-date float-right">2/10/2015</small>
                          </span>
                          <span class="contacts-list-msg">Where is your new...</span>
                        </div>
                        <!-- /.contacts-list-info -->
                      </a>
                    </li>
                    <!-- End Contact Item -->
                    <li>
                      <a href="#">
                        <img class="contacts-list-img" src="dist/img/user6-128x128.jpg">

                        <div class="contacts-list-info">
                          <span class="contacts-list-name">
                            John K.
                            <small class="contacts-list-date float-right">1/27/2015</small>
                          </span>
                          <span class="contacts-list-msg">Can I take a look at...</span>
                        </div>
                        <!-- /.contacts-list-info -->
                      </a>
                    </li>
                    <!-- End Contact Item -->
                    <li>
                      <a href="#">
                        <img class="contacts-list-img" src="dist/img/user8-128x128.jpg">

                        <div class="contacts-list-info">
                          <span class="contacts-list-name">
                            Kenneth M.
                            <small class="contacts-list-date float-right">1/4/2015</small>
                          </span>
                          <span class="contacts-list-msg">Never mind I found...</span>
                        </div>
                        <!-- /.contacts-list-info -->
                      </a>
                    </li>
                    <!-- End Contact Item -->
                  </ul>
                  <!-- /.contacts-list -->
                </div>
                <!-- /.direct-chat-pane -->
              </div>
              <!-- /.card-body -->
              <div class="card-footer">
                <form action="#" method="post">
                  <div class="input-group">
                    <input type="text" name="message" placeholder="Type Message ..." class="form-control">
                    <span class="input-group-append">
                      <button type="button" class="btn btn-primary">Send</button>
                    </span>
                  </div>
                </form>
              </div>
              <!-- /.card-footer-->
            </div>
            <!--/.direct-chat -->

            <!-- TO DO List -->
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">
                  <i class="ion ion-clipboard mr-1"></i>
                  To Do List
                </h3>

                <div class="card-tools">
                  <ul class="pagination pagination-sm">
                    <li class="page-item"><a href="#" class="page-link">&laquo;</a></li>
                    <li class="page-item"><a href="#" class="page-link">1</a></li>
                    <li class="page-item"><a href="#" class="page-link">2</a></li>
                    <li class="page-item"><a href="#" class="page-link">3</a></li>
                    <li class="page-item"><a href="#" class="page-link">&raquo;</a></li>
                  </ul>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <ul class="todo-list" data-widget="todo-list">
                  <li>
                    <!-- drag handle -->
                    <span class="handle">
                      <i class="fas fa-ellipsis-v"></i>
                      <i class="fas fa-ellipsis-v"></i>
                    </span>
                    <!-- checkbox -->
                    <div  class="icheck-primary d-inline ml-2">
                      <input type="checkbox" value="" name="todo1" id="todoCheck1">
                      <label for="todoCheck1"></label>
                    </div>
                    <!-- todo text -->
                    <span class="text">Design a nice theme</span>
                    <!-- Emphasis label -->
                    <small class="badge badge-danger"><i class="far fa-clock"></i> 2 mins</small>
                    <!-- General tools such as edit or delete-->
                    <div class="tools">
                      <i class="fas fa-edit"></i>
                      <i class="fas fa-trash-o"></i>
                    </div>
                  </li>
                  <li>
                    <span class="handle">
                      <i class="fas fa-ellipsis-v"></i>
                      <i class="fas fa-ellipsis-v"></i>
                    </span>
                    <div  class="icheck-primary d-inline ml-2">
                      <input type="checkbox" value="" name="todo2" id="todoCheck2" checked>
                      <label for="todoCheck2"></label>
                    </div>
                    <span class="text">Make the theme responsive</span>
                    <small class="badge badge-info"><i class="far fa-clock"></i> 4 hours</small>
                    <div class="tools">
                      <i class="fas fa-edit"></i>
                      <i class="fas fa-trash-o"></i>
                    </div>
                  </li>
                  <li>
                    <span class="handle">
                      <i class="fas fa-ellipsis-v"></i>
                      <i class="fas fa-ellipsis-v"></i>
                    </span>
                    <div  class="icheck-primary d-inline ml-2">
                      <input type="checkbox" value="" name="todo3" id="todoCheck3">
                      <label for="todoCheck3"></label>
                    </div>
                    <span class="text">Let theme shine like a star</span>
                    <small class="badge badge-warning"><i class="far fa-clock"></i> 1 day</small>
                    <div class="tools">
                      <i class="fas fa-edit"></i>
                      <i class="fas fa-trash-o"></i>
                    </div>
                  </li>
                  <li>
                    <span class="handle">
                      <i class="fas fa-ellipsis-v"></i>
                      <i class="fas fa-ellipsis-v"></i>
                    </span>
                    <div  class="icheck-primary d-inline ml-2">
                      <input type="checkbox" value="" name="todo4" id="todoCheck4">
                      <label for="todoCheck4"></label>
                    </div>
                    <span class="text">Let theme shine like a star</span>
                    <small class="badge badge-success"><i class="far fa-clock"></i> 3 days</small>
                    <div class="tools">
                      <i class="fas fa-edit"></i>
                      <i class="fas fa-trash-o"></i>
                    </div>
                  </li>
                  <li>
                    <span class="handle">
                      <i class="fas fa-ellipsis-v"></i>
                      <i class="fas fa-ellipsis-v"></i>
                    </span>
                    <div  class="icheck-primary d-inline ml-2">
                      <input type="checkbox" value="" name="todo5" id="todoCheck5">
                      <label for="todoCheck5"></label>
                    </div>
                    <span class="text">Check your messages and notifications</span>
                    <small class="badge badge-primary"><i class="far fa-clock"></i> 1 week</small>
                    <div class="tools">
                      <i class="fas fa-edit"></i>
                      <i class="fas fa-trash-o"></i>
                    </div>
                  </li>
                  <li>
                    <span class="handle">
                      <i class="fas fa-ellipsis-v"></i>
                      <i class="fas fa-ellipsis-v"></i>
                    </span>
                    <div  class="icheck-primary d-inline ml-2">
                      <input type="checkbox" value="" name="todo6" id="todoCheck6">
                      <label for="todoCheck6"></label>
                    </div>
                    <span class="text">Let theme shine like a star</span>
                    <small class="badge badge-secondary"><i class="far fa-clock"></i> 1 month</small>
                    <div class="tools">
                      <i class="fas fa-edit"></i>
                      <i class="fas fa-trash-o"></i>
                    </div>
                  </li>
                </ul>
              </div>
              <!-- /.card-body -->
              <div class="card-footer clearfix">
                <button type="button" class="btn btn-info float-right"><i class="fas fa-plus"></i> Add item</button>
              </div>
            </div>
            <!-- /.card -->
          </section>
          <!-- /.Left col -->
          <!-- right col (We are only adding the ID to make the widgets sortable)-->
          <section class="col-lg-5 connectedSortable">

            <!-- Map card -->
            <div class="card bg-gradient-primary">
              <div class="card-header border-0">
                <h3 class="card-title">
                  <i class="fas fa-map-marker-alt mr-1"></i>
                  Visitors
                </h3>
                <!-- card tools -->
                <div class="card-tools">
                  <button type="button"
                          class="btn btn-primary btn-sm daterange"
                          data-toggle="tooltip"
                          title="Date range">
                    <i class="far fa-calendar-alt"></i>
                  </button>
                  <button type="button"
                          class="btn btn-primary btn-sm"
                          data-card-widget="collapse"
                          data-toggle="tooltip"
                          title="Collapse">
                    <i class="fas fa-minus"></i>
                  </button>
                </div>
                <!-- /.card-tools -->
              </div>
              <div class="card-body">
                <div id="world-map" style="height: 250px; width: 100%;"></div>
              </div>
              <!-- /.card-body-->
              <div class="card-footer bg-transparent">
                <div class="row">
                  <div class="col-4 text-center">
                    <div id="sparkline-1"></div>
                    <div class="text-white">Visitors</div>
                  </div>
                  <!-- ./col -->
                  <div class="col-4 text-center">
                    <div id="sparkline-2"></div>
                    <div class="text-white">Online</div>
                  </div>
                  <!-- ./col -->
                  <div class="col-4 text-center">
                    <div id="sparkline-3"></div>
                    <div class="text-white">Sales</div>
                  </div>
                  <!-- ./col -->
                </div>
                <!-- /.row -->
              </div>
            </div>
            <!-- /.card -->

            <!-- solid sales graph -->
            <div class="card bg-gradient-info">
              <div class="card-header border-0">
                <h3 class="card-title">
                  <i class="fas fa-th mr-1"></i>
                  Sales Graph
                </h3>

                <div class="card-tools">
                  <button type="button" class="btn bg-info btn-sm" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn bg-info btn-sm" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
              <div class="card-body">
                <canvas class="chart" id="line-chart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
              </div>
              <!-- /.card-body -->
              <div class="card-footer bg-transparent">
                <div class="row">
                  <div class="col-4 text-center">
                    <input type="text" class="knob" data-readonly="true" value="20" data-width="60" data-height="60"
                           data-fgColor="#39CCCC">

                    <div class="text-white">Mail-Orders</div>
                  </div>
                  <!-- ./col -->
                  <div class="col-4 text-center">
                    <input type="text" class="knob" data-readonly="true" value="50" data-width="60" data-height="60"
                           data-fgColor="#39CCCC">

                    <div class="text-white">Online</div>
                  </div>
                  <!-- ./col -->
                  <div class="col-4 text-center">
                    <input type="text" class="knob" data-readonly="true" value="30" data-width="60" data-height="60"
                           data-fgColor="#39CCCC">

                    <div class="text-white">In-Store</div>
                  </div>
                  <!-- ./col -->
                </div>
                <!-- /.row -->
              </div>
              <!-- /.card-footer -->
            </div>
            <!-- /.card -->

            <!-- Calendar -->
            <div class="card bg-gradient-success">
              <div class="card-header border-0">

                <h3 class="card-title">
                  <i class="far fa-calendar-alt"></i>
                  Calendar
                </h3>
                <!-- tools card -->
                <div class="card-tools">
                  <!-- button with a dropdown -->
                  <div class="btn-group">
                    <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown">
                      <i class="fas fa-bars"></i></button>
                    <div class="dropdown-menu float-right" role="menu">
                      <a href="#" class="dropdown-item">Add new event</a>
                      <a href="#" class="dropdown-item">Clear events</a>
                      <div class="dropdown-divider"></div>
                      <a href="#" class="dropdown-item">View calendar</a>
                    </div>
                  </div>
                  <button type="button" class="btn btn-success btn-sm" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-success btn-sm" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
                <!-- /. tools -->
              </div>
              <!-- /.card-header -->
              <div class="card-body pt-0">
                <!--The calendar -->
                <div id="calendar" style="width: 100%"></div>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </section>
          <!-- right col -->
        </div>
        <!-- /.row (main row) -->
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- Modal -->
  <div id="jewelleryTransaction" class="modal fade" role="dialog">
    <div class="modal-dialog modal-xl">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">New Transaction</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div style="padding:15px;">
            <div class="row">
              <div class="col-md-3 col-sm-3 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;margin-bottom:10px;">
                      <img id="customer-image" src="" style="width:100%;height:210px;" /><br>
                      <a href="" id="editcustimage" data-toggle="modal" data-target="#customerProfile">View Full Details</a>
                    </div>
                  </div>
              </div>
              <div class="col-md-4">
                <div style="padding:15px;margin-bottom:10px;background:rgba(0,0,0,0.08);">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="customercode">Customer Code</label>
                        <input type="text" class="form-control form-control-sm" id="customercode" readonly>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="customerbranch">Branch</label>
                        <input type="text" class="form-control form-control-sm" id="customerbranch" readonly>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="exampleInputEmail1">First Name</label>
                        <input type="text" class="form-control form-control-sm" id="customerfirstname" readonly>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label>Last Name</label>
                        <input type="text" class="form-control form-control-sm" id="customerlastname" readonly>
                        <!-- /.input group -->
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label for="customeraddress">Present Address</label>
                        <input type="text" class="form-control form-control-sm" id="customeraddress" readonly>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-5">
                <div style="padding:15px;margin-bottom:10px;background:rgba(0,0,0,0.08);">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="exampleInputEmail1">Transaction Code</label>
                        <input type="text" class="form-control form-control-sm" id="exampleInputEmail1">
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="exampleInputEmail1">Papeleta Number</label>
                        <input type="text" class="form-control form-control-sm" id="exampleInputEmail2">
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <!-- <div class="col-md-6">
                      <div class="form-group">
                        <label for="exampleInputEmail1">Category</label>
                        <select class="form-control form-control-sm">
                          <option>select</option>
                          <option>Gold</option>
                          <option>Silver</option>
                        </select>
                      </div>
                    </div> -->
                    <div class="col-md-6">
                      <div class="form-group">
                        <label>Pawned Date</label>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <i class="far fa-calendar-alt"></i>
                            </span>
                          </div>
                          <input type="date" class="form-control form-control-sm float-right">
                        </div>
                        <!-- /.input group -->
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label>Maturity Date</label>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <i class="far fa-calendar-alt"></i>
                            </span>
                          </div>
                          <input type="date" class="form-control form-control-sm float-right">
                        </div>
                        <!-- /.input group -->
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label>Redemption Date</label>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <i class="far fa-calendar-alt"></i>
                            </span>
                          </div>
                          <input type="date" class="form-control form-control-sm float-right">
                        </div>
                        <!-- /.input group -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <hr>
            <h4 style="font-weight:600;font-size:1.1em;">Item Details</h4>
            <div class="row">
              <div class="col-md-6">
                <div style="padding:15px;margin-bottom:10px;background:rgba(0,0,0,0.08);height:275px;">
                  <div class="row">
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="exampleInputEmail1">Item Code</label>
                        <input type="text" class="form-control form-control-sm" id="itemcode">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="exampleInputEmail1">Item Type</label>
                        <select class="form-control form-control-sm">
                          <option value="Gold">Gold</option>
                          <option value="Stone">Stone</option>
                        </select>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="exampleInputEmail1">Purity</label>
                        <input type="text" class="form-control form-control-sm" id="purity">
                        <!-- <select class="form-control form-control-sm">
                          <option>select</option>
                          <option>14K</option>
                          <option>18K</option>
                          <option>19K</option>
                          <option>21K</option>
                          <option>22K</option>
                          <option>24K</option>
                        </select> -->
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="exampleInputEmail1">Quantity</label>
                        <input type="number" class="form-control form-control-sm" id="exampleInputEmail1">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="exampleInputEmail1">Weight (grams)</label>
                        <input type="text" class="form-control form-control-sm" id="exampleInputEmail1">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="exampleInputEmail1">Appraisal Amount</label>
                        <input type="text" class="form-control form-control-sm" id="exampleInputEmail1">
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="exampleInputEmail1">Service Charge</label>
                        <input type="text" class="form-control form-control-sm" id="exampleInputEmail1">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <label for="exampleInputEmail1">Total Amount</label>
                        <input type="text" class="form-control form-control-sm" id="exampleInputEmail1">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <label style="color:transparent;">x</label><br>
                        <button class="btn btn-primary btn-sm form-control form-control-sm">Add Item</button>
                      </div>
                    </div>
                  </div>

                </div>

              </div>
              <div class="col-md-6">
                <div style="padding:15px;margin-bottom:10px;background:rgba(0,0,0,0.08);height:275px;">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label for="exampleInputEmail1">Summary</label>
                        <textarea class="form-control form-control-sm"></textarea>
                      </div>
                    </div>
                    <div class="col-md-12">
                      <div class="form-group">
                        <label for="exampleInputEmail1">Description</label>
                        <textarea class="form-control form-control-sm" rows="4"></textarea>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-md-8">
                <div class="card" style="height:400px;background:#e8faff;">
                  <div class="card-header">
                    <h3 class="card-title">Item List</h3>
                    <!-- <button class="btn btn-sm btn-success float-right" data-toggle="modal" data-target="#newItem">Add New Item</button> -->
                  </div>
                  <!-- /.card-header -->
                  <div class="card-body">
                    <table id="jewelleryItems" class="table table-bordered table-hover" style="background:#fff;">
                      <thead>
                        <tr>
                          <th>Item Code</th>
                          <th>Summary</th>
                          <th>Type</th>
                          <th>Weight</th>
                          <th>Purity</th>
                          <th>Amount</th>
                          <th></th>
                        </tr>
                      </thead>
                      <tbody>
                      <tr>
                        <td>IC0191</td>
                        <td>Necklace</td>
                        <td>Gold</td>
                        <td>1.5gms</td>
                        <td>18K</td>
                        <td>2,000.00</td>
                        <td><button class="btn btn-sm btn-warning" data-toggle="modal" data-target="#">view</button></td>
                      </tr>
                      <tr>
                        <td>IC0195</td>
                        <td>Pendant</td>
                        <td>Stone</td>
                        <td>0.65gms</td>
                        <td>0.978K</td>
                        <td>8,000.00</td>
                        <td><button class="btn btn-sm btn-warning" data-toggle="modal" data-target="#">view</button></td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                  <!-- /.card-body -->
                </div>
              </div>
              <div class="col-md-4">
                  <div class="card" style="background:rgba(0,0,0,0.06);height:400px;">
                    <div class="card-header border-transparent">
                      <h3 class="card-title">Item Summary</h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body p-0">
                      <div class="table-responsive">
                        <table class="table m-0">
                          <thead>
                          <tr>
                            <th>Item Code</th>
                            <th><span class="float-right">Amount</span></th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr>
                            <td><a href="">IC0191</a></td>
                            <td><div class="sparkbar float-right" data-color="#00a65a" data-height="20">2,000.00</div></td>
                          </tr>
                          <tr>
                            <td><a href="">IC0195</a></td>
                            <td><div class="sparkbar float-right" data-color="#00a65a" data-height="20">8,000.00</div></td>
                          </tr>
                          </tbody>
                          <tfoot>
                            <tr>
                              <th>Total</th>
                              <th><span class="float-right">10,000.00</span></th>
                            </tr>
                          </tfoot>
                        </table>
                      </div>
                      <!-- /.table-responsive -->
                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer clearfix">
                      <a href="javascript:void(0)" class="btn btn-sm btn-primary float-left">Save as Draft</a>
                      <a href="javascript:void(0)" class="btn btn-sm btn-info float-right">Confirm Transaction</a>
                    </div>
                    <!-- /.card-footer -->
                  </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <div 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>
          <form id="add-customer-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>CUSTOMER 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 customer-input" value="">
                            </div>
                            <div class="form-group">
                              <label>Branch Code</label>
                              <input id="n-branchcode" name="branchcode" type="text" class="form-control form-control-sm customer-input" value="" readonly>
                            </div>
                            <div class="form-group">
                              <label>Customer Code</label>
                              <input id="n-customercode" name="customercode" type="text" class="form-control form-control-sm customer-input" value="" readonly>
                            </div>
                          </div>
                          <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 class="form-group">
                                <label>Middle Name</label>
                                <input id="middlename" name="middlename" type="text" class="form-control form-control-sm customer-input">
                            </div>
                            <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-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 class="btn btn-info btn-sm float-center startCameraButton" id="newcustimage" data-toggle="modal" data-target="#getImageForm">Open Camera</button>
                                </div>
                              </div>
                          </div>
                        </div>
                        <hr>
                        <div class="row">
                          <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="sss">SSS</option>
                                <option value="gsis">GSIS</option>
                                <option value="government">Government ID</option>
                                <option value="school">School ID</option>
                                <option value="driverlicense">Driver's License</option>
                                <option value="prclicense">PRC License Card</option>
                                <option value="votersid">Voter's ID</option>
                                <option value="postal">Postal ID</option>
                                <option value="company">Company ID</option>
                                <option value="passport">Passport</option>
                                <option value="others">Others</option>
                              </select>
                            </div>

                          </div>
                          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                            <div class="form-group">
                                <label>ID Number</label>
                                <input id="idnumber" name="idnumber" 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>Date of Birth</label>
                                <input id="dateofbirth" name="dateofbirth" type="date" class="form-control form-control-sm customer-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>Nationality</label>
                                <input id="nationality-select" name="nationality" 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>Mobile Number</label>
                                <input id="mobilenumber" name="mobilenumber" 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>
                                <input id="sourceoffund" name="sourceoffund" type="text" class="form-control form-control-sm customer-input" >
                            </div>
                          </div>

                        </div>
                        <div style="border:1px solid rgba(0,0,0,0.1);padding-left:15px;padding-right:15px;margin-top:10px;margin-bottom:20px;">
                          <div class="row">
                            <div class="col-md-12 col-sm-12 col-xs-12">
                              <div class="form-group">
                                  <label>House # / Building / Street</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>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>
                        <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="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>Name of Company</label>
                                <input id="companyname" name="companyname" type="text" class="form-control form-control-sm customer-input" placeholder="">
                            </div>
                          </div>
                        </div>
                      </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>
                </div>
            </div>
          </form>
          <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 id="newItem" class="modal fade" role="dialog">
    <div class="modal-dialog modal-md">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Add Item</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div style="padding:15px;">
            <div style="padding:15px;margin-bottom:10px;background:rgba(0,0,0,0.08);">
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Transaction Code</label>
                    <input type="text" class="form-control form-control-sm" id="exampleInputEmail1">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Papeleta Number</label>
                    <input type="text" class="form-control form-control-sm" id="exampleInputEmail2">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Category</label>
                    <select class="form-control form-control-sm">
                      <option>Gold</option>
                      <option>Silver</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Customer ID</label>
                    <input type="text" class="form-control form-control-sm" id="exampleInputEmail2">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Customer Name</label>
                    <input type="text" class="form-control form-control-sm" id="exampleInputEmail2">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Branch</label>
                    <select class="form-control form-control-sm">
                      <option>Perea</option>
                      <option>Makati</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">
                    <label>Pawned Date</label>
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <span class="input-group-text">
                          <i class="far fa-calendar-alt"></i>
                        </span>
                      </div>
                      <input type="date" class="form-control form-control-sm float-right">
                    </div>
                    <!-- /.input group -->
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label>Maturity Date</label>
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <span class="input-group-text">
                          <i class="far fa-calendar-alt"></i>
                        </span>
                      </div>
                      <input type="date" class="form-control form-control-sm float-right">
                    </div>
                    <!-- /.input group -->
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label>Redemption Date</label>
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <span class="input-group-text">
                          <i class="far fa-calendar-alt"></i>
                        </span>
                      </div>
                      <input type="date" class="form-control form-control-sm float-right">
                    </div>
                    <!-- /.input group -->
                  </div>
                </div>
              </div>
            </div>
          </div>
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </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="customerProfile">
    <div class="modal-dialog modal-md">
      <div class="modal-content auto-selector">
          <div class="modal-header" style="background:#fffef0;">
            <h4 class="modal-title"style="font-size:1em;font-weight:600;">Customer Details</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body" style="background:#deffff;">
            <div id="customer-profile-details"></div>
          </div>
        <hr>
      </div>
    </div>
  </div>

@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 = $('#customertable').DataTable({
      keys: true,
      draw: true,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
  $('#add-customer-btn').on('click',function(event){
    event.preventDefault();
    $('#new-cus-success-msg').text('');
    $('#new-cus-error-msg').text('');
    $('.customer-input').css('border','1px solid rgba(0,0,0,0.08)');
    if(newImageFile == undefined) {
      $('#new-cus-error-msg').html('Error Encountered!<br>No Image Added!');
      $('#new-cus-error-msg').show();
    }
    else if(newImageFile == null) {
      $('#new-cus-error-msg').html('Error Encountered!<br>No Image Added!');
      $('#new-cus-error-msg').show();
    }
    else{
      $.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 {
                $('#new-cus-success-msg').text('Customer Successfully Added!');
                $('#new-cus-success-msg').show();
                addCustomerImages($('#n-customercode').val(),$('#n-branchcode').val());
              }
            }
          }
      });
    }

  });
  $('#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('');
    $.ajax({
        url: '/update-customer-details',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#edit-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") $('#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();
              if(newImageFile != undefined) {
                addCustomerImages($('#e-customercode').val(),$('#e-branchcode').val());
              }
            }
        }
      }
    });
  });
  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);
            $('#n-branchcode').val(e.branchcode);
            $('#n-customercode').val(e.customercode);
          }
        }
    });
  }
  function getCustomerList(){
    $.ajax({
        url: '/get-address-location',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {loctype: 'customerlist'},
        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="#jewelleryTransaction">select</button>']
							);
						}
						dataTable.destroy();
						dataTable.draw();
						$('#customertable').DataTable({
							"scrollY":"360px",
							keys: true,
							data: dataSet,
							"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
							columns: [
								{ title: "Customer Code" },
								{ title: "Customer Code" },
                { title: "Branch" },
                { title: "" }
							]}),
							dataTable = $('#customertable').DataTable();
          }
        }
    });
  }
  function getCustomerDetails(customercode){
    $.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);
              var brgy = "";
              var municipality = "";
              var province = "";
              var street = "";
              for(num in e){
                if(num == "customercode") $('#customercode').val(e[num]);
                else if(num == "firstname") $('#customerfirstname').val(e[num]);
                else if(num == "lastname") $('#customerlastname').val(e[num]);
                else if(num == "municipality") municipality = e[num];
                else if(num == "barangay") brgy = e[num];
                else if(num == "street") street = e[num];
                else if(num == "province") province = e[num];
                else if(num == "branchcode") $('#customerbranch').val(e[num]);
                else $('#e-'+num).val(e[num]);
              }
              var address = street + " " + brgy + " " + municipality + " " + province;
              $("#customeraddress").val(address);
              var custdetails = '<span>Customer Code:</span> <b>'+e.customercode+'</b></br>'+
                '<span style="padding-right:10px;">First Name:</span> <b>'+e.firstname+'</b></br>'+
                '<span style="padding-right:10px;">Middle Name:</span> <b>'+e.middlename+'</b></br>'+
                '<span style="padding-right:10px;">Last Name:</span> <b>'+e.lastname+'</b></br>'+
                '<span style="padding-right:10px;">ID Type:</span> <b>'+e.idtype+'</b></br>'+
                '<span style="padding-right:10px;">ID Number:</span> <b>'+e.idnumber+'</b></br>'+
                '<span style="padding-right:10px;">Date of Birth:</span> <b>'+e.dateofbirth+'</b></br>'+
                '<span style="padding-right:10px;">Nationality:</span> <b>'+e.nationality+'</b></br>'+
                '<span style="padding-right:10px;">Mobile Number:</span> <b>'+e.mobilenumber+'</b></br>'+
                '<span style="padding-right:10px;">Source of Fund:</span> <b>'+e.sourceoffund+'</b></br>'+
                '<span style="padding-right:10px;">Building / Street:</span> <b>'+e.street+'</b></br>'+
                '<span style="padding-right:10px;">Barangay:</span> <b>'+e.barangay+'</b></br>'+
                '<span style="padding-right:10px;">Municipality:</span> <b>'+e.municipality+'</b></br>'+
                '<span style="padding-right:10px;">Province:</span> <b>'+e.province+'</b></br>'+
                '<span style="padding-right:10px;">Employment:</span> <b>'+e.employment+'</b></br>'+
                '<span style="padding-right:10px;">Company Name:</span> <b>'+e.companyname+'</b></br>';
              $('#customer-profile-details').html(custdetails);
              if(e.image){
                $('#customer-image').prop('src',e.image);
              }
          }
        }
    });
  }
  $(document).on('click','.get-customer-btn',function(event){
    var customercode = $(this).attr('id');
    console.log(customercode);
    getCustomerDetails(customercode);

  });
  $("#branch-select").on('change',function(){
    var brname = $(this).val();
    console.log(brname);
    getBranchCode(brname);
  });
  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
  });
  $("#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 imagewidth = 640;
  var imageheight = 480;
  var ximagewidth = 640;
  var yimageheight = 480;
  function onGetUserMediaButtonClick() {
    navigator.mediaDevices.getUserMedia({video: true, audio: false})
    .then(mediaStream => {
      document.querySelector('video').srcObject = mediaStream;
      const track = mediaStream.getVideoTracks()[0];
      imageCapture = new ImageCapture(track);
    })
    .catch(error => ChromeSamples.log(error));
  }
  function onGrabFrameButtonClick(imgCaptureID) {
    imageCapture.grabFrame()
    .then(imageBitmap => {
      var selectorId = "grabFrameCanvasNew";
      if(imgCaptureID == "newcustimage") selectorId = "grabFrameCanvasNew";
      else if(imgCaptureID == "editcustimage") selectorId = "grabFrameCanvasUpdate";
      const canvas = document.querySelector('#'+selectorId);
      drawCanvas(canvas, imageBitmap);
      newImageFile = canvas.toDataURL('image/png', 1.0);
    })
    .catch(error => ChromeSamples.log(error));
  }
  function onTakePhotoButtonClick() {
    imageCapture.takePhoto()
    .then(blob => createImageBitmap(blob))
    .then(imageBitmap => {
      const canvas = document.querySelector('#takePhotoCanvas');
      console.log(imageBitmap);
      drawCanvas(canvas, imageBitmap);
    })
    .catch(error => ChromeSamples.log(error));
    player.srcObject.getVideoTracks().forEach(track => track.stop());
  }
  /* Utils */
  function drawCanvas(canvas, img) {
    canvas.width = getComputedStyle(canvas).width.split('px')[0];
    canvas.height = getComputedStyle(canvas).height.split('px')[0];
    let ratio  = Math.min(canvas.width / img.width, canvas.height / img.height);
    let x = (canvas.width - img.width * ratio) / 2;
    let y = (canvas.height - img.height * ratio) / 2;
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,
        x, y, img.width * ratio, img.height * ratio);
    console.log("cwidth:"+canvas.width);
    console.log("cheight:"+canvas.height);
    console.log("iwidth:"+img.width);
    console.log("iheight:"+img.height);
    console.log("rwidth:"+(img.width));
    console.log("rheight:"+(img.height));
    console.log("ratio:"+ratio);
    console.log("x:"+x);
    console.log("y:"+y);
    imagewidth = img.width;
    imageheight = img.height;
  }
  function addCustomerImages(custcode,branchcode){
      var filedata = [];
      var tempdata = "";
      var dataFile = new FormData();
      for(num in newImageFile){
        tempdata = tempdata + newImageFile[num];
        if((num % 500) == 0){
          dataFile.append('file[]', tempdata);
          tempdata = "";
        }
      }
      dataFile.append('custcode', custcode);
      dataFile.append('branchcode', branchcode);
      $.ajax({
          url: '/add-customer-image',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          type:'POST',
          method: 'POST',
          data: dataFile,
          processData: false,
          contentType: false,
          cache:false,
          enctype: 'multipart/form-data',
          error:function(err){
            console.error(err);
          },
          success:function(data){
              console.log(data);
              newImageFile = undefined;
              console.log("test");
              var selectorId = "grabFrameCanvasNew";
              const canvas = document.querySelector('#grabFrameCanvasUpdate');
              canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
          },
          complete:function(e){
              console.log(e);
              console.log("Request finished.");
          }
      });
    }
  $('#captureImage').on('click',function(event){
    event.preventDefault();
    //onTakePhotoButtonClick();
    onGrabFrameButtonClick();
  });
  $('#take-photo-btn').on('click',function(event){
    event.preventDefault();
    var imgCaptureID = $('#current-user-image-loc').val();
    onGrabFrameButtonClick(imgCaptureID);
  });
  $('.startCameraButton').on('click',function(event){
    event.preventDefault();
    var imgCaptureID = $(this).attr('id');
    $('#current-user-image-loc').val(imgCaptureID);
    onGetUserMediaButtonClick();
  });
</script>
@endsection