@extends('layouts.app1')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
@section('content')

<!-- page content -->
<div class="right_col" role="main">
  @include('flashmessage')
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>Move To Member</h3>
              </div>              
            </div>           
            <div class="clearfix"></div>

            <div class="panel-body">
            
            </div>            
                <form action="/moveToMember" method="POST">
                   @csrf                   
                    <table class="table table-bordered" style="background: #fff;">
                        <thead>
                            <tr>
                                <th colspan="2">Which Member, From Where</th>       
                                <th colspan="2">Which Memeber To Transfer</th>             
                            </tr>
                        </thead>                      

                        <tbody>
                            <tr>
                                <td>                                    
                                    <select required class="form-control" name="parent_member_type_id"
                                        id="parent_member">
                                        <option data-code="" value="0">Select Option</option>
                                        @foreach ($members as $member)
                                        <option data-code="{{$member->code}}" value="{{$member->id}}">
                                            {{$member->name}}
                                        </option>
                                        @endforeach
                                    </select>                                     
                                </td>
                                <td>                                    
                                    <select class="form-control" name="child_member_type_id"
                                        id="child_member_type_id">
                                        <option data-code="" value="">Select Option</option>
                                    </select>
                                </td>  

                                <td>                                    
                                    <select required class="form-control" name="parent2_member_type_id"
                                        id="parent2_member_type_id">
                                        <option data-code="" value="">Select Option</option>
                                        <option data-code="Admin" value="0" id="ad">Admin</option>
                                        <option data-code="SH" value="1" id="sd">Super Distributor</option>
                                        <option data-code="MD" value="2" id="md">Master Distributor</option>
                                        <option data-code="DT" value="3" id="dt">Distributor</option>
                                        <option data-code="RT" value="4" id="rt">Retailer</option>
                                        <!-- @foreach ($members as $member)
                                        <option data-code="{{$member->code}}" value="{{$member->id}}">
                                            {{$member->name}}
                                        </option>
                                        @endforeach -->
                                    </select>
                                </td>

                                <td>                                    
                                    <select class="form-control" name="child2_member_type_id"
                                        id="child2_member_type_id">
                                        <option data-code="" value="">Select Option</option>
                                    </select>
                                </td>                                       
                            </tr>
                        </tbody>
                        <tbody>
                            <tr>
                                <td colspan="4">
                                  <button type="submit" class="btn btn-success btn-xs">Move To Member</button>
                                </td>
                            </tr>
                        </tbody>

                        
                    </table>               
                    
                </form>           
            
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /page content -->
<style>
  .fade:not(.show){
    opacity: 1;
  }
  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }
</style>

<script type="text/javascript">
    jQuery(document).ready(function ()
    {
            $('#ad').hide();
            $('#sd').hide();
            $('#md').hide();
            $('#dt').hide();
            $('#rt').hide();
            jQuery('select[name="parent_member_type_id"]').on('change',function(){
               var parentMemberId = jQuery(this).val();
               if (parentMemberId == 0) {
                $('#ad').hide();
                $('#sd').hide();
                $('#md').hide();
                $('#dt').hide();
                $('#rt').hide();
               }
               if (parentMemberId == 1) {
                $('#ad').show();
                $('#sd').hide();
                $('#md').hide();
                $('#dt').hide();
                $('#rt').hide();
               }
               if (parentMemberId == 2) {
                $('#ad').show();
                $('#sd').show();
                $('#md').hide();
                $('#dt').hide();
                $('#rt').hide();
               }
               if (parentMemberId == 3) {
                $('#ad').show();
                $('#sd').show();
                $('#md').show();
                $('#dt').hide();
                $('#rt').hide();
               }
               if (parentMemberId == 4) {
                $('#ad').show();
                $('#sd').show();
                $('#md').show();
                $('#dt').show();
                $('#rt').hide();
               }
               if(parentMemberId)
               {
                  jQuery.ajax({
                     url : '/getAllMembers/'+parentMemberId,
                     type : "GET",
                     dataType : "json",
                     success:function(data)
                     {
                        // console.log(data);
                        jQuery('select[name="child_member_type_id"]').empty();
                        jQuery.each(data, function(key,value){
                           $('select[name="child_member_type_id"]').append('<option value="'+ key +'">'+ value +'</option>');
                        });
                     }
                  });
               }
               else
               {
                  $('select[name="child_member_type_id"]').empty();
               }
            });

            jQuery('select[name="parent2_member_type_id"]').on('change',function(){
               var parentMemberId = jQuery(this).val();
               // console.log(parentMemberId);
               if(parentMemberId)
               {
                  if (parentMemberId > 0) {
                    $('select[name="child2_member_type_id"]').show();
                    jQuery.ajax({
                       url : '/getAllMembers/'+parentMemberId,
                       type : "GET",
                       dataType : "json",
                       success:function(data)
                       {
                          // console.log(data);
                          jQuery('select[name="child2_member_type_id"]').empty();
                          jQuery.each(data, function(key,value){
                             $('select[name="child2_member_type_id"]').append('<option value="'+ key +'">'+ value +'</option>');
                          });
                       }
                    });
                  }else{
                    $('select[name="child2_member_type_id"]').hide();
                  }
               }
               else
               {
                  $('select[name="child2_member_type_id"]').empty();
               }
            });
    });
</script>

@endsection