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

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
   <div class="row">
      <div class="col-md-3 col-xs-12">
         <h3> UPI Payment Requests </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">Requests</a></span>
               <span class="info-box-number total_sell">{{$totalRequest}}</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">Amount ⟨₹⟩</span>
               <span class="info-box-number total_sell">{{($totalAmount)}}</span>
            </div>
            <!-- /.info-box-content -->
         </div>
      </div>
   </div>
</section>

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

   <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="row">
      <div class="tab-content">
         <div class="tab-pane active" id="output_tax_tab">
            <table class="table table-bordered table-striped" id="output_tax_table" width="100%">
               <thead>
                  <tr>
                     <th>SL No.</th>
                     <th>Date, Time</th>
                     <th>Order ID</th>
                     <th>Plateform</th>
                     <th>Payment Mode</th>
                     <th>UPI Number</th>
                     <th>Name</th>
                     <th>Mobile Number</th>
                     <th>Amount</th>
                     <th>Status</th>
                     <th width="80px">Action</th>
                  </tr>
               </thead>
               <tbody>
               </tbody>
            </table>
         </div>
      </div>
   </div>

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


</section>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">

         <!-- Modal content-->
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
               <h4 class="modal-title">UPI Screenshot</h4>
            </div>
            <div class="modal-body">
               <form id="withdraw_req">
                  @csrf
                  <input type="hidden" name="id" id="user_id">
                  <div class="row" class="form-group">
                     <div class="col-sm-3">
                        <div class="row">
                           <div class="col-sm-12">
                            
                              <div class="col-sm-12">
                                 <div class="form-group">
                                    <!-- <input type="text" id="screen_shot" ><br/> -->
                                 <img  id="upi_screen_shot_img" width="500px" height="500px">
                                   
                                 </div>
                              </div>
                            
                           </div>

                        </div>
                              </div>
                             
                           </div>
                        </div>
                     </div>
                    
               </form>
            </div>

         </div>

      </div>
   </div>

<!-- /.content -->

@endsection

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

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

      output_tax_datatable = $('#output_tax_table').DataTable({
         processing: true,
         serverSide: true,
         aaSorting: [
            [0, 'desc']
         ],
         ajax: {
            url: "{{route('upi-payment-requests')}}",
            "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');
               console.log(d.from_date);
               d = __datatable_ajax_callback(d);
            }

         },
         columns: [{
               data: 'DT_Row_Index',
               name: 'DT_Row_Index',
               orderable: false,
               searchable: false
            },
            {
               data: 'created_at',
               name: 'created_at'
            },
            {
               data: 'order_id',
               name: 'order_id'
            },
            {
               data: 'platform',
               name: 'platform'
            },
            {
               data: 'payment_mode',
               name: 'payment_mode'
            }, 
          
            {
               data: 'upi_number',
               name: 'upi_number'
            },
            {
               data: 'userIdName',
               name: 'userIdName'
            },
            {
               data: 'phone',
               name: 'phone'
            },
            {
               data: 'amount',
               name: 'amount'
            
            },
            {
               data: 'status',
               name: 'status'
            },

            {
               data: 'action',
               name: 'action',
               render: function(data, type, row) {
                  var url = "{{ url('/req-upi-form') }}";
                  var paymentButton = '<a href="' + url + '?id=' + row.id + '" class="btn btn-success btn-xs m-2" ><i class="fa fa-credit-card" title="Payment"></i></a>';
                  var screenshotsButton = '<a href="#" data-toggle="modal" data-target="#myModal" data-id='+ row.id + ' id= '+ row.id + '  class="btn btn-warning btn-xs m-2" onclick="viewPopup(this);" ><i class="fa fa-camera" title="Screenshots"  ></i></a>';
                  
                  var url_paymenthistory = "{{ url('/upi-payment-history-log') }}";
                  var paymentHistoryButton = '<a href="' + url_paymenthistory + '?upi_id=' + row.id + '" class="btn btn-primary btn-xs m-2" ><i class="fa fa fa-history" title="Payment History"></i></a>';
                  var action = '<div>' + paymentButton + screenshotsButton +  paymentHistoryButton +'</div>';
                  return action;
               }
            },

         ]
      });

      $('#daterange_id, #member_status_id').change(function() {

         // alert('hello');
         if ($("#output_tax_tab").hasClass('active')) {
            output_tax_datatable.ajax.reload();
         }
      });

      $('#search_by_val,#btnSearch').click(function() {
         // alert(search_by_val.value);
         if ($("#output_tax_tab").hasClass('active')) {
            output_tax_datatable.ajax.reload();

         }
      });


   });

   function viewPopup(v) {
   var id = v.id;
   console.log(id);
   $.ajax({
      type: 'GET',
      url: "{{route('open-view-upi-screenshot')}}",
      data: {
         id: id,
      },
      dataType: 'json',
      success: function(data) {
         console.log(data);

         $('#screen_shot').val(data.screen_shot); // Assuming data.screen_shot is a text value for an input field
         // Set the src attribute of the image
         $('#upi_screen_shot_img').attr('src', 'https://bhavyaretail.com//uploads/primemebers/upi_screenshots/' + data.screen_shot);

         if (data !== '') {
            // Code to handle success
         } else {
            // Code to handle empty data
         }
      }
   });
}

</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" />
<!-- 
   <script src="{{ asset('js/report.js?v=' . $asset_v) }}"></script> -->
@endsection