@extends('layouts.app')
@section('title', __('Prime Members'))
@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
   <div class="row">
      <div class="col-md-3 col-xs-12">
         <h3> Prime Members </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="{{url('/prime-members-listing')}}" target="_blank">Total Prime Members</a></span>
               <span class="info-box-number total_sell">({{$totalPrimeMembers}})</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-green"><i class="fa fa-check"></i></span>
            <div class="info-box-content">
               <span class="info-box-text"><a href="{{url('/customers-listing')}}" target="_blank">Total Customers</a></span>
               <span class="info-box-number total_sell">({{$totalCustomers}})</span>
            </div>
            <!-- /.info-box-content -->
         </div>
      </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">Payment History</span>
               <span class="info-box-number total_sell">({{($totalcustomerIncome)}})</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">
               {!! 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">Type</label>
               <div>
                  <select class='form-control' id="member_type_id">
                     <option value='all'>All</option>
                     <option value='1'>Prime</option>
                     <option value='0'>Customer</option>
                  </select>
               </div>
            </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'>All</option>
                     <option value='1'>Active</option>
                     <option value='0'>InActive</option>
                  </select>
               </div>
            </div>
         </div>
         <div class="col-md-2">
            <div class="form-group">
               <label for="status_filter">Expired</label>
               <div>
                  <select class='form-control' id="member_expired_id">
                     <option value='all'>All</option>
                     <option value='1'>Expired</option>
                  </select>
               </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">Prime Members List</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>Sl No.</th>
                           <th width="80px">Reg Date</th>
                           <th>Customer ID</th>
                           <th>Member Name</th>
                           <th>Member Type</th>
                           <th>Ref By ID & Name</th>
                           <th>Ref Date</th>
                           <th>Total Shared</th>
                           <th>Total Prime Member</th>
                           <th>Family Member</th>
                           <th>Active</th>
                           <th width="200px">Action</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;
      var member_status_id = $('#member_status_id').val();

      output_tax_datatable = $('#output_tax_table').DataTable({
         processing: true,
         serverSide: true,
         aaSorting: [
            [0, 'desc']
         ],
         ajax: {

            //    url: '/prime-members?member_status_id='+member_status_id ,
            url: '/prime-members',
            "data": function(d) {
               d.member_status_id = $('#member_status_id').val();
               d.member_type_id = $('#member_type_id').val();
               d.prime_only_id = $('#prime_only_id').attr("data-val");
               d.search_by_val = $('#search_by_val').val();
               d.reffered_by = $('#reffered_by').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: [{
               "render": function() {
                  return i++;
               }
            },
            {
               data: 'created_at',
               name: 'created_at'
            },
            {
               data: 'id',
               name: 'id'
            },
            {
               data: 'name',
               name: 'name'
            },
            {
               data: 'prime_member',
               name: 'prime_member'
            },
            {
               data: 'ref_code',
               name: 'ref_code'
            },
            {
               data: 'prime_since',
               name: 'prime_since'
            },
            {
               data: 'total_shared',
               name: 'total_shared',
               render: function(data, type, row) {
                  var url = "{{ url('/shared-links') }}";
                  return '<a href="' + url + '?id=' + row.id + '" target="_blank"> ' + row.total_shared + '</a>';
               }
            },
            {
               data: 'under_total_prime',
               name: 'under_total_prime',
               render: function(data, type, row) {
                  var url = "{{ url('/prime-members-info') }}";
                  return '<a href="' + url + '?id=' + row.id + '" target="_blank" > ' + row.under_total_prime + '</a>';
               }
            },
            {
               data: 'family_members',
               name: 'family_members',
               render: function(data, type, row) {
                  var url = "{{ url('/family-members-info') }}";
                  return '<a href="' + url + '?id=' + row.id + '" target="_blank" > ' + row.family_members + '</a>';
               }
            },
            {
               data: 'status',
               name: 'status',
               searchable: false,
               render: function(data, type, row, meta) {
                  if (row.status == 1) {
                     $status_val = 'Active';
                  } else {
                     $status_val = 'InActive';
                  }
                  return '<button  class="hide_row btn-primary"   id=' + row.id + ' onclick="check_status(this);" >' + $status_val + '</button> ';
               }
            },
            {
               data: 'action',
               name: 'status',
               orderable: false,
               searchable: false
            }

         ],
      });

      $('#member_status_id, #member_type_id ,#reffered_by,#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 check_status(v) {
      var user_id = v.id;
      // console.log(user_id);
      $.ajax({
         type: 'GET',
         url: "{{ route('change-prime-members-status') }}",
         data: {
            user_id: user_id,
            type: 'status'
         },
         dataType: 'json',
         success: function(data) {
            if (data != '') {
               alert("Status Update Successfully");
               $('#output_tax_table').DataTable().ajax.reload();
            } else {
               alert('Status not Updated');
            }

         }
      });
   }

   function approval(v) {
      var user_id = v.id;
      // console.log(user_id);
      $.ajax({
         type: 'GET',
         url: "{{ route('change-prime-members-status') }}",
         data: {
            _token: "{{ csrf_token() }}",
            user_id: user_id,
            type: 'approve'
         },
         dataType: 'json',
         success: function(data) {
            if (data != '') {
               alert(data.message);
               $('#output_tax_table').DataTable().ajax.reload();
            } else {
               alert('You are not Prime Member Yet Now');
            }

         }
      });
   }




   function filter_status(v) {
      var member_status = v.value;
      // console.log(user_id);
      $.ajax({
         type: 'GET',
         url: "{{ route('active-deactive-prime-members') }}",
         data: {
            member_status: member_status
         },
         dataType: 'json',
         success: function(data) {
            if (data != '') {
               alert(data.message);
               $('#output_tax_table').DataTable().ajax.reload();
            } else {
               alert('User Not Deleted');
            }

         }
      });
   }



   function delete_user(v) {
      var result = confirm("Do you Want to delete?");
      if (result) {
         var user_id = v.id;
         // console.log(user_id);
         $.ajax({
            type: 'GET',
            url: "{{ route('delete-prime-members') }}",
            data: {
               user_id: user_id
            },
            dataType: 'json',
            success: function(data) {
               if (data != '') {
                  alert(data.message);
                  $('#output_tax_table').DataTable().ajax.reload();
               } else {
                  alert('User Not Deleted');
               }

            }
         });
      }

   }
   //   function prime_members_only()
   //     {  

   //            $.ajax({
   //            type:'POST',
   //            url: 'prime-members',
   //            data:{
   //               member_type_id : 1
   //                 },
   //            dataType:'json',
   //            success:function(data){
   //             console.log(data)
   //             if(data != ''){
   //                 alert(data);
   //                 $('#output_tax_table').DataTable().ajax.reload();
   //             }

   //           }
   //         });

   //     }


   //     function searchBy()
   //     {  

   //         var search_val = document.getElementById("txtsearch").value;
   //         //alert(search_val);
   //            $.ajax({
   //            type:'POST',
   //            url: 'prime-members',
   //            data:{
   //                  search_val : search_val
   //                 },
   //            dataType:'json',
   //            success:function(data){
   //             console.log(data)
   //             if(data != ''){
   //                 alert(data);
   //                 $('#output_tax_table').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