

<?php echo e(Form::model($ratingType, [
    'route'   => ['rating-types.update', $ratingType->id],
    'method'  => 'PUT',
    'class'   => 'needs-validation',
    'novalidate',
    'id'      => 'rating-type-form',
])); ?>


<div class="modal-body">
    <div class="row">
        
        <div class="col-12">
            <div class="form-group">
                <?php echo e(Form::label('name', __('Name'), ['class' => 'form-label'])); ?>

                <div class="form-icon-user">
                    <?php echo e(Form::text('name', null, [
                        'class'       => 'form-control',
                        'required'    => true,
                        'placeholder' => __('Enter Rating Type Name'),
                    ])); ?>

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

        
        <div class="col-12">
            <div class="form-group">
                <?php echo e(Form::label('type', __('Type'), ['class' => 'form-label'])); ?>

                <div class="form-icon-user">
                    <?php echo e(Form::select('type', $types, null, [
                    'class' => 'form-control',
                    'id'    => 'rating-type-select',
                    'required' => true,
                ])); ?>

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

        
        <div class="col-12 mt-3" id="config-section"></div>
    </div>

    
    <?php echo e(Form::hidden('config', $ratingType->config, ['id' => 'config'])); ?>

</div>

<div class="modal-footer">
    <input type="button" value="<?php echo e(__('Cancel')); ?>" class="btn btn-light" data-bs-dismiss="modal">
    <input type="submit" value="<?php echo e(__('Update')); ?>" class="btn btn-primary">
</div>

<?php echo e(Form::close()); ?>



<style>
    /* === SAME STYLES YOU USED IN CREATE FORM === */
    .custom-checkbox {
        position: relative;
        display: flex;
        align-items: center;
        padding-left: 2rem;
        cursor: pointer
    }

    .custom-checkbox-input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        left: 0;
        top: 50%;
        transform: translateY(-50%)
    }

    .checkmark {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 20px;
        width: 20px;
        background: #eee;
        border: 2px solid #ddd;
        border-radius: 4px;
        transition: all .3s
    }

    .custom-checkbox:hover .checkmark {
        background: #f8f9fa;
        border-color: #0d6efd
    }

    .custom-checkbox-input:checked~.checkmark {
        background: #0d6efd;
        border-color: #0d6efd
    }

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        left: 6px;
        top: 2px;
        width: 6px;
        height: 12px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg)
    }

    .custom-checkbox-input:checked~.checkmark:after {
        display: block
    }

    .label-text {
        font-weight: 500;
        color: #495057;
        margin-left: .5rem
    }

    @media (max-width:576px) {
        .label-text {
            margin-left: 0;
            margin-top: .5rem
        }
    }
</style>

<script>
    $(document).ready(function() {
        function renderConfigFields(selectedType, existingConfig = null) {
            const configWrapper = $('#config-section');
            configWrapper.empty();

            if (!selectedType) return;

            if (selectedType === 'percentage' || selectedType === 'numeric') {
                configWrapper.append(`
                <div class="row mt-2">
                    <div class="col-6">
                        <label for="min" class="form-label">Min</label>
                        <input type="number" class="form-control" id="min" value="${existingConfig?.min ?? ''}">
                    </div>
                    <div class="col-6">
                        <label for="max" class="form-label">Max</label>
                        <input type="number" class="form-control" id="max" value="${existingConfig?.max ?? ''}">
                    </div>
                </div>
            `);
            } else if (selectedType === 'text') {
                configWrapper.append(`
                <div class="mt-2">
                    <label for="options" class="form-label">Options (comma-separated)</label>
                    <input type="text" class="form-control" id="options" placeholder="e.g. Exceeds,Meets,Below" value="${existingConfig?.options?.join(',') ?? ''}">
                </div>
            `);
            }
            // alphabeth type has no config
        }

        function updateConfigHiddenField() {
            const selectedType = $('#rating-type-select').val();
            const configField = $('#config');

            let config = {};

            if (selectedType === 'percentage' || selectedType === 'numeric') {
                const min = $('#min').val();
                const max = $('#max').val();
                config.min = parseFloat(min);
                config.max = parseFloat(max);
            } else if (selectedType === 'text') {
                const options = $('#options').val();
                config.options = options.split(',').map(x => x.trim());
            }

            configField.val(JSON.stringify(config));
        }

        // Initial load from existing config
        const initialType = $('#rating-type-select').val();
        const existingConfig = $('#config').val() ? JSON.parse($('#config').val()) : null;
        renderConfigFields(initialType, existingConfig);

        // On type change
        $('#rating-type-select').on('change', function() {
            renderConfigFields(this.value);
        });

        // On form submit, update the hidden config
        $('#rating-type-form').on('submit', function() {
            updateConfigHiddenField();
        });
    });
</script><?php /**PATH /var/www/payraty/hris/resources/views/rating_types/edit.blade.php ENDPATH**/ ?>