@extends('layouts.backend')
@section('extraCss')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
@endsection
@section('mainContentArea')
@include('backend.pos-window.bill-menu')
<div class="card card-default">
    <div class="card-header">
        <h4>
            Store Bills
        </h4>
        <div class="form-group">
            <label for="showBillType">Show Bills Type</label>
            <select name="showBillType" id="showBillType" class="form-control" onchange="window.location.href='{{ route('list-pos-bills') }}?showBillType='+this.value;">
                <option value="1" {{ request('showBillType') == 1 || empty(request('showBillType')) ? 'selected' : ''}}>Active Bills</option>
                <option value="2" {{ !empty(request('showBillType')) && request('showBillType') == 2 ? 'selected' : '' }}>Cancelled Bills</option>
                <option value="3" {{ !empty(request('showBillType')) && request('showBillType') == 3 ? 'selected' : '' }}>On Hold Bills</option>
            </select>
        </div>
    </div>
    <div class="card-body">
        <table class="table table-bordered data-table">
            <thead>
                <tr>
                    <th>Bill#</th>
                    <th>Biller</th>
                    <th>Date</th>
                    <th>Customer</th>
                    <th>Telephone</th>
                    <th>SPS</th>
                    <th>B'day</th>
                    <th>Anniv.</th>
                    <th>Apt.</th>
                    <th>Voucher</th>
                    <th>Clearance</th>
                    <th>Items</th>
                    <th>Sub Tot</th>
                    <th>Tax</th>
                    <th>Grand</th>

                    <th width="100px">Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
@endsection

@section('extraJs')
<script src="https://cdn.datatables.net/fixedheader/3.1.8/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript">
	

    $(function () {
        // 
        $('.data-table thead tr').clone(true).appendTo( '.data-table thead' );
        $('.data-table thead tr:eq(1) th').each( function (i) {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" class="form-control" />' );
    
            $( 'input', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table
                        .column(i)
                        .search( this.value )
                        .draw();
                }
            } );
        });
		
		
        // 
      var table = $('.data-table').DataTable({
          processing: true,
          serverSide: true,
          ajax: "{{ route('list-pos-bills') }}?showBillType={{ request('showBillType') }}",
          columns: [
              {data: 'bill_number', name: 'bill_number'},
              {data: 'biller', name: 'biller'},
              {data: 'bill_date', name: 'bill_date'},
              {data: 'name', name: 'name'},
              {data: 'telephone', name: 'telephone'},
              {data: 'is_sps', name: 'is_sps'},
              {data: 'is_bday', name: 'is_bday'},
              {data: 'is_ann', name: 'is_ann'},
              {data: 'is_happy', name: 'is_happy'},
              {data: 'is_voucher', name: 'is_voucher'},
              {data: 'has_clearance', name: 'has_clearance'},
              {data: 'total_items', name: 'total_items'},
              {data: 'sub_total', name: 'sub_total'},
              {data: 'total_tax', name: 'total_tax'},
              {data: 'final_amt', name: 'final_amt'},
              {data: 'action', name: 'action', orderable: false, searchable: false},
          ],
          orderCellsTop: true,
          fixedHeader: true
      });
      
    });
	
  </script>
@endsection