@extends('layouts.app1')

@section('content')

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

            <div class="panel-body">
            
            </div>            
                <form action="/memberIdPlan" method="POST">
                   @csrf                   
                    <table class="table table-bordered" style="background: #fff;">
                        <thead>
                            <tr>
                                <th>Parent Member Type</th>                                                         
                                <th>Child Member Type</th>
                                <th>Amount</th>
                                <th>No Of Id's</th>                  
                                <th>#</th>                                                  
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>                                    
                                    <select onChange="myNewFunction(this);" required class="form-control" name="parent_member_type_id"
                                        id="parent_member">
                                        <option data-code="" value="">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="package">
                                        <option data-code="" value="">Select Option</option>
                                        <option value="2" id="master_d" style="display: none;">Master Distributor</option>
                                        <option value="3" id="distributor" style="display: none;">Distributor</option>
                                        <option value="4" id="retailer" style="display: none;">Retailer</option>
                                    </select>
                                </td>                                                        
                                
                                <td>
                                  <input class="form-control" type="number" value="0" name="amount" class=""
                                    placeholder="">
                                </td>  
                                <td>
                                  <input class="form-control" type="number" value="0" name="no_of_ids" class=""
                                    placeholder="">
                                </td>  
                                <td><button type="submit" class="btn btn-success btn-xs">Save</button></td>
                                
                            </tr>
                        </tbody>
                    </table>               
                    
                </form>
            <div class="row">
              <div class="col-md-12 col-sm-12 ">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>List of Plans</h2>
                    
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                      <div class="row">
                          <div class="col-sm-12">
                            <div class="card-box table-responsive">
                    <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%" style="white-space: nowrap">
                      <thead>
                        <tr>
                            <th>S.N.</th>
                            <th>Parent Member Type</th>                            
                            <th>Child Member Type </th>
                            <th>Amount </th>  
                            <th>No Of Id's </th> 
                            <th>#</th>                           
                        </tr>
                      </thead>
                      <tbody>  
                          @foreach ($memberIdPlan as $key=> $item) 
                            <tr>
                                <td>{{$key+1}}</td>
                                <td>
                                  @if($item->parent_member_type_id == 1)
                                    Super Distributor
                                  @elseif($item->parent_member_type_id == 2)
                                    Master Distributor
                                  @elseif($item->parent_member_type_id == 3)
                                    Distributor
                                  @elseif($item->parent_member_type_id == 4)
                                    Retailer
                                  @endif
                                </td>                               
                                <td>
                                  @if($item->child_member_type_id == 1)
                                    Super Distributor
                                  @elseif($item->child_member_type_id == 2)
                                    Master Distributor
                                  @elseif($item->child_member_type_id == 3)
                                    Distributor
                                  @elseif($item->child_member_type_id == 4)
                                    Retailer
                                  @endif
                                </td> 
                                <td>{{$item->amount}}</td> 
                                <td>{{$item->no_of_ids}}</td> 
                                <td>
                                    <form method="POST" action="/memberIdPlan">
                                        @csrf
                                        @method("delete")
                                        <input type="hidden" name="plan_id" value="{{$item->id}}">
                                        <button type="submit"><i class="fa fa-trash" title="Delete Items"></i></button>
                                    </form>
                                </td>

                            </tr>                            
                            @endforeach

                                             
                      </tbody>
                      

                    </table>
          
          
                  </div>
                </div>
              </div>
            </div>
            
                </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">
  function myNewFunction(sel) {
    var value = sel.options[sel.selectedIndex].value;
    // alert(value);
    if (value == 1) {
      document.getElementById("master_d").style.display = "block";
      document.getElementById("distributor").style.display = "block";
      document.getElementById("retailer").style.display = "block";
    }
    if (value == 2) {
      document.getElementById("master_d").style.display = "none";
      document.getElementById("distributor").style.display = "block";
      document.getElementById("retailer").style.display = "block";
    }
    if (value == 3) {
      document.getElementById("master_d").style.display = "none";
      document.getElementById("distributor").style.display = "none";
      document.getElementById("retailer").style.display = "block";
    }
    if (value == 4) {
      document.getElementById("master_d").style.display = "none";
      document.getElementById("distributor").style.display = "none";
      document.getElementById("retailer").style.display = "none";
    }
    if (value == '') {
      document.getElementById("master_d").style.display = "none";
      document.getElementById("distributor").style.display = "none";
      document.getElementById("retailer").style.display = "none";
    }
  }
</script>


@endsection