
<?php $__env->startSection('content'); ?>
    <!-- begin::main content -->
    <style>
        textarea{
    min-height: 30px !important;
}

.form-control, .swal-modal input.swal-content__input{
    height: 43px !important;
}

.btn.btn-add, .btn.btn-add-payment {
    padding-left: 2.8571428571em;
    background-repeat: no-repeat;
    background-position: 1.4285714286em center;
}




input{
    border: 1px solid #c6d9e0 !important;
}

.search-btn {
    position: relative;
    right: 31px;
    top: 1px;
    color: #bdbdbd;
}

label {
    display: block;
    font-size: 13px;
    line-height: 1.3846153846em;
    color: #526069;
    margin-bottom: 0.7692307692em;
    user-select: none;
    cursor: pointer;
    font-weight: 500;
    width: 10.7692307692em;
}

.search-card{
    width:100%;
    border:none;
}
.tab {
    display: inline-block;
    padding: 16px 12px;
    cursor: pointer;
    
    background-color: #E6EAED;
    margin-right: -4px; /* Remove spacing between tabs */
  }

  /* Style for highlighted tab */
  .tab.active {
    background-color: white;
  }

  /* Content area style */
  .tab-content {
    
    padding: 20px;
    border-radius: 0 0 5px 5px;
    display: none; /* Hide all content areas by default */
  }

  /* Show active content area */
  .tab-content.active {
    display: block;
  }
    </style>

    <main class="main-content">

        <div class="container">

            <!-- begin::page header -->
            <div class="page-header">
                <h3><?php echo e(__('message.add')); ?> Salary Template</h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="<?php echo e(asset('dashboard')); ?>"><?php echo e(__('message.dashboard')); ?></a></li>
                        <li class="breadcrumb-item" aria-current="page"><a href="<?php echo e(asset('hrms/salary-template')); ?>">Salary Template</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><?php echo e(__('message.add')); ?></li>
                    </ol>
                </nav>
            </div>
            <!-- end::page header -->

            <div class="row">
                <div class="col-md-12">

                    <?php if (isset($component)) { $__componentOriginal8a5ba9c90b64d384232e9948b1023e746ba08e74 = $component; } ?>
<?php $component = $__env->getContainer()->make(App\View\Components\FlashMessage::class, []); ?>
<?php $component->withName('flashMessage'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal8a5ba9c90b64d384232e9948b1023e746ba08e74)): ?>
<?php $component = $__componentOriginal8a5ba9c90b64d384232e9948b1023e746ba08e74; ?>
<?php unset($__componentOriginal8a5ba9c90b64d384232e9948b1023e746ba08e74); ?>
<?php endif; ?>                  
                    
                    <div class="card">
                    
                        <div class="card-body py-0">
                        
                            <div class="bg-white ">
                                   
                                <div class="row pb-5">
                                    <div class="col-md-3">
                                        <?php
                                            $earnings = $payheads->where('type', 'earning')->where('admin_id','!=',0)->whereNotIn('slug',['basic','fixed_allowance']);
                                            $deductions = $payheads->where('type', 'deduction')->where('admin_id','!=',0);
                                            $reimbursements = $payheads->where('type', 'reimbursements')->where('admin_id','!=',0);
                                            $benefits = $payheads->where('type', 'benefit')->where('admin_id','!=',0);
                                        ?>

                                        
                                        <div id="accordion" class="py-4">
                                            <div class="card mb-2">
                                                <div class="card-header" style="width:100%;">
                                                    <a class="card-link text-left d-flex justify-content-between align-items-center" data-toggle="collapse" href="#collapseOne">
                                                       
                                                        <strong>Earnings</strong> <i class="ti ti-plus"></i>                                                           
                                                    </a>
                                                </div>
                                                <div id="collapseOne" class="collapse show" data-parent="#accordion">
                                                    <div class="card-body">
                                                        <?php if($earnings->isNotEmpty()): ?>                                                           
                                                            <?php $__currentLoopData = $earnings; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $head): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                                <button class="btn btn-outline-primary w-100 mb-2 text-capitalize d-flex justify-content-between add_payhead_btn" head_data="<?php echo e(json_encode($head)); ?>"><?php echo e($head->name); ?> <i class="ti ti-plus"></i></button>
                                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                        <?php endif; ?>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="card mb-2">
                                                <div class="card-header">
                                                <a class="collapsed card-link d-flex justify-content-between align-items-center " data-toggle="collapse" href="#collapseTwo">
                                                   
                                                    <strong>Deductions</strong> <i class="ti ti-plus"></i>                                                    
                                                </a>
                                                </div>
                                                <div id="collapseTwo" class="collapse" data-parent="#accordion">
                                                <div class="card-body">
                                                    <?php if($deductions->isNotEmpty()): ?>
                                                       
                                                        <?php $__currentLoopData = $deductions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $head): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                            <button class="btn btn-outline-primary w-100 mb-2 text-capitalize d-flex justify-content-between add_payhead_btn" head_data="<?php echo e(json_encode($head)); ?>"><?php echo e($head->name); ?> <i class="ti ti-plus"></i></button>
                                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                    <?php endif; ?>
                                                </div>
                                                </div>
                                            </div>

                                            <div class="card mb-2">
                                                <div class="card-header">
                                                <a class="collapsed card-link d-flex justify-content-between align-items-center" data-toggle="collapse" href="#collapseThree">
                                                  
                                                        <strong>Reimbursements</strong> <i class="ti ti-plus"></i>
                                                       
                                                </a>
                                                </div>
                                                <div id="collapseThree" class="collapse" data-parent="#accordion">
                                                <div class="card-body">
                                                    <?php if($reimbursements->isNotEmpty()): ?>
                                                        
                                                        <?php $__currentLoopData = $reimbursements; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $head): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                            <button class="btn btn-outline-primary w-100 mb-2 text-capitalize d-flex justify-content-between add_payhead_btn" head_data="<?php echo e(json_encode($head)); ?>"><?php echo e($head->name); ?> <i class="ti ti-plus"></i></button>
                                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                    <?php endif; ?>
                                                </div>
                                                </div>
                                            </div>

                                            <div class="card mb-2">
                                                <div class="card-header">
                                                <a class="collapsed card-link d-flex justify-content-between align-items-center" data-toggle="collapse" href="#collapseFour">
                                                   
                                                        <strong>Benefits</strong> <i class="ti ti-plus"></i>
                                                       
                                                </a>
                                                </div>
                                                <div id="collapseFour" class="collapse" data-parent="#accordion">
                                                <div class="card-body">
                                                    <?php if($benefits->isNotEmpty()): ?>
                                                        
                                                        <?php $__currentLoopData = $benefits; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $head): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                            <button class="btn btn-outline-primary w-100 mb-2 text-capitalize d-flex justify-content-between add_payhead_btn" head_data="<?php echo e(json_encode($head)); ?>"><?php echo e($head->name); ?> <i class="ti ti-plus"></i></button>
                                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                    

                                                    <?php endif; ?>
                                                    <button class="btn btn-outline-primary w-100 mb-2 text-capitalize d-flex justify-content-between add_payhead_btn" head_data="<?php echo e(json_encode($epf_details)); ?>">Employee EPF <i class="ti ti-plus"></i></button>
                                                </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-md-9 p-4" style="border-right: 1px solid #e5e5e5;">
                                       
                                        <form action="<?php echo e(asset('hrms/add-salary-template')); ?>" method="post">
                                            <?php echo csrf_field(); ?>
                                            <div class="form-group">
                                                <label>Template Name *</label>
                                                <input type="text" name="name" class="form-control" placeholder="Enter template name" required>
                                            </div>
                                            <div class="form-group">
                                                <label>Description</label>
                                                <textarea class="form-control" name="description" rows="2" placeholder="Max 500 Characters"></textarea>
                                            </div>
                                            <div class="form-group">
                                                <label>Annual CTC (₹)</label>
                                                <input type="number" class="form-control annual_ctc" name="ctc" placeholder="0">
                                            </div>
                                            
                                            
                                            <table class="table table-stripped table-border border">
                                                <thead>
                                                    <tr>
                                                        <th>Name</th>
                                                        <th>Rate(%)</th>
                                                        <th>Monthly</th>
                                                        <th>Yearly</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody class="add_head_box">
                                                
                                                    <?php 
                                                        $salary_head = $payheads->where("admin_id",0);
                                                    ?>

                                                    <?php $__currentLoopData = $payheads; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $h): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>    
                                                                                              
                                                        <?php if($h->slug == 'basic'): ?>
                                                        <tr>
                                                            <td>
                                                                <label class="col-sm-3 col-form-label text-capitalize"><?php echo e($h->name); ?></label>
                                                            </td>
                                                            <td class="d-flex">
                                                                <input type="hidden" name="payhead_id[]" value="<?php echo e($h->id); ?>">
                                                                <input type="hidden" class="form-control" value="<?php echo e($h->rate_type); ?>" slug_type="<?php echo e($h->type); ?>" name="rate_type[]">
                                                                <input type="number" class="form-control rate_type_input" get_slug="<?php echo e($h->slug); ?>" value="<?php echo e($h->rate); ?>" name="rate[]" placeholder="% of <?php echo e($h->slug=='basic' ? 'CTC' : 'Basic'); ?>">
                                                            
                                                                <input type="text" class="form-control" value="% of <?php echo e($h->slug=='basic' ? 'CTC' : 'Basic'); ?>" disabled>
                                                            </td>
                                                            <td>
                                                                <input type="number" name="amount[]" class="form-control <?php echo e($h->slug); ?>" placeholder="Amount">
                                                            </td>
                                                            <td>
                                                                <input type="number" class="form-control <?php echo e($h->slug); ?>_yearly" placeholder="Amount">
                                                            </td>
                                                            <td>
                                                        
                                                            </td>
                                                        </tr>
                                                        <?php endif; ?>

                                                        <?php if($h->slug == 'fixed_allowance'): ?>
                                                        <tr>
                                                            <td>
                                                                <label class="col-sm-3 col-form-label text-capitalize"><?php echo e($h->name); ?></label>
                                                            </td>
                                                            <td class="d-flex">
                                                                <input type="hidden" name="payhead_id[]" value="<?php echo e($h->id); ?>">
                                                                <input type="hidden" class="form-control" value="<?php echo e($h->rate_type); ?>" slug_type="<?php echo e($h->type); ?>" name="rate_type[]">
                                                                <input type="hidden" class="form-control" value="<?php echo e($h->rate); ?>" get_slug="<?php echo e($h->slug); ?>" name="rate[]">
                                                                <input type="text" class="form-control" placeholder="Fixed Amount" disabled>
                                                            </td>
                                                            <td>
                                                            <input type="number" name="amount[]" class="form-control <?php echo e($h->slug); ?>" id="fixed_amount_input" placeholder="Amount">
                                                            </td>
                                                            <td>
                                                                <input type="number" class="form-control <?php echo e($h->slug); ?>_yearly"  placeholder="Amount">
                                                            </td>
                                                            <td>
                                                            
                                                            </td>
                                                                                                                    
                                                            
                                                        <?php endif; ?>                                                                            
                                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                    
                                                </tbody>
                                            </table>
                                            <table>
                                                <div ></div>
                                            </table>

                                            
                                           
                                            
                                            <div class="gross_salary_box d-flex justify-content-between px-2">
                                                <p>Gross Salary : </p> <p class="gross_salary">₹0</p>
                                                <input type="hidden" name="gross_salary" id="gross_salary">
                                            </div>
                                            
                                            <div class="net_salary_box d-flex justify-content-between px-2">
                                                <input type="hidden" class="net_salary">
                                                <p>Net Salary : </p> <p id="net_salary">₹0</p>
                                            </div>

                                            <button type="submit" class="btn btn-success mt-3">Save</button>
                                            <button type="reset" class="btn btn-secondary mt-3">Cancel</button>
                                        </form>                                       
                                    </div>
                                </div>         
                                
                            </div>
                            
                        </div>
                    </div>



                </div>

            </div>

                     
        </div>

    </main>
    <!-- end::main content -->
<?php $__env->stopSection(); ?>
<?php $__env->startPush('footer-script'); ?>
    <!-- begin::select2 -->
    <link rel="stylesheet" href="<?php echo e(asset('public/admin/vendors/select2/css/select2.min.css')); ?>" type="text/css">
    <script src="<?php echo e(asset('public/admin/vendors/select2/js/select2.min.js')); ?>"></script>
    <!-- end::select2 -->
    <script>
       
       $(document).ready(function() {
    $('#js-example-basic-roles').select2({});

    $(".annual_ctc").on("change", function() {                
        var ctc = $(this).val();
        if (ctc) {
            salary_calculation(ctc);
        }
    });

    function salary_calculation(ctc) {
        var payheads = <?php echo json_encode($payheads, 15, 512) ?>;  
        var epf = <?php echo json_encode($epf_details, 15, 512) ?>;
        //console.log(epf);
                
        var gross_salary = parseFloat(ctc/12).toFixed(0);
        var basic_pay = 0;
        var earnings = 0;
        var deduction = 0;
        var epf_amount = 0;
       
        // Reset display values
        $(".gross_salary").html("₹ "+gross_salary);
        $("#gross_salary").val(gross_salary);

        // Calculate basic pay first
        var basicPayHead = payheads.find(p => p.slug === "basic_pay" || p.slug === "basic");
        if (basicPayHead) {
            basic_pay = parseFloat((gross_salary * basicPayHead.rate) / 100).toFixed(0);
            $("." + basicPayHead.slug).val(basic_pay);
            $("." + basicPayHead.slug+"_yearly").val(basic_pay*12);
            earnings = parseFloat(earnings) + parseFloat(basic_pay);
        }

        // Calculate other components
        payheads.forEach(payhead => {
            if ( $("." + payhead.slug).length > 0) {
                if (payhead.slug !== "basic_pay" && payhead.slug !== "basic") {
                    var pay = 0;
                    
                    if (payhead.type === "earning") {
                        if (payhead.rate_type === "percentage") {
                            pay = parseFloat((basic_pay * payhead.rate) / 100).toFixed(0);
                        } else {
                            pay = parseFloat(payhead.rate).toFixed(0);
                        }
                        $("." + payhead.slug).val(pay);
                        earnings = parseFloat(earnings) + parseFloat(pay);
                    } 
                    else if (payhead.type === "deduction") {
                        if (payhead.rate_type === "percentage") {
                            pay = parseFloat((basic_pay * payhead.rate) / 100).toFixed(0);
                        } else {
                            pay = parseFloat(payhead.rate).toFixed(0);
                        }
                        $("." + payhead.slug).val(pay);
                        deduction = parseFloat(deduction) + parseFloat(pay);
                    }
                }
            }
        });

        if($(".employee_epf_amount").length)
        {
            if(epf.name == "epf")
            {
                //console.log("epf Amount");
                    if(epf.contribution_rate != 15000)
                    {
                        epf_amount = parseFloat((basic_pay*epf.epf_rate)/100).toFixed(0);

                        deduction = deduction + epf_amount;
                    }
                    else
                    {
                        epf_amount = net_salary<15000 ? parseFloat((gross_salary*epf.epf_rate)/100).toFixed(0) : parseFloat((15000*epf.epf_rate)/100).toFixed(0);
                        deduction = parseFloat(deduction + epf_amount).toFixed(0);
                    }

                    
                    $(".employee_epf_amount").val(Number(epf_amount));
                    $(".employee_epf_amount_yearly").val(Number(epf_amount*12));

            }
        }
        

        // Calculate net salary and fixed allowance
        var net_salary = parseFloat(gross_salary - deduction).toFixed(0);
        var fixed_allowance = parseFloat(net_salary - earnings).toFixed(0);
        
        // Update UI
        $("#net_salary").html("₹ "+net_salary);
        $(".net_salary").val(net_salary);
        $(".fixed_allowance").val(fixed_allowance);
        $(".fixed_allowance_yearly").val(Number(fixed_allowance)*12);
    }

    // Improved rate input calculation
    function rate_input_calculation(new_percentage, slug) {
        var epf = <?php echo json_encode($epf_details, 15, 512) ?>;
        var ctc = parseFloat($(".annual_ctc").val()) || 0;
        var gross_salary = parseFloat(ctc/12).toFixed(0);
        var basic_pay = parseFloat($(".basic").val()) || parseFloat($(".basic_pay").val()) || 0;
        var earnings = 0;
        var deduction = 0;

        // Recalculate the specific component
        if (slug === "basic_pay" || slug === "basic") {
            basic_pay = parseFloat((gross_salary * new_percentage) / 100).toFixed(0);
            $("." + slug).val(basic_pay);
            $("." + slug+"_yearly").val(basic_pay*12);

            // Recalculate all components
            $(".added_head").each(function() {
                
                var amount = parseFloat($(this).find("input[name='amount[]']").val()) || 0;
                var type = $(this).find("input[name='rate_type[]']").attr("slug_type");
                var rate_type = $(this).find("input[name='rate_type[]']").val();
                var rate = $(this).find("input[name='rate[]']").val();
                var get_slug = $(this).find("input[name='rate[]']").attr("get_slug");               
                
                if (type === "earning" && rate_type === "percentage" && get_slug !== "basic_pay" && get_slug !== "basic") 
                {
                    console.log("get slug"+get_slug);

                    var pay = Number((basic_pay * rate) / 100).toFixed(2);
                    $("." + get_slug).val(pay);
                    $("." + get_slug+"_yearly").val((pay * 12).toFixed(2));
                    earnings += Number(pay);

                } else if (type === "deduction" && rate_type === "percentage") 
                {
                    var pay = Number((basic_pay * rate) / 100).toFixed(2);
                    $("." + get_slug).val(pay);
                    $("." + get_slug+"_yearly").val((pay * 12).toFixed(2));
                    deduction += Number(pay);
                }
            });
        } else {
            var pay = parseFloat((basic_pay * new_percentage) / 100).toFixed(0);
            $("." + slug).val(pay);
            $("." + slug+"_yearly").val(pay*12);

            // Recalculate all components
            $(".added_head").each(function() {
                
                var amount = parseFloat($(this).find("input[name='amount[]']").val()) || 0;
                var type = $(this).find("input[name='rate_type[]']").attr("slug_type");
                var rate_type = $(this).find("input[name='rate_type[]']").val();
                var rate = $(this).find("input[name='rate[]']").val();
                var get_slug = $(this).find("input[name='rate[]']").attr("get_slug");
                
                
                if (type === "earning" && rate_type === "percentage" && get_slug !== "basic_pay" && get_slug !== "basic") 
                {
                        
                    var pay = Number((basic_pay * rate) / 100).toFixed(2);
                    $("." + get_slug).val(pay);
                    $("." + get_slug+"_yearly").val((pay * 12).toFixed(2));
                    earnings += Number(pay);
                } else if (type === "deduction" && rate_type === "percentage") 
                {
                    
                    var pay = Number((basic_pay * rate) / 100).toFixed(2);
                    $("." + get_slug).val(pay);
                    $("." + get_slug+"_yearly").val((pay * 12).toFixed(2));
                    earnings += Number(pay);
                }
            });
        }

        

        if($(".employee_epf_amount").length)
        {
            if(epf.name == "epf")
            {
            
                    if(epf.contribution_rate != 15000)
                    {
                        epf_amount = parseFloat((basic_pay*epf.epf_rate)/100).toFixed(0);

                        deduction = deduction + epf_amount;
                    }
                    else
                    {
                        epf_amount = net_salary<15000 ? parseFloat((gross_salary*epf.epf_rate)/100).toFixed(0) : parseFloat((15000*epf.epf_rate)/100).toFixed(0);
                        deduction = parseFloat(deduction + epf_amount).toFixed(0);
                    }

                    
                    $(".employee_epf_amount").val(Number(epf_amount));
                    $(".employee_epf_amount_yearly").val(Number(epf_amount*12));

            }
        }

        // Add basic pay to earnings
        earnings += parseFloat(basic_pay);

        // Calculate final values
        var net_salary = parseFloat(gross_salary - deduction).toFixed(0);
        var fixed_allowance = parseFloat(net_salary - earnings).toFixed(0);

        // Update UI
        $(".net_salary").val(net_salary);
        $("#net_salary").val(net_salary).html("₹ "+net_salary);
        $(".fixed_allowance").val(fixed_allowance);
        $(".fixed_allowance_yearly").val(Number(fixed_allowance)*12);
    }

    $(".add_payhead_btn").click(function() {
        var ctc = $(".annual_ctc").val();
        var head = $(this).attr("head_data");
        var allData = JSON.parse(head);
        var basic_pay = $(".basic").val() || 0;
        var fixed_allowance = $(".fixed_allowance").val() || 0;
        var net_salary = $(".net_salary").val() || 0;
        var gross_salary = $("#gross_salary").val() || 0;
        var epf_amount = 0;
        

        // Check for duplicate entry
        if ($("input[name='payhead_id[]'][value='" + allData.id + "']").length > 0) {
            alert(allData.name + " is already added!");
            return;
        }
        

        if (allData.rate_type == "flat") 
        {    
            fixed_allowance = (parseFloat(fixed_allowance) - parseFloat(allData.rate)).toFixed(0);
            $(".fixed_allowance").val(fixed_allowance); 
            $(".fixed_allowance_yearly").val(fixed_allowance*12);
            let yearly_amt = Number(allData.rate)*12;

            var head_type = `
                <tr class="added_head border-bottom">
                    <td>
                        <label class=" text-capitalize">${allData.name}</label>
                    </td>
                    <td>
                        <input type="hidden" name="payhead_id[]" value="${allData.id}">
                        <input type="hidden" name="rate[]" get_slug="${allData.slug}" value="${allData.rate}" class="form-control">
                        <input type="hidden" class="form-control" value="${allData.rate_type}" slug_type="${allData.type}" name="rate_type[]">
                        <input type="number" class="form-control" placeholder="Fixed Amount" disabled>
                    </td>
                    <td>
                        <input type="number" name="amount[]" value="${allData.rate}" class="form-control ${allData.slug}" placeholder="Amount">
                    </td> 
                    <td>
                        <input type="number" name="amount[]" class="form-control ${allData.slug}_yearly" value="${yearly_amt}" placeholder="Amount">
                    </td>  
                    <td>
                        <button type="button" class="btn btn-danger head_delete_btn"><i class="ti ti-trash"></i></button>
                    </td>                           
                </tr>
            `;
        } 
        else 
        {
            if (allData.name == "epf") 
            {
                if($(".employee_epf_amount").length > 0)
                {
                    alert("EPF is already added!");
                    return false;
                }
                console.log("epf Data : "+allData.contribution_rate);
                var rate = Number(allData.epf_rate);
                
                if (Number(allData.contribution_rate) != 15000) {
                    epf_amount = parseFloat((basic_pay * rate) / 100).toFixed(0);
                } else {
                    epf_amount = net_salary < 15000 ? parseFloat((gross_salary * rate) / 100).toFixed(0) : parseFloat((15000 * rate) / 100).toFixed(0);
                }

                

                head_type = `
                    <tr class="added_head border-bottom">                                
                        <td>
                            <label class=" text-capitalize">
                                Employee EPF
                            </label>
                        </td>
                        <td class="d-flex">
                            <input type="hidden" name="epf_id" value="${allData.id}">   
                            <input type="hidden" class="form-control" value="deduction" name="rate_type[]">                         
                            <input type="number" class="form-control" readonly value="${allData.epf_rate}" name="epf_rate[]" placeholder="% of ${allData.slug === 'basic' ? 'CTC' : 'Basic'}">
                            <input type="text" class="form-control" value="% of ${allData.slug=='basic' ? 'CTC' : 'Basic'}" disabled>
                        </td>
                        <td>
                            <input type="number" readonly class="form-control employee_epf_amount" name="employee_epf_amount" placeholder="Amount">
                        </td>
                        <td>
                            <input type="number" class="form-control employee_epf_amount_yearly" placeholder="Yearly Amount">
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger head_delete_btn"><i class="ti ti-trash"></i></button>
                        </td> 
                    </tr>
                `;
            } 
            else 
            {
                var pay = 0;
                
                if (allData.type === "earning" && allData.rate_type === "percentage") {
                    var pay_rate = allData.rate;
                    pay = Number((basic_pay * pay_rate) / 100).toFixed(0);
                    
                    
                    fixed_allowance = (parseFloat(fixed_allowance) - parseFloat(pay)).toFixed(0);
                    $(".fixed_allowance").val(fixed_allowance); 
                    $(".fixed_allowance_yearly").val(Number(fixed_allowance)*12);

                    var yearly_amount =  parseFloat(pay*12).toFixed(0);
                } 

                if (allData.type === "deduction" && allData.rate_type === "percentage") {
                    var pay_rate = allData.rate;
                    pay = Number((basic_pay * pay_rate) / 100).toFixed(0);
                    
                    fixed_allowance = (parseFloat(fixed_allowance) - parseFloat(pay)).toFixed(0);
                    $(".fixed_allowance").val(fixed_allowance); 
                    $(".fixed_allowance_yearly").val(Number(fixed_allowance)*12);

                    var yearly_amount =  parseFloat(pay*12).toFixed(0);
                } 
                
                head_type = `
                    <tr class="added_head border-bottom">                                
                        <td>
                            <label class="text-capitalize">
                                ${allData.name}
                            </label>
                        </td>
                        <td class="d-flex">
                            <input type="hidden" name="payhead_id[]" value="${allData.id}">                            
                            <input type="hidden" class="form-control" value="${allData.rate_type}" slug_type="${allData.type}" name="rate_type[]">
                            <input type="number" class="form-control rate_type_input" value="${allData.rate}" get_slug="${allData.slug}" name="rate[]" placeholder="% of ${allData.slug === 'basic' ? 'CTC' : 'Basic'}">
                            <input type="text" class="form-control" value="% of ${allData.slug=='basic' ? 'CTC' : 'Basic'}" disabled>
                        </td>
                        <td>
                            <input type="number" class="form-control ${allData.slug}" name="amount[]" placeholder="Amount" value="${pay}">
                        </td>
                        <td>
                            <input type="number" class="form-control ${allData.slug}_yearly" placeholder="Amount" value="${yearly_amount}">
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger head_delete_btn"><i class="ti ti-trash"></i></button>
                        </td> 
                    </tr>
                `;
            }
        }

        $(".add_head_box").append(head_type);
        if (epf_amount) {

            console.log("epf amount: "+epf_amount);

            $(".employee_epf_amount").val(Number(epf_amount));
            $(".employee_epf_amount_yearly").val(Number(epf_amount*12));

            fixed_allowance = (parseFloat(fixed_allowance) - parseFloat(epf_amount)).toFixed(0);
                $(".fixed_allowance").val(fixed_allowance); 
                $(".fixed_allowance_yearly").val(Number(fixed_allowance)*12);
                
                net_salary = parseFloat(gross_salary - Number(epf_amount)).toFixed(0);
            
                $("#net_salary").html("₹ "+ net_salary);
                $(".net_salary").val(net_salary);
        }
        
        salary_calculation(ctc);

        $(".annual_ctc").on("change", function() {                
            var ctc = $(this).val();
            if (ctc) {
                salary_calculation(ctc);
            }
        });
    });

    $(document).on("input", ".rate_type_input", function() {
        var new_percentage = Number($(this).val());
        var slug = $(this).attr("get_slug");
        var ctc = Number($(".annual_ctc").val()) || 0;
        
        if (ctc) {
            rate_input_calculation(new_percentage, slug);
        }
    });  

    $(".add_head_box").on("click", ".head_delete_btn", function() {
        $(this).closest(".added_head").remove();
        var ctc = $(".annual_ctc").val();
        if (ctc) {
            salary_calculation(ctc);
        }
    });
});

    </script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\blurb_erp\resources\views/hrms/salary_template/add.blade.php ENDPATH**/ ?>