<?php $__env->startSection('content'); ?>
<div class="card">
    <div class="card-header">
        <h5>Add Designation</h5>
    </div>

    <div class="card-body">
        <form id="createForm">
            <?php echo csrf_field(); ?>

            <div class="mb-3">
                <label class="form-label">Branch <span class="text-danger">*</span></label>
                <select name="branch_id" class="form-control">
                    <?php $__currentLoopData = $branches; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $branch): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($branch->id); ?>">
                            <?php echo e($branch->name); ?>

                        </option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>

            <div class="mb-3">
                <label class="form-label">Designation Code <span class="text-danger">*</span></label>
                <input type="text" name="code" class="form-control" maxlength="50" required>
            </div>

            <div class="mb-3">
                <label class="form-label">Name <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control" maxlength="150" required>
            </div>

            <div class="mb-3">
                <label class="form-label">Level <span class="text-danger">*</span></label>
                <input type="number" name="level" class="form-control" min="1" required>
            </div>

            <div class="mb-3">
                <label class="form-label">Budgeted <span class="text-danger">*</span></label>
                <input type="number" name="budget" class="form-control" min="1" required>
            </div>

            <div class="form-check mb-3">
                <input type="checkbox" name="is_managerial" class="form-check-input">
                <label class="form-check-label">Managerial Role</label>
            </div>

             <div class="form-check mb-3">
                <input type="hidden" name="carder" value="0">
                <input type="checkbox" name="carder" class="form-check-input" value="1">
                <label class="form-check-label">Carder</label>
            </div>

            <div class="form-check mb-3">
                <input type="checkbox" name="status" class="form-check-input" checked>
                <label class="form-check-label">Active</label>
            </div>

           
            <hr class="my-4">

            
            <div class="card mb-4">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col">
                            <h5 class="mb-0">Additions</h5>
                        </div>
                        <div class="col-auto">
                           
                        </div>
                    </div>       
                </div>
                <div class="card-body p-0">
                    <table class="table table-bordered mb-0" id="additionsTable">
                        <thead class="table-light">
                            <tr>
                                <th>Addition</th>
                                <th width="60"><button type="button" class="btn btn-sm btn-outline-primary" id="addAdditionRow">
                                <i class="bi bi-plus"></i> Add
                            </button></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

            
            <div class="card mb-4">
                 <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col">
                            <h5 class="mb-0">Deductions</h5>
                        </div>
                        <div class="col-auto">
                            
                        </div>
                    </div>       
                </div>
                <div class="card-body p-0">
                    <table class="table table-bordered mb-0" id="deductionsTable">
                        <thead class="table-light">
                            <tr>
                                <th>Deduction</th>
                                <th width="60"><button type="button" class="btn btn-sm btn-outline-primary" id="addDeductionRow">
                                <i class="bi bi-plus"></i> Add
                            </button></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

            <button type="submit" class="btn btn-primary">Save</button>
            <a href="<?php echo e(route('core.designations.index')); ?>" class="btn btn-secondary">Back</a>
        </form>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
let additionIndex = 0;
let deductionIndex = 0;

// Add Addition Row
$('#addAdditionRow').on('click', function() {
    let rowHtml = `
    <tr>
        <td>
            <select name="additions[]" class="form-control" required>
                <option value="">-- Select Addition --</option>
                <?php $__currentLoopData = $additions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $addition): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($addition->id); ?>"><?php echo e($addition->code); ?> - <?php echo e($addition->name); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>
        </td>
        <td class="text-center">
            <button type="button" class="btn btn-sm btn-outline-danger remove-row">
                 <i class="fas fa-trash"></i>
            </button>
        </td>
    </tr>
    `;
    $('#additionsTable tbody').append(rowHtml);
    additionIndex++;
});

// Add Deduction Row
$('#addDeductionRow').on('click', function() {
    let rowHtml = `
    <tr>
        <td>
            <select name="deductions[]" class="form-control" required>
                <option value="">-- Select Deduction --</option>
                <?php $__currentLoopData = $deductions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $deduction): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($deduction->id); ?>"><?php echo e($deduction->code); ?> - <?php echo e($deduction->name); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>
        </td>
        <td class="text-center">
            <button type="button" class="btn btn-sm btn-outline-danger remove-row">
                 <i class="fas fa-trash"></i>
            </button>
        </td>
    </tr>
    `;
    $('#deductionsTable tbody').append(rowHtml);
    deductionIndex++;
});

// Remove Row
$(document).on('click', '.remove-row', function() {
    $(this).closest('tr').remove();
});

// Form Submit
$('#createForm').on('submit', function (e) {
    e.preventDefault();

    let btn = $(this).find('button[type=submit]');
    btn.prop('disabled', true);

    $.ajax({
        url: "<?php echo e(route('core.designations.store')); ?>",
        type: "POST",
        data: $(this).serialize(),
        success: function (res) {
            Swal.fire('Success', res.message, 'success')
                .then(() => window.location.href = "<?php echo e(route('core.designations.index')); ?>");
        },
        error: function (xhr) {
            btn.prop('disabled', false);
            if (xhr.status === 422) {
                let errors = xhr.responseJSON.errors;
                let errorList = '<ul style="text-align: left;">';
                $.each(errors, function(field, messages) {
                    $.each(messages, function(index, message) {
                        errorList += '<li>' + message + '</li>';
                    });
                });
                errorList += '</ul>';
                Swal.fire({
                    title: 'Validation Error',
                    html: errorList,
                    icon: 'error'
                });
            } else {
                Swal.fire('Error', 'An error occurred. Please try again.', 'error');
            }
        }
    });
});
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/codeproh/va.laraoffice.com/app/Modules/HR/Core/Providers/../Views/designations/create.blade.php ENDPATH**/ ?>