@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>Free Member Id Plan</h3>
                        </div>                        
                    </div>
                    <div class="clearfix"></div>

                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="x_panel">
                                <div class="x_title">
                                    <h2>Free Member Plan</h2>
                                    
                                    <div class="clearfix"></div>
                                </div>                               

                                <div class="x_content">
                                    <form method="POST" enctype="multipart/form-data" id="form" class="" action="/members/payFreeMemberId">
                                        @csrf                                                                               
                                        <div class="row">
                                            <div class="field item form-group col-md-9">
                                                <label class="col-form-label col-md-5 col-sm-5 label-align">Select Member<span class="required">*</span></label>
                                                <div class="col-md-7 col-sm-7">
                                                    <select class="form-control" name="member_id" id="member_id">
                                                        <option>Select Member</option>
                                                        @foreach($users as $key => $list)
                                                            <option value="{{ $list->id }}">{{ $list->loginId }}</option>
                                                        @endforeach
                                                    </select>
                                                    <!-- <input name="old_password" value="" type="password" id="old_password" class="form-control"> -->
                                                    <p id="nameValue"></p>
                                                </div>                                                
                                            </div>
                                            <div class="field item form-group col-md-9">
                                                <label class="col-form-label col-md-5 col-sm-5 label-align">Select Member Type<span class="required">*</span></label>
                                                <div class="col-md-7 col-sm-7">
                                                    <select class="form-control" name="member_type">
                                                        <option>Member Type</option>
                                                        <option value="1" id="sd">Super Distributor</option>
                                                        <option value="2" id="md">Master Distributor</option>
                                                        <option value="3" id="dis">Distributor</option>
                                                        <option value="4" id="ret">Retailer</option>
                                                    </select>
                                                    <!-- <input name="old_password" value="" type="password" id="old_password" class="form-control"> -->
                                                    <p id="memTypeName"></p>
                                                </div>                                                
                                            </div>
                                            <div class="field item form-group col-md-9">
                                                <label class="col-form-label col-md-5 col-sm-5 label-align">Credit & Debit<span class="required">*</span></label>
                                                <div class="col-md-7 col-sm-7">
                                                    <select class="form-control" name="cr_dr">
                                                        <option>Select Type</option>
                                                        <option value="credit">Credit</option>
                                                        <option value="debit">Debit</option>                    
                                                    </select>
                                                    <p></p>
                                                </div>                                                
                                            </div>                                                                                        
                                            <div class="field item form-group col-md-9">
                                                <label class="col-form-label col-md-5 col-sm-5 label-align">No of Id's<span class="required">*</span></label>
                                                <div class="col-md-7 col-sm-7">
                                                    <input name="no_of_id" type="number" id="no_of_id" class="form-control">
                                                </div>
                                            </div>
                                            <div class="mt-2 col-md-12 text-center">
                                                <div class="form-group">
                                                    <div class="col-md-12">
                                                        <button type='submit' class="btn btn-primary">Submit</button>
                                                        <button type='reset' class="btn btn-success">Reset</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /page content -->
@endsection
<style type="text/css">
    .field p{
        color: green; padding: 5px 0;margin-bottom: 5px;
    }
    /* 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 ()
    {
        	jQuery('select[name="member_id"]').on('change',function(){
               var memberId = jQuery(this).val();
               // console.log(memberId);
               if(memberId)
               {
                  jQuery.ajax({
                     url : 'getMemberForMemberId/'+memberId,
                     type : "GET",
                     dataType : "json",
                     success:function(data)
                     {                        
                        // jQuery('select[name="member_type"]').empty();
                        jQuery.each(data, function(key,value){
                        	// console.log(value);
                        	$('#nameValue').html(value);
                        	if (key == 1) {
                        		$('#sd').hide();
                        		$('#md').show();
                        		$('#dis').show();
                        		$('#ret').show();
                        	}
                        	if (key == 2) {
                        		$('#sd').hide();
                        		$('#md').hide();
                        		$('#dis').show();
                        		$('#ret').show();
                        	}
                        	if (key == 3) {
                        		$('#sd').hide();
                        		$('#md').hide();
                        		$('#dis').hide();
                        		$('#ret').show();
                        	}
                        	if (key == 4) {
                        		$('#sd').hide();
                        		$('#md').hide();
                        		$('#dis').hide();
                        		$('#ret').hide();
                        	}                        	
                        });
                     }
                  });
               }
               else
               {
                  $('select[name="member_type"]').empty();
               }
            });

            jQuery('select[name="member_type"]').on('change',function(){
               var memberType = jQuery(this).val();
               var memberId = $('#member_id').val();               
               if(memberType)
               {
                  jQuery.ajax({
                     url : 'getMemberUserMaster/'+memberId+'/'+memberType,
                     type : "GET",
                     dataType : "json",
                     success:function(data)
                     {  
                     	if (memberType == 2) {
                     		var memType = data.master_d;
                     	}
                     	if (memberType == 3) {
                     		var memType = data.distributor;
                     	}
                     	if (memberType == 4) {
                     		var memType = data.retailer;
                     	}
                     	// console.log(memTypeName); 
                     	var msg = "Available "+memType+" Id's";
                     	$('#memTypeName').html(msg); 
                     }
                  });
               }
               else
               {
                  $('select[name="member_type"]').empty();
               }
            });
    });
</script>