@extends('layouts.app')
@section('title', __('Wallet Statement'))
@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
   <div class="row">
      <div class="col-md-3 col-xs-12">
         <h3> Wallet Statement</h3>
      </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">
               {!! Form::label('date_range', __('report.date_range') . ':') !!}
               <input type="text"  class = 'form-control' name="daterange" value="" id="daterange_id" />
            </div>
         </div>
         <div class="col-md-2">
            <div class="form-group">
               <label for="status_filter">Transaction Type</label>
               <div >
                  <select class = 'form-control' id="transaction_type_id" >
                     <option value='all'>All</option>
                     <option value='debit' >Debit</option>
                     <option value='credit' >Credit</option>
                  </select>
               </div>
            </div>
         </div>
         <div class="col-md-2">
            <div class="form-group">
               <label for="status_filter">Income Type</label>
               <div >
                  <select class = 'form-control' id="income_type_id"  >
                     <option value='all'>All</option>
                     <option value='app_share' >App Share</option>
                     <option value='transfer' >Transfer</option>
                     <option value='withdrawal' >Withdrawal</option>
                     <option value='sposor' >Sponsor</option>
                     <option value='recharge' >Recharge</option>
                  </select>
               </div>
            </div>
         </div>
         <div class="col-md-4">
            <div class="form-group">
            <div class="info-box-content">
            <button type="button" class="btn btn-primary mt-10" >Available Balance : {{$balance}}</button>
            
            </div>
            </div>
         </div>
         <!-- <div class="col-md-3">
            <div class="form-group">
               <label for="status_filter">Reffer By</label>
               <div >
                  <select class = 'form-control' id="reffered_by" >
                     <option value='all'>All</option>
                     @foreach($referredByUsers as $users)
                     <option value='{{$users->ref_code}}'>{{$users->f_name}} </option>
                     @endforeach
                  </select>
               </div>
            </div>
         </div> -->
         <!-- <div class="col-md-8">
            <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 class="col-md-2">
            <div class="form-group">
               <div >
                  <button type="button" class="btn btn-block btn-primary" 
                     data-href=""  data-container="">
                  <i class="fa fa-plus"></i> Add </button>
               </div>
            </div>
         </div> -->
         @endcomponent
      </div>
   </div>
   <div class="row">
      <div class="col-md-12">
         <!-- Custom Tabs -->
         <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
               <li class="active">
                  <a href="#output_tax_tab" data-toggle="tab" aria-expanded="true">Wallet Statement Details</a>
               </li>
            </ul>
            <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 width="50px">Sl No.</th>
                           <th width="180px">Date Time</th>
                           <th width="500px">Particulars</th>
                           <th>Credit</th>
                           <th>Debit</th>
                           <th>Balance</th>
                        
                        </tr>
                     </thead>
                     {{--
                     <tfoot>
                        <tr class="bg-gray font-17 text-center footer-total">
                           <td colspan="1"><strong>@lang('sale.total'):</strong></td>
                           <td><span class="display_currency" id="purchase_total" data-currency_symbol ="true"></span></td>
                           <td class="output_payment_method_count" colspan="2"></td>
                        </tr>
                     </tfoot>
                     --}}
                  </table>
               </div>
               @if(!empty($tax_report_tabs))
               @foreach($tax_report_tabs as $key => $tabs)
               @foreach ($tabs as $index => $value)
               @if(!empty($value['tab_content_path']))
               @php
               $tab_data = !empty($value['tab_data']) ? $value['tab_data'] : [];
               @endphp
               @include($value['tab_content_path'], $tab_data)
               @endif
               @endforeach
               @endforeach
               @endif
            </div>
         </div>
      </div>
   </div>
</section>
<!-- /.content -->
@stop
@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('wallet-statement')}}",
              "data": function(d) {
                   d.transaction_type_id = $('#transaction_type_id').val();
                   d.income_type_id = $('#income_type_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.to_date);
                    d = __datatable_ajax_callback(d);
               }
             
           },
           columns: [
            {"render": function() {
                        return i++;
                    } },
            { data: 'created_at', name: 'created_at' },
            { data: 'particulars', name: 'credit' },
            { data: 'credit', name: 'credit' },
            { data: 'debit', name: 'debit' },
            { data: 'balance', name: 'balance' }
                 
          ]
  });

       $('#daterange_id,#transaction_type_id,#income_type_id').change( function(){
            
              // alert('hello');
               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