@extends('franchise.layouts.master')

@section('title', 'Users')

@section('links')
@endsection



@section('content')

<div class="br-mainpanel">
<div class="br-pageheader pd-y-15 pd-l-20">
      <nav class="breadcrumb pd-0 mg-0 tx-12">
        <a class="breadcrumb-item" href="{{ URL::to('/') }}">{{ config('config.site_name')}}</a>
        <!--          <a class="breadcrumb-item" href="#">Admins</a>-->
        <span class="breadcrumb-item active">Users's</span>
      </nav>
      <!-- <button class="btn btn-success success">Toast</button> -->
    </div><!-- br-pageheader -->

    <div class="br-pagebody">
      <div class="br-section-wrapper" style="margin-bottom: -27px;">

        {!! Form::open(['url' => 'appusers/list','role' => 'form', 'class'=>'employee-form form-inline','id' => 'filter-form','data-form-table' => 'employee_table']) !!}
    <div class="form-layout ">
    <div class="row">

       

        <div class="col-md-3">
                  <div class="form-group">
                  {!! Form::select('state_id',  [null => 'Select State']+$state, '',['id'=>'state','class'=>'form-control select2-show-search input-xlarge select2me'])!!}
                  </div>
        </div>

        <div class="col-md-3">
                    <div class="form-group">
                    {!! Form::select('city_id',  [null => 'Select City'], '',['id'=>'city','class'=>'form-control select2-show-search input-xlarge select2me'])!!}
                    </div>
        </div>

        <div class="col-md-3">
              <div class="form-group">      
                <button class="btn btn-primary" id="search" value="filter"  class="btn btn-sm btn-primary">Filter</button> 
            </div>
         </div>

        {!! Form::close() !!}

            </div></div>

      </div><!-- br-section-wrapper -->
    </div><!-- br-pagebody -->


			<div class="br-pagebody">
      <div class="br-section-wrapper">
        <div class="table-wrapper">
				<div class="table-wrapper">

       
          <table class="table table-hover datatable" id="users_table">
            <thead>
              <tr>
                @foreach($col_heads as $col_head)
                @if($col_head == 'Option')
                <th style="min-width:100px;">{!! $col_head !!}</th>
                @else
                <th>{{ $col_head }}</th>
                @endif
                @endforeach
              </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
            </tfoot>
          </table>
        </div><!-- table-wrapper -->
				</div>
      </div><!-- br-section-wrapper -->
    </div><!-- br-pagebody -->
    
  
@endsection
 

@section('scripts')

<script>
  $(document).ready(function() {
    var source="appusers/lists";
    var dataTable =  $('#users_table').DataTable({
              "processing": true,
              stateSave: true,
              lengthChange: false,
              responsive: true,
              language: {
              searchPlaceholder: 'Search...',
              sSearch: '',
            },
              "serverSide": true,
              "ajax":{
                       "url": source,
                       "type": "POST",
                       "data":function(data) {
                        data.state        = $('#state').val();
                        data.city         = $('#city').val();
              },
                     },
  
          });
  
          $('#search').on('click', function (event) {
            event.preventDefault();
         
               dataTable.draw();
          
  
  
          } );
      
  } );
  
  </script>
  

@endsection