<script>
/* -------------------------------------------------------
 | Employee form — tab validation
 ------------------------------------------------------- */

/**
 * Manual required check — works even on display:none fields.
 * (Browser's checkValidity() skips hidden elements.)
 */
function isInvalid(field) {
    if (field.disabled) return false;
    if (field.hasAttribute('required')) {
        if (field.type === 'checkbox' || field.type === 'radio') return !field.checked;
        if (!field.value || !field.value.trim()) return true;
    }
    if (field.value && field.value.trim() && !field.checkValidity()) return true;
    return false;
}

function getFieldLabel(field) {
    const labelEl = document.querySelector(`label[for="${field.id}"]`)
                 || document.querySelector(`label[for="${field.name}"]`);
    return labelEl
        ? labelEl.textContent.replace('*', '').trim()
        : (field.placeholder || field.name || 'This field');
}

function focusField(field) {
    $(field).addClass('is-invalid');
    try { field.focus(); } catch (e) {}
}

function showMissingAlert(fieldName, tabLabel) {
    Swal.fire({
        title: 'Required Field Missing',
        html: `<b>${fieldName}</b> is required.<br><small class="text-muted">Tab: ${tabLabel}</small>`,
        icon: 'warning',
        confirmButtonText: 'OK'
    });
}

/* ---- Block tab switching if current tab has invalid fields ---- */
document.addEventListener('DOMContentLoaded', function () {

    document.querySelectorAll('[data-bs-toggle="tab"]').forEach(function (tabBtn) {
        tabBtn.addEventListener('show.bs.tab', function (e) {
            const currentBtn = e.relatedTarget; // currently active tab
            if (!currentBtn) return;            // first load — no current tab

            const currentTabId = currentBtn.getAttribute('data-bs-target').replace('#', '');
            const pane = document.getElementById(currentTabId);
            if (!pane) return;

            const firstInvalid = Array.from(
                pane.querySelectorAll('input, select, textarea')
            ).find(f => isInvalid(f));

            if (firstInvalid) {
                e.preventDefault(); // block the tab switch

                const tabLabel = currentBtn.textContent.trim();
                focusField(firstInvalid);
                showMissingAlert(getFieldLabel(firstInvalid), tabLabel);
            }
        });
    });

});

/* ---- On Save: run same check across all tabs before AJAX ---- */
function validateAllTabs() {
    const TAB_ORDER = ['basic', 'family', 'documents', 'illness', 'additions', 'deductions', 'leave'];

    for (const tabId of TAB_ORDER) {
        const pane = document.getElementById(tabId);
        if (!pane) continue;

        const firstInvalid = Array.from(
            pane.querySelectorAll('input, select, textarea')
        ).find(f => isInvalid(f));

        if (firstInvalid) {
            const tabBtn = document.querySelector(`[data-bs-target="#${tabId}"]`);
            const tabLabel = tabBtn ? tabBtn.textContent.trim() : tabId;

            // Switch to the tab, then focus + alert
            bootstrap.Tab.getOrCreateInstance(tabBtn).show();
            setTimeout(() => {
                focusField(firstInvalid);
                showMissingAlert(getFieldLabel(firstInvalid), tabLabel);
            }, 200);

            return false;
        }
    }
    return true;
}

/* SAVE EMPLOYEE */
$('#employeeForm').submit(function (e) {
    e.preventDefault();

    if (!validateAllTabs()) return;

    $('#employeeForm .is-invalid').removeClass('is-invalid');

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

    const formData = new FormData(this);

    $.ajax({
        url: "<?php echo e(isset($employee)
            ? route('core.employees.update', $employee->id)
            : route('core.employees.store')); ?>",
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        success: function (res) {
            Swal.fire('Success', res.message, 'success')
                .then(() => window.location.href = "<?php echo e(route('core.employees.index')); ?>");
        },
        error: function (x) {
            btn.prop('disabled', false);

            if (x.responseJSON && x.responseJSON.errors) {
                const errors = x.responseJSON.errors;
                const errorList = '<ul style="text-align:left;margin:0;padding-left:20px;">'
                    + Object.values(errors).flat().map(m => `<li>${m}</li>`).join('')
                    + '</ul>';
                Swal.fire({ title: 'Validation Error', html: errorList, icon: 'error' });
            } else {
                Swal.fire('Error', x.responseJSON?.message ?? 'An error occurred.', 'error');
            }
        }
    });
});


/* Bank → Bank Branch */
$('#bank_id').change(function () {
    $.get('/core/bank-branches', { bank_id: this.value }, function (res) {
        let opt = '<option value="">--</option>';
        res.data.forEach(r => opt += `<option value="${r.id}">${r.name}</option>`);
        $('#bank_branch_id').html(opt);
    });
});


document.addEventListener('DOMContentLoaded', function () {
    const bankSelect = document.getElementById('bank_id');
    const branchSelect = document.getElementById('bank_branch_id');
    const selectedBranchId = "<?php echo e($employee->bank_branch_id ?? ''); ?>";
    // edit mode auto-load
    if (bankSelect.value) {
        loadBranches(bankSelect.value, selectedBranchId);
    }
    function loadBranches(bankId, selectedId = null) {
        if (!bankId) {
            branchSelect.innerHTML = '<option value="">-- Select Bank First --</option>';
            return;
        }

        $.get('/core/bank-branches', { bank_id: this.value }, function (res) {
                branchSelect.innerHTML = '<option value="">-- Select --</option>';
                res.data.forEach(branch => {
                    const opt = document.createElement('option');
                    opt.value = branch.id;
                    opt.textContent = branch.name;
                    if (selectedId && selectedId == branch.id) {
                        opt.selected = true;
                    }
                    branchSelect.appendChild(opt);
                });
            });
    }
    
});


    let illnessIndex = <?php echo e(isset($employee) ? $employee->illnesses->count() : 0); ?>;

$('#addIllnessRow').click(function () {

    let row = `
    <tr>
        <td>
            <select name="illness[${illnessIndex}][illness_id]"
                    class="form-control" required>
                <?php $__currentLoopData = $illnesses; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $ill): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($ill->id); ?>"><?php echo e($ill->name); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>
        </td>

        <td>
            <input type="date"
                   name="illness[${illnessIndex}][diagnosed_on]"
                   class="form-control">
        </td>

        <td class="text-center">
            <input type="checkbox"
                   name="illness[${illnessIndex}][chronic]"
                   value="1">
        </td>

        <td class="text-center">
            <input type="checkbox"
                   name="illness[${illnessIndex}][active]"
                   value="1" checked>
        </td>

        <td>
            <textarea name="illness[${illnessIndex}][notes]"
                      class="form-control"
                      rows="2"></textarea>
        </td>

        <td class="text-center">
            <button type="button"
                    class="btn btn-sm btn-danger remove-row">
                 <i class="fas fa-trash"></i>
            </button>
        </td>
    </tr>`;

    $('#illnessTable tbody').append(row);
    illnessIndex++;
});

$(document).on('click', '.remove-row', function () {
    $(this).closest('tr').remove();
});
</script>
<script>
let familyIndex = <?php echo e(isset($employee) ? $employee->familyMembers->count() : 0); ?>;

$('#addFamilyRow').click(function () {
    let row = `
    <tr>
        <td>
            <input type="text" name="family[${familyIndex}][name]"
                   class="form-control" required>
        </td>

        <td>
            <select name="family[${familyIndex}][relationship_type_id]"
                    class="form-control" required>
                <?php $__currentLoopData = $relationshipTypes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $r): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($r->id); ?>"><?php echo e($r->name); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>
        </td>

        <td>
            <input type="date"
                   name="family[${familyIndex}][date_of_birth]"
                   class="form-control">
        </td>

        <td>
            <select name="family[${familyIndex}][gender_id]"
                    class="form-control">
                <option value="">--</option>                
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                    <option value="other">Other</option>
            </select>
        </td>

        <td class="text-center">
            <input type="checkbox"
                   name="family[${familyIndex}][is_dependent]"
                   value="1" checked>
        </td>

        <td class="text-center">
            <input type="checkbox"
                   name="family[${familyIndex}][is_nominee]"
                   value="1">
        </td>

        <td class="text-center">
            <button type="button" class="btn btn-sm btn-danger remove-row"> <i class="fas fa-trash"></i></button>
        </td>
    </tr>`;

    $('#familyTable tbody').append(row);
    familyIndex++;
});

$(document).on('click', '.remove-row', function () {
    $(this).closest('tr').remove();
});
</script>
<script>
let documentIndex = <?php echo e(isset($employee) ? $employee->documents->count() : 0); ?>;

$('#addDocumentRow').click(function () {

    let row = `
    <tr>
        <td>
            <select name="documents[${documentIndex}][document_type_id]"
                    class="form-control" required>
                <?php $__currentLoopData = $documentTypes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $dt): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($dt->id); ?>"><?php echo e($dt->name); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>
        </td>

        <td>
            <input type="text"
                   name="documents[${documentIndex}][document_number]"
                   class="form-control">
        </td>

        <td>
            <input type="date"
                   name="documents[${documentIndex}][issue_date]"
                   class="form-control">
        </td>

        <td>
            <input type="date"
                   name="documents[${documentIndex}][expiry_date]"
                   class="form-control">
        </td>

        <td>
            <input type="file"
                   name="documents[${documentIndex}][file]"
                   class="form-control" required>
        </td>

        <td class="text-center">
            <button type="button"
                    class="btn btn-sm btn-danger remove-row">
                <i class="fas fa-trash"></i>
            </button>
        </td>
    </tr>`;

    $('#documentTable tbody').append(row);
    documentIndex++;
});

$(document).on('click', '.remove-row', function () {
    $(this).closest('tr').remove();
});
</script>
<script>
/*
|--------------------------------------------------------------------------
| Employee Additions JS
|--------------------------------------------------------------------------
| - Supports edit mode (existing rows)
| - Add new rows dynamically
| - Remove rows
| - AJAX load calculation type & amount
|--------------------------------------------------------------------------
*/

let additionIndex = <?php echo e(isset($employee) ? $employee->additions->count() : 0); ?>;

// Laravel route with placeholder
const additionDetailsUrl = "<?php echo e(route('core.additions.details', ':id')); ?>";

/**
 * Add new row
 */
$('#addAdditionRow').on('click', function () {

    let rowHtml = `
    <tr>
        <td>
            <select name="additions[${additionIndex}][addition_id]"
                    class="form-control addition-select"
                    required>
                <option value="">Select</option>
                <?php $__currentLoopData = $additions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $add): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($add->id); ?>"><?php echo e($add->name); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>
        </td>

        <td>
            <input type="text"
                   name="additions[${additionIndex}][calculation_type]"
                   class="form-control calculation-type"
                   readonly>
        </td>

        <td>
            <input type="number"
                   name="additions[${additionIndex}][amount]"
                   class="form-control amount"
                   value="0"
                   readonly>
        </td>

        <td>
            <select name="additions[${additionIndex}][status]"
                    class="form-control">
                <option value="1">Active</option>
                <option value="0">Deactive</option>
            </select>
        </td>

        <td class="text-center">
            <button type="button"
                    class="btn btn-sm btn-outline-danger remove-row"
                    title="Remove">
                 <i class="fas fa-trash"></i>
            </button>
        </td>
    </tr>
    `;

    $('#additionsTable tbody').append(rowHtml);
    additionIndex++;
});

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

/**
 * On Addition select → load details via AJAX
 */
$(document).on('change', '.addition-select', function () {

    let additionId = $(this).val();
    let row = $(this).closest('tr');

    // reset if empty
    if (!additionId) {
        row.find('.calculation-type').val('');
        row.find('.amount').val(0).prop('readonly', true);
        return;
    }

    let url = additionDetailsUrl.replace(':id', additionId);

    $.ajax({
        url: url,
        type: 'GET',
        success: function (res) {

            row.find('.calculation-type').val(res.calculation_type);

            if (res.calculation_type === 'fixed') {
                row.find('.amount')
                    .val(res.amount)
                    .prop('readonly', true);
            }
            else if (res.calculation_type === 'formula') {
                row.find('.amount')
                    .val(0)
                    .prop('readonly', true);
            }
            else { // both
                row.find('.amount')
                    .val(res.amount)
                    .prop('readonly', false);
            }
        },
        error: function () {
            alert('Unable to load addition details');
        }
    });
});
</script>

<script>
/*
|--------------------------------------------------------------------------
| Employee Additions JS
|--------------------------------------------------------------------------
| - Supports edit mode (existing rows)
| - Add new rows dynamically
| - Remove rows
| - AJAX load calculation type & amount
|--------------------------------------------------------------------------
*/

let deductionIndex = <?php echo e(isset($employee) ? $employee->deductions->count() : 0); ?>;

// Laravel route with placeholder
const deductionDetailsUrl = "<?php echo e(route('core.deductions.details', ':id')); ?>";

/**
 * Add new row
 */
$('#addDeductionRow').on('click', function () {

    let rowHtml = `
    <tr>
        <td>
            <select name="deductions[${deductionIndex}][addition_id]"
                    class="form-control deduction-select"
                    required>
                <option value="">Select</option>
                <?php $__currentLoopData = $deductions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $add): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($add->id); ?>"><?php echo e($add->name); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>
        </td>

        <td>
            <input type="text"
                   name="deductions[${deductionIndex}][calculation_type]"
                   class="form-control calculation-type"
                   readonly>
        </td>

        <td>
            <input type="number"
                   name="deductions[${deductionIndex}][amount]"
                   class="form-control amount"
                   value="0"
                   readonly>
        </td>

        <td>
            <select name="deductions[${deductionIndex}][status]"
                    class="form-control">
                <option value="1">Active</option>
                <option value="0">Deactive</option>
            </select>
        </td>

        <td class="text-center">
            <button type="button"
                    class="btn btn-sm btn-outline-danger remove-row"
                    title="Remove">
                <i class="fas fa-trash"></i>
            </button>
        </td>
    </tr>
    `;

    $('#deductionsTable tbody').append(rowHtml);
    deductionIndex++;
});

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

/**
 * On Addition select → load details via AJAX
 */
$(document).on('change', '.deduction-select', function () {

    let additionId = $(this).val();
    let row = $(this).closest('tr');

    // reset if empty
    if (!additionId) {
        row.find('.calculation-type').val('');
        row.find('.amount').val(0).prop('readonly', true);
        return;
    }

    let url = deductionDetailsUrl.replace(':id', additionId);

    $.ajax({
        url: url,
        type: 'GET',
        success: function (res) {

            row.find('.calculation-type').val(res.calculation_type);

            if (res.calculation_type === 'fixed') {
                row.find('.amount')
                    .val(res.amount)
                    .prop('readonly', true);
            }
            else if (res.calculation_type === 'formula') {
                row.find('.amount')
                    .val(0)
                    .prop('readonly', true);
            }
            else { // both
                row.find('.amount')
                    .val(res.amount)
                    .prop('readonly', false);
            }
        },
        error: function () {
            alert('Unable to load deduction details');
        }
    });
});
</script>
<script>
let leaveIndex = 0;

<?php if(isset($employee)): ?>
    const leaveLoadUrl =
        "<?php echo e(route('core.employee.leaves.byYear', ['employee' => $employee->id, 'year' => ':year'])); ?>";
<?php endif; ?>

/**
 * Load leaves for selected year (EDIT MODE ONLY)
 */
function loadLeaves(year) {

    if (typeof leaveLoadUrl === 'undefined') {
        return; // create mode → do nothing
    }

    let url = leaveLoadUrl.replace(':year', year);

    $.get(url, function (res) {

        let tbody = $('#leaveTable tbody');
        tbody.empty();
        leaveIndex = 0;

        if (!res || res.length === 0) return;

        res.forEach(function (leave) {

            let row = `
            <tr>
                <td>
                    <select name="leaves[${leaveIndex}][leave_type_id]"
                            class="form-control"
                            required>
                        <?php $__currentLoopData = $leaveTypes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $lt): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($lt->id); ?>"
                                ${leave.leave_type_id == <?php echo e($lt->id); ?> ? 'selected' : ''}>
                                <?php echo e($lt->name); ?>

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

                <td>
                    <input type="number"
                           name="leaves[${leaveIndex}][days]"
                           class="form-control"
                           value="${leave.number_of_days}"
                           min="0"
                           required>
                </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>
            `;

            tbody.append(row);
            leaveIndex++;
        });
    });
}

/**
 * Year change
 * - Edit mode → reload via ajax
 * - Create mode → just clear table
 */
$('#leaveYearSelect').on('change', function () {

    let year = $(this).val();

    if (typeof leaveLoadUrl !== 'undefined') {
        loadLeaves(year);
    } else {
        // create mode → reset table
        $('#leaveTable tbody').empty();
        leaveIndex = 0;
    }
});

/**
 * Add new row (Create + Edit)
 */
$('#addLeaveRow').on('click', function () {

    let row = `
    <tr>
        <td>
            <select name="leaves[${leaveIndex}][leave_type_id]"
                    class="form-control"
                    required>
                <option value="">Select</option>
                <?php $__currentLoopData = $leaveTypes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $lt): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($lt->id); ?>"><?php echo e($lt->name); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>
        </td>

        <td>
            <input type="number"
                   name="leaves[${leaveIndex}][days]"
                   class="form-control"
                   min="0"
                   required>
        </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>
    `;

    $('#leaveTable tbody').append(row);
    leaveIndex++;
});

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

/**
 * Initial load
 * - Only in EDIT mode
 */
$(document).ready(function () {
    if (typeof leaveLoadUrl !== 'undefined') {
        loadLeaves($('#leaveYearSelect').val());
    }
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const checkbox = document.querySelector('input[name="same_as_current"]');

    const map = [
        ['current_address_line1', 'permanent_address_line1'],
        ['current_address_line2', 'permanent_address_line2'],
        ['current_city_id', 'permanent_city_id'],
        ['current_postal_code', 'permanent_postal_code'],
    ];

    function syncAddress() {
        if (checkbox.checked) {
            map.forEach(([from, to]) => {
                const fromEl = document.querySelector(`[name="${from}"]`);
                const toEl   = document.querySelector(`[name="${to}"]`);
                if (fromEl && toEl) {
                    toEl.value = fromEl.value;
                }
            });
        }
    }

    checkbox.addEventListener('change', function () {
        if (this.checked) {
            syncAddress();
        } else {
            map.forEach(([_, to]) => {
                const el = document.querySelector(`[name="${to}"]`);
                if (el) el.value = '';
            });
        }
    });

    // keep syncing when current address changes
    map.forEach(([from]) => {
        const el = document.querySelector(`[name="${from}"]`);
        if (el) el.addEventListener('input', syncAddress);
    });
});
</script>
<script>
/*
|--------------------------------------------------------------------------
| Designation Change → Auto-load Additions & Deductions
|--------------------------------------------------------------------------
| When user selects a designation, fetch its associated additions and
| deductions and populate the respective tables.
|--------------------------------------------------------------------------
*/

const designationPayrollUrl = "<?php echo e(route('core.designations.details', ['designation' => ':id'])); ?>";

$('#designation_id').on('change', function () {
    let designationId = $(this).val();

    if (!designationId) {
        return;
    }

    // Only auto-populate in CREATE mode (when employee doesn't exist yet)
    // In EDIT mode, we don't want to overwrite existing employee additions/deductions
    <?php if(!isset($employee)): ?>
        let url = designationPayrollUrl.replace(':id', designationId);

        $.ajax({
            url: url,
            type: 'GET',
            success: function (res) {
                // Clear existing rows
                $('#additionsTable tbody').empty();
                $('#deductionsTable tbody').empty();

                // Reset indices
                additionIndex = 0;
                deductionIndex = 0;

                // Populate additions
                if (res.additions && res.additions.length > 0) {
                    res.additions.forEach(function (addition) {
                        let isReadonly = addition.calculation_type !== 'both';
                        let rowHtml = `
                        <tr>
                            <td>
                                <select name="additions[${additionIndex}][addition_id]"
                                        class="form-control addition-select"
                                        required>
                                    <option value="">Select</option>
                                    <?php $__currentLoopData = $additions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $add): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($add->id); ?>" ${addition.id == <?php echo e($add->id); ?> ? 'selected' : ''}><?php echo e($add->name); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            </td>
                            <td>
                                <input type="text"
                                       name="additions[${additionIndex}][calculation_type]"
                                       class="form-control calculation-type"
                                       value="${addition.calculation_type}"
                                       readonly>
                            </td>
                            <td>
                                <input type="number"
                                       name="additions[${additionIndex}][amount]"
                                       class="form-control amount"
                                       value="${addition.amount}"
                                       ${isReadonly ? 'readonly' : ''}>
                            </td>
                            <td>
                                <select name="additions[${additionIndex}][status]"
                                        class="form-control">
                                    <option value="1">Active</option>
                                    <option value="0">Deactive</option>
                                </select>
                            </td>
                            <td class="text-center">
                                <button type="button"
                                        class="btn btn-sm btn-outline-danger remove-row"
                                        title="Remove">
                                     <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        `;
                        $('#additionsTable tbody').append(rowHtml);
                        additionIndex++;
                    });
                }

                // Populate deductions
                if (res.deductions && res.deductions.length > 0) {
                    res.deductions.forEach(function (deduction) {
                        let isReadonly = deduction.calculation_type !== 'both';
                        let rowHtml = `
                        <tr>
                            <td>
                                <select name="deductions[${deductionIndex}][addition_id]"
                                        class="form-control deduction-select"
                                        required>
                                    <option value="">Select</option>
                                    <?php $__currentLoopData = $deductions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $add): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($add->id); ?>" ${deduction.id == <?php echo e($add->id); ?> ? 'selected' : ''}><?php echo e($add->name); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            </td>
                            <td>
                                <input type="text"
                                       name="deductions[${deductionIndex}][calculation_type]"
                                       class="form-control calculation-type"
                                       value="${deduction.calculation_type}"
                                       readonly>
                            </td>
                            <td>
                                <input type="number"
                                       name="deductions[${deductionIndex}][amount]"
                                       class="form-control amount"
                                       value="${deduction.amount}"
                                       ${isReadonly ? 'readonly' : ''}>
                            </td>
                            <td>
                                <select name="deductions[${deductionIndex}][status]"
                                        class="form-control">
                                    <option value="1">Active</option>
                                    <option value="0">Deactive</option>
                                </select>
                            </td>
                            <td class="text-center">
                                <button type="button"
                                        class="btn btn-sm btn-outline-danger remove-row"
                                        title="Remove">
                                     <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        `;
                        $('#deductionsTable tbody').append(rowHtml);
                        deductionIndex++;
                    });
                }
            },
            error: function () {
                console.log('Unable to load designation payroll details');
            }
        });
    <?php endif; ?>
});
</script>
<?php /**PATH /home/codeproh/va.laraoffice.com/app/Modules/HR/Core/Providers/../Views/employees/partials/scripts.blade.php ENDPATH**/ ?>