<script>
    $(document).ready(function (){
        $('#basis-list').select2();

        var addButton = $('#add-vehicle'); //Add button selector
        var wrapper = $('.added-fields'); //Input field wrapper
        var x = 1;
        var fieldHTML = '<div class="">' +
            '<button type="button" id="remove-button"> <i class="fa fa-trash"></i> </button>' +
            '    <div class="guestDetails_input">\n' +
            '        <div class="guestDetails_inputLabel">Basic Salary From.:<span class="error">*</span></div>\n' +
            '        <div class="guestDetails_input">\n' +
            '            <input  type="number"  name="from[]" style="width: 100px" class="input-text-height">\n' +
            '        </div>\n' +
            '    </div>\n' +
            '    <div class="guestDetails_input">\n' +
            '        <div class="guestDetails_inputLabel">Basic Salary To:<span class="error">*</span></div>\n' +
            '        <div class="guestDetails_input">\n' +
            '            <input  type="number"  name="to[]" style="width: 100px" class="input-text-height">\n' +
            '        </div>\n' +
            '    </div>\n' +
            '    <div class="guestDetails_input">\n' +
            '        <div class="guestDetails_inputLabel">Applicable Rate/Amount:<span class="error">*</span></div>\n' +
            '        <div class="guestDetails_input">\n' +
            '            <input  type="number"  name="rate[]" style="width: 100px" class="input-text-height">\n' +
            '        </div>\n' +
            '    </div>\n' +
            '    <div class="guestDetails_input">\n' +
            '        <div class="guestDetails_inputLabel">Minimum Amount:<span class="error">*</span></div>\n' +
            '        <div class="guestDetails_input">\n' +
            '            <input  type="number"  name="minimum[]" style="width: 100px" class="input-text-height">\n' +
            '        </div>\n' +
            '    </div>\n' +
            '    <div class="guestDetails_input">\n' +
            '        <div class="guestDetails_inputLabel">Maximum Amount:<span class="error">*</span></div>\n' +
            '        <div class="guestDetails_input">\n' +
            '            <input  type="number"  name="maximum[]" style="width: 100px" class="input-text-height">\n' +
            '        </div>\n' +
            '    </div>\n' +
            '    <div class="guestDetails_inputDivider input_divider1"></div>';

        //Once add button is clicked
        $(addButton).click(function(){
            x++; //Increment field counter

            $(wrapper).append(fieldHTML); //Add field html
        });
        //Once remove button is clicked
        $(wrapper).on('click', '#remove-button', function(e){
            e.preventDefault();
            $(this).parent('div').remove(); //Remove field html
            x--; //Decrement field counter
        });
    });


</script>
{!! Form::open(['action'=>['Hr\EmployeeAllowanceController@storeAddEmployeeAllowanceCalculator','id'=>$id], 'id'=>'add-employee-allowance-calculator', 'method'=>'POST']) !!}
<div class="error" style="text-align: center;"><b>On this Window, You can Update or Add New Employee Allowance Calculator</b></div><br>
<div class="guestDetails_inputDivider"></div>
<button type="submit" disabled style="display: none" aria-hidden="true"></button>
{{--Loop through the Previous List first--}}
@if(count($list) > 0)
    @foreach($list as $row)
        <div class="guestDetails_input">
            <div class="guestDetails_inputLabel">
                {!! Form::label('from', 'Basic Salary From') !!}<span class="error">*</span>
            </div>
            <div class="guestDetails_input">
                {!! Form::hidden('calculator-id['.$row->id.']', $row->id) !!}
                {!! Form::number('from['.$row->id.']', $row->from ?? 0, ['class'=>'input-text-height', 'style'=>'width: 100px']) !!}
            </div>
        </div>
        <div class="guestDetails_input">
            <div class="guestDetails_inputLabel">
                {!! Form::label('to', 'Basic Salary To') !!}<span class="error">*</span>
            </div>
            <div class="guestDetails_input">
                {!! Form::number('to['.$row->id.']', $row->to ?? 0, ['class'=>'input-text-height', 'style'=>'width: 100px']) !!}
            </div>
        </div>
        <div class="guestDetails_input">
            <div class="guestDetails_inputLabel">
                {!! Form::label('rate-amount', 'Applicable Rate/Amount') !!}<span class="error">*</span>
            </div>
            <div class="guestDetails_input">
                {!! Form::number('rate['.$row->id.']', $row->rate ?? 0, ['class'=>'input-text-height', 'style'=>'width: 100px']) !!}
            </div>
        </div>
        <div class="guestDetails_input">
            <div class="guestDetails_inputLabel">
                {!! Form::label('min-amount', 'Minimum Amount') !!}<span class="error">*</span>
            </div>
            <div class="guestDetails_input">
                {!! Form::number('minimum['.$row->id.']', $row->min_amount ?? 0, ['class'=>'input-text-height', 'style'=>'width: 100px']) !!}
            </div>
        </div>
        <div class="guestDetails_input">
            <div class="guestDetails_inputLabel">
                {!! Form::label('max-amount', 'Maximum Amount') !!}<span class="error">*</span>
            </div>
            <div class="guestDetails_input">
                {!! Form::number('maximum['.$row->id.']', $row->max_amount ?? 0, ['class'=>'input-text-height', 'style'=>'width: 100px']) !!}
            </div>
        </div>
        <div class="guestDetails_inputDivider1"></div>
    @endforeach
@else
    <div class="guestDetails_input">
        <div class="guestDetails_inputLabel">
            {!! Form::label('from', 'Basic Salary From') !!}<span class="error">*</span>
        </div>
        <div class="guestDetails_input">
            {!! Form::number('from[]', '', ['class'=>'input-text-height', 'style'=>'width: 100px']) !!}
        </div>
    </div>
    <div class="guestDetails_input">
        <div class="guestDetails_inputLabel">
            {!! Form::label('to', 'Basic Salary To') !!}<span class="error">*</span>
        </div>
        <div class="guestDetails_input">
            {!! Form::number('to[]', '', ['class'=>'input-text-height', 'style'=>'width: 100px']) !!}
        </div>
    </div>
    <div class="guestDetails_input">
        <div class="guestDetails_inputLabel">
            {!! Form::label('rate-amount', 'Applicable Rate/Amount') !!}<span class="error">*</span>
        </div>
        <div class="guestDetails_input">
            {!! Form::number('rate[]', '', ['class'=>'input-text-height', 'style'=>'width: 100px']) !!}
        </div>
    </div>
    <div class="guestDetails_input">
        <div class="guestDetails_inputLabel">
            {!! Form::label('min-amount', 'Minimum Amount') !!}<span class="error">*</span>
        </div>
        <div class="guestDetails_input">
            {!! Form::number('minimum[]', '', ['class'=>'input-text-height', 'style'=>'width: 100px']) !!}
        </div>
    </div>
    <div class="guestDetails_input">
        <div class="guestDetails_inputLabel">
            {!! Form::label('max-amount', 'Maximum Amount') !!}<span class="error">*</span>
        </div>
        <div class="guestDetails_input">
            {!! Form::number('maximum[]', '', ['class'=>'input-text-height', 'style'=>'width: 100px']) !!}
        </div>
    </div>
@endif
<div class="guestDetails_inputDivider input_divider1"></div>
<div class="added-fields"></div>
<div class="guestDetails_input">
    <div class="guestDetails_inputLabel">
        <button type="button" id="add-vehicle" style="height: 30px">+ Add Another Row</button>
    </div>
</div>
{!! Form::close() !!}
