@extends('backend.layouts.app')

@section('title', 'User Level Commission')
@section('page-title', 'User Level Commission')
@section('page-breadcrumb', 'User Level Commission')


@section('content')

<div class="content mt-3">

<div class="animated fadeIn">


                <div class="row">
                    <div class="col-lg-12">


                    <div class="card">
<h5 class="card-header">
    <strong><i class="fa fa-user-plus fa-lg"></i> Add Commission List Slab</strong>

</h5>
<!--Card content-->


 <form class="card" action="{{route('save_UserLevelCommission')}}" method="POST" enctype="multipart/form-data" >
   @csrf

    <div class="card-body">
        <!-- Form -->

        <div class="form-body">
            <!-- User Details -->


<h6 class="form-section mt-4"><b>User Type Commission Add</b></h6>
<hr>


<div class="row">


<!--/span-->
<div class="col-md-12">
    <div class="form-group row">
        <label class="form-label col-md-3" for="UserDetails_LastName">Channel ID</label>
        <div class="col-md-3">
          <select class="form-control select " required="" style="width:100%" id="channel_id" name="channel_id"  tabindex="-1" aria-hidden="true">
            @foreach($users_list as $user)
                      <option  value="{{$user->id}}">{{$user->first_name}} ({{$user->user_id}})</option>
              @endforeach
          </select>

        </div>
    </div>
</div>



<div class="col-md-12">
    <div class="form-group row">
        <label class="form-label col-md-3" for="UserDetails_FirstName">User Type<span class="text-danger"> *</span></label>
        <div class="col-md-3">
          <select onchange="get_user_list()" class="form-control select " required="" style="width:100%" id="user_type" name="user_type" tabindex="-1" aria-hidden="true">

            <option  value="" value="">Select</option>
            <option  value="0" value="0">Retailer</option>

          </select>

        </div>
    </div>
</div>

<div class="col-md-12">
    <div class="form-group row">
        <label class="form-label col-md-3" for="UserDetails_LastName">User ID</label>
        <div class="col-md-3">
          <select onchange="get_commision_list()" class="form-control select chosen" required="" style="width:100%" id="user_id" name="user_id"  tabindex="-1" aria-hidden="true">

          </select>

        </div>
    </div>
</div>

<!--/span-->
<div class="col-md-12">
    <div class="form-group row">
        <label class="form-label col-md-3" for="UserDetails_LastName">Service</label>
        <div class="col-md-3">
          <select onchange="get_commision_list()" class="form-control select chosen " required="" style="width:100%" id="service_id" name="service_id" tabindex="-1" aria-hidden="true">
            <option  value="">Please Select Service</option>
            @foreach($service_operator_list as $service)
                      <option  value="{{$service->id}}">{{$service->service_name}} ({{$service->operator_name}})</option>

              @endforeach
          </select>

        </div>
    </div>
</div>
<!--/span-->
  @if(Auth::user()->user_type>4)
<!--/span-->
<div class="col-md-12">
    <div class="form-group row">
        <label class="form-label col-md-3" for="UserDetails_LastName">Commission Type </label>
        <div class="col-md-3">
          <select onchange="get_commision_list()" class="form-control select " required="" style="width:100%" id="c_type" name="c_type"  tabindex="-1" aria-hidden="true">
            <option value="debit">Debit</option>

          </select>

        </div>
    </div>
</div>
@else
<input type="hidden" name="c_type" id="c_type" value="credit">
<!--/span-->
@endif

<!--/span-->
<div class="col-md-12">
    <div class="form-group row">
        <label class="form-label col-md-3" for="UserDetails_LastName">No of Slabs </label>
        <div class="col-md-3">
            <input class="form-control nameChar " type="number"  name="no_of_slabs" value="1">
        </div>
    </div>
</div>
<!--/span-->

</div>

        </div>
    </div>
    <div class="card-footer">
        <button type="submit" class="btn btn-primary btn-sm waves-effect waves-light">
            Add Slabs <i class="fa fa-arrow-circle-right fa-lg"></i>
        </button>

    </div>





</form>
<!-- Form -->

</div>



    <!-- ============================================================== -->

</div>

<div class="col-lg-12" id="ajax_notify">
</div>

<div class="col-lg-12" id="ajax_loader">
</div>




</div>
</div>
</div>

@endsection

@section('self_script')


<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css">
<script type="text/javascript">     $(".chosen").chosen(); </script>



<script>

function get_user_list(){

  user_type=document.getElementById('user_type').value;
  parent_id=document.getElementById('channel_id').value;

  var xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange = function() {
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         document.getElementById('user_id').innerHTML=xmlhttp.responseText;
         
          update_chosen('user_id');
       }
   }
   xmlhttp.open("GET", "UserLevelCommissionUser?parent_id="+parent_id+"&user_type="+user_type, true);
   xmlhttp.send();

}

function get_commision_list(){

  user_id=document.getElementById('user_id').value;

  service_id=document.getElementById('service_id').value;
  c_type=document.getElementById('c_type').value;
  channel_id=document.getElementById('channel_id').value;

  var xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange = function() {
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         document.getElementById('ajax_loader').innerHTML=xmlhttp.responseText;
       }
   }
   xmlhttp.open("GET", "UserLevelCommissionList?channel_id="+channel_id+"&user_id="+user_id+"&service_id="+service_id+"&c_type="+c_type, true);
   xmlhttp.send();

}

function update_commision_list(id){
  amount=document.getElementById(id+'amount').value;
  per=document.getElementById(id+'per').value;
  flat=document.getElementById(id+'flat').value;
   rate=document.getElementById(id+'rate').value;
   est_rate=document.getElementById(id+'est_rate').value;

  var xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange = function() {
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         document.getElementById('ajax_notify').innerHTML=xmlhttp.responseText;
       }
   }
   xmlhttp.open("GET", "UserLevelCommissionUpdate?amount="+amount+"&per="+per+"&flat="+flat+"&id="+id+"&rate="+rate+"&est_rate="+est_rate, true);
   xmlhttp.send();

}

function update_commision(id){
    
  amount=document.getElementById(id+'amount').value;
  per=document.getElementById(id+'per').value;
  flat=document.getElementById(id+'flat').value;
  rate=document.getElementById(id+'rate').value;
  
  total=parseInt(rate)+parseInt(flat);
  
 document.getElementById(id+'amount').value=parseInt(total-per);
  
  

}


</script>



@endsection