@extends('layouts.app')
@section('title', __('Prime Members'))
@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
   <div class="row">
      <input type="hidden" id="all_members">
      <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="all_primemembers" onclick='allMemberType(1)'>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="#" id="all_customers" onclick='allMemberType(0)'>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"><a href="{{url('/revenue-statement')}}" target="_blank">Company Revenue </a></span>
               <span class="info-box-number total_sell">({{($revenue)}})</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"><a href="{{url('/wallet-statement')}}" target="_blank">User Credit History</a></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">
                     <option value='all'>All</option>
                     <option value='expired'>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->id}}'>{{$users->f_name}} {{$users->l_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>

         @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" id="member_list_prime_label">Prime Members List</a>
               <a href="#output_tax_tab" data-toggle="tab" aria-expanded="true" id="member_list_customer_label" style="display:none">Customers 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/Prime A/c No.</th>
                           <th>Member Name</th>
                           <th>Member Type</th>
                           <th>Mobile </th>
                           <th>Sponsor Id & Name</th>
                           <th>Upgraded On</th>
                           <th>Shared</th>
                           <th>Prime Member</th>
                           <th>Family</th>
                           <!-- <th>Active</th> -->
                           <th width="300px">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>

   <!-- 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">Change Password</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-1">
                              </div>
                              <div class="col-sm-9">
                                 <div class="form-group">
                                    @if(!empty($withdrawalRecord->image))
                                    <img src="https://bhavyaretail.com//uploads/primemebers/{{$withdrawalRecord->image }}" width="130px" height="150px">
                                    @else
                                    <img src="https://bhavyaretail.com//uploads/primemebers/default_user.jpg" width="130px" height="150px">
                                    @endif
                                 </div>
                              </div>
                              <div class="col-sm-2">
                              </div>
                           </div>
                           <div class="col-sm-12">
                              <div class="col-sm-1">
                              </div>
                              <div class="col-sm-10">
                                 <div class="form-group">

                                    <!-- <label for="point_type" class="text-primary">{{$primelRecord->f_name }} {{$primelRecord->l_name }}</label> -->
                                 </div>
                              </div>
                              <div class="col-sm-1">
                              </div>
                           </div>
                           <div class="col-sm-12">
                              <div class="col-sm-1">
                              </div>
                              <div class="col-sm-10">
                                 <div class="form-group">
                                    <!-- <label for="point_type">Prime Account Number</label>
                        <label for="point_type" class="text-primary">{{$primelRecord->prime_account_no }}</label> -->
                                 </div>
                              </div>
                              <div class="col-sm-1">
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="col-sm-9">
                        <div class="row">
                           <div class="col-sm-2">
                           </div>
                           <div class="col-sm-3 form-group">
                              <label for="point_type">Name :</label>
                           </div>
                           <div class="col-sm-7">
                              <input class="form-control" readonly name="name" id="name" type="text">
                           </div>

                        </div>
                        <!-- <div class="row">
            <div class="col-sm-2">
               </div>
               <div class="col-sm-3 form-group">
                  <label for="point_type">Address :</label>
               </div>
               <div class="col-sm-7">
                  <input class="form-control" readonly name="prime_member_address" id="address" type="text" >
               </div>
             
            </div> -->
                        <!-- <div class="clearfix"></div>
            <div class="row">
            <div class="col-sm-2">
               </div>
               <div class="col-sm-3 form-group ">
                  <label for="point_type">Mobile :</label>
               </div>
               <div class="col-sm-7">
                  <input class="form-control" readonly name="mobile" id="mobile" type="text" >
               </div>
               
            </div>

            <div class="clearfix"></div>
            <div class="row">
               <div class="col-sm-2">
               </div>
               <div class="col-sm-3 form-group">
                  <label for="point_type">Email :</label>
               </div>
               <div class="col-sm-7">
                  <input class="form-control" readonly name="email" id="email"  type="text" >
               </div>
              
            </div>
            <div class="clearfix"></div>
            <div class="row">
               <div class="col-sm-2">
               </div>               
               <div class="col-sm-3 form-group">
                  <label for="point_type">Bank A/C No:</label>
               </div>
               <div class="col-sm-5">
                  <input class="form-control" readonly name="bank_account" id="bank_ac_no" type="text" >
               </div>
               <div class="col-sm-7">
               </div>
            </div>

            <div class="clearfix"></div>
            <div class="row">
            <div class="col-sm-2">
               </div>               
               <div class="col-sm-3 form-group">
                  <label for="point_type">Bank IFSC Code:</label>
               </div>
               <div class="col-sm-7">
                  <input class="form-control" readonly name="bank_ifsc" id="bank_ifc_no" type="text" >
               </div>
              
 
            <div class="clearfix"></div> -->

                        <div class="row">
                           <div class="col-sm-2">
                           </div>
                           <div class="col-sm-3 form-group">
                              <label for="point_type">Password:</label>
                           </div>
                           <div class="col-sm-5">
                              <input class="form-control" name="password" id="password" type="password" required>
                           </div>
                           <div class="col-sm-7">
                           </div>
                        </div>

                        <div class="clearfix"></div>
                        <div class="row">
                           <div class="col-sm-2">
                           </div>
                           <div class="col-sm-3 form-group">
                              <label for="point_type">Confirm Password:</label>
                           </div>
                           <div class="col-sm-5">
                              <input class="form-control" name="cpassword" id="confirmpasword" type="password" onchange="matchPassword();" required>
                           </div>
                           <div class="col-sm-7">
                           </div>
                        </div>
                        <div class="clearfix"></div>

                     </div>
               </form>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-default" onclick="updatePassword();" data-dismiss="modal">Update</button>
            </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'),
         startDate: moment().startOf('month'),
         endDate: moment(),

      });


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

      output_tax_datatable = $('#output_tax_table').DataTable({
         "scrollX": true,
         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.member_expired = $('#member_expired').val();
               d.all_members = $('#all_members').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.reffered_by);
               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: 'prime_account_no',
               name: 'prime_account_no'
            },
            {
               data: 'name',
               name: 'name'
            },
            {
               data: 'prime_member',
               name: 'prime_member'
            },
            {
               data: 'mobile_no',
               name: 'mobile_no'
            },
            {
               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" style="color:#005555;font-weight:500;"> ' + 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" style="color:#005555;font-weight:500;" > ' + 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" style="color:#005555;font-weight:500;" > ' + row.family_members + '</a>';
               }
            },
            // {
            //    data: 'status',
            //    name: 'status',
            //    searchable: false,
            //    render: function(data, type, row, meta) {
            //       if (row.status == 1) {
            //          $status_val = 'Active';
            //          return '<a   id=' + row.id + ' onclick="check_status(this);" ><i class="fa fa-check" title="Active" style="font-size:20px;color:green" ></i></a> ';
            //       } else {
            //          $status_val = 'InActive';
            //          return '<a  id=' + row.id + ' onclick="check_status(this);" ><i class="fa fa-ban" title="Inactive" style="font-size:20px;color:red" ></i></a> ';
            //       }
            //       //return '<button  class="hide_row btn-primary"   id=' + row.id + ' onclick="check_status(this);" >' + $status_val + '</button> ';


            //    }
            // },
            {
               data: 'action',
               name: 'action',
               orderable: false,
               searchable: false
            }

         ],
      });

      $('#member_status_id, #member_type_id ,#reffered_by,#daterange_id,#member_expired').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 viewPopup(v) {
      var userId = v.id;
      $.ajax({
         type: 'GET',
         url: "{{ route('open-view-popup-primemember') }}",
         data: {
            userId: userId,
         },
         dataType: 'json',
         success: function(data) {
            $('#user_id').val(data.id);
            $('#name').val(data.f_name + ' ' + data.l_name);
            $('#mobile').val(data.phone);
            $('#email').val(data.email);
            $('#bank_ac_no').val(data.bank_ac_no);
            $('#bank_ifc_no').val(data.bank_ifc_no);

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

   function matchPassword() {
      var password = $('#password').val();
      var confirmPassword = $('#confirmpasword').val();
      if (password != confirmPassword) {
         alert("Password does not match");
      }
   }

   function updatePassword(v) {
      var userId = $('#user_id').val();
      var password = $('#password').val();
      $.ajax({
         type: 'POST',
         url: "{{ route('update-user-password') }}",
         data: {
            userId: userId,
            password: password
         },

         // dataType: 'json',
         success: function(data) {
            console.log(data);
            alert(data.message);
         },
         error: function(request, error) {
            // console.log(arguments);
            var error_message = arguments[2];
            alert(" Error: " + error_message);
         },
      });
   }

   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 isPhoneVerified(v) {
      var user_id = v.id;
      $.ajax({
         type: 'POST',
         url: "{{route('is-phone-verified')}}",
         dataType: 'json',
         data: {
            user_id: user_id
         },
         success: function(data) {
            if (data != '') {
               console.log(data);
               alert(data);
               $('#output_tax_table').DataTable().ajax.reload();
            } else {
               alert('phone Not Verified');
            }

         }
      });

   }

   function customerToTeamLeader(v) {
      var user_id = v.id;
      console.log(user_id);
      $.ajax({
         type: 'GET',
         url: "{{ route('change-customer-to-team-leader') }}",
         data: {
            _token: "{{ csrf_token() }}",
            user_id: user_id,

         },
         dataType: 'json',
         success: function(data) {
            if (data != '') {
               alert(data);
               $('#output_tax_table').DataTable().ajax.reload();
            } else {
               alert('You are not Team Leader');
            }

         }
      });
   }

   // function allMemberType(v) {
   //    $('#all_members').val(v);
   //    output_tax_datatable.ajax.reload();
   // }

   function allMemberType(v) {
        $('#all_members').val(v);
        if (v == 0) {
            document.getElementById("member_list_prime_label").style.display = 'none';
            document.getElementById("member_list_customer_label").style.display = 'block';
        } else {
            document.getElementById("member_list_prime_label").style.display = 'block';
            document.getElementById("member_list_customer_label").style.display = 'none';      
        }
        output_tax_datatable.ajax.reload();
    }

</script>

<script>
   $(function() {
      singleDatePicker: true,
      showDropdowns: true,
      $('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