<?php $__env->startSection('content'); ?>
<div class="card">
    <div class="card-header bg-light">
        <h5 class="mb-0 fw-semibold">Create Addition</h5>
        <small class="text-muted">Define earning components and calculation rules</small>
    </div>

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

            
            <h6 class="text-primary mt-2 mb-3">Basic Information</h6>

            <div class="row g-3">
                <div class="col-md-4">
                    <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="col-md-3">
                    <label class="form-label">Code <span class="text-danger">*</span></label>
                    <input type="text" name="code" class="form-control" placeholder="HRA" required>
                </div>

                <div class="col-md-5">
                    <label class="form-label">Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control" placeholder="House Rent Allowance" required>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Payslip Label <span class="text-danger">*</span></label>
                    <input type="text" name="payslip_label" class="form-control" placeholder="HRA" required>
                </div>

                <div class="col-md-12">
                    <label class="form-label">Description</label>
                    <textarea name="description" class="form-control" rows="2"
                        placeholder="Optional internal description"></textarea>
                </div>
            </div>

            <hr class="my-4">

            
            <h6 class="text-primary mb-3">Calculation</h6>

            <div class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label class="form-label">Calculation Type <span class="text-danger">*</span></label>
                    <select name="calculation_type" class="form-select" required>
                        <option value="FIXED">Fixed Amount</option>
                        <option value="FORMULA">Formula Based</option>
                        <option value="BOTH">Fixed + Formula</option>
                    </select>
                </div>

                <div class="col-md-3">
                    <label class="form-label">Fixed Amount</label>
                    <input type="number" step="0.01" name="fixed_amount"
                            class="form-control" placeholder="0.00">
                </div>
            </div>

            
            <div id="formulaBuilderWrapper" class="mt-3">
                <label class="form-label fw-semibold">Formula Builder</label>
                <div class="border rounded p-3 bg-white">
                    
                    <div class="mb-3">
                        <textarea name="formula_expression" id="formulaDisplay" class="form-control font-monospace fw-bold" rows="3" readonly
                            placeholder="Click buttons below to build formula..."></textarea>
                    </div>

                    <div class="d-flex gap-2 mb-3">
                        <button type="button" class="btn btn-outline-danger btn-sm" id="formulaClear">Clear All</button>
                        <button type="button" class="btn btn-outline-warning btn-sm" id="formulaBackspace">Backspace</button>
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="formulaSpace">Space</button>
                    </div>

                    <div class="row g-3">
                        
                        <div class="col-lg-8">
                            
                            <div class="mb-3">
                                <small class="text-muted fw-semibold d-block mb-1">Payroll Fields</small>
                                <div class="d-flex flex-wrap gap-1">
                                    <button type="button" class="btn btn-sm btn-primary formula-token" data-token="basic_salary">basic_salary</button>
                                    <button type="button" class="btn btn-sm btn-primary formula-token" data-token="gross_salary">gross_salary</button>
                                    <button type="button" class="btn btn-sm btn-primary formula-token" data-token="net_salary">net_salary</button>
                                    <button type="button" class="btn btn-sm btn-primary formula-token" data-token="epf_12">epf_12</button>
                                    <button type="button" class="btn btn-sm btn-primary formula-token" data-token="etf_3">etf_3</button>
                                </div>
                            </div>

                            
                            <div class="mb-3">
                                <small class="text-muted fw-semibold d-block mb-1">Attendance Status</small>
                                <div class="d-flex flex-wrap gap-1">
                                    <button type="button" class="btn btn-sm btn-info formula-token" data-token="A">A <small>(Absent)</small></button>
                                    <button type="button" class="btn btn-sm btn-info formula-token" data-token="P">P <small>(Present)</small></button>
                                    <button type="button" class="btn btn-sm btn-info formula-token" data-token="DF">DF <small>(Day Off)</small></button>
                                    <button type="button" class="btn btn-sm btn-info formula-token" data-token="H">H <small>(Holiday)</small></button>
                                    <button type="button" class="btn btn-sm btn-info formula-token" data-token="HP+HA">HP+HA</button>
                                    <button type="button" class="btn btn-sm btn-info formula-token" data-token="HA+HP">HA+HP</button>
                                    <button type="button" class="btn btn-sm btn-info formula-token" data-token="HP+HDF">HP+HDF</button>
                                    <button type="button" class="btn btn-sm btn-info formula-token" data-token="HDF+HP">HDF+HP</button>
                                    <button type="button" class="btn btn-sm btn-info formula-token" data-token="HA+HDF">HA+HDF</button>
                                    <button type="button" class="btn btn-sm btn-info formula-token" data-token="HDF+HA">HDF+HA</button>
                                </div>
                            </div>

                            
                            <div class="mb-3">
                                <small class="text-muted fw-semibold d-block mb-1">Attendance Fields</small>
                                <div class="d-flex flex-wrap gap-1">
                                    <button type="button" class="btn btn-sm btn-outline-info formula-token" data-token="late_minutes">late_minutes</button>
                                    <button type="button" class="btn btn-sm btn-outline-info formula-token" data-token="early_minutes">early_minutes</button>
                                    <button type="button" class="btn btn-sm btn-outline-info formula-token" data-token="short_leave_minutes">short_leave_minutes</button>
                                    <button type="button" class="btn btn-sm btn-outline-info formula-token" data-token="ot_minutes">ot_minutes</button>
                                    <button type="button" class="btn btn-sm btn-outline-info formula-token" data-token="dot_minutes">dot_minutes</button>
                                </div>
                            </div>

                            
                            <?php if($additionCodes->count()): ?>
                            <div class="mb-3">
                                <small class="text-muted fw-semibold d-block mb-1">Addition Codes</small>
                                <div class="d-flex flex-wrap gap-1">
                                    <?php $__currentLoopData = $additionCodes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $code): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <button type="button" class="btn btn-sm btn-success formula-token" data-token="addition.<?php echo e($code); ?>"><?php echo e($code); ?></button>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                            </div>
                            <?php endif; ?>

                            
                            <?php if($deductionCodes->count()): ?>
                            <div class="mb-3">
                                <small class="text-muted fw-semibold d-block mb-1">Deduction Codes</small>
                                <div class="d-flex flex-wrap gap-1">
                                    <?php $__currentLoopData = $deductionCodes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $code): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <button type="button" class="btn btn-sm btn-danger formula-token" data-token="deduction.<?php echo e($code); ?>"><?php echo e($code); ?></button>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                            </div>
                            <?php endif; ?>
                        </div>

                        
                        <div class="col-lg-4">
                            
                            <div class="mb-3">
                                <small class="text-muted fw-semibold d-block mb-1">Arithmetic</small>
                                <div class="d-flex flex-wrap gap-1">
                                    <button type="button" class="btn btn-sm btn-dark formula-token" data-token=" + " style="min-width:42px">+</button>
                                    <button type="button" class="btn btn-sm btn-dark formula-token" data-token=" - " style="min-width:42px">-</button>
                                    <button type="button" class="btn btn-sm btn-dark formula-token" data-token=" * " style="min-width:42px">*</button>
                                    <button type="button" class="btn btn-sm btn-dark formula-token" data-token=" / " style="min-width:42px">/</button>
                                </div>
                            </div>

                            
                            <div class="mb-3">
                                <small class="text-muted fw-semibold d-block mb-1">Comparison</small>
                                <div class="d-flex flex-wrap gap-1">
                                    <button type="button" class="btn btn-sm btn-dark formula-token" data-token=" > " style="min-width:42px">&gt;</button>
                                    <button type="button" class="btn btn-sm btn-dark formula-token" data-token=" < " style="min-width:42px">&lt;</button>
                                    <button type="button" class="btn btn-sm btn-dark formula-token" data-token=" >= " style="min-width:42px">&gt;=</button>
                                    <button type="button" class="btn btn-sm btn-dark formula-token" data-token=" <= " style="min-width:42px">&lt;=</button>
                                    <button type="button" class="btn btn-sm btn-dark formula-token" data-token=" == " style="min-width:42px">==</button>
                                    <button type="button" class="btn btn-sm btn-dark formula-token" data-token=" != " style="min-width:42px">!=</button>
                                </div>
                            </div>

                            
                            <div class="mb-3">
                                <small class="text-muted fw-semibold d-block mb-1">Logic & Control</small>
                                <div class="d-flex flex-wrap gap-1">
                                    <button type="button" class="btn btn-sm btn-secondary formula-token" data-token=" AND ">AND</button>
                                    <button type="button" class="btn btn-sm btn-secondary formula-token" data-token=" OR ">OR</button>
                                    <button type="button" class="btn btn-sm btn-secondary formula-token" data-token="IF ">IF</button>
                                    <button type="button" class="btn btn-sm btn-secondary formula-token" data-token=" ELSE ">ELSE</button>
                                    <button type="button" class="btn btn-sm btn-secondary formula-token" data-token=" ENDIF">ENDIF</button>
                                </div>
                            </div>

                            
                            <div class="mb-3">
                                <small class="text-muted fw-semibold d-block mb-1">Brackets & Decimal</small>
                                <div class="d-flex flex-wrap gap-1">
                                    <button type="button" class="btn btn-sm btn-outline-dark formula-token" data-token="(" style="min-width:42px">(</button>
                                    <button type="button" class="btn btn-sm btn-outline-dark formula-token" data-token=")" style="min-width:42px">)</button>
                                    <button type="button" class="btn btn-sm btn-outline-dark formula-token" data-token="." style="min-width:42px">.</button>
                                </div>
                            </div>

                            
                            <div class="mb-3">
                                <small class="text-muted fw-semibold d-block mb-1">Numbers</small>
                                <div class="d-flex flex-wrap gap-1">
                                    <?php for($i = 0; $i <= 9; $i++): ?>
                                        <button type="button" class="btn btn-sm btn-outline-dark formula-token" data-token="<?php echo e($i); ?>" style="min-width:42px"><?php echo e($i); ?></button>
                                    <?php endfor; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <hr class="my-4">

            
            <h6 class="text-primary mb-3">Applicability</h6>

            <div class="row g-3">
                <div class="col-md-8">
                    <div class="d-flex flex-wrap gap-4">
                        <div class="form-check">
                            <input class="form-control" type="hidden" name="is_epf_applicable" id="" value="0">
                            <input class="form-check-input" type="checkbox" name="is_epf_applicable" id="epf" value="1">
                            <label class="form-check-label" for="epf">EPF Applicable</label>
                        </div>

                        <div class="form-check">
                                <input class="form-control" type="hidden" name="is_etf_applicable" id="" value="0">
                            <input class="form-check-input" type="checkbox" name="is_etf_applicable" id="etf" value="1">
                            <label class="form-check-label" for="etf">ETF Applicable</label>
                        </div>

                        <div class="form-check">
                                <input class="form-control" type="hidden" name="is_gross_applicable" id="" value="0">
                            <input class="form-check-input" type="checkbox" name="is_gross_applicable" id="gross" checked value="1">
                            <label class="form-check-label" for="gross">Include in Gross</label>
                        </div>

                        <div class="form-check">
                                <input class="form-control" type="hidden" name="is_net_applicable" id="" value="0">
                            <input class="form-check-input" type="checkbox" name="is_net_applicable" id="net" value="1">
                            <label class="form-check-label" for="net">Include in Net</label>
                        </div>
                    </div>
                </div>

                <div class="col-md-2">
                    <label class="form-label">Sort Order</label>
                    <input type="number" name="sort_order" class="form-control" value="0">
                </div>

                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <div class="form-check mt-2">
                        <input type="hidden" name="status" value="0">
                        <input class="form-check-input" type="checkbox" name="status" checked value="1">
                        <label class="form-check-label">Active</label>
                    </div>
                </div>
            </div>

            <hr class="my-4">

            
            <h6 class="text-primary mb-3">Effective Period</h6>

            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Effective From</label>
                    <input type="date" name="effective_from" class="form-control">
                </div>

                <div class="col-md-3">
                    <label class="form-label">Effective To</label>
                    <input type="date" name="effective_to" class="form-control">
                </div>
            </div>

            
            <div class="d-flex justify-content-end gap-2 mt-4">
                <a href="<?php echo e(route('payroll.additions.index')); ?>" class="btn btn-light">
                    Cancel
                </a>
                <button class="btn btn-success px-4">
                    Save Addition
                </button>
            </div>
        </form>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
$('#additionForm').on('submit', function(e){
    e.preventDefault();

    $.post("<?php echo e(route('payroll.additions.store')); ?>", $(this).serialize())
        .done(res => {
             Swal.fire('Success', res.message, 'success')
                .then(() => window.location.href = "<?php echo e(route('payroll.additions.index')); ?>");
        })
        .fail(err => {
            if (err.status === 422) {
                Swal.fire('Validation Error', err.responseJSON.errors, 'error');
            
            } else {
                Swal.fire('Something went wrong','error');
            }
        });
});

// ── Toggle calculation fields ──
function toggleCalculationFields() {
    const type = $('select[name="calculation_type"]').val();
    const fixed = $('input[name="fixed_amount"]');
    const builderWrapper = $('#formulaBuilderWrapper');

    if (type === 'FIXED') {
        fixed.prop('disabled', false);
        builderWrapper.hide();
        $('#formulaDisplay').val('');
    } else if (type === 'FORMULA') {
        fixed.prop('disabled', true).val('');
        builderWrapper.show();
    } else { // BOTH
        fixed.prop('disabled', false);
        builderWrapper.show();
    }
}

$('select[name="calculation_type"]').on('change', toggleCalculationFields);
toggleCalculationFields();

// ── Formula Builder ──
$('.formula-token').on('click', function() {
    const token = $(this).data('token');
    const display = $('#formulaDisplay');
    display.val(display.val() + token);
});

$('#formulaClear').on('click', function() {
    $('#formulaDisplay').val('');
});

$('#formulaBackspace').on('click', function() {
    const display = $('#formulaDisplay');
    const val = display.val();
    // try to remove last token (word with optional surrounding spaces)
    const trimmed = val.replace(/\s*\S+\s*$/, '');
    display.val(trimmed);
});

$('#formulaSpace').on('click', function() {
    const display = $('#formulaDisplay');
    display.val(display.val() + ' ');
});
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /media/madu/E8460E1D460DECDE/projects/laraoffice/app/Modules/HR/Payroll/Providers/../Views/additions/create.blade.php ENDPATH**/ ?>