@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">Branch 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 Code</th>
                                                      <th>Branch 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-branch-form">
                                <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>
                                        <input id="branchname" name="branchname" type="text" class="form-control" value="">
                                      </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="">
                                      </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="">
                                      </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-branch" readonly/>
                                            <button id="add-branch-btn" class="btn btn-sm btn-success login-submit-cs" type="button">Save</button>
                                            <button id="reset-branch-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 branchList = [];
    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-branch-btn').on('click',function(event){
      event.preventDefault();
      $('#error-msg').html('');
      $('#success-msg').html('');
      $.ajax({
        url:'/add-branch-request',
        headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
        type:'POST',
        data: $('#save-branch-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: '/branch-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);
                branchList = [];
                dataSet = [];
    						for(num in e){
    							dataSet.push([
    								e[num].branchcode,
    								e[num].branchname,
                    '<button type="button" id="'+e[num].branchcode+'" class="btn btn-info get-branch-btn">select</button>']
    							);
                  branchList[e[num].branchcode] = 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 Code" },
                    { title: "Branch Name" },
                    { title: "" }
    							]}),
    							dataTable = $('#customertable').DataTable();
    					}
    			},
    	})
    }

    $(document).on('click','.get-branch-btn',function(event){
      var custid = $(this).attr('id');
      for (num in branchList){
        if(num == custid){
          console.log(branchList[num]);
          $('#branchcode').val(branchList[num].branchcode);
          $('#branchname').val(branchList[num].branchname);
          $('#address').val(branchList[num].address);

        }
      }
    });
</script>
@endsection