@extends('layouts.master')

@section('title', 'User Transactions')

@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;
}



    @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> 
  <link href="assets/MonthPicker.min.css" rel="stylesheet" type="text/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">Transactions</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">By Date</a>
                      </li>
                      {{-- <li class="nav-item">
                          <a class="nav-link @if($active=='bytime') show active @endif" href="#bytime"  data-toggle="tab">By Time</a>
                        </li>  --}}
                        <li class="nav-item">
                            <a class="nav-link @if($active=='bymonth') show active @endif" href="#month" data-toggle="tab">Month</a>
                          </li>
                      {{-- <li class="nav-item">
                        <a class="nav-link" href="#yearly" data-toggle="tab">Yearly</a>
                      </li> --}}
                      {{-- <li class="nav-item">
                          <a class="nav-link" href="#custom" data-toggle="tab">custom</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 class="form-inline" autocomplete="off" id = 'form'>
                          
                            {!! Form::select('application',  [null => 'Select organisation']+$packages, isset($application) ? $application : old('startDate'),['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" readonly="readonly" name="startDate" value="{{ isset($startDate) ? $startDate : date('d-m-Y') }}" type="text" class="form-control from_date txt" placeholder="Start Date"/>
                              &nbsp;
                              <input id="expdate" readonly="readonly" name="endDate" value="{{ isset($endDate) ? $endDate : date('d-m-Y') }}" type="text" class="form-control to_date txt" placeholder="End Date" />
                              &nbsp;
                                <!-- <div class="fc-datepicker"></div> -->
                                <button class="btn btn-primary" name="search" value="bydate">Search</button>
                        </form>
                          </div>
                        </div>
                </div><!-- tab-pane -->


                      <div class="tab-pane @if($active=='bymonth') show active @endif" id="month">
                        
                        <form class='template-form form-inline' autocomplete="off" id ='form'>
                            {!! Form::select('applications',  [null => 'Select Organisation']+$packages, isset($applications) ? $applications : old('applications'),['id'=>'applications','class'=>'form-control select2-show-search input-xlarge select2me'])!!}
                            &nbsp;
                            {!! Form::select('stations',  [null => 'Select Stations']+$stations, isset($station) ? $station : old('stations'),['id'=>'stations','class'=>'form-control select2-show-search  select2me'])!!}
                            &nbsp;
                            {!! Form::select('cpss',  [null => 'CPS']+$charging_points, isset($cpss) ? $cpss : old('cpss'),['id'=>'cpss','class'=>'form-control select2-show-search input-xlarge select2me'])!!}
                            &nbsp;

                            
                           

                              <input id="from" readonly="readonly"name="to_month" value="{{ isset($to_month) ? $to_month : old('to_month') }}" type="text" class="form-control  txt" placeholder="Start Month" />
                              &nbsp;
                              <input id="to" type="text" readonly="readonly"name="from_month" value="{{ isset($from_month) ? $from_month : old('from_month') }}" type="text" class="form-control  txt" placeholder="End Month"/>
                              &nbsp;
   <!-- <div class="fc-datepicker"></div> -->
                              <button class="btn btn-primary" name="search" value="bymonth">Search</button>
                        
                          
                      </form>
                      </div><!-- tab-pane -->
                      <div class="tab-pane" id="yearly">
                        Top rated content goes here...
                      </div><!-- tab-pane -->

                      <div class="tab-pane" id="custom">

                                             
                         
              
                        </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;">Transaction Reports  {{ $message }} </div>

<table id="datatable2" class="example table table-bordered table-colored table-dark  display">
    <thead>
        <tr>
            {{-- <th class="wd-15p">Transaction Id</th> --}}
            <th class="wd-15p">Order Id</th>
            <th class="wd-20p">Time</th>
            <th class="wd-20p">Date</th>
            <th class="wd-20p">Station Name</th>
            <th class="wd-20p">Location</th>
            <th class="wd-20p">Port Id</th>
            <th class="wd-20p">Package</th>
            <th class="wd-25p">Amount</th>

        </tr>
    </thead>
    <tbody>
      @foreach ($transactions as $item)
      <tr>
          {{-- <td>{{ $item->trans_id }}</td> --}}
          <td>{{ $item->order_id }}</td>
          <td>{{ $item->transaction_time }}</td>
          <td>{{ App\Classes\Helper::showDate($item->transaction_date) }}</td>
          <td>{{ $item->station_name }}</td>
          <td>{{ $item->location_name }}</td>
          <td>{{ $item->charger_id }}</td>
          <td>10</td>
          <td>{{ $item->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>
      @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()
      {


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