@extends('layouts.master')
@section('title', 'CP Lists')
@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">Chargers Management</span>
      </nav>
    </div><!-- br-pageheader -->
    <div class="pd-x-20 pd-sm-x-30 pd-t-20 pd-sm-t-30">
      <h4 class="tx-gray-800 mg-b-5">Chargers</h4>
    </div>
    <div class="br-pagebody">
        <div class="row">
          <div class="col-lg-12"> 
          <div class="br-section-wrapper">
                <div class="card-body">
                    <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> 
          </div>  
      </div><!-- br-section-wrapper -->  
    </div>        
    </div><!-- br-pagebody --> 
@endsection
@section('scripts')
<script>
  //onchange get charger detail
function getcscode(){
		var charger_id = $('#charger_code').val(),
		hitURL =  "/chargers/getCodeDescription";
		$.ajax({
        type: "POST",
        url: hitURL,
        data:{charger_id:charger_id},
        success: function(data){
				$('#description').val(data);
        },
	});
}


$(document).ready(function() {
  var source="chargers/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();       
						},
					},
        });
        $('#search').on('click', function (event) {
					event.preventDefault();  
             dataTable.draw();
				} );
    
} );

</script>
//end..

@endsection