

<div class="modal-body">
      <h6><?php echo e(__('Add New Metric')); ?></h6>
    <div class="card p-3">
        <form id="add-metric-form" class="d-flex align-items-center">
            <div class="form-group me-2">
                <?php echo e(Form::label('rating_value', __('Rating Value'), ['class' => 'form-label'])); ?>


                <?php
                $config = json_decode($ratingType->config, true);
                ?>

                <?php if($ratingType->type === 'text' && isset($config['options'])): ?>
                <select name="rating_value" id="rating_value" class="form-control" required>
                    <?php $__currentLoopData = $config['options']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $option): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($option); ?>"><?php echo e($option); ?></option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
                <?php elseif($ratingType->type === 'numeric' || $ratingType->type === 'percentage'): ?>
                <div class="d-flex align-items-center">
                    <input type="number" name="min_value" id="min_value" class="form-control" placeholder="Min" required>
                    <span class="mx-2">-</span>
                    <input type="number" name="max_value" id="max_value" class="form-control" placeholder="Max" required>
                </div>
                <?php else: ?>
                <input type="text" name="rating_value" id="rating_value" class="form-control" required>
                <?php endif; ?>
            </div>

            <div class="form-group me-2">
                <?php echo e(Form::label('metric_value', __('Metric Value (%)'), ['class' => 'form-label'])); ?>

                <input type="number" name="metric_value" id="metric_value" class="form-control" step="0.01" required>
            </div>

            <div class="form-group mt-4">
                <button type="submit" class="btn btn-primary btn-sm"><?php echo e(__('Add')); ?></button>
            </div>
        </form>
        <div id="add-metric-errors" class="text-danger mt-2"></div>
    </div>

    <div class="card p-3 mt-4">
        <h6><?php echo e(__('Existing Metrics')); ?></h6>
        <div class="table-responsive" id="metrics-table-container">
            <table class="table">
                <thead>
                    <tr>
                        <th><?php echo e(__('Rating Value')); ?></th>
                        <th><?php echo e(__('Metric Value')); ?></th>
                        <th><?php echo e(__('Action')); ?></th>
                    </tr>
                </thead>
                <tbody id="metrics-table-body table-responsive">
                    <?php $__currentLoopData = $metrics; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $metric): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <tr id="metric-row-<?php echo e($metric->id); ?>">
                        <td><?php echo e($metric->rating_value); ?></td>
                        <td><?php echo e($metric->metric_value); ?>%</td>
                        <td>
                            <button type="button" class="btn btn-sm btn-info me-1" onclick="toggleEditForm('<?php echo e($metric->id); ?>')">
                                <i class=" ti ti-pencil"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-danger bs-pass-para delete-metric" data-id="<?php echo e($metric->id); ?>" title="<?php echo e(__('Delete')); ?>">
                                <i class="ti ti-trash"></i>
                            </button>
                        </td>
                    </tr>
                    <tr id="edit-form-<?php echo e($metric->id); ?>" style="display: none;">
                        <td colspan="3">
                            <form id="update-form-<?php echo e($metric->id); ?>" class="d-flex align-items-center">
                                <div class="form-group me-2">
                                    <?php if($ratingType->type === 'text' && isset($config['options'])): ?>
                                    <select name="rating_value" class="form-control" required>
                                        <?php $__currentLoopData = $config['options']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $option): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($option); ?>" <?php if($metric->rating_value == $option): ?> selected <?php endif; ?>><?php echo e($option); ?></option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </select>
                                    <?php elseif($ratingType->type === 'numeric'): ?>
                                    <?php
                                    list($min, $max) = explode('-', $metric->rating_value);
                                    ?>
                                    <div class="d-flex align-items-center">
                                        <input type="number" name="min_value" value="<?php echo e($min); ?>" class="form-control" placeholder="Min" required>
                                        <span class="mx-2">-</span>
                                        <input type="number" name="max_value" value="<?php echo e($max); ?>" class="form-control" placeholder="Max" required>
                                    </div>
                                    <?php else: ?>
                                    <input type="text" name="rating_value" value="<?php echo e($metric->rating_value); ?>" class="form-control" required>
                                    <?php endif; ?>
                                </div>
                                <div class="form-group me-2">
                                    <input type="number" name="metric_value" value="<?php echo e($metric->metric_value); ?>" class="form-control" step="0.01" required>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-sm btn-success"><?php echo e(__('Save')); ?></button>
                                    <button type="button" class="btn btn-sm btn-light" onclick="toggleEditForm('<?php echo e($metric->id); ?>')"><?php echo e(__('Cancel')); ?></button>
                                </div>
                            </form>
                            <div id="update-metric-errors-<?php echo e($metric->id); ?>" class="text-danger mt-2"></div>
                        </td>
                    </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-light" data-bs-dismiss="modal"><?php echo e(__('Close')); ?></button>
</div>

<script>
    function toggleEditForm(metricId) {
        let formRow = document.getElementById('edit-form-' + metricId);
        let currentDisplay = formRow.style.display;
        document.querySelectorAll('tr[id^="edit-form-"]').forEach(row => {
            row.style.display = 'none';
        });
        if (currentDisplay === 'none') {
            formRow.style.display = 'table-row';
        }
    }

    $(document).ready(function() {
        // Handle ADD form submission via AJAX
        $('#add-metric-form').on('submit', function(e) {
            e.preventDefault();
            let form = $(this);
            let url = "<?php echo e(route('rating_types.metrics.store', $ratingType->id)); ?>";

            let formData = form.serialize();

            // Special handling for numeric ratings
            let ratingType = '<?php echo e($ratingType->type); ?>';
            if (ratingType === 'numeric') {
                let min = form.find('#min_value').val();
                let max = form.find('#max_value').val();
                formData += '&rating_value=' + encodeURIComponent(min + '-' + max);
            }

            $.ajax({
                type: 'POST',
                url: url,
                data: formData,
                success: function(response) {
                    if (response.success) {

                        // TODO:: FIX ON ADD METRIC VALUE EDIT OPTION LATER
                        let newRow = `<tr id="metric-row-${response.metric.id}">
                            <td>${response.metric.rating_value}</td>
                            <td>${response.metric.metric_value}%</td>
                            <td>
                                <button type="button" class="btn btn-sm btn-info me-1" onclick="toggleEditForm(${response.metric.id})">
                                    <i class="ti ti-pencil"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-danger bs-pass-para delete-metric" data-id="${response.metric.id}" title="<?php echo e(__('Delete')); ?>">
                                    <i class="ti ti-trash"></i>
                                </button>
                            </td>
                        </tr>

                           
                        `;
                        $('#metrics-table-body').append(newRow);

                        form.trigger('reset');
                        $('#add-metric-errors').empty();
                        show_toastr('Success', response.message, 'success');
                    }
                },
                error: function(response) {
                    if (response.status === 422) {
                        let errors = response.responseJSON.errors;
                        let errorHtml = '';
                        $.each(errors, function(key, value) {
                            errorHtml += `<p class="m-0">${value}</p>`;
                        });
                        $('#add-metric-errors').html(errorHtml);
                    } else {
                        show_toastr('Error', '<?php echo e(__("An error occurred.")); ?>', 'error');
                    }
                }
            });
        });

        // Handle DELETE action via AJAX
        $(document).on('click', '.delete-metric', function() {
            let metricId = $(this).data('id');
            let deleteUrl = '<?php echo e(route("rating_types.metrics.destroy", [$ratingType->id, ":id"])); ?>'.replace(':id', metricId);

            if (confirm('<?php echo e(__("Are you sure you want to delete this metric?")); ?>')) {
                $.ajax({
                    type: 'POST',
                    url: deleteUrl,
                    data: {
                        _method: 'DELETE',
                        _token: '<?php echo e(csrf_token()); ?>'
                    },
                    success: function(response) {
                        if (response.success) {
                            $(`#metric-row-${metricId}`).remove();
                            $(`#edit-form-${metricId}`).remove();
                            show_toastr('Success', response.message, 'success');
                        }
                    },
                    error: function(response) {
                        show_toastr('Error', '<?php echo e(__("An error occurred.")); ?>', 'error');
                    }
                });
            }
        });

    });
</script>
<?php /**PATH /var/www/payraty/hris/resources/views/rating_types/metrics_index.blade.php ENDPATH**/ ?>