@extends('gcash.layout.master')
@section('pageTitle')
  <title>GCash</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="/gcash/theme/css/modals.css">
  <link rel="stylesheet" href="/css/invoice.css">
@endsection
@section('metaCSRF')
  <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('contents')
  <style>
    .dataTables_filter {
      display: none;
    }
    .currency-conversion {
      display:none;
    }
    #purchaseorderlisttable td {
      border:1px solid rgba(0,0,0,0.1);
      padding:3px;
    }
    .ui-datatable.borderless thead th,
    .ui-datatable.borderless tbody,
    .ui-datatable.borderless tbody tr,
    .ui-datatable.borderless tbody td {
        border-style: none !important;
        border: none !important;
    }

    .po-alert-issue,
    .po-alert-update,
    .po-alert-failed {
      display:none;
    }
  </style>
  <div class="single-pro-review-area mt-t-30 mg-b-15">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="product-payment-inner-st">
            <ul id="myTabedu1" class="tab-review-design">
              <li class="active"><a href="#basicinfo">Customer Details</a></li>
            </ul>
            <div id="myTabContent" class="tab-content custom-product-edit">
              <div class="product-tab-list tab-pane fade active in" id="createpurchaseorder">
                <div class="row">
                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="review-content-section" style="border:1px solid rgba(0,0,0,0.1);margin-top:0px;padding:20px;">
                        <div id="dropzone1" class="pro-ad">
                          <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                              <div class="review-content-section">
                                <div id="dropzone1" class="pro-ad">
                                  <div class="sparkline13-graph">
                                      <div class="form-group">
                                          <input id="myInputTextField" type="text" class="form-control" placeholder="Search Customer Here...">
                                      </div>
                                      <div class="datatable-dashv1-list custom-datatable-overright" style="border:1px solid rgba(0,0,0,0.1);padding:20px;">
                                          <table id="customertable" class="hover">
                                              <thead>
                                                  <tr>
                                                      <th>Branch</th>
                                                      <th>Cst Code</th>
                                                      <th>Name</th>
                                                      <th></th>
                                                  </tr>
                                              </thead>
                                              <tbody></tbody>
                                          </table>
                                      </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="border-left:1px solid rgba(0,0,0,0.1);">
                              <form class="dropzone dropzone-custom needsclick add-professors" id="save-cust-form">
                                <div class="row">
                                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <div class="form-group">
                                      <label style="font-size:0.9em;">Customer Code: </label> <span id="customeridview" style="font-size:1.1em;font-weight:600;color:rgba(0,0,0,0.6);">{{$customerid}}</span>
                                      <input id="customerid" name="customerid" type="hidden" class="form-control" value="{{$customerid}}" readonly>
                                    </div>
                                  </div>
                                </div>
                                <div style="border:1px solid rgba(0,0,0,0.1);padding:10px;background:rgba(0,0,0,0.06);">
                                  <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                      <div class="form-group">
                                        <label>Branch Name</label>
                                        <select id="branchname-select" class="form-control">
                                          <option value="">--- Select Branch ---</option>
                                          @if(isset($branches))
                                            @foreach($branches as $branchdata)
                                              <option value="{{$branchdata['branchcode']}}">{{$branchdata['branchname']}}</option>
                                            @endforeach
                                          @endif
                                        </select>
                                      </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                      <div class="form-group">
                                        <label>Branch Code</label>
                                        <input id="branchcode" name="branchcode" type="text" class="form-control" value="" readonly>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-lg-6">
                                      <div class="form-group">
                                          <label>First Name</label>
                                          <input id="firstname" name="firstname" type="text" class="form-control" required>
                                      </div>
                                    </div>
                                    <div class="col-lg-6">
                                      <div class="form-group">
                                          <label>Middle Name</label>
                                          <input id="middlename" name="middlename" type="text" class="form-control" placeholder="(Optional)">
                                      </div>
                                    </div>

                                  </div>
                                  <div class="row">
                                    <div class="col-lg-6">
                                      <div class="form-group">
                                          <label>Last Name</label>
                                          <input id="lastname" name="lastname" type="text" class="form-control" required>
                                      </div>
                                    </div>
                                    <div class="col-lg-6">
                                      <div class="form-group">
                                          <label>Mobile Number</label>
                                          <input id="mobilenumber" name="mobilenumber" type="text" class="form-control" >
                                      </div>
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-lg-6">
                                      <div class="form-group">
                                        <label>ID Type</label>
                                        <select id="idtype" name="idtype" class="form-control">
                                          <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-6">
                                      <div class="form-group">
                                          <label>ID Number</label>
                                          <input id="idnumber" name="idnumber" type="text" class="form-control" >
                                      </div>
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-lg-12">
                                      <div class="form-group">
                                          <label>Address</label>
                                          <input id="address" name="address" type="text" class="form-control" placeholder="(Optional)">
                                      </div>
                                    </div>
                                  </div>
                                  <div class="row">
                                      <div class="col-lg-6"></div>
                                      <div class="col-lg-6">
                                        <div class="form-group pull-right">
                                            <input type="hidden" name="endpoint" value="add-customer" readonly/>
                                            <button id="add-cust-btn" class="btn btn-sm btn-success login-submit-cs" type="button">Save</button>
                                            <button id="reset-cust-btn" class="btn btn-sm btn-warning login-submit-cs" type="reset">Reset</button>
                                        </div>
                                      </div>
                                  </div>
                                  <br>
                                  <div class="row">
                                      <div class="col-lg-12">
                                        <div id="error-msg" style="color:red;"></div>
                                        <div id="success-msg" style="color:green;"></div>
                                      </div>
                                  </div>
                                  </div>
                                </div>
                              </form>
                            </div>
                          </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection
@section('js')
<script src="/gcash/theme/js/icheck/icheck.min.js"></script>
<script src="/gcash/theme/js/icheck/icheck-active.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
    var dataTable = $('#customertable').DataTable({
      keys: true,
      draw: true,
      "dom": '<"top"i>rt<"bottom"flp><"clear">',
    });
    var customerList = [];
    var dataSet = [];

    $(function(){
      $( "#transdate" ).datepicker({
        dateFormat: "dd M yy"
      });
      $( "#duedate" ).datepicker({
        dateFormat: "dd M yy"
      });
      $( "#view-transdate" ).datepicker({
        dateFormat: "dd M yy"
      });
      $( "#view-duedate" ).datepicker({
        dateFormat: "dd M yy"
      });

    });
    $('#myInputTextField').keyup(function(){
        dataTable.search($(this).val()).draw();
    });
    $('#add-cust-btn').on('click',function(event){
      event.preventDefault();
      $('#error-msg').html('');
      $('#success-msg').html('');
      $.ajax({
        url:'/add-customer-request',
        headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
        type:'POST',
        data: $('#save-cust-form').serialize(),
        success:function(e){
          if(e){
              console.log(e);
              if(e.code == 1){
                var err = 'The following are required!<br>';
                var errmsg = e.msg;
                for (num in errmsg){
                  err = err + errmsg[num] + ', ';
                }
                $('#error-msg').html(err);
              }
              else if(e.code == 2){
                $('#error-msg').html(e.msg);
              }
              else {
                $('#success-msg').html(e.msg);
              }
            }
          }
        });
    });
    getCustomersList();
    function getCustomersList(){
    	$.ajax({
    			url: '/customer-master-list',
    			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    			method: 'POST',
    			data: {request: 'test'},
    			success:function(e){
    					if(e){
    						console.log(e);
                customerList = [];
                dataSet = [];
    						for(num in e){
    							dataSet.push([
    								e[num].branchcode,
    								e[num].customerid,
    								e[num].firstname + ' ' + e[num].lastname,
                    '<button type="button" id="'+e[num].customerid+'" class="btn btn-info get-customer-btn">select</button>']
    							);
                  customerList[e[num].customerid] = e[num];
    						}
    						dataTable.destroy();
    						dataTable.draw();
    						$('#customertable').DataTable({
    							"scrollY":"360px",
    							keys: true,
    							data: dataSet,
    							"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
    							columns: [
    								{ title: "Branch" },
    								{ title: "Cst Code" },
                    { title: "Name" },
                    { title: "" }
    							]}),
    							dataTable = $('#customertable').DataTable();
    					}
    			},
    	})
    }

    $(document).on('click','.get-customer-btn',function(event){
      var custid = $(this).attr('id');
      for (num in customerList){
        if(num == custid){
          console.log(customerList[num]);
          $('#customerid').val(customerList[num].customerid);
          $('#customeridview').text(customerList[num].customerid);
          $('#firstname').val(customerList[num].firstname);
          $('#lastname').val(customerList[num].lastname);
          $('#middlename').val(customerList[num].middlename);
          $('#mobilenumber').val(customerList[num].mobilenumber);
          $('#idtype').val(customerList[num].documentid);
          $('#idnumber').val(customerList[num].documentnum);
          $('#branchcode').val(customerList[num].branchcode);
          $('#branchname-select').val(customerList[num].branchcode);
          $('#address').val(customerList[num].address);
        }
      }
    });

    $('#branchname-select').on('change',function(event){
      event.preventDefault();
      var brcode = $(this).val();
      $('#branchcode').val(brcode);
    });
</script>
@endsection