@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;display: none;}
      .title{display: none;
        font-size: 1px;}
    }
    table.dataTable {
       clear: none !important;
   
}

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }
}
</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-body color-gray-lighter">
                    <div class="tab-content">
                      <div class="tab-pane  show active" id="bydate">
                        <div class="row">                        
                        <div class="col-sm-11">
                            {!! Form::open(['url' => 'app-user/charging-history/'.\Crypt::encrypt($user_id),'method'=>"GET",'autocomplete'=>"off",'role' => 'form', 'class'=>'template-form form-inline','id' => 'form','data-submit' => 'noAjax']) !!}
      
                            {!! 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>
    
        </div>

        </div>
        </div>
     
     
<div class="br-pagebody" style="padding: 1px;">
        <div class="br-section-wrapper">
       
        <div class="table-wrapper">
         <div class="download_label" style="font-size: 15px;">Charging Reports   {{ $message }} </div>
<table class="example table table-bordered table-colored table-dark  display responsive"  cellspacing="0" width="100%"> 
    <thead>
        <tr class="highlighted">
            <th>So No</th>
            <th>Station ID</th>
            <th>Ocpp Id</th>
            <th>port</th>
            <th>Date</th>
            <th>In Time</th>
            <th>Out Time</th>
            <th>Start Meter</th>
            <th>End Meter</th>
            <th>Usage </th>
            <th>Tax</th>
            <th>Total</th>
            <th>Option</th>

        </tr>
    </thead>
    <tfoot>
        <tr class="foot">
          <th></th>
          <th></th>
          <th></th>
          <th></th>
         
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th>Total</th>
          <th></th>
          <th></th>
          <th></th>
        </tr>
      </tfoot>
   
    <tbody>
            @php $i=1 @endphp
          @foreach ($history as $user)
          <tr>
            <td>{{ $i }}</td>
            <td>{{ $user->station_id }}</td>
            <td>{{ $user->nozzle_id }}</td>
            <td>{{ $user->charger_id }}</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->starting_meter }}</td>
            <td>{{ $user->ending_meter }}</td>
            <td>{{ $user->power_usage }}</td>
            <td>{{ $user->amount-$user->base_fare }}</td>
            <td data-order="{{ $user->amount }}">{{ $user->amount }}</td>
            <td>
            <a href="#"  title="View Invoice" data-href="/charging-invoice/{{ $user->id }}/generate" class="edit-form" data-toggle="modal" data-target="#myModal1"> <i class="fa fa-files-o tx-20 icon-properties edit btn btn-default btn-xs" ></i></a>
        </tr>
        @php $i++; @endphp
          @endforeach    
    </tbody>
     
        
</table>
</div>

       <!-- Here Code -->

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

@section('scripts')

<script>
		$(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>

  <div class="modal fullscreen-modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
          </div>
         
        </div>
     
    </div>
  </div>
<style>.fullscreen-modal .modal-dialog {
    margin: 0;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
  }
  @media (min-width: 768px) {
    .fullscreen-modal .modal-dialog {
      width: 750px;
    }
  }
  @media (min-width: 992px) {
    .fullscreen-modal .modal-dialog {
      width: 970px;
    }
  }
  @media (min-width: 1200px) {
    .fullscreen-modal .modal-dialog {
       width: 1170px;
    }
  }</style>
    <script type="text/javascript">

      $(function()
      {



        $('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-1;
				var j = 9;
				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==8){
          $( api.column( j ).footer() ).html(parseFloat(pageTotal.toFixed(2))+" kWh");
          }else{
            $( api.column( j ).footer() ).html(pageTotal.toFixed(2));
          }
					j++;
				} 
			},
        });
    });

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



$('#manual-ajax').click(function(event) {
  event.preventDefault();
  this.blur(); // Manually remove focus from clicked link.
  $.get(this.href, function(html) {
    $(html).appendTo('body').modal();
  });
});

</script>
@endsection