@extends('layouts.master')

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

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

.station{
  max-width: 15em !important;
}
#stations{
  max-width: 15em !important;
}

#pkg{
  max-width: 15em !important;
}
#user{
  max-width: 15em !important;
  min-width: 15em !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: 1px;}
      .title{display: none;
        font-size: 1px;}
    }
</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">
        <div class="br-section-wrapper">
        <div class="row">

            <div class="col-md">
                <div class="card">
                  <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs">
                      <li class="nav-item">
                        <a class="nav-link @if($active=='bydate') show active @endif" href="#bydate" data-toggle="tab">Reports</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link @if($active=='byuser') show active @endif" href="#byuser" data-toggle="tab">By User</a>
                      </li>
                       
                    </ul>
                  </div><!-- card-header -->
                  <div class="card-body color-gray-lighter">
                    <div class="tab-content">
                      <div class="tab-pane @if($active=='bydate') show active @endif" id="bydate">
                        <div class="row">                        
                        <div class="col-sm-11">
                            {!! Form::open(['route' => 'charging_report','method'=>"GET",'autocomplete'=>"off",'role' => 'form', 'class'=>'template-form form-inline','id' => 'form','data-submit' => 'noAjax']) !!}
      
                            {!! Form::select('application',  [null => 'Select Organisation']+$packages, isset($application) ? $application : old('application'),['id'=>'application','class'=>'form-control select2-show-search input-xlarge select2me'])!!}
                            &nbsp;
                            {!! Form::select('station',  [null => 'Select Stations']+$stations, isset($station) ? $station : old('station'),['id'=>'station','class'=>'station form-control select2-show-search  select2me'])!!}
                            &nbsp;
                            {!! Form::select('cps',  [null => 'CPS']+$charging_points, isset($cps) ? $cps : old('cps'),['id'=>'cps','class'=>'form-control select2-show-search input-xlarge select2me'])!!}
                            &nbsp;
                            <input id="issuedate" required name="startDate" readonly value="{{ isset($startDate) ? $startDate : '' }}" type="text" class="form-control from_date txt" placeholder="Start Date"/>
                            &nbsp;
                            <input id="expdate" required name="endDate" readonly value="{{ isset($endDate) ? $endDate : '' }}" type="text" class="form-control to_date txt" placeholder="End Date" />
                            &nbsp;  
                            &nbsp;
                            <div class="form-group"  id="date_submit">
                                    <label for="pwd">&nbsp;</label>
                                <button class="btn btn-primary" name="search" value="bydate">Search</button>
                            </div>
                                {!! Form::close() !!}
                          </div>
                        </div>
                </div><!-- tab-pane -->

                <div class="tab-pane @if($active=='byuser') show active @endif" id="byuser">
                    <div class="row">                        
                    <div class="col-sm-11">
                        {!! Form::open(['route' => 'charging_report','method'=>"GET",'autocomplete'=>"off",'role' => 'form', 'class'=>'form-inline','id' => 'form-byuser','data-submit' => 'noAjax']) !!}
  
                      

                                <div class="form-group">
                                        <div class="input-group">
                                          <span class="input-group-btn">
                                                    {!! Form::select('applications',  [null => 'Select Organisation']+$packages, isset($applications) ? $applications : old('applications'),["id"=>'pkg','class'=>'form-control   input-xlarge select2me'])!!}
                        
                                          </span>
                                          &nbsp;
                                          <span class="input-group-btn">
                                                {!! Form::select('user',  [null => 'Select Users'], isset($user) ? $user : old('user'),['id'=>'user','class'=>'form-control  select2me'])!!}
                       
                                          </span>
                                        </div>	
                                 </div>	
                                 <div class="form-group">
                                        <label for="email">&nbsp;</label>
                                        <input id="issuedates" required name="startDate" readonly value="{{ isset($startDate) ? $startDate : '' }}" type="text" class="form-control from_date txt" placeholder="Start Date"/>
                                    </div>
                                      <div class="form-group">
                                            <label for="name">&nbsp;</label>
                                            <input id="expdates" required name="endDate" readonly value="{{ isset($endDate) ? $endDate : '' }}" type="text" class="form-control to_date txt" placeholder="End Date" />
                                    </div>
                                         
                                         <div class="form-group"  id="user_submit">
                                            <label for="pwd">&nbsp;</label>
                                            <button class="btn btn-primary" name="search" value="byuser">Search</button>
                             </div>
                             
                            {!! Form::close() !!}
                      </div>
                    </div>
            </div><!-- tab-pane -->
                      </div><!-- tab-content -->
                  </div><!-- card-body -->
                </div><!-- card -->
              </div>
    
        </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 }}  {{ $message }} </div>
<table class="example table table-bordered table-colored table-dark  display"  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->nozzle_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>{{ date('h:i:s',strtotime($user->plug_in_time)) }}</td>
            <td>{{ date('h:i:s',strtotime($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>

$(document).ready(function() {
    var state = $("#pkg").val();
          var url = '/application/'+ state +'/users';
          $.get(url, function(data) {
            var select = $('form select[name=user]');
            select.empty();
            select.append("<option value=''>Select user</option>");
            $.each(data,function(key, value) {
              select.append('<option value=' + value.id + '>' + value.first_name +' '+value.last_name+'</option>'); 
            });   
          });
});
		$(document).ready(function() {

            

            $("#date_submit button").click(function(event){
                // issuedate expdate
				var error_free=true;
				  if ($("#issuedate").val() == ''){
                    toastr.error("Start Date Required", 'Error Alert', {timeOut: 3000})
                    error_free=false; 
                   }
                   if ($("#expdate").val() == ''){
                    toastr.error("End Date Required", 'Error Alert', {timeOut: 3000})
                    error_free=false; 
                   }
				if (!error_free){
					event.preventDefault(); 
				}
			});
			// <!-- After Form Submitted Validation-->
			$("#user_submit button").click(function(event){
				var form_data=$("#form-byuser").serializeArray();

             
				var error_free=true;
				for (var input in form_data){

					if (form_data[input]['value']){
                   }else{
                    toastr.error(form_data[input]['name']+" Required", 'Success Alert', {timeOut: 5000})
                    error_free=false;
                   }
					
				}
				if (!error_free){
					event.preventDefault(); 
				}
				
			});
           
			
			
			
		});
	</script>

    <script type="text/javascript">

      $(function()
      {
        $('select[name=applications]').change(function() {
          var state =  $(this).val();
          var url = '/application/'+ $(this).val()+'/users';
          $.get(url, function(data) {
            var select = $('form select[name=user]');
            select.empty();
            select.append("<option value=''>Select user</option>");
            $.each(data,function(key, value) {
              select.append('<option value=' + value.id + '>' + value.first_name +' '+value.last_name+'</option>'); 
            });   
          });
        });


        $('select[name=application]').change(function() {
          var state =  $(this).val();
          var url = '/application/'+ $(this).val()+'/stations';
          $.get(url, function(data) {
            var select = $('form select[name=station]');
            select.empty();
            select.append("<option value=''>Select Station</option>");
            $.each(data,function(key, value) {
              select.append('<option value=' + value.station_id + '>' + value.station_name + '</option>'); 
            });   
          });
        });
        $('select[name=station]').change(function() {
          var state =  $(this).val();
          var url = '/station/'+ $(this).val()+'/cps';
          $.get(url, function(data) {
            var select = $('form select[name=cps]');
            select.empty();
            select.append("<option value=''>CPS</option>");
            $.each(data,function(key, value) {
              select.append('<option value=' + value.nozzle_id + '>' + value.nozzle_id + '</option>'); 
            });   
          });
        });
          $( "#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 );
              }
          });
          $( "#issuedates" ).datepicker(
          {
              endDate: new Date(),
              dateFormat: 'dd-mm-yy',
              numberOfMonths: 1,
              onClose: function( selectedDate )
              {
                  $( "#expdates" ).datepicker( "option", "endDate", selectedDate ); 
              }
          });
          $( "#expdates" ).datepicker(
          {
              maxDate: new Date(),
              dateFormat: 'dd-mm-yy',
              numberOfMonths: 1,
              onClose: function( selectedDate )
              {
                  $( "#issuedates" ).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).children("h1:first").css( 'font-size', '22px' );
 
                    $(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).toFixed(2)+" kWh");
          }else{
            $( api.column( j ).footer() ).html((pageTotal).toFixed(2));
          }
					j++;
				} 
			},
        });
    });

function bindDateRangeValidation(f, s, e) {
    
};
</script>
@endsection