@extends('administrator.layout')
@section('admintitle', 'Commission Level')
@section('content')
 <meta name="csrf-token" content="{{ csrf_token() }}">

            <!-- 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>{{ __('text.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>{{ __('text.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.level') }}  {{ __('text.commission')}} </h5></div>
                                    </div>
                                     <form id="commissionForm" action="" method="POST">
                                    @csrf
                                   
                                    <input type="hidden" name="commissions" value="Level commission">
                                <div class="mb-3 www">
                                <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') }}" @if(isset($settings['Level commission']['commission_type']) && $settings['Level commission']['commission_type'] == __('text.flat')) selected @endif>{{ __('text.flat') }}</option>
                                    <option value="{{ __('text.percentage') }}" @if(isset($settings['Level commission']['commission_type']) && $settings['Level commission']['commission_type'] == __('text.percentage')) selected @endif>{{ __('text.percentage') }}</option>
                                </select>
                            </div>
                              <div class="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="mb-3">
                                    <label style="margin-bottom: 11px;">{{ __('text.level_commission_upto_level') }}</label>
                                    <input type="number" class="form-control" id="level" name="level" value="{{ $settings['Level commission']['level'] ?? old('level') }}">
                                </div>
                                
                                <div id="commissionInputs">
    @foreach ($settings['Level commission']['inputs'] as $input => $value)
        <div class="mb-3">
            <label class="form-label">Level {{ $loop->iteration }}</label>
            <input type="text" class="form-control" name="{{ $input }}" value="{{ $value }}">
        </div>
    @endforeach
</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() {

    // Handle form submission
    $("#submitButton").click(function(event) {
        event.preventDefault(); // Prevent default form submission

        var formData = $("#commissionForm").serialize(); // Serialize the form data
        $.ajax({
            type: "POST",
            url: "/save-commission",
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF token
            },
            success: function(response) {
                alert("Settings saved successfully");
            },
            error: function(xhr, status, error) {
                alert("Error saving settings: " + error);
            }
        });
    });

    // Function to update commission input fields based on level
    function updateCommissionInputs(level) {
        var commissionInputs = $("#commissionInputs");
            commissionInputs.empty();

        // Fetch existing commission data via AJAX
        $.ajax({
            url: '/fetch-commission',
            method: 'POST',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                commissionInputs.empty();

                var existingData = response.data;

                for (var i = 1; i <= level; i++) {
                    var inputLabel = 'Level ' + i ;
                    var inputName = 'Level' + i; // Assuming you want 'Level1', 'Level2', etc.
                    var inputValue = existingData && existingData.inputs && existingData.inputs[inputName] ? existingData.inputs[inputName] : '';

                    var inputField = '<div class="mb-3"><label class="form-label">' +
                        inputLabel + '</label><input type="text" class="form-control" name="' +
                        inputName + '" value="' + inputValue + '"></div>';

                    commissionInputs.append(inputField);
                }
            },
            error: function(xhr, status, error) {
                console.error('Error fetching commission data:', error);
            }
        });
    }

    // Handle input event on #level input field
    $("#level").on('input', function() {
        var level = parseInt($(this).val());
        if (!isNaN(level) || level > 0 || level=='') {
            updateCommissionInputs(level);
        } else {
            $("#commissionInputs").empty();
        }
    });

});


</script>


@endsection