{{ Form::model($jobGrade, ['route' => ['job-grades.update', $jobGrade->id], 'method' => 'PUT']) }}
<div class="modal-body">
    <div class="row">
        <div class="col-md-6 form-group">
            {{ Form::label('name', __('Job Grade Name'), ['class' => 'form-label']) }}
            {{ Form::text('name', null, ['class' => 'form-control', 'required' => true]) }}
        </div>

        <div class="col-md-6 form-group">
            {{ Form::label('range_type', __('Range Type'), ['class' => 'form-label']) }}
            {{ Form::select('range_type', ['flat' => 'Flat', 'percentage' => 'Percentage'], $jobGrade->range_type, ['class' => 'form-control range-toggle', 'required' => true]) }}
        </div>

        {{-- Flat Values --}}
        <div class="flat-fields row {{ $jobGrade->range_type === 'flat' ? '' : 'd-none' }}">
            <div class="col-md-4 form-group">
                {{ Form::label('min_salary', __('Min Salary'), ['class' => 'form-label']) }}
                {{ Form::number('min_salary', $jobGrade->min_salary, ['class' => 'form-control', 'step' => '0.01']) }}
            </div>
            <div class="col-md-4 form-group">
                {{ Form::label('mid_salary', __('Mid Salary'), ['class' => 'form-label']) }}
                {{ Form::number('mid_salary', $jobGrade->mid_salary, ['class' => 'form-control', 'step' => '0.01']) }}
            </div>
            <div class="col-md-4 form-group">
                {{ Form::label('max_salary', __('Max Salary'), ['class' => 'form-label']) }}
                {{ Form::number('max_salary', $jobGrade->max_salary, ['class' => 'form-control', 'step' => '0.01']) }}
            </div>
        </div>

        {{-- Percentage Values --}}
        <div class="percent-fields row {{ $jobGrade->range_type === 'percentage' ? '' : 'd-none' }}">
            <div class="col-md-4 form-group">
                {{ Form::label('min_percent', __('Min % of Gross'), ['class' => 'form-label']) }}
                {{ Form::number('min_percent', $jobGrade->min_percent, ['class' => 'form-control', 'step' => '0.01']) }}
            </div>
            <div class="col-md-4 form-group">
                {{ Form::label('mid_percent', __('Mid % of Gross'), ['class' => 'form-label']) }}
                {{ Form::number('mid_percent', $jobGrade->mid_percent, ['class' => 'form-control', 'step' => '0.01']) }}
            </div>
            <div class="col-md-4 form-group">
                {{ Form::label('max_percent', __('Max % of Gross'), ['class' => 'form-label']) }}
                {{ Form::number('max_percent', $jobGrade->max_percent, ['class' => 'form-control', 'step' => '0.01']) }}
            </div>
        </div>

        <div class="col-md-12 form-group">
            {{ Form::label('designation_ids', __('Assign Designations'), ['class' => 'form-label']) }}
            {{ Form::select(
    'designation_ids[]',
    $designations->pluck('name', 'id'),
    $jobGrade->designations->pluck('id')->toArray(),
    ['class' => 'form-control select2', 'multiple' => true]
) }}
        </div>

        <div class="col-md-12 form-group">
            {{ Form::label('notes', __('Notes'), ['class' => 'form-label']) }}
            {{ Form::textarea('notes', $jobGrade->notes, ['class' => 'form-control', 'rows' => 3]) }}
        </div>
    </div>
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
    <button type="submit" class="btn btn-primary">{{ __('Update') }}</button>
</div>
{{ Form::close() }}

<script>
    document.addEventListener('change', e => {
        if (e.target.classList.contains('range-toggle')) {
            const type = e.target.value;
            document.querySelector('.flat-fields').classList.toggle('d-none', type !== 'flat');
            document.querySelector('.percent-fields').classList.toggle('d-none', type !== 'percentage');
        }
    });
</scri