@extends('layouts.master')

@section('title', 'Charging Stations')

@section('links')
<style>
.dataTables_filter {
   float: left !important;
}</style>
@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">Stations's</span>
      </nav>
      <!-- <button class="btn btn-success success">Toast</button> -->
    </div><!-- br-pageheader -->
    <div class="pd-x-20 pd-sm-x-30 pd-t-20 pd-sm-t-30">
	<h2><strong>{!! trans('messages.list_all') !!}</strong> {!! trans('messages.stations') !!}
				
					</h2>
    </div>
		@if(Entrust::can('manage_stations'))
    <div class="br-pagebody">
      <div class="br-section-wrapper">
       
<div class="col-sm-12">
				<div class="box-info full">
            {!! Form::open(['url' => 'stations/list','role' => 'form', 'class'=>'employee-form form-inline','id' => 'filter-form','data-form-table' => 'employee_table']) !!}
            <div class="row">

                @if(!Entrust::hasRole('organisation'))
                <div class="col-xs-4">
                    {!! Form::select('application',  [null => 'Organization']+$packages, '',['id'=>'application','class'=>'form-control select2-show-search input-xlarge select2me'])!!}
                </div>
                @endif
                &nbsp;
                <div class="col-xs-4">
                    <div class="input-group"> 
                        {!! Form::select('city_id',  [null => 'City']+$cities, '',['id'=>'city','class'=>'form-control select2-show-search input-xlarge select2me'])!!}
                    </div>
                </div>
                &nbsp;
                <div class="col-xs-4">
                    <div class="input-group"> 
                        {!! Form::select('franchise_id',  [null => 'Select Franchise']+$franchise, '',['id'=>'franchise','class'=>'form-control select2-show-search input-xlarge select2me'])!!}
                    </div>
                </div>
               &nbsp;
               <div class="col-xs-4">
                    <div class="input-group"> 
                        {!! Form::select('connector_type',  [null => 'Connector Types']+$connector_types, '',['id'=>'connectortypes','class'=>'form-control select2-show-search input-xlarge select2me'])!!}
                    </div>
                </div>
               &nbsp;
               <div class="col-xs-4">
                    <div class="input-group"> 
                        {!! Form::select('charger_code',  [null => 'Charger Types']+$charger_types, '',['id'=>'chargertypes','class'=>'form-control select2-show-search input-xlarge select2me'])!!}
                    </div>
                </div>
               &nbsp;
                
                <div class="col-xs-4">
                    <div class="input-group"> 
                        {!! Form::select('status', [
                          'active' => 'Active',
                          'banned' => 'Banned',
                          'under_maintained'=>'Under Maintained',
                          'upcomming'=>'Upcomming'],'',['id'=>'status','class'=>'form-control input-xlarge select2me','placeholder'=>trans('messages.select_one')])!!}
                    </div>
                </div>
                &nbsp;
                <button  type="submit" id="search" title="filter"  class="btn btn-sm btn-primary">SEARCH</button>
                </div>
            </div>

            {!! Form::close() !!} 
			</div>
<div class="col-sm-12" >
@if(Entrust::can('create_stations'))
				<div class="box-info" style="margin-top: 14px;">
					<div class="additional-btn"><a href="{{ route('stations.create') }}">
			<button class="btn btn-sm btn-primary pull-right" title="Add Station">
      <i class="fa fa-plus icon"></i> {!! trans('messages.add') !!}</button></a>
			
				</div>
			</div>
      @endif
        <div class="table-wrapper">
        <table class="table table-hover datatable" id="stations_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><!-- br-section-wrapper -->
    </div><!-- br-pagebody -->
		@endif

@endsection

@section('scripts')
<script>
$(document).ready(function() {
  var source="stations/lists";

  var dataTable =  $('#stations_table').DataTable({
						"processing": true,
						lengthChange: false,
            responsive: true,
            language: {
            searchPlaceholder: 'Search...',
            sSearch: '',
          },responsive: 'true',
        //    dom: "Bfrtip",
        //    buttons: [

        //        {
        //            extend: 'copyHtml5',
        //            text: '<i class="fa fa-files-o"></i>',
        //            titleAttr: 'Copy',
        //            title: $('.download_label').html(),
        //            exportOptions: {
        //                columns: ':visible'
        //            }
        //        },

        //        {
        //            extend: 'excelHtml5',
        //            text: '<i class="fa fa-file-excel-o"></i>',
        //            titleAttr: 'Excel',
                  
        //            title: $('.download_label').html(),
        //            exportOptions: {
        //                columns: ':visible'
        //            }
        //        },

        //        {
        //            extend: 'csvHtml5',
        //            text: '<i class="fa fa-file-text-o"></i>',
        //            titleAttr: 'CSV',
        //            title: $('.download_label').html(),
        //            exportOptions: {
        //                columns: ':visible'
        //            }
        //        },

        //        {
        //            extend: 'pdfHtml5',
        //            text: '<i class="fa fa-file-pdf-o"></i>',
        //            titleAttr: 'PDF',
        //            title: $('.download_label').html(),
        //            exportOptions: {
        //                columns: ':visible'
                       
        //            }
        //        },

        //        {
        //            extend: 'print',
        //            text: '<i class="fa fa-print"></i>',
        //            titleAttr: 'Print',
        //            title: $('.download_label').html(),
        //                customize: function ( win ) {
        //            $(win.document.body)
        //                .css( 'font-size', '10pt' );

        //            $(win.document.body).find( 'table' )
        //                .addClass( 'compact' )
        //                .css( 'font-size', 'inherit' );
        //        },
        //            exportOptions: {
        //                columns: ':visible'
        //            }
        //        },

        //        {
        //            extend: 'colvis',
        //            text: '<i class="fa fa-columns"></i>',
        //            titleAttr: 'Columns',
        //            title: $('.download_label').html(),
        //            postfixButtons: ['colvisRestore']
        //        },
        //    ], 
            "serverSide": true,
            "ajax":{
                     "url": source,
                     "type": "POST",
                     "data":function(data) {
							        data.city = $('#city').val();
							        data.franchise = $('#franchise').val();
							        data.status = $('#status').val();
							        data.application = $('#application').val();       
							        data.connectortypes = $('#connectortypes').val();       
							        data.chargertypes = $('#chargertypes').val();       
						},
					},
        });
        $('#search').on('click', function (event) {
					event.preventDefault();  
             dataTable.draw();
				} );
    
} );

</script>
@endsection