
<?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')); ?> Employee</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/employee')); ?>">Employee</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; ?>
                    <?php if($errors->any()): ?>
                        <div class="alert alert-danger">
                            <ul>
                                <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <li><?php echo e($error); ?></li>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </ul>
                        </div>
                    <?php endif; ?>
                    
                    <div class="card">
                    
                        <div class="card-body py-0">
                        
                            <div class="bg-white ">                         
                                <form action="<?php echo e(asset('hrms/store-employee')); ?>"  method="post" enctype="multipart/form-data">
                                    <?php echo csrf_field(); ?>
                                    <div class="row pb-5">                                    
                                        <div class="col-md-12">
                                            <!-- Tabs -->
                                            <div id="tabs">
                                                <div class="tab active" onclick="openTab('employee_tab')">Employee</div>
                                                <div class="tab" onclick="openTab('tab1')">Address</div>
                                                <div class="tab" onclick="openTab('tab2')">Reference</div>
                                                <div class="tab" onclick="openTab('tab3')">Other Info</div>
                                                <div class="tab" onclick="openTab('tab4')">Salary</div>
                                            </div>

                                            <!-- Tab content -->
                                            <div class="tab-content active" id="employee_tab">
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-md-6">           
                                                            <div class="form-group d-flex align-items-center">
                                                                <label for="name">Employee ID:</label>
                                                                <input type="text" class="form-control" name="employee_id" value="<?php echo e($employee_id); ?>" readonly>
                                                                
                                                            </div>

                                                            <div class="form-group d-flex align-items-center">
                                                                <label for="name">Name</label>
                                                                <input type="text" class="form-control" id="name" name="name">
                                                                
                                                            </div>
                                                            
                                                            <div class="form-group d-flex align-items-center">
                                                                <label for="visitor_mobile">Mobile</label>
                                                                <input type="text" class="form-control" name="mobile" id="mobile" >
                                                                
                                                            </div>
                                
                                                            <div class="form-group d-flex align-items-center">
                                                                <label for="visitor_email">Email</label>
                                                                <input type="email" name="email" class="form-control" id="email">
                                                                
                                                            </div>
                                                            <div class="form-group d-flex align-items-center">
                                                                <label for="password">Password</label>
                                                                <input type="password" name="password" class="form-control" id="password">
                                                                
                                                            </div>
                                                            <div class="form-group d-flex align-items-center">
                                                                <label for="gender">Gender</label>
                                                                <select name="gender" class="form-control">
                                                                    <option value="male">Male</option>
                                                                    <option value="female">Female</option>
                                                                    <option value="other">other</option>
                                                                </select>
                                                                
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group d-flex align-items-center">
                                                                <label for="designation">Date Of Birth</label>
                                                                <input type="date" name="dob" class="form-control">
                                                                
                                                            </div>
                                                            <div class="form-group d-flex align-items-center">
                                                                <label for="designation">Date Of Joining</label>
                                                                <input type="date" name="doj" class="form-control" >
                                                                
                                                            </div>
                                                            <div class="form-group d-flex align-items-center">
                                                                <label for="brach">Branch</label>
                                                                <select name="branch_id" class="form-control select2">
                                                                    <option selected disabled>SELECT</option>
                                                                    <?php $__currentLoopData = $schools; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $sc): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                                        <option value="<?php echo e($sc->id); ?>"><?php echo e($sc->school); ?></option>
                                                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                                </select>
                                                                
                                                            </div>
                                                            <div class="form-group d-flex align-items-center">
                                                                <label for="department">Department</label>
                                                                <select class="form-control select2" name="department">
                                                                    <?php $__currentLoopData = $departments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $dpt): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                                        <option value="<?php echo e($dpt->id); ?>"><?php echo e($dpt->name); ?></option>
                                                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                                </select>
                                                                
                                                            </div>
                                                            <div class="form-group d-flex align-items-center">
                                                                <label for="shift_id">Shift</label>
                                                                <select class="form-control select2" name="shift_id">
                                                                    <?php $__currentLoopData = $shifts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $shift): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                                        <option value="<?php echo e($shift->id); ?>"><?php echo e($shift->name); ?></option>
                                                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                                </select>
                                                                
                                                            </div>
                                                            <div class="form-group d-flex align-items-center">
                                                                <label for="designation">Designation</label>
                                                                <input type="text" name="designation" class="form-control" >
                                                                
                                                            </div>
                                                        </div>
                                                    </div>
                                                  
                                                   
                                                                                                    
                                                </div>
                                            </div>
                                            <div class="tab-content" id="tab1">
                                                <h5>Address</h5>
                                                <div class="card-body">
                                                        <div class="form-group d-flex align-items-center">
                                                            <label for="address">Address</label>
                                                            <textarea class="form-control" name="address" ></textarea>

                                                        </div>
                                                        <div class="form-group d-flex align-items-center">
                                                            <label for="city">City</label>
                                                            <input type="text" class="form-control" name="city" >

                                                        </div>
                                                        <div class="form-group d-flex align-items-center">
                                                            <label for="district">District</label>
                                                            <input type="text" class="form-control" name="district" >

                                                        </div>
                                                        <div class="form-group d-flex align-items-center">
                                                            <label for="pincode">Pincode</label>
                                                            <input type="number" class="form-control" name="pincode" >

                                                        </div>
                                                        <div class="form-group d-flex align-items-center">
                                                            <label for="state">State</label>
                                                            
                                                            <select  class="form-control select2" name="state" id="state">
                                                                <?php $__currentLoopData = $states; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $st): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                                    <option value="<?php echo e($st->state_name); ?>"><?php echo e($st->state_name); ?></option>
                                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                            </select>

                                                        </div>  
                                                        <div class="form-group d-flex align-items-center">
                                                            <label for="country">Country</label>
                                                            <select class="form-control select2" name="country" id="location_country">
                                                                <option value="India">India</option>
                                                            
                                                            </select>

                                                        </div>
                                                                                                    
                                                        
                                                        
                                                </div>
                                            </div>
                                            <div class="tab-content" id="tab2">

                                                <div class="form-group d-flex align-items-center">
                                                    <label for="">Name</label>
                                                    <input type="text" class="form-control" name="refree_name[]" >
                                                </div>
                                            
                                                <div class="form-group d-flex align-items-center">
                                                    <label for="refree_email">Email</label>
                                                    <input type="email" class="form-control" name="refree_email[]" >
                                                </div>
                                                <div class="form-group d-flex align-items-center">
                                                    <label for="refree_phone">Phone</label>
                                                    <input type="number" class="form-control" name="refree_phone[]" >
                                                </div>
                                                <div class="form-group d-flex align-items-center">
                                                    <label for="refree_relation">Relation</label>
                                                    <input type="text" class="form-control" name="refree_relation[]" >
                                                </div>
                                                
                                            
                                                <div class="refree_box mb-3">

                                                </div>
                                            
                                                <div class="d-flex justify-content-end">
                                                    <button type="button" data-tooltip="tooltip" title="Add Reference" class="btn btn-sm btn-primary add_refree_btn"><i class="fa fa-plus"></i></button>
                                                </div>
                                                
                                                
                                            </div>
                                            <div class="tab-content" id="tab3">
                                                <h4>Bank Details</h4>
                                                <hr>
                                                <div class="form-group d-flex justify-content-between align-items-center">
                                                    <label>A/C NUMBER</label>
                                                    <input type="number" name="bank_account" class="form-control">
                                                </div>
                                            
                                                <div class="form-group d-flex justify-content-between align-items-center">
                                                    <label>BRANCH</label>
                                                    <input type="text" name="bank_name" class="form-control">
                                                </div>
                                                <div class="form-group d-flex justify-content-between align-items-center">
                                                    <label>IFSC</label>
                                                    <input type="text" name="bank_ifsc" class="form-control">
                                                </div>
                                                <h4>Personal Info</h4>
                                                <hr>
                                                <div class="form-group row">
                                                    <label class="col-3 pt-2">PAN</label>
                                                    <input type="text" name="pan_number"  class="form-control col-6" id="pan_number">
                                                    <div class="position-relative bg-primary shadow-lg rounded col-2">
                                                        
                                                        <p class="position-absolute w-100 py-2 " style="top:4px;">UPLOAD </p>
                                                        <input type="file"  accept="images/*" name="pan_image" class="form-control col-6" id="pan_image" style="z-index:5;opacity:0;">
                                                        
                                                        
                                                    </div>
                                                    <div class="col-1 p-1">
                                                        <div class="" data-toggle="tooltip"
                                                        data-original-title="Click To View">
                                                            <div class="pan_box d-none mb-3">
                                                                <img src="" alt="pan_box" class="img_pan" width="40" height="18" />
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                                                                        

                                                <div class="form-group row ">
                                                    <label class="col-3 py-2">ADHAR </label>
                                                    <input type="number" name="adhar_number"  class="form-control col-6" id="adhar_number">
                                                    <div class="position-relative bg-primary shadow-lg rounded col-2">
                                                        
                                                        <p class="position-absolute w-100 py-2 " style="top:4px;">UPLOAD </p>
                                                        <input type="file"  accept="images/*" name="adhar_image" class="form-control w-100" style="z-index:5;opacity:0;" id="adhar_image">
                                                        
                                                    </div>
                                                    <div class="col-1 p-1">
                                                        <div class="" data-toggle="tooltip"
                                                        data-original-title="Click To View">
                                                            <div class="adhar_box d-none mb-3">
                                                                <img src="" alt="adhar_box" class="img_adhar" width="40" height="18" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                            
                                                <h4>Education Details</h4>
                                                <hr>
                                            
                                                <div class="form-group d-flex justify-content-between align-items-center row">
                                                    <label class="col-9 pt-2">10TH MARKSHEET</label>
                                                    
                                                    
                                                    <div class="position-relative bg-primary shadow-lg rounded col-2">
                                                        
                                                        <p class="position-absolute w-100 py-2 " style="top:4px;">UPLOAD </p>
                                                        <input type="file"  accept="images/*" name="ten_marksheet" class="form-control col-md-6" id="10th_marksheet" style="z-index:5;opacity:0;">
                                                        
                                                        
                                                    </div>
                                                    <div class="col-1 p-1">
                                                        <div class="" data-toggle="tooltip"
                                                        data-original-title="Click To View">
                                                            <div class="10th_box d-none mb-3">
                                                                <img src="" alt="10th_box" class="img_10th_box" width="40" height="18" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                

                                                <div class="form-group d-flex justify-content-between align-items-center row">
                                                    <label class="col-9 pt-2">12TH MARKSHEET</label>
                                                    
                                                    <div class="position-relative bg-primary shadow-lg rounded col-2">
                                                        
                                                        <p class="position-absolute w-100 py-2 " style="top:4px;">UPLOAD </p>
                                                        <input type="file"  accept="images/*" name="twelve_marksheet" class="form-control" id="12th_marksheet" style="z-index:5;opacity:0;">
                                                        
                                                        
                                                    </div>
                                                    <div class="col-1 p-1">
                                                        <div class="" data-toggle="tooltip"
                                                        data-original-title="Click To View">
                                                            <div class="12th_box d-none mb-3">
                                                                <img src="" alt="12th_box" class="img_12th_box" width="40" height="18" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="form-group row d-flex justify-content-between align-items-center">
                                                    <label class="col-9 pt-2">GRADUATION MARKSHEET</label>
                                                    
                                                    <div class="position-relative bg-primary shadow-lg rounded col-2">
                                                        
                                                        <p class="position-absolute w-100 py-2 " style="top:4px;">UPLOAD </p>
                                                        <input type="file"  accept="images/*" name="graduation_marksheet" class="form-control" id="graduation_marksheet" style="z-index:5;opacity:0;">
                                                        
                                                        
                                                    </div>
                                                    <div class="col-1 p-1">
                                                        <div class="" data-toggle="tooltip"
                                                        data-original-title="Click To View">
                                                            <div class="graduation_box d-none mb-3">
                                                                <img src="" alt="graduation_box" class="img_graduation_box" width="40" height="18" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="document_box">
                                                    
                                                </div>
                                                <div class="d-flex justify-content-end">
                                                    <button type="button" data-tooltip="tooltip" title="Add Documents" class="btn btn-sm btn-primary add_document_btn"><i class="fa fa-plus"></i></button>
                                                </div>
                                            </div>
                                            <div class="tab-content" id="tab4">
                                                <div class="form-group row">
                                                    <label class="col-md-4">Salary Template</label>
                                                    <select class="form-control salary_template_change col-md-8" name="template_id">
                                                        <option disabled selected>SELECT</option>
                                                        <?php $__currentLoopData = $salary_templates; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tmp): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                            <option value="<?php echo e($tmp->id); ?>"><?php echo e($tmp->name); ?></option>
                                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                    </select>
                                                </div>
                                                <div class="salary_detail_box d-none">
                                                    <div class="form-group row">
                                                        <label class="col-md-4">CTC(Cost To Company)</label>
                                                        
                                                        <input type="number" name="ctc" class="form-control ctc_input col-md-8" >
                                                    </div>
                                                
                                            
                                                
                                                    <div class="salary_payhead_box w-100"></div>

                                                    <div class="form-group row px-2">
                                                        <h3 class="col-md-12">Tax Details<hr></h3>
                                                        <?php if(isset($esi)): ?>
                                                        <div class="col-md-4">
                                                            <label class="d-flex align-items-center esi_checkbox_label" >
                                                                <input type="checkbox" class="esi_checkbox"  esi_data="<?php echo e($esi); ?>"> &nbsp Employee ESI
                                                            </label>
                                                            <div class="border p-3 esi_box d-none">
                                                                
                                                                   
                                                                    <p>Employer Contribution : <?php echo e($esi->employer_contribution); ?></p>
                                                                    <p>Employee Contribution : <?php echo e($esi->employee_contribution); ?></p>
                                                                    <p>Salary Limit : <?php echo e($esi->salary_limit); ?></p>
                                                                    
                                                                    <label>ESI Deduction</label>
                                                                    <input type="text" class="form-control esi_deduction" name="esi_amount">
                                                               
                                                            </div>
                                                        </div>
                                                        <?php endif; ?>
                                                        <!-- <div class="col-md-4">
                                                            <label class="d-flex align-items-center">
                                                                <input type="checkbox" class="" name="tds_status"> &nbsp TDS
                                                            </label>
                                                        </div> -->
                                                        <?php if(isset($tds)): ?>
                                                            
                                                                <div class="col-md-8">
                                                                    <label class="d-flex align-items-center tds_checkbox_label">
                                                                        <input type="checkbox" class="tds_checkbox" name="tds_status"> &nbsp Professional Tax
                                                                    </label>
                                                                
                                                                    <div class="border p-3 tds_tax_box row d-none"> 
                                                                        <?php $__currentLoopData = $tds; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tax): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>                                                                            
                                                                            <div class="col-md-6">
                                                                                <div class="card">
                                                                                    <div class="card-header bg-success">
                                                                                        <?php echo e($tax->state_name); ?>

                                                                                    </div>
                                                                                    <div class="card-body">
                                                                                        <p>Maximum CTC : <?php echo e($tax->max_ctc); ?></p>
                                                                                        <p>Deduction Cycle : <?php echo e($tax->deduction_cycle); ?></p>
                                                                                        <p>Rate : <?php echo e($tax->rate); ?></p>                                                                                    
                                                                                        <label>TDS Deduction</label>
                                                                                        <input type="hidden" name="tax_id[]" value="<?php echo e($tax->id); ?>">
                                                                                        <input type="text" class="form-control tds_deduction" name="tds_amount[]">
                                                                                    </div>
                                                                                    <div class="card-footer">
                                                                                        <label class="switch">
                                                                                            <input type="checkbox" class="state_tax_active" tax_data="<?php echo e($tax); ?>">
                                                                                            <span class="slider round"></span>
                                                                                        </label> &nbsp <span>Active</span>
                                                                                    </div>
                                                                                </div> 
                                                                               
                                                                            </div>
                                                                        
                                                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                                    </div>
                                                                </div>
                                                        <?php endif; ?>
                                                    </div>
                                                    <table class="table table-bordered">
                                                        
                                                        <tbody>
                                                            <tr>
                                                                <td><label>Gross Salary</label></td>
                                                                <td>
                                                                    <input type="text" name="gross_salary" class="form-control gross_salary">
                                                                </td>
                                                                <td>
                                                                    <input type="number" class="form-control gross_salary_yearly" disabled>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td><label>Net Salary</label></td>
                                                                <td>
                                                                    <input type="text" name="net_salary" class="form-control net_salary">
                                                                </td>
                                                                <td>
                                                                    <input type="number" class="form-control net_salary_yearly" disabled>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>

                                                </div>
                                            </div>
                                            
                                            <div class="row bg-white py-4 w-100"  style="position:fixed;bottom:0;left:266px">
                                                <div class="col-12 py-2 px-4">
                                                    <button class="btn btn-success text-white mx-4" type="submit">
                                                    <i class="fa fa-check fa-lg"></i>&nbsp SAVE
                                                    </button>
                                                    <button class="btn btn-primary" type="button">CANCEL</button>
                                                </div>
                                            </div>
                                        
                                        </div>
                                    </div>
                                </form>                           
                            </div>
                            
                        </div>
                    </div>



                </div>

            </div>

                     
        </div>

        <!-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> -->

            <!-- Modal -->
            <div id="imgModal" class="modal fade" role="dialog">
                <div class="modal-dialog modal-lg">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">View Image</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            
                        </div>
                        <div class="modal-body">
                            <img src="" class="modal-image" alt="modalimg" width="100%">
                        </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>
    <script src="<?php echo e(asset('public/admin/js/salary.js')); ?>"></script>
    <!-- end::select2 -->
    <script>
       
        $(document).ready(function() {
            //ctc calculation

            $(".salary_template_change").on("change",function(){
                var salary_template_id = $(this).val();
                
                $.ajax({
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: "<?php echo e(asset('hrms/fetch-salary-template-details')); ?>",
                    data:{
                            "template_id":salary_template_id
                        },
                    dataType: "html",
                    success: function(result) 
                    {
                        //var earnings = 0;
                        //var deduction = 0;
                        var epf_amount = 0;  

                        var allData = JSON.parse(result);


                        if(allData.message=="success")
                        {
                            $(".salary_payhead_box").html('');
                            $(".salary_detail_box").removeClass("d-none");
                            var template = allData.data;
                            var epf = allData.epf;
                            console.log(allData);
                            var i = 0;
                            var table = document.createElement("table");
                            
            
                            table.className = 'table table-striped table-bordered w-100';
                            var thead = `<thead><tr class="text-center">
                                    <th>SALARY PAYHEAD</th>
                                    <th>MONTHLY AMOUNT</th>
                                    <th>YEARLY AMOUNT</th>
                            </tr></thead>`;

                            $(table).append(thead);

                            var tbody = document.createElement('tbody');
                            for(i=0;i<template.length;i++)
                            {
                                if(template[i].calculation_type == "percentage")
                                {
                                    var salary_head = `
                                        <tr class="added_head">
                                            <td><label class="text-capitalize">${template[i].payhead_name}</label>
                                                <input type="hidden" name="payhead_id[]" value="${template[i].payhead_id}"></td>
                                                <input type="hidden" name="calculation_type[]" value="${template[i].calculation_type}">
                                                <input type="hidden" name="rate_type[]" value="${template[i].type}">
                                            <td>
                                                <div class="row px-3">
                                                    <input type="number" class="form-control col-4 input_percentage" name="rate[]" value="${template[i].rate}" slug_data="${template[i].slug}" calculation_type="${template[i].calculation_type}">
                                                    <span class="col-3">% of ${template[i].calculate_on}</span>
                                                    <input type="text" name="amount[]" class="form-control col-5 ${template[i].slug}" >
                                                </div>
                                            </td>
                                            <td><input type="text" name="yearly_amount[]" class="form-control ${template[i].slug}_yearly" readonly></td>                                    
                                        </tr>
                                    `;
                                    $(tbody).append(salary_head);
                                }
                                else
                                {
                                    var salary_head = `
                                        <tr class="added_head">
                                            <td><label class="text-capitalize">${template[i].payhead_name}</label>
                                                <input type="hidden" name="payhead_id[]" value="${template[i].payhead_id}"></td>
                                                <input type="hidden" name="calculation_type[]" value="flat">
                                                <input type="hidden" name="rate_type[]" value="${template[i].type}">
                                            <td>
                                                <div class="row px-3">
                                                    <input type="number" class="form-control col-4 " name="rate[]" readonly placeholder="Fixed Amount" value="${template[i].rate}">
                                                    <span class="col-3">Fixed Amount</span>
                                                    <input type="text" name="amount[]" value="${template[i].rate}" readonly class="form-control col-5 ${template[i].slug} input_percentage" slug_data="${template[i].slug}" calculation_type="${template[i].calculation_type}">
                                                </div>
                                            </td>
                                            <td><input type="text" name="yearly_amount[]" class="form-control ${template[i].slug}_yearly" readonly></td>                                    
                                        </tr>
                                    `;
                                    $(tbody).append(salary_head);
                                }

                            }

                            if(epf)
                                {
                                    var salary_head = `
                                        <tr class="added_head">
                                            <td><label class="text-capitalize">Employee EPF</label>
                                                <input type="hidden" value="epf"></td>
                                                <input type="hidden" name="rate_type[]" value="deduction">
                                            <td>
                                                <div class="row px-3">
                                                    <input type="number" class="form-control col-4" readonly placeholder="${epf.epf_rate}" value="${epf.epf_rate}">
                                                    <span class="col-3">% Of Basic</span>
                                                    <input type="text" name="epf_amount" class="form-control col-5 employee_epf" >
                                                </div>
                                            </td>
                                            <td><input type="text" name="epf_amount_yearly" class="form-control employee_epf_yearly" readonly></td>                                    
                                        </tr>
                                    `;
                                    $(tbody).append(salary_head);
                                }
                                
                            $(table).append(tbody);
                            $(".salary_payhead_box").append(table);

                            //ctc input

                            
                            $(".ctc_input").on('change',function(){
                                var ctc = $(this).val(); 
                                calculate_all_heads(ctc);                              

                            });

                            function calculate_all_heads(ctc)
                            {                                      
                                //console.log("basic pay : "+basic_pay);
                                earnings = 0;
                                deduction = 0;
                                epf_amount = 0;  
                                var basic_pay = 0;
                                    
                                var gross_salary = parseFloat(ctc/12).toFixed(2);

                                for (let i = 0; i < template.length; i++) 
                                {                                  
                                    
                                    if (template[i].slug === "basic_pay" || template[i].slug === "basic") 
                                    {
                                        if(basic_pay!=0)
                                        {
                                            earnings += Number(basic_pay);
                                        }
                                        else
                                        {
                                            basic_pay_rate = template[i].rate;
                                            basic_pay = parseFloat((gross_salary * basic_pay_rate) / 100).toFixed(2);
                                            
                                            $("." + template[i].slug).val(basic_pay);
                                            $("." + template[i].slug+"_yearly").val((basic_pay*12).toFixed(2));

                                            
                                            if (template[i].type == "earning") {
                                                earnings += Number(basic_pay);
                                            }
                                        }
                                        
                                    } 
                                                                    
                                    
                                }

                                // Calculate Other Components
                                for (let i = 0; i < template.length; i++) 
                                {
                                    if (basic_pay !== 0 && (template[i].slug !== "basic_pay" && template[i].slug !== "basic")) 
                                    {                                         
                                        if (template[i].type === "earning" && template[i].calculation_type === "percentage") 
                                        {
                                            
                                            var rate = template[i].rate;
                                            var pay = Number((basic_pay * rate) / 100).toFixed(2);
                                            //console.log("slug :"+pay);
                                            $("." + template[i].slug).val(Number(pay));
                                            $("." + template[i].slug+"_yearly").val(pay*12);
                                            
                                            earnings += Number(pay);
                                                
                                        } else if (template[i].type === "earning" && template[i].calculation_type === "flat") 
                                        {
                                            var rate = template[i].rate;
                                            
                                            $("." + template[i].slug).val(rate);
                                            $("." + template[i].slug+"_yearly").val(rate*12);
                                            
                                            earnings += Number(rate);
                                        }
                                        if (template[i].type === "deduction" && template[i].calculation_type === "percentage") 
                                        {
                                            var rate = template[i].rate;
                                            var pay = Number((basic_pay * rate) / 100).toFixed(2);
                                            $("." + template[i].slug).val(pay);
                                            $("." + template[i].slug+"_yearly").val(pay*12);
                                            
                                            deduction += Number(pay);
                                        } else if (template[i].type === "deduction" && template[i].calculation_type === "flat") 
                                        {
                                            var rate = template[i].rate;
                                            
                                            $("." + template[i].slug).val(rate);
                                            $("." + template[i].slug+"_yearly").val(rate*12);
                                            
                                            deduction += Number(rate);
                                        }
                                        if (template[i].type === "reimbursements" && template[i].calculation_type === "percentage") 
                                        {
                                            var rate = template[i].rate;
                                            var pay = Number((basic_pay * rate) / 100).toFixed(2);
                                            $("." + template[i].slug).val(pay);
                                            $("." + template[i].slug+"_yearly").val(pay*12);
                                            
                                            earnings += Number(pay);
                                        } else if (template[i].type === "reimbursements" && template[i].calculation_type === "flat") 
                                        {
                                            var rate = template[i].rate;
                                            
                                            $("." + template[i].slug).val(rate);
                                            $("." + template[i].slug+"_yearly").val(rate*12);
                                            
                                            earnings += Number(rate);
                                        }
                                        if (template[i].type === "benefit" && template[i].calculation_type === "percentage") 
                                        {
                                            var rate = template[i].rate;
                                            var pay = Number((basic_pay * rate) / 100).toFixed(2);
                                            $("." + template[i].slug).val(pay);
                                            $("." + template[i].slug+"_yearly").val(pay*12);
                                            
                                            deduction += Number(pay);
                                        } else if (template[i].type === "benefit" && template[i].calculation_type === "flat") 
                                        {
                                            var rate = template[i].rate;                                                
                                            $("." + template[i].slug).val(rate);
                                            $("." + template[i].slug+"_yearly").val(rate*12);
                                            
                                            deduction += Number(pay);
                                        }
                                    }  
                                }                                                                
                
                
                    
                                //net salary rule all earnings minus deductions

                                if(epf)
                                {
                                        if(epf.contribution_rate != 15000)
                                        {
                                            epf_amount = parseFloat((basic_pay*epf.epf_rate)/100).toFixed(2);

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

                                        $(".employee_epf").val(epf_amount);
                                        $(".employee_epf_yearly").val(epf_amount*12);
                                } 

                                if($(".esi_deduction").length)
                                {                                    
                                    let esi_deduction = $(".esi_deduction").val();
                                    deduction += Number(esi_deduction);
                                }                            

                                // Calculate Net Salary
                                var net_salary = parseFloat(gross_salary - deduction).toFixed(2);
                                   
                                var fixed_allowance = parseFloat(net_salary - earnings).toFixed(2);                          
                            
                                                                
                                $(".gross_salary").val(gross_salary);
                                $(".net_salary").val(net_salary);
                                $(".fixed_allowance").val(fixed_allowance);
                                
                                $(".gross_salary_yearly").val(gross_salary*12);
                                $(".net_salary_yearly").val(net_salary*12);
                                $(".fixed_allowance_yearly").val(fixed_allowance*12);
                   
                            }

                             // Improved rate input calculation
                            // function rate_input_calculation(new_percentage, slug) 
                            // {
                            //     var ctc = parseFloat($(".ctc_input").val()) || 0;
                            //     var gross_salary = parseFloat(ctc/12).toFixed(0);
                            //     var basic_pay = 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);
                                    
                            //     } 
                                


                            //     // Calculate Other Components
                            //     for (let i = 0; i < template.length; i++) 
                            //     {
                            //         var currentSlug = template[i].slug;
                                    
                            //         // Get the rate - use new_percentage if this is the component being changed
                            //         var rate = (currentSlug === slug) ? new_percentage : template[i].rate;
                                    
                            //         if (basic_pay !== 0 && (template[i].slug !== "basic_pay" && template[i].slug !== "basic")) 
                            //         {                                         
                            //             if (template[i].type === "earning" && template[i].calculation_type === "percentage") 
                            //             {
                                            
        
                            //                 var pay = Number((basic_pay * rate) / 100).toFixed(2);  
                            //                 $("." + slug).val(pay);
                            //                 $("." + slug+"_yearly").val(pay*12);                                          
                            //                 earnings += Number(pay);
                                                
                            //             } 
                            //             if (template[i].type === "earning" && template[i].calculation_type === "flat") 
                            //             {
                                                                                                                                    
                            //                 earnings += Number(rate);
                            //             }
                            //             if (template[i].type === "deduction" && template[i].calculation_type === "percentage") 
                            //             {
                                            
                            //                 var pay = Number((basic_pay * rate) / 100).toFixed(2);
                            //                 $("." + slug).val(pay);
                            //                 $("." + slug+"_yearly").val(pay*12);
                                                                                        
                            //                 deduction += Number(pay);
                            //             } 
                            //             if (template[i].type === "deduction" && template[i].calculation_type === "flat") 
                            //             {
                                                                                                                               
                            //                 deduction += Number(rate);
                            //             }
                            //             if (template[i].type === "reimbursements" && template[i].calculation_type === "percentage") 
                            //             {
                                        
                            //                 var pay = Number((basic_pay * rate) / 100).toFixed(2);
                            //                 $("." + slug).val(pay);
                            //                 $("." + slug+"_yearly").val(pay*12);
                                                                                        
                            //                 earnings += Number(pay);
                            //             } 
                            //             if (template[i].type === "reimbursements" && template[i].calculation_type === "flat") 
                            //             {
                                                                                                                                    
                            //                 earnings += Number(rate);
                            //             }
                            //             if (template[i].type === "benefit" && template[i].calculation_type === "percentage") 
                            //             {                                            
                            //                 var pay = Number((basic_pay * rate) / 100).toFixed(2);  
                            //                 $("." + slug).val(pay);
                            //                 $("." + slug+"_yearly").val(pay*12);                                                                                      
                            //                 deduction += Number(pay);
                            //             }
                            //             if (template[i].type === "benefit" && template[i].calculation_type === "flat") 
                            //             {                                                                                                            
                            //                 deduction += Number(rate);
                            //             }
                            //         }  
                            //     } 

                            //     if($(".employee_epf").length)
                            //     {
                            //         if(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").val(Number(epf_amount));
                            //                 $(".employee_epf_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);
                            //     console.log("fixed Allowance : "+ fixed_allowance);
                            //     console.log("net salary : "+ net_salary);
                            //     console.log("deduction : "+ deduction);
                            //     console.log("earnings : "+ earnings);
                            //     // Update UI
                                
                            //     $(".net_salary").val(net_salary);
                            //     $(".fixed_allowance").val(fixed_allowance);
                            //     $(".net_salary_yearly").val(net_salary*12);
                            //     $(".fixed_allowance_yearly").val(fixed_allowance*12);
                            // }

                            function rate_input_calculation(new_percentage, slug) 
                            {
                                var ctc = parseFloat($(".ctc_input").val()) || 0;
                                var gross_salary = parseFloat(ctc/12).toFixed(2);
                                var basic_pay = parseFloat($(".basic, .basic_pay").val()) || 0;
                                var earnings = 0;
                                var deduction = 0;
                                var epf_amount = 0;

                                // CASE 1: Changing Basic Pay (affects all percentage components)
                                if (slug === "basic_pay" || slug === "basic") 
                                {
                                    basic_pay = parseFloat((gross_salary * new_percentage) / 100).toFixed(2);
                                    $("." + slug).val(basic_pay);
                                    $("." + slug+"_yearly").val((basic_pay * 12).toFixed(2));
                                    
                                    // Recalculate ALL percentage-based components
                                    for (let i = 0; i < template.length; i++) 
                                    {
                                        if (template[i].calculation_type === "percentage" && 
                                            template[i].slug !== "basic_pay" && 
                                            template[i].slug !== "basic") {
                                            
                                            var pay = Number((basic_pay * template[i].rate) / 100).toFixed(2);
                                            $("." + template[i].slug).val(pay);
                                            $("." + template[i].slug+"_yearly").val((pay * 12).toFixed(2));
                                        }
                                    }
                                }
                                // CASE 2: Changing other component (like DA)
                                else {
                                    // Only update the specific component being changed
                                    var pay = Number((basic_pay * new_percentage) / 100).toFixed(2);
                                    $("." + slug).val(pay);
                                    $("." + slug+"_yearly").val((pay * 12).toFixed(2));
                                }

                                // Calculate totals for all components
                                for (let i = 0; i < template.length; i++) {
                                    var currentSlug = template[i].slug;
                                    var currentType = template[i].type;
                                    var pay = 0;

                                    if (currentSlug === "fixed_allowance") continue; // Skip fixed allowance in totals
                                    
                                    if (template[i].calculation_type === "percentage" && template[i].slug !== "basic") 
                                    {
                                        // Get current value from input field
                                        pay = parseFloat($("." + currentSlug).val()) || 0;
                                    } 
                                    else if (template[i].calculation_type === "flat" && template[i].slug !== "basic") {
                                        pay = parseFloat($("." + currentSlug).val()) || 0;
                                    }

                                    // Update totals
                                    if (currentType === "earning" && template[i].slug !== "basic") {
                                        earnings += Number(pay);
                                    } else if (currentType === "deduction" && template[i].slug !== "basic") 
                                    {
                                        deduction += Number(pay);
                                    }
                                }

                                // EPF Calculation
                                if($(".employee_epf").length && epf) {
                                    epf_amount = parseFloat((basic_pay * epf.epf_rate) / 100).toFixed(2);
                                    deduction += Number(epf_amount);
                                    $(".employee_epf").val(epf_amount);
                                    $(".employee_epf_yearly").val((epf_amount * 12).toFixed(2));
                                }

                                if($(".esi_deduction").length)
                                {                                   
                                    let esi_deduction = $(".esi_deduction").val();
                                    deduction += Number(esi_deduction);
                                }

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

                                // Calculate final values
                                var net_salary = parseFloat(gross_salary - deduction).toFixed(2);
                                var fixed_allowance = parseFloat(net_salary - earnings).toFixed(2);
                                
                                // Update fixed allowance fields
                                $(".fixed_allowance").val(fixed_allowance);
                                $(".fixed_allowance_yearly").val((fixed_allowance * 12).toFixed(2));

                                // Update UI
                                $(".gross_salary").val(gross_salary);
                                $(".net_salary").val(net_salary);
                                $(".gross_salary_yearly").val((gross_salary * 12).toFixed(2));
                                $(".net_salary_yearly").val((net_salary * 12).toFixed(2));
                            }
                               
                                
                            $(".input_percentage").on("input", function () {
                                var new_rate = $(this).val();
                                var slug = $(this).attr("slug_data");
                                var calculation_type = $(this).attr("calculation_type");
                                var ctc = $(".ctc_input").val();
                                

                                if (slug === "basic_pay" || slug === "basic") 
                                {
                                    var gross_salary = parseFloat(ctc / 12).toFixed(2);
                                    let basic_pay = parseFloat((gross_salary * new_rate) / 100).toFixed(2);
                                    $("." +slug).val(basic_pay);
                                    $("." +slug + "_yearly").val((basic_pay * 12).toFixed(2));
                                    
                                    rate_input_calculation(new_rate, slug);
                                }
                                else
                                {
                                    if(slug !== "basic" && calculation_type == "percentage")
                                    {
                                        
                                        let basic = $(".basic").val();
                                        
                                        var pay = parseFloat((basic * new_rate) / 100).toFixed(2);
                                        rate_input_calculation(new_rate, slug);
                                        
                                        // $("."+slug).val(Number(pay));
                                        // $("." + slug+"_yearly").val(Number(pay)*12);
                                        
                                       // rate_input_calculation(ctc,basic,new_rate);
                                    }
                                    // else
                                    // {
                                    //     var pay = Number(new_rate).toFixed(2);
                                    //     $("." + slug).val(pay);
                                    //     $("." + slug+"_yearly").val(pay*12);
                                        
                                    //     calculate_all_heads(ctc);
                                    // }
                                    
                                }
                            });
                                
                            //esi deduction code
                            $(".esi_checkbox").click(function(){
                                
                               
                                if ($(this).is(":checked")) 
                                {
                                    $(".esi_box").removeClass("d-none");
                                    var esi_data = $(this).attr("esi_data");
                                    var allData = JSON.parse(esi_data);
                                    var ctc = $(".ctc_input").val();
                                    
                                    var gross_salary = Number($(".gross_salary").val());
                                    var net_salary = Number($(".net_salary").val());
                                    var fixed_allowance = Number($(".fixed_allowance").val());

                                    //console.log(allData);

                                    if(gross_salary > allData.salary_limit)
                                    {
                                        var employee_contribute = parseFloat((gross_salary * allData.employee_contribution)/100).toFixed(2);
                                        var employer_contribute = parseFloat((gross_salary * allData.employer_contribution)/100).toFixed(2);


                                        var esi_deduction = Number(employee_contribute) + Number(employer_contribute);
                                        $(".esi_deduction").val(esi_deduction)
                                        
                                       
                                        // Calculate Net Salary
                                        net_salary = parseFloat(net_salary - esi_deduction).toFixed(2);
                                   
                                        fixed_allowance = parseFloat(fixed_allowance - esi_deduction).toFixed(2);

                                        
                                         
                                        $(".net_salary").val(net_salary);
                                        $(".fixed_allowance").val(fixed_allowance);
                                        
                                        $(".net_salary_yearly").val(net_salary*12);
                                        $(".fixed_allowance_yearly").val(fixed_allowance*12);
                                    }
                                } 
                                else 
                                {
                                    var gross_salary = Number($(".gross_salary").val());
                                    var net_salary = Number($(".net_salary").val());
                                    var fixed_allowance = Number($(".fixed_allowance").val());

                                  
                                    $(".esi_box").addClass("d-none");

                                    let esi_deduction = Number($(".esi_deduction").val()) || 0;
                                    
                                    // Calculate Net Salary                                   
                                    console.log("fixed allowance :"+fixed_allowance);
                                    net_salary = parseFloat(net_salary + esi_deduction).toFixed(2);
                                    fixed_allowance = parseFloat(fixed_allowance + esi_deduction).toFixed(2);
                                    console.log("ESI Deduction :"+esi_deduction);
                                    console.log("net salary :"+net_salary);
                                    console.log("fixed allowance :"+fixed_allowance);

                                   $(".net_salary").val(Number(net_salary));
                                   $(".fixed_allowance").val(Number(fixed_allowance));
                                   
                                   $(".net_salary_yearly").val(Number(net_salary*12));
                                   $(".fixed_allowance_yearly").val(Number(fixed_allowance*12));
                                }
                                
                            });   
                            
                            //tds tax deduction code                          
                            $(".tds_checkbox_label").click(function(){
                                
                                var checkbox = $(".tds_checkbox");
                                if (checkbox.is(":checked")) 
                                {
                                    $(".tds_tax_box").removeClass("d-none");

                                    $(".state_tax_active").on("change",function(){

                                        var isChecked = $(this).is(":checked"); 
                                        var taxData = $(this).attr("tax_data"); 
                                        var ctc = $(".ctc_input").val();
                                        var gross_salary = Number($(".gross_salary").val());
                                       
                                        if (isChecked) 
                                        {
                                            var alltds = JSON.parse(taxData);
                                           
                                            if(ctc > alltds.max_ctc)
                                            {
                                               
                                                var tds_deduction = parseFloat((gross_salary * alltds.rate)/100).toFixed(2);
                                                console.log("tds deduction : "+tds_deduction);
                                                var tds_monthly = parseFloat(tds_deduction/12).toFixed(2);
                                                $(".tds_deduction").val(tds_monthly)  
                                                deduction += Number(tds_monthly);                                                                                             
                                               

                                                // Calculate Net Salary
                                                var net_salary = parseFloat(gross_salary - deduction).toFixed(2);
                                        
                                                var fixed_allowance = parseFloat(net_salary - earnings).toFixed(2);

                                                
                                                
                                                $(".net_salary").val(net_salary);
                                                $(".fixed_allowance").val(fixed_allowance);
                                                
                                                $(".net_salary_yearly").val(net_salary*12);
                                                $(".fixed_allowance_yearly").val(fixed_allowance*12);
                                            }
                                            
                                        } 
                                        else 
                                        {
                                            var gross_salary = Number($(".gross_salary").val());

                                            let = tds_deduction = Number($(".tds_deduction").val());


                                            deduction -= (tds_deduction ? tds_deduction : 0);

                                            // Calculate Net Salary


                                            var net_salary = parseFloat(gross_salary - deduction).toFixed(2);

                                            var fixed_allowance = parseFloat(net_salary - earnings).toFixed(2);                          
                                            
                                            $(".net_salary").val(Number(net_salary));
                                            $(".fixed_allowance").val(Number(fixed_allowance));

                                            $(".net_salary_yearly").val(Number(net_salary*12));
                                            $(".fixed_allowance_yearly").val(Number(fixed_allowance*12));
                                           
                                        }
                                    });
                                    
                                    
                                } 
                                else 
                                {
                                   
                                    $(".tds_tax_box").addClass("d-none");
                                  
                                }
                                
                            });  


                        }
                    },
                    error:function(xhr,error,status)
                    {
                        console.log("error");
                    }
                });

            });      
            
            
            $('#js-example-basic-roles').select2({});

            $("#search-company").on('input',function(){
                    var search = $(this).val(); 
                    if(search=="")
                    {
                        $("#search-result-box").css({"display":"none"});
                    }               
                    var URL = "<?php echo e(asset('search-company')); ?>";
                    $.ajaxSetup({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            });

                    $.ajax({
                        type: "post",
                        url: URL,
                        data:{
                            "search":search
                        },
                        dataType: "html",
                        success: function(result) 
                        {
                            //console.log(result);
                            $("#search-result-box").css({"display":"block"});
                            var company = JSON.parse(result);
                            var data = company.company;
                            var i;
                            var fullUrl = "http://localhost/visitor_management/public";
                            
                            for(i=0;i<data.length;i++)
                            {
                                var url = fullUrl+data[i].company_pic;
                                var divBox = `
                                <div >
                                    <li class="d-flex align-items-center m-0 p-0 organization-list" orgname="${data[i].company_name}" orgid="${data[i].id}" style="cursor:pointer;">
                                        <img src="${url}" width="25" height="25" >
                                        &nbsp<p class="py-1 m-0">${data[i].company_name}</p>
                                    </li>
                                </div>
                            `;
                                $("#search-result-box").html(divBox);
                            }
                            $(".organization-list").click(function(){
                                
                                var id = $(this).attr("orgid");
                                var name = $(this).attr("orgname");
                                $("#id_company").val(id);
                                $("#search-company").val(name);
                                $("#search-result-box").css({"display":"none"});
                            });
                                

                            
                            
                            
                        }
                    });

            });

            $(".add_refree_btn").click(function(){
                var add_refree_box = `
                                    <div>
                                            <hr />
                                            <div class="form-group d-flex align-items-center">
                                                <label for="">Name</label>
                                                <input type="text" class="form-control" name="refree_name[]" >
                                            </div>
                                            <div class="form-group d-flex align-items-center">
                                                <label for="refree_email">Email</label>
                                                <input type="email" name="refree_email[]"  class="form-control">
                                            </div>
                                            <div class="form-group d-flex align-items-center">
                                                <label for="refree_phone">Phone</label>
                                                <input type="number" name="refree_phone[]"  class="form-control">
                                            </div>
                                            <div class="form-group d-flex align-items-center">
                                                <label for="refree_relation">Relation</label>
                                                <input type="text" class="form-control" name="refree_relation[]" >
                                            </div>
                                            
                                           <div class="form-group d-flex justify-content-end">
                                                <button type="button" data-tooltip="tooltip" title="Add Reference" class="btn btn-sm btn-danger delete_refree_btn"><i class="fa fa-trash"></i></button>
                                           </div>
                                   </div>         
                                        
                `;


                $(".refree_box").append(add_refree_box);

                // Handle deletion of dynamically added elements
                    $(".delete_refree_btn").click(function() {
                        $(this).parent().parent().remove();
                    });
            });

            var count = 1;
            //
            $('.add_document_btn').click(function(){
                   
                    var add_doc = `
                            <div class="row mb-3">
                                    <div class="col-md-7">
                                        <input type="text" name="certificate_name[]" class="form-control" placeholder="Certificate/Diploma Name">
                                       
                                    </div>
                                    
                                     <div class="position-relative bg-primary shadow-lg rounded col-3">
                                                    
                                        <p class="position-absolute w-100 py-2 " style="top:4px;">UPLOAD </p>
                                        <input type="file" accept="images/*" name="certificate_pic[]" class="form-control certificate_img_${count}" style="z-index:5;opacity:0;">
                                        
                                        
                                    </div>
                                     <div class="col-1 p-1">
                                        <div class="" data-toggle="tooltip" data-original-title="Click To View">
                                            <div class="certificate_pic_box_${count} d-none mb-3">
                                                <img src="" alt="certificate_pic" class="certificate_pic_${count}" width="40" height="18" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-1 py-1">
                                        <button type="button" class="btn btn-danger delete_doc_btn"><i class="fa fa-trash"></i></button>
                                    </div>
                                </div>
                            `;

                    $(".document_box").append(add_doc);

                    //show image code
                    $(`.certificate_img_${count}`).on("change", function (event) {
                        alert(`.certificate_img_${count}`);
                        var file = event.target.files[0];
                        var blobUrl = URL.createObjectURL(file);

                        $(`.certificate_pic_box_${count}`).removeClass('d-none');
                        $(`.certificate_pic_${count}`).attr('src', blobUrl);
                    });

                    count++;

                  

                $(".delete_doc_btn").click(function() {
                        $(this).parent().parent().remove();
                    });
                        
            });

            //model view code
            $(".img_10th_box").click(function(){
                var src = $(this).attr("src");
                $("#imgModal").modal("show");
                $(".modal-image").attr("src",src);
                //alert(src);
            });

            $(".img_12th_box").click(function(){
                var src = $(this).attr("src");
                $("#imgModal").modal("show");
                $(".modal-image").attr("src",src);
                //alert(src);
            });

            $(".img_graduation_box").click(function(){
                var src = $(this).attr("src");
                $("#imgModal").modal("show");
                $(".modal-image").attr("src",src);
            });

            $(".img_pan").click(function(){
                var src = $(this).attr("src");
                $("#imgModal").modal("show");
                $(".modal-image").attr("src",src);
            });

            $(".img_adhar").click(function(){
                var src = $(this).attr("src");
                $("#imgModal").modal("show");
                $(".modal-image").attr("src",src);
            });
            

            //show image code
            $("#10th_marksheet").on("change",function(event){
                var file = event.target.files[0];
                imageShow(file,"10th_box","img_10th_box");    
            });

            $("#12th_marksheet").on("change",function(event){
                var file = event.target.files[0];
                imageShow(file,"12th_box","img_12th_box");
                
            });

            $("#graduation_marksheet").on("change",function(event){
                var file = event.target.files[0];
                imageShow(file,"graduation_box","img_graduation_box");
                
            });

            $("#pan_image").on("change",function(event){
                var file = event.target.files[0];
                imageShow(file,"pan_box","img_pan");
                
            });
           
            $("#adhar_image").on("change",function(event){
                var file = event.target.files[0];
                imageShow(file,"adhar_box","img_adhar");
                
            });

            function imageShow(file,box,img)
            {
                var blobUrl = URL.createObjectURL(file);

                $('.'+box).removeClass('d-none');
                $('.'+img).attr('src', blobUrl);
            }

            
            
           
        });

        

        $("#location_country").on("change",function(){
            var company_id = $(this).val();
            stateFetch(company_id,"state");                
        });

        function stateFetch(company_id,appendState)
        {
            $.ajax({
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        "id": company_id
                    },
                    url: "<?php echo e(asset('fetch-state')); ?>",
                    dataType: "html",
                    success: function(result) 
                    {
                        $("#"+appendState).html("");
                        var allData = JSON.parse(result);
                        if(allData.message=="success")
                        {
                            var data = allData.data;
                            var i;
                            var dOption = "<option selected disabled>--SELECT--</option>";
                            $("#"+appendState).append(dOption);
                            for(i=0;i<data.length;i++)
                            {
                                var option = `<option value="${data[i].id}">
                                                ${data[i].state_name}
                                                </option>
                                `;
                                $("#"+appendState).append(option);
                            }
                        }
                        else
                        {
                            console.log("failed");
                        }
                    },
                    error:function(xhr,error,status)
                    {
                        console.log(JSON.parse(xhr.responseText));
                    }
                });
        }
        function openTab(tabId) {
            // Get all tabs and hide them
            var tabs = document.querySelectorAll('.tab-content');
            tabs.forEach(function(tab) {
            tab.classList.remove('active');
            });

            // Remove active class from all tabs
            var tabButtons = document.querySelectorAll('.tab');
            tabButtons.forEach(function(button) {
            button.classList.remove('active');
            });

            // Show the clicked tab and add active class
            document.getElementById(tabId).classList.add('active');
            document.querySelector('[onclick="openTab(\'' + tabId + '\')"]').classList.add('active');


        
        }

    
            
        
    </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/employee/add.blade.php ENDPATH**/ ?>