@extends('layouts.master')

@section('title', 'Charge Stations Reports')

@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;
}
#datatable2 tr:nth-child(even){background-color: #f2f2f2 !important;}

#datatable2 tr:hover {background-color: #ddd !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> 

  
    {{ HTML::style('assets/MonthPicker.min.css')}} 
  <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

@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">Reports</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">
                    <i class="menu-item-icon icon fa fa-file tx-22"></i>  Charge Stations Reports
                  </div><!-- card-header -->
                  <div class="card-body color-gray-lighter">
                    <div class="tab-content">
                      <div class="tab-pane active show" id="bydate">
                        <div class="row">       
                          {{-- <div class="col-sm-1"><a href="{{ route('chargepoints.reports') }}" ><button  class="btn btn-primary">All</button></a></div>                  --}}
                        <div class="col-sm-12">
                        
                        <form class="form-inline" autocomplete="off" id = 'form'>
                           
                            {!! Form::select('application',  [null => 'Select organisation']+$packages, isset($application) ? $application : old('application'),['id'=>'application','class'=>'form-control select2-show-search input-xlarge select2me'])!!}
                            &nbsp;
                            {{-- &nbsp;
                            {!! Form::select('station',  [null => 'Select Stations']+$stations, isset($station) ? $station : old('station'),['id'=>'station','class'=>'station form-control select2-show-search  select2me'])!!}
                           --}}

                              <input id="issuedate" readonly="readonly" name="startDate" value="{{ isset($startDate) ? $startDate : old('startDate') }}" type="text" class="form-control from_date txt" placeholder="Start Date"/>
                              &nbsp;
                              <input id="expdate" readonly="readonly" name="endDate" value="{{ isset($endDate) ? $endDate : old('endDate') }}" type="text" class="form-control to_date txt" placeholder="End Date" />
                              &nbsp;
                              {!! Form::select('status',  [null => 'Select Status']+["active"=>"Active","in-active"=>"In-Active",'banned'=>"Banned"], isset($status) ? $status : old('status'),['id'=>'status','class'=>'form-control select2-show-search input-xlarge select2me'])!!}
                              &nbsp;
                              <div class="form-group"  id="date_submit">
                                <label for="pwd">&nbsp;</label>
                                <button class="btn btn-primary" name="search" value="filter">Search</button>
                              </div>
                              </form>

                       
                          </div>
                        </div>
                </div><!-- tab-pane -->


                      </div><!-- tab-content -->
                  </div><!-- card-body -->
                </div><!-- card -->
              </div>
    
        </div>

        </div>
        </div>
      
   @if($search)
<div class="br-pagebody">
        <div class="br-section-wrapper">
       
        <div class="table-wrapper">
        <div class="download_label" style="font-size: 1px;">{{ $message }} </div>

<table id="datatable2" class="example table table-bordered table-colored table-dark">
    <thead>
        <tr>
            {{-- <th class="wd-15p">Transaction Id</th> --}}
            <th class="wd-5p">Sl</th>
            <th class="wd-5p">Station id</th>
            <th class="wd-5p">name</th>
            <th class="wd-5p">location_name</th>
            <th class="wd-5p">address</th>
            <th class="wd-5p">registred_on</th>
            <th class="wd-5p">status</th>

        </tr>
    </thead>
   
    <tbody>@php $i=1; @endphp
      @foreach ($reports as $item) 
      <tr>
          <td>{{ $i }}</td>
          <td>{{ $item->station_id }}</td>
          <td>{{ $item->station_name }}</td>
          <td>{{ $item->location_name }}</td>
          <td>{{ $item->address }}</td>
          <td>{{ App\Classes\Helper::showDate($item->created_at) }}</td>
          <td><span class="label label-{{$item->status}}">{{ \App\Classes\Helper::toWord($item->status) }}</span></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 -->
    @endif
 
@endsection
 

@section('scripts')

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.min.js"></script><script src="assets/MonthPicker.min.js"></script>

    <script>

$(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 ($("#application").val() == ''){
                    toastr.error("Package Required", 'Error Alert', {timeOut: 3000})
                    error_free=false; 
                   }
				if (!error_free){
					event.preventDefault(); 
				}
			});


        $('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>'); 
            });   
          });
        });
        $('select[name=applications]').change(function() {
          var state =  $(this).val();
          var url = '/application/'+ $(this).val()+'/stations';
          $.get(url, function(data) {
            var select = $('form select[name=stations]');
            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=stations]').change(function() {
          var state =  $(this).val();
          var url = '/station/'+ $(this).val()+'/cps';
          $.get(url, function(data) {
            var select = $('form select[name=cpss]');
            select.empty();
            select.append("<option value=''>CPS</option>");
            $.each(data,function(key, value) {
              select.append('<option value=' + value.nozzle_id + '>' + value.nozzle_id + '</option>'); 
            });   
          });
        });
       




        $("#from_month").datepicker(
		    {
          dateFormat: 'mm-yy'
		});


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

              onClose: function( selectedDate )
              {
                  $( "#expdate" ).datepicker( "option", "endDate", selectedDate );
                  
              }
          });


$('#to').MonthPicker({ MaxMonth:new Date(),Button: false, MonthFormat: 'mm-yy',
               OnAfterChooseMonth: function( selectedDate )
              {
                $( "#from" ).MonthPicker( "option", "MaxMonth", selectedDate );
                  
              }
              });

 $('#from').MonthPicker({ MaxMonth:new Date(),Button: false, MonthFormat: 'mm-yy',
               OnAfterChooseMonth: function( selectedDate )
              {
               // $( "#PastDateDemo" ).MonthPicker( "option", "MaxMonth", selectedDate );
                  
              }
              });

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

        $('#datatable2').DataTable({

          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']
               },
           ], 
        });
      
    </script>
    
@endsection