<?php echo e(Form::open(['route' => 'rating-types.store', 'method' => 'POST', '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-2">
            <div class="form-check form-switch">
                <?php echo e(Form::hidden('is_required', 0)); ?>

                <?php echo e(Form::checkbox('is_required', 1, false, ['class' => 'form-check-input', 'id' => 'is_required'])); ?>

                <?php echo e(Form::label('is_required', __('Required?'), ['class' => 'form-check-label'])); ?>

            </div>

            <div class="form-check form-switch">
                <?php echo e(Form::hidden('is_weighted', 0)); ?>

                <?php echo e(Form::checkbox('is_weighted', 1, false, ['class' => 'form-check-input', 'id' => 'is_weighted'])); ?>

                <?php echo e(Form::label('is_weighted', __('Weighted?'), ['class' => 'form-check-label'])); ?>

            </div> -->

        <div id="config-options" class="mt-3">

            
            <div class="range-config d-none">
                <div class="form-group">
                    <label for="min_value">Min Value</label>
                    <input type="number" class="form-control" id="min_value">
                </div>
                <div class="form-group">
                    <label for="max_value">Max Value</label>
                    <input type="number" class="form-control" id="max_value">
                </div>
            </div>

            
            <div class="text-config d-none">
                <div class="form-group">
                    <label for="text_options">Enter Options (comma-separated)</label>
                    <input type="text" class="form-control" id="text_options" placeholder="Exceeds, Meets, Below">
                </div>
            </div>

            
            <input type="hidden" name="config" id="config" value="">
        </div>

        <!-- <div class="mb-3">
            <?php echo e(Form::hidden('is_visible_to_employee', 0)); ?>

            <div class="form-check custom-checkbox">
                <?php echo e(Form::checkbox('is_visible_to_employee', 1, true, [
                    'class' => 'form-check-input custom-checkbox-input',
                    'id' => 'is_visible_to_employee',
                ])); ?>

                <span class="checkmark"></span>
                <span class="label-text"><?php echo e(__('Make this rating visible to employees')); ?></span>
            </div>
        </div> -->
    </div>
</div>
</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(__('Create')); ?>" class="btn btn-primary">
</div>
<?php echo e(Form::close()); ?>



<style>
    * Custom Toggle Styles */ .custom-toggle {
        position: relative;
        padding-left: 0;
    }

    .custom-toggle-input {
        width: 3rem;
        height: 1.5rem;
        border-radius: 1rem;
        background-color: #dee2e6;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .custom-toggle-input:checked {
        background-color: #198754;
        border-color: #198754;
    }

    .custom-toggle-input:focus {
        box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
    }

    .custom-toggle-label {
        margin-left: 0.75rem;
        font-weight: 500;
        cursor: pointer;
    }

    /* Material Design Toggle */
    .material-switch {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
    }

    .material-switch-input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    .material-switch-label {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        cursor: pointer;
        margin: 0;
    }

    .material-switch-slider {
        position: relative;
        width: 52px;
        height: 24px;
        background-color: #ccc;
        border-radius: 12px;
        transition: background-color 0.3s;
    }

    .material-switch-slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        border-radius: 50%;
        transition: transform 0.3s;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .material-switch-input:checked+.material-switch-label .material-switch-slider {
        background-color: #2196F3;
    }

    .material-switch-input:checked+.material-switch-label .material-switch-slider:before {
        transform: translateX(28px);
    }

    .material-switch-text {
        font-weight: 500;
        color: #495057;
    }

    /* Custom Checkbox */
    .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-color: #eee;
        border: 2px solid #ddd;
        border-radius: 4px;
        transition: all 0.3s ease;
    }

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

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

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        left: 6px;
        top: 2px;
        width: 6px;
        height: 12px;
        border: solid white;
        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: 0.5rem;
    }

    /* Responsive adjustments */
    @media (max-width: 576px) {
        .material-switch-label {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .custom-toggle-label {
            margin-left: 0;
            margin-top: 0.5rem;
            display: block;
        }
    }
</style>

<script>
    $(document).ready(function() {
        function toggleConfigFields(type) {
            $('.range-config, .text-config').addClass('d-none');


            if (type === 'numeric' || type === 'percentage') {
                $('.range-config').removeClass('d-none');
                $('.range-config input').attr(required, true);
                $('.range-config select').attr(required, true);
            } else if (type === 'text') {
                $('.text-config').removeClass('d-none');

                $('.text-config input').attr(required, true);
                $('.text-config select').attr(required, true);
            }
        }

        $('#rating-type-select').on('change', function() {
            const selectedType = $(this).val();
            toggleConfigFields(selectedType);
        });

        $('form').on('submit', function(e) {
            const type = $('#rating-type-select').val();
            let config = {};

            if (type === 'numeric' || type === 'percentage') {
                config.min = parseFloat($('#min_value').val());
                config.max = parseFloat($('#max_value').val());
            } else if (type === 'text') {
                const raw = $('#text_options').val();
                config.options = raw.split(',').map(item => item.trim()).filter(Boolean);
            } else if (type === 'alphabet') {
                config.rule = 'free';
            }

            $('#config').val(JSON.stringify(config));
        });
    });
</script>
<?php /**PATH /var/www/payraty/hris/resources/views/rating_types/create.blade.php ENDPATH**/ ?>