@extends('layouts.app')
@section('title', __('UPI Payment History Details'))

@section('content')


<!-- Content Header (Page header) -->
<section class="content-header">
   <div class="row">
      <div class="col-md-4 col-xs-12">
         <h3>UPI Payment History Details</h3>
      </div>
      <div class="col-md-3 col-xs-12">
         <div class="info-box info-box-new-style">
            <span class="info-box-icon bg-aqua"><i class="fa fa-user"></i></span>
            <div class="info-box-content">
               <span class="info-box-text"><a href="#" id="prime_only_id" data-val="1">Approved</a></span>
               <span class="info-box-number total_sell">{{$approved}}</span>
            </div>
            <!-- /.info-box-content -->
         </div>
         <!-- /.info-box -->
      </div>

      <div class="col-md-3 col-xs-12">
         <div class="info-box info-box-new-style">
            <span class="info-box-icon bg-yellow"><i class="fa fa-credit-card"></i></span>
            <div class="info-box-content">
               <span class="info-box-text">Pending</span>
               <span class="info-box-number total_sell">{{($pending)}}</span>
            </div>
            <!-- /.info-box-content -->
         </div>
      </div>
   </div>
</section>

<!-- Main content -->
<section class="content">

<!-- Filter Start --->

   <!-- FIlter End -->

   <div class="row">
      <div class="col-md-12">
         @component('components.filters', ['title' => __('report.filters')])
         <div class="col-md-3">
            <div class="form-group">

               <input type="text" class='form-control' name="daterange" value="" id="daterange_id" placeholder="Date Range" />
            </div>
         </div>
         <div class="col-md-2">
            <div class="form-group">
               <!-- <label for="status_filter">Status</label> -->
               <div>
                  <select class='form-control' id="member_status_id">
                     <option value='all'>-Select Status-</option>
                     <option value='pending'>pending</option>
                     <option value='approved'>approved</option>
                     <option value='cancelled'>cancelled</option>
                     <option value='rejected'>rejected</option>
                  </select>
               </div>
            </div>
         </div>

         <!-- <div class="col-md-5">
            <div class="form-group">
               <div>
                  <input type="text" placeholder="Search By Member ID/ Name/ Mobile No. / Email ID" id="search_by_val" class='form-control' style>
               </div>
            </div>
         </div>
         <div class="col-md-2">
            <div class="form-group">
               <div>
                  <button type="button" class="btn btn-block btn-info" data-href="" data-container="" id="btnSearch">
                     <i class="fa fa-search"></i> Search </button>
               </div>
            </div>
         </div> -->
      </div>
   </div>

   @endcomponent
   <div class="clearfix"></div>
    @component('components.widget', ['class' => 'box-primary'])
    
<div class="clearfix"></div>
<div class="clearfix"></div>
<div class="row">
<input type="hidden" value="{{$upiId}}" name="upiId" id="upi_id">
    <div class="col-md-12" >
    <div class="active"  id="output_tab">
   
        <table class="table table-bordered data-table dataTable"  id="upi_payment_history" >
            <thead>
                <tr>
                  
                    <th>Date, Time</th>
                    <th>Action By</th>
                    <!-- <th>User Id</th> -->
                    <th>Upi Payment Verification Id</th>
                    <th>Ip Address</th>
                    <th>Mac Id</th>
                    <th>Status</th>
                    <th>Action Date</th>
                    <th>Deleted At</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
     </div>
     </div>
</div> 

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


</section>


<!-- /.content -->

@endsection

@section('javascript')
  @php $asset_v = env('APP_VERSION'); @endphp
  <script src="{{ asset('js/product.js?v=' . $asset_v) }}"></script>

  <script type="text/javascript">
$(document).ready(function() {

  $('input[name="daterange"]').daterangepicker({
         startDate: moment().subtract(1, 'M'),
         endDate: moment()
      });

  var upi_id = $('#upi_id').val(); 

  var upi_payment_history = $('#upi_payment_history').DataTable({
    processing: true,
    serverSide: true,
    aaSorting: [
            [0, 'desc']
         ],
    ajax: {
      url:  "{{ route('upi-payment-history-log')}}?upi_id="+upi_id,
      type: 'GET', 
      "data": function(d) {
            d.search_by_val = $('#search_by_val').val();
            d.member_status_id = $('#member_status_id').val();
            d.from_date = $('input[name="daterange"]').data('daterangepicker').startDate.format('YYYY-MM-DD');
            d.to_date = $('input[name="daterange"]').data('daterangepicker').endDate.format('YYYY-MM-DD');
            // Uncomment the next line if you need to log 'from_date'
            // console.log(d.from_date);
            d = __datatable_ajax_callback(d);
        }
    },
     
    columns: [       
      { data: 'created_at', name: 'created_at' },
      { data: 'action_by', name: 'action_by' },
      // { data: 'user_id', name: 'user_id' },
      { data: 'upi_payment_verification_id', name: 'upi_payment_verification_id' },
      { data: 'ip_address', name: 'ip_address' },
      { data: 'mac_id', name: 'mac_id' },
      { data: 'status', name: 'status' },
      { data: 'action_date', name: 'action_date' },
      { data: 'deleted_at', name: 'deleted_at' },
    ]
  });
  //  for changes in date range and member status
  $('#daterange_id, #member_status_id').change(function() {
    if ($("#output_tab").hasClass('active')) {
      
      upi_payment_history.ajax.reload();
    }
  });

  // for search button click
  $('#search_by_val, #btnSearch').click(function() {
    if ($("#output_tab").hasClass('active')) {
     
      upi_payment_history.ajax.reload();
    }
  });
});
</script>

<script>
   $(function() {
      $('input[name="daterange"]').daterangepicker({
         opens: 'left'
      }, function(start, end, label) {
         console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
      });
   });
</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endsection