@extends('layouts.backend')
@section('mainContentArea')
<div class="card card-default">
    <div class="card-header">
        <h4>
            Manage Store Staff
            {!! $addBtn !!}
        </h4>
        <input type="hidden" name="urlid" id="urlid" value="{{ request()->id }}">
    </div>
    <div class="card-body">
        <table class="table table-bordered data-table">
            <thead>
                <tr>
                    <th>S.No.</th>
                    <th>POS</th>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Telephone</th>
                    <th>Discount</th>
                    <th>Target</th>
                    <th>Active</th>
                    <th width="100px">Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
<!-- The Modal -->
<div class="modal" id="hsnModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title"></h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
          <form action="{{ route('oc-pos-billers.store') }}" method="post" name="hsnFrm">
              @csrf
              <input type="hidden" name="hsnid" id="hsnid" value="0">
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <select name="pos_id" id="pos_id" required class="form-control" readonly>
                      <option value="">Select POS</option>
                      @foreach($ALL_POS as $pos)
                      <option value="{{ $pos->id }}">{{ $pos->name }}</option>
                      @endforeach
                    </select>
                  </div>
                  <div class="form-group"><label for="hsnname">First Name</label><input class="form-control" name="name" id="hsnname" required value="" placeholder="Enter First Name"/></div>
                  <div class="form-group"><label for="hsncode">Last Name</label><input class="form-control" name="code" id="hsncode" required value="" placeholder="Enter Lat Name"/></div>
                  <div class="form-group"><label for="hsncode">Telephone</label><input type="text"  class="form-control" name="telephone" id="telephone" required value="" placeholder="Enter Telephone"/></div>
                  <div class="form-group"><label for="hsncode">Discount</label><input type="number" min="0" class="form-control" name="discount" id="discount" required value="" placeholder="Enter Discount"/></div>
                  <div class="form-group"><label for="hsncode">Target</label><input type="number" min="0" class="form-control" name="target" id="target" required value="" placeholder="Enter Target"/></div>
                  <div class="form-group">
                    <select name="active" id="active" required class="form-control">
                      <option value="">Select Status</option>
                      <option value="1">Active</option>
                      <option value="0">Inactive</option>
                    </select>
                  </div>
                  <div class="form-group"><button class="btn btn-block btn-primary">Save Biller</button></div>
                </div>
              </div>
          </form>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
@endsection

@section('extraJs')
<script type="text/javascript">
    $(function () {
      var urlid = $('#urlid').val();
      console.log(urlid);
      var table = $('.data-table').DataTable({
          processing: true,
          serverSide: true,
          ajax: "{{ route('oc-pos-billers.index') }}"+"?id="+urlid,
          columns: [
              {data: 'DT_RowIndex', name: 'DT_RowIndex'},
              {data: 'pos_id', name: 'pos_id'},
              {data: 'name', name: 'name'},
              {data: 'fullname', name: 'fullname'},
              {data: 'telephone', name: 'telephone'},
              {data: 'discount', name: 'discount'},
              {data: 'target', name: 'target'},
              {data: 'active', name: 'active'},
              {data: 'action', name: 'action', orderable: false, searchable: false},
          ]
      });
      
    });
  </script>
@endsection