@extends('franchise.layouts.master')

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

@section('links')
<style type="text/css">
.foot th{
  border: 1px solid #c6c8ca !important;
}
  @media print {

       table td:last-child {display:block}
       table th:last-child {display:block}
    *, :after, :before {
        color: inherit !important;
        text-shadow: inherit !important;
        background: inherit !important;
        -webkit-box-shadow: inherit !important;
        box-shadow: inherit !important;
    }
    .table  th{
      background-color: #c6c8ca !important;
      -webkit-print-color-adjust: exact; 
      color: black !important;
      text-align: center;
      border: 1px solid #c6c8ca !important;
     
    }
    .table td{
      text-align: center;
      border: 1px solid #c6c8ca !important;
    }
    h6{
      font-size: 10px;
    }
    
    .download_label{ font-size: 15px;}
    .title{display: none}
  }
</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>
          <span class="breadcrumb-item active">Users Charging Report</span>
        </nav>
      </div><!-- br-pageheader -->
     
      <div class="br-pagebody" style="margin-bottom: -2em;">
        <div class="br-section-wrapper">
        <div class="row" >
  {!! Form::open(['route' => 'charging_report','autocomplete'=>"off",'role' => 'form', 'class'=>'template-form form-inline','id' => 'form','data-submit' => 'noAjax']) !!}
          <div class="form-group">
              <input id="issuedate" name="startDate" value="{{ isset($startDate) ? $startDate : '' }}" type="text" class="form-control from_date" placeholder="Start Date"/>
              &nbsp;
              <input id="expdate" name="endDate" value="{{ isset($endDate) ? $endDate : '' }}" type="text" class="form-control to_date" placeholder="End Date" />
              &nbsp;  
              {{-- <div class="form-group">
                  <!-- <div class="fc-datepicker"></div> -->
                  <input type="text" name="searchdata"  value="{{ isset($searchdata) ? $searchdata : '' }}" class="form-control " placeholder="Search">
              </div>
              &nbsp; --}}
              &nbsp;
              <div class="form-group">
                  <!-- <div class="fc-datepicker"></div> -->
                  <button class="btn btn-primary" name="search" value="search">Search</button>
              </div>
          </div>

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

        </div>
        </div>
        </div>
   
<div class="br-pagebody">
        <div class="br-section-wrapper">
       
        <div class="table-wrapper">
         <div class="download_label" style="font-size: 15px;">Charging Reports  {{ $fromdate }} To  {{ $todate }} </div>
<table class="example table table-bordered table-colored table-dark  display responsive nowrap"  cellspacing="0" width="100%"> 
    <thead>
        <tr class="highlighted">
            <th>So No</th>
            <th>Station ID</th>
            <th>Ocpp Id</th>
            <th>port</th>
            <th>User Name</th>
            <th>Date</th>
            <th>In Time</th>
            <th>Out Time</th>
            <th>Power Usage </th>
            <th>Amount</th>

        </tr>
    </thead>
    <tfoot>
        <tr class="foot">
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th>Total</th>
          <th></th>
          <th></th>
        </tr>
      </tfoot>
   
    <tbody>
            @php $i=1 @endphp
          @foreach ($users as $user)
          <tr>
            <td>{{ $i }}</td>
            <td>{{ $user->station_id }}</td>
            <td>{{ $user->ocpp_id }}</td>
            <td>{{ $user->charger_id }}</td>
            <td>{{ $user->first_name.' '.$user->last_name }}</td>
            <td>{{ date('d-m-Y',strtotime($user->created_at)) }}</td>
            <td>{{ $user->plug_in_time }}</td>
            <td>{{ $user->plug_out_time }}</td>
            <td>{{ $user->power_usage }}</td>
            <td data-order="{{ $user->amount }}">{{ $user->amount }}</td>
            <!-- <td> <i class="icon ion-edit tx-20 icon-properties edit" data-toggle="modal" data-target="#addAdmin"></i><i class="icon ion-close tx-20 icon-properties delete" data-toggle="modal" data-target="#delete"></i></td> -->
        </tr>
        @php $i++; @endphp
          @endforeach    
    </tbody>
     
        
</table>
</div>

       <!-- Here Code -->

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

@section('scripts')

    <script type="text/javascript">

      $(function()
      {
          $( "#issuedate" ).datepicker(
          {
              endDate: new Date(),
              dateFormat: 'dd-mm-yy',
              numberOfMonths: 1,

              onClose: function( selectedDate )
              {
                  $( "#expdate" ).datepicker( "option", "endDate", selectedDate );
                  
              }
          });
      
          $( "#expdate" ).datepicker(
          {
              maxDate: new Date(),
              dateFormat: 'dd-mm-yy',
              numberOfMonths: 1,
              onClose: function( selectedDate )
              {
                  $( "#issuedate" ).datepicker( "option", "maxDate", selectedDate );
              }
          });
      });

 
$(document).ready(function () {
        var table = $('.example').DataTable({
            "aaSorting": [],
           
            rowReorder: {
            selector: 'td:nth-child(2)'
            },
            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']
                },
            ], "footerCallback": function ( row, data, start, end, display ) {
				var api = this.api();
				nb_cols = api.columns().nodes().length;
				var j = 8;
				while(j < nb_cols){
					var pageTotal = api
                .column( j, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return Number(a) + Number(b);
                }, 0 );
          // Update footer
          if(j==7){
          $( api.column( j ).footer() ).html(pageTotal+" kWh");
          }else{
            $( api.column( j ).footer() ).html(pageTotal);
          }
					j++;
				} 
			},
        });

        



                // Used events



             

 
    });


function bindDateRangeValidation(f, s, e) {
    
};



    </script>
@endsection