@extends('administrator.layout')
@section('admintitle', 'Commission Rank')
@section('content')

            <!-- Table Start -->
            <div class="container-fluid pt-4 px-4">
                <div class="row g-4">
                    <div class="col-12">
                        <div class="bg-light rounded h-100 p-4">
                                     @if (session()->has('success'))
                                        <div class="alert alert-success alert-dismissible fade show mb-2" role="alert">
                                            <i class="fa fa-exclamation-circle me-2"></i><strong>Success !</strong> {{ session()->get('success') }}.
                                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                        </div>
                                            @endif
                                        
                                            @if (session()->has('error'))
                                                <div class="alert alert-danger alert-dismissible fade show mb-2" role="alert">
                                                    <i class="fa fa-exclamation-circle me-2"></i><strong>Error !</strong> {{ session()->get('error') }}.
                                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                                </div>
                                            @endif

                                            <div class="row mb-4 mt-0">
                                                <div class="col-md-9 mt-3"><h5>{{ __('text.add') }} {{ __('text.rank') }}  {{ __('text.commission')}} </h5></div>
                                </div>
                             <form id="commissionForm" action="" method="POST">
                            @csrf
                            <input type="hidden" name="commissions" value="rank commission">
                          <div class="row mb-3">
                            <label for="inputfname"style="margin-bottom: 11px;" >{{ __('text.type') }} {{ __('text.of') }} {{ __('text.commisson') }}</label>
                            <select name="commission_type"class="form-control">
                               
                                <option value="{{ __('text.flat') }}">{{ __('text.flat') }}</option>
                                <option value="{{ __('text.percentage') }}">{{ __('text.percentage') }}</option>
                            </select>
                          </div>
                          <div class="row mb-3"style="display: none;">
                            <label for="inputlname"style="margin-bottom: 11px;" >{{ __('text.commission') }} {{ __('text.criteria') }}</label>
                            <select name="commission_criteria" class="form-control">
                              
                                <option value="{{ __('text.sponsor_level_commission') }}">{{ __('text.sponsor_level_commission') }}</option>
                                <option value="{{ __('text.register_pack_commission') }}">{{ __('text.register_pack_commission') }}</option>
                                <option value="{{ __('text.member_pack_commission') }}">{{ __('text.member_pack_commission') }}</option>
                            </select>
                                </div>
                                <div class="row mb-3">
                                    <label style="margin-bottom: 11px;" >{{ __('text.level_commission_upto_level') }}</label>
                                    <input type="number" class="form-control" id="level" name="level">
                                </div>
                               
                                    <div id="commissionInputs"></div>
                              <button type="button" class="btn btn-primary" style="margin-bottom: 11px;" id="submitButton">{{ __('text.submit')}}</button>
                                          </form>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Table End -->
                                
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Make sure jQuery is included -->

<script>
$(document).ready(function(){
    $("#submitButton").click(function(){
        var formData = $("#commissionForm").serialize(); // Serialize the form data
        $.ajax({
            type: "POST",
            url: "/save-commission",
            data: formData,
            success: function(response){
                console.log(response.message);
            },
            error: function(xhr, status, error){
                console.error(error);
            }
        });
    });

    function updateCommissionInputs(level) {
        var commissionInputs = $("#commissionInputs");
        commissionInputs.empty();
        for (var i = 1; i <= level; i++) {
            var inputLabel = 'Level ' + i + ' Commission';
            var inputName = 'input' + i;
            var inputField = '<div class="mb-3"><label class="form-label">' + 
            inputLabel + '</label><input type="text" class="form-control" name="' + inputName + '"></div>';
            if (i === level) {
                inputField += '';
            }
            commissionInputs.append(inputField);
        }
       
    }

    $("#level").on('input', function() {
        var level = parseInt($(this).val());
        if (!isNaN(level) && level > 0) { // Check if level is a positive integer
            updateCommissionInputs(level);
        } else {
            $("#commissionInputs").empty();
          
        }
    });
});
</script>


@endsection