@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">Schedules</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">Schedules</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-md-12">
            <form id="add-schedule-form">
              <div class="modal-body">
                <div class="row">
                  <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                    <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>SCHEDULE 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>Schedule Code</label>
                                  <input id="schedulecode" name="schedulecode" type="text" class="form-control form-control-sm" value="">
                                </div>
                              </div>
                              <div class="col-lg-8 col-md-8 col-sm-4 col-xs-12">
                                <div class="form-group">
                                  <label>Description</label>
                                  <input id="description" name="description" type="text" class="form-control form-control-sm" value="">
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div style="border:1px solid rgba(0,0,0,0.1);padding:15px;">
                                  <div class="form-group">
                                    <h4 style="font-size:1.2em;">Date Granted From</h4>
                                    <hr>
                                    <div class="row">
                                      <div class="col-md-6">
                                        <label>Month</label>
                                        <select class="form-control" id="dategrantedFromMonth" name="dategrantedFromMonth">
                                          <option value="1">January</option>
                                          <option value="2">February</option>
                                          <option value="3">March</option>
                                          <option value="4">April</option>
                                          <option value="5">May</option>
                                          <option value="6">June</option>
                                          <option value="7">July</option>
                                          <option value="8">August</option>
                                          <option value="9">September</option>
                                          <option value="10">October</option>
                                          <option value="11">November</option>
                                          <option value="12">December</option>
                                        </select>
                                      </div>
                                      <div class="col-md-6">
                                        <label>Day</label>
                                        <select class="form-control" id="dategrantedFromDay" name="dategrantedFromDay">
                                                                                    @while($days < 32)
                                          <option value="{{$days}}">{{$days}}</option>
                                                                                    @endwhile
                                        </select>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div style="border:1px solid rgba(0,0,0,0.1);padding:15px;">
                                  <div class="form-group">
                                    <h4 style="font-size:1.2em;">Date Granted To</h4>
                                    <hr>
                                    <div class="row">
                                      <div class="col-md-6">
                                        <label>Month</label>
                                        <select class="form-control" id="dategrantedToMonth" name="dategrantedToMonth">
                                          <option value="1">January</option>
                                          <option value="2">February</option>
                                          <option value="3">March</option>
                                          <option value="4">April</option>
                                          <option value="5">May</option>
                                          <option value="6">June</option>
                                          <option value="7">July</option>
                                          <option value="8">August</option>
                                          <option value="9">September</option>
                                          <option value="10">October</option>
                                          <option value="11">November</option>
                                          <option value="12">December</option>
                                        </select>
                                      </div>
                                      <div class="col-md-6">
                                        <label>Day</label>
                                        <select class="form-control" id="dategrantedToDay" name="dategrantedToDay">
                                                                                    @while($days < 32)
                                          <option value="{{$days}}">{{$days}}</option>
                                                                                    @endwhile
                                        </select>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <br>
                            <div class="row">
                              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div style="border:1px solid rgba(0,0,0,0.1);padding:15px;">
                                  <div class="form-group">
                                    <h4 style="font-size:1.2em;">Last Redemption Date</h4>
                                    <hr>
                                    <div class="row">
                                      <div class="col-md-6">
                                        <label>Month</label>
                                        <select class="form-control" id="lastRedemptionMonth" name="lastRedemptionMonth">
                                          <option value="1">January</option>
                                          <option value="2">February</option>
                                          <option value="3">March</option>
                                          <option value="4">April</option>
                                          <option value="5">May</option>
                                          <option value="6">June</option>
                                          <option value="7">July</option>
                                          <option value="8">August</option>
                                          <option value="9">September</option>
                                          <option value="10">October</option>
                                          <option value="11">November</option>
                                          <option value="12">December</option>
                                        </select>
                                      </div>
                                      <div class="col-md-6">
                                        <label>Day</label>
                                        <select class="form-control" id="lastRedemptionDay" name="lastRedemptionDay">
                                                                                    @while($days < 32)
                                          <option value="{{$days}}">{{$days}}</option>
                                                                                    @endwhile
                                        </select>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div style="border:1px solid rgba(0,0,0,0.1);padding:15px;">
                                  <div class="form-group">
                                    <h4 style="font-size:1.2em;">Pick Up Month</h4>
                                    <hr>
                                    <div class="row">
                                      <div class="col-md-6">
                                        <label>Month</label>
                                        <select class="form-control" id="pickupMonth" name="pickupMonth">
                                          <option value="1">January</option>
                                          <option value="2">February</option>
                                          <option value="3">March</option>
                                          <option value="4">April</option>
                                          <option value="5">May</option>
                                          <option value="6">June</option>
                                          <option value="7">July</option>
                                          <option value="8">August</option>
                                          <option value="9">September</option>
                                          <option value="10">October</option>
                                          <option value="11">November</option>
                                          <option value="12">December</option>
                                        </select>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <br>
                        <div class="row">
                          <div class="col-md-12">
                            <div class="row">
                              <div class="col-lg-8 col-xs-12"></div>
                              <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                <div class="form-group">
                                  <input type="hidden" name="request" value="schedule" />
                                  <input type="hidden" name="type" value="add" />
                                  <button id="add-schedule-btn" type="button" class="btn btn-sm btn-primary form-control">Save</button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-lg-12">
                      <div id="new-branch-error-msg" style="color:red;"></div>
                      <div id="new-branch-success-msg" style="color:green;"></div>
                    </div>
                </div>
              </div>
            </form>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Schedule List</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <table id="example2" class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>Schedule Code</th>
                      <th>Loan Granted</th>
                      <th>Last Date Redemption</th>
                      <th>Pickup Date</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    @if(isset($schedules))
                      @foreach($schedules as $schedule)
                        <tr>
                          <td>{{$schedule['code']}}</td>
                          <td>{{$schedule['loangranted']}}</td>
                          <td>{{$schedule['lastredeem']}}</td>
                          <td>{{$schedule['pickup']}}</td>
                          <td><button id="{{$schedule['code']}}" class="btn btn-info btn-sm edit-branch-select" data-toggle="modal" data-target="#editBranch">Edit</button></td>
                        </tr>
                      @endforeach
                    @endif
                  </tbody>
                  <tfoot>
                  <tr>
                    <th>Schedule Code</th>
                    <th>Loan Granted</th>
                    <th>Last Date Redemption</th>
                    <th>Pickup Date</th>
                    <th></th>
                  </tr>
                  </tfoot>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- Modal -->
  <div class="modal fade" id="newBranch" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content auto-selector">
        <div class="modal-header">
          <h4 class="modal-title">New Branch</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
          <form id="add-branch-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>BRANCH 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 ID</label>
                              <input id="branchid" name="branchid" type="text" class="form-control form-control-sm" value="" readonly>
                            </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" value="">
                            </div>
                          </div>
                          <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                            <div class="form-group">
                              <label>Branch Name</label>
                              <input id="branchname" name="branchname" type="text" class="form-control form-control-sm" value="">
                            </div>
                          </div>
                          <div class="col-lg-12">
                            <div class="form-group">
                              <label>Branch Group</label>
                              <select id="branchgroup" name="branchgroup" class="form-control form-control-sm">
                                <option value="JOYAS">JOYAS</option>
                                <option value="PCORTEZ">PCORTEZ</option>
                              </select>
                            </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>Building / Street</label>
                                  <input id="address-building" name="building" type="text" class="form-control form-control-sm" 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" 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" 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" value="">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <br>

              <div class="row">
                  <div class="col-lg-12">
                    <div id="new-branch-error-msg" style="color:red;"></div>
                    <div id="new-branch-success-msg" style="color:green;"></div>
                  </div>
              </div>
            </div>
          </form>
          <div class="modal-footer">
            <button id="add-branch-btn" type="button" class="btn btn-success">Add New Branch</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>

        <hr>
      </div>
    </div>
  </div>
  <div class="modal fade" id="editBranch" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content auto-selector">
        <div class="modal-header">
          <h4 class="modal-title">Edit Branch</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
          <form id="edit-branch-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>BRANCH 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 ID</label>
                              <input id="e-branchid" name="branchid" type="text" class="form-control form-control-sm" value="" readonly>
                            </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" value="">
                            </div>
                          </div>
                          <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-branchname" name="branchname" type="text" class="form-control form-control-sm" value="">
                            </div>
                          </div>
                          <div class="col-lg-6">
                            <div class="form-group">
                              <label>Branch Group</label>
                              <select id="e-branchgroup" name="branchgroup" class="form-control form-control-sm">
                                <option value="JOYAS">JOYAS</option>
                                <option value="PCORTEZ">PCORTEZ</option>
                              </select>
                            </div>
                          </div>
                          <div class="col-lg-6">
                            <div class="form-group">
                              <label>Corporation</label>
                              <select id="e-corporationgroup" name="corporationgroup" class="form-control form-control-sm">
                                <option value="NA">--Select--</option>
                                <option value="GLOBAL">Global Reliance Management</option>
                              </select>
                            </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>Building / Street</label>
                                  <input id="e-address-building" name="building" type="text" class="form-control form-control-sm" value="">
                              </div>
                            </div>
                            <div class="col-md-4 col-sm-4 col-xs-12">
                              <div class="form-group">
                                  <label>Province</label>
                                  <input id="e-address-province" name="province" type="text" class="form-control form-control-sm" value="">
                              </div>
                            </div>
                            <div class="col-md-4 col-sm-4 col-xs-12">
                              <div class="form-group">
                                  <label>Municipality</label>
                                  <input id="e-address-municipality" name="municipality" type="text" class="form-control form-control-sm" value="">
                              </div>
                            </div>
                            <div class="col-md-4 col-sm-4 col-xs-12">
                              <div class="form-group">
                                  <label>Barangay</label>
                                  <input id="e-address-barangay" name="barangay" type="text" class="form-control form-control-sm" value="">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <br>

              <div class="row">
                  <div class="col-lg-12">
                    <div id="edit-branch-error-msg" style="color:red;"></div>
                    <div id="edit-branch-success-msg" style="color:green;"></div>
                  </div>
              </div>
            </div>
          </form>
          <div class="modal-footer">
            <button id="edit-branch-btn" type="button" class="btn btn-success">Save Branch</button>
            <button id="delete-branch-btn" type="button" class="btn btn-danger">Delete Branch</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>
<script>
  $('#add-schedule-btn').on('click',function(event){
    event.preventDefault();
    $('#new-branch-error-msg').html('');
    $('#new-branch-success-msg').html('');
    $.ajax({
        url: '/settings-request',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#add-schedule-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
          }
        }
    });
  });
  $('#new-branch-btn').on('click',function(event){
    event.preventDefault();
    console.log('test');
    $.ajax({
        url: '/get-branch-id',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        success:function(e){
          if(e){
            console.log(e);
            generateNewID();
        }
      }
    });
  });
  function generateNewID(){
    $.ajax({
        url: '/get-branch-id',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        success:function(e){
          if(e){
            console.log(e);
            $('#branchid').val(e);
        }
      }
    });
  }
  $('.edit-branch-select').on('click',function(event){
    event.preventDefault();
    var branchcode = $(this).attr('id');
    $('#edit-branch-error-msg').html('');
    $('#edit-branch-success-msg').html('');
    $.ajax({
        url: '/get-branch-details',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {branchcode: branchcode },
        success:function(e){
          if(e){
            console.log(e);
            $('#e-branchid').val(e.branchid);
            $('#e-branchcode').val(e.branchcode);
            $('#e-branchname').val(e.branchname);
            $('#e-address-building').val(e.building);
            $('#e-address-barangay').val(e.barangay);
            $('#e-address-municipality').val(e.municipality);
            $('#e-address-province').val(e.province);
            $('#e-branchgroup').val(e.branchgroup);
            $('#e-corporationgroup').val(e.corporationgroup);
          }
        }
    });
  });
  $('#edit-branch-btn').on('click',function(event){
    event.preventDefault();
    $('#edit-branch-error-msg').html('');
    $('#edit-branch-success-msg').html('');
    $.ajax({
        url: '/save-branch-details',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: $('#edit-branch-form').serialize(),
        success:function(e){
          if(e){
            console.log(e);
            if(e.code > 0){
              var err = e.msg;
              var errmsg = "Error Encounterd!<br>";
              for(num in err){
                errmsg = errmsg + err[num] + ", ";
              }
              $('#edit-branch-error-msg').html(errmsg);
            }
            else {
              $('#edit-branch-success-msg').html("Branch Successfully " + e.msg);
            }

          }
        }
    });
  });
  $('#delete-branch-btn').on('click',function(event){
    event.preventDefault();
    $('#edit-branch-error-msg').html('');
    $('#delete-branch-success-msg').html('');
    var brnccode = $('#e-branchcode').val();
    $.ajax({
        url: '/delete-branch-details',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'POST',
        data: {branchcode: brnccode},
        success:function(e){
          if(e){
            console.log(e);
            if(e.code > 0){
              var err = e.msg;
              var errmsg = "Error Encounterd!<br>";
              $('#edit-branch-error-msg').html(errmsg);
            }
            else {
              $('#edit-branch-success-msg').html("Branch Successfully " + e.msg);
            }

          }
        }
    });
  });
</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,
    });
    $('#branchname-select').on('change',function(event){
      event.preventDefault();
      var brcode = $(this).val();
      $('#branchcode').val(brcode);
    });
  });
  $("#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-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