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

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
   <div class="row">
      <div class="col-md-3 col-xs-12">
         <h3> Withdrawal 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">Total Request</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-7">
            <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>User ID</th>
                     <th>Name</th>
                     <th>Mobile Number</th>
                     <th>Wallet Amt</th>
                     <th>Req Amt</th>
                     <th>Status</th>
                     <th>Pay</th>
                     {{--<th>View A/C</th>
                    <th>Chq</th>--}}

                  </tr>
               </thead>
               <tbody>
               </tbody>
            </table>
         </div>
      </div>
   </div>

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


</section>


<!-- /.content -->

@endsection

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

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

      var i = 1;
      output_tax_datatable = $('#output_tax_table').DataTable({
         processing: true,
         serverSide: true,
         aaSorting: [
            [0, 'desc']
         ],
         ajax: {
            url: "{{route('withdrawal-requests')}}",
            "data": function(d) {
               d.search_by_val = $('#search_by_val').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.to_date);
               d = __datatable_ajax_callback(d);
            }

         },
         columns: [{
               "render": function() {
                  return i++;
               }
            },
            {
               data: 'created_at',
               name: 'created_at'
            },
            {
               data: 'user_id',
               name: 'user_id'
            },
            {
               data: 'requested_by',
               name: 'requested_by'
            },
            {
               data: 'mobile_no',
               name: 'mobile_no'
            },
            {
               data: 'wallet_amount',
               name: 'wallet_amount'
            },
            {
               data: 'withdrawal_amount',
               name: 'withdrawal_amount'
            },
            {
               data: 'status',
               name: 'status'
            },

            {
               "render": function(data, type, row) {
                  var url = "{{ url('/req-withdraw-form') }}";
                  //return '<a href="'+url+'?id='+ row.id +'"> '+ row.total_shared + '</a>';
                  return ' <a href="' + url + '?id=' + row.id + '" class="btn btn-success btn-xs" ><i class="fa fa-credit-card" title="Payment"></a>';
               }
            },

         ]
      });

      $('#daterange_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();

         }
      });


   });
</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