@push('page_modals')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .add-employee-buttons, .edit-employee-buttons {
            display: none;
        }
        .show-buttons {
            display: flex!important;
            align-items: center;
        }
        .salary-structure-table {
            font-size: 12px;
            border-collapse: collapse;
            width: 100%;
        }

        .salary-structure-table th {
            background-color: #007bff !important;
            color: white !important;
            font-weight: bold;
            text-align: center;
            padding: 8px 4px;
            border: 1px solid #dee2e6;
            vertical-align: middle;
            font-size: 11px;
        }

        .salary-structure-table td {
            padding: 6px 4px;
            border: 1px solid #dee2e6;
            text-align: center;
            vertical-align: middle;
            font-size: 11px;
        }

        .salary-structure-table .table-secondary th {
            background-color: #6c757d !important;
            color: white !important;
        }

        .salary-structure-table .bg-dark {
            background-color: #333333!important;
        }

        .salary-structure-table input[type="number"] {
            width: 70px;
            text-align: center;
            border: 1px solid #ced4da;
            padding: 2px 4px;
            font-size: 11px;
            background-color: white;
        }

        .form-control:disabled {
            background-color: #F3F3F2!important;
        }

        .salary-structure-table input[type="text"] {
            width: 70px;
            text-align: center;
            border: 1px solid #ced4da;
            padding: 2px 4px;
            font-size: 11px;
            background-color: white;
        }

        .salary-structure-table .month-total {
            background-color: #e3f2fd;
            font-weight: bold;
            color: #1976d2;
        }

        .salary-structure-table .component-total {
            background-color: #f8f9fa;
            font-weight: bold;
            color: #495057;
        }

        .salary-structure-table .fw-bold {
            font-weight: bold !important;
            background-color: #f8f9fa;
        }

        .table-responsive {
            max-height: auto;
            overflow-y: auto;
            border: 1px solid #dee2e6;
        }

        .modal-xl {
            max-width: 95%;
        }

        .frm-inp_div strong {
            color: #007bff;
            font-size: 16px;
        }

        /* Match the image styling exactly */
        .salary-structure-table tbody tr:nth-child(even) {
            background-color: #f8f9fa;
        }

        .salary-structure-table tbody tr:nth-child(odd) {
            background-color: white;
        }
        /* Button Group Visibility Control */
        .add-employee-buttons, .edit-employee-buttons {
            justify-content: start;
            gap: 10px;
        }

        .modal-footer-buttons .btn {
            border-radius: 8px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            min-width: 140px;
        }

        .modal-footer-buttons .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        }

        .modal-footer-buttons .btn:active {
            transform: translateY(0);
        }

        .add-employee-buttons .btn, .edit-employee-buttons .btn {
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            border-radius: 5px;
            font-weight: 400;
        }

        .modal-footer-buttons .btn-primary {
            background-color: #007bff;
            border: none;
        }

        .modal-footer-buttons .btn-success {
            background: #00c896;
            border: none;
        }

        .modal-footer-buttons .btn-info {
            background:  #138496;
            border: none;
        }

        .modal-footer-buttons .btn-outline-secondary {
            border: 1px solid #333333;
            color: #333333;
            background: transparent;
        }

        .modal-footer-buttons .btn-outline-secondary:hover {
            background: #6c757d;
            color: white;
        }

        .modal-footer-buttons .btn i {
            font-size: 14px;
        }

        /* Responsive button layout */
        @media (max-width: 768px) {
            .modal-footer-buttons .d-flex {
                flex-direction: column;
                align-items: center;
            }

            .modal-footer-buttons .btn {
                min-width: 100px;
                margin-bottom: 0.5rem;
            }
        }

        .salary-structure-table .fw-bold td:first-child {
            background-color: #f8f9fa;
            font-weight: bold;
        }

        .disabled-field {
            background-color: #f8f9fa;
            opacity: 0.6;
            cursor: not-allowed;
        }

        .payslip-status {
            margin-right: 5px;
        }

        .status-text {
            font-size: 10px;
            font-weight: bold;
        }

        .text-success {
            color: #28a745 !important;
        }

        .month-indicator {
            display: block;
            background-color: #dc3545;
            color: white;
            font-size: 9px;
            padding: 1px 3px;
            border-radius: 2px;
            margin-top: 2px;
            font-weight: bold;
        }

        .month-header {
            position: relative;
        }

        .leave-balance-display {
            background-color: #f8f9fa;
            font-weight: bold;
            color: #495057;
            padding: 6px 4px;
            border: 1px solid #dee2e6;
        }

        .payslip-status:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .payslip-status:disabled+.status-text {
            opacity: 0.8;
            font-weight: bold;
        }

        .status-text.locked {
            color: #dc3545 !important;
            font-weight: bold;
            position: relative;
        }

        .status-text.locked::after {
            content: " 🔒";
            font-size: 12px;
        }

        .payslip-locked {
            background-color: #f8f9fa;
            border-color: #dc3545;
        }

        .payslip-locked td {
            background-color: #fff5f5;
        }

        .disabled-field {
            background-color: #f8f9fa;
            opacity: 0.6;
            cursor: not-allowed;
        }

        .payslip-status.disabled-field {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .status-text.text-muted {
            color: #6c757d !important;
            font-style: italic;
        }

        /* Navigation button states */
        .btn-info:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .btn-secondary:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        /* Active navigation buttons */
        .btn-info:not(:disabled) {
            background-color: #0dcaf0;
            border-color: #0dcaf0;
            color: white;
        }

        .btn-info:not(:disabled):hover {
            background-color: #31d2f2;
            border-color: #25cff2;
        }
    </style>

    <div class="modal fade" id="addItemModal" tabindex="-1" aria-labelledby="addItemModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-body-secondary rounded-0">
                    <h5 class="modal-title" id="addItemModalLabel">Search</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="slr-div_form">
                        <div class="card bg-white border-0">
                            <div class="card-body">
                                <div class="tab">
                                    <form id="addItemForm" class="row frm_emp_prsnl_dtl mt-3" method="post"
                                        onsubmit="EmployeeObj.addItemFormSubmitHandler(event)"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <div class="col-sm-12">
                                            <div class="frm-inp_div mb-4">
                                                <span><strong>1. Employee Details</strong></span>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empCode" class="form-label">Employee Code<span>*</span></label>
                                                <input type="text" class="form-control" name="code" required="" />
                                                <input type="hidden" name="id" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empName" class="form-label">Employee Name<span>*</span></label>
                                                <input type="text" class="form-control" name="name" required="" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label class="form-label">Company<span>*</span></label>
                                                <select name="company_id" required="" class="form-control"></select>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label class="form-label">Employment Type<span>*</span></label>
                                                <select name="employment_type" required="" class="form-control"></select>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empClient"
                                                    class="form-label">Client/Project<span>*</span></label>
                                                <input type="text" class="form-control" name="client" required=""
                                                    placeholder="" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empDes" class="form-label">Designation<span>*</span></label>
                                                <input type="text" class="form-control" name="designation"
                                                    placeholder="" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empLoc" class="form-label">Location<span>*</span></label>
                                                <select name="location" required="" class="form-control"></select>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div d-grid">
                                                <label for="empDOJ" class="form-label">Date Of
                                                    Joining<span>*</span></label>
                                                <input type="date" class="empDOJ form-control" required=""
                                                    name="date_of_joining" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empDOB" class="form-label">Date Of Birth<span>*</span></label>
                                                <input type="date" class="empDOJ form-control" required=""
                                                    name="date_of_birth" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empPAN" class="form-label">PAN No.<span>*</span></label>
                                                <input type="text" class="form-control" required=""
                                                    name="pan" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="emppanF" class="form-label">PAN Card</label>
                                                <input class="form-control" accept="image/*" name="pan_file"
                                                    type="file">
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empadhar" class="form-label">Aadhaar No.<span>*</span></label>
                                                <input type="text" class="form-control" required=""
                                                    name="aadhar" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empadharF" class="form-label">Aadhaar Card</label>
                                                <input class="form-control" accept="image/*" name="aadhar_file"
                                                    type="file">
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empEml" class="form-label">Email
                                                    Address<span>*</span></label>
                                                <input type="email" class="form-control" required=""
                                                    name="email" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empMob" class="form-label">Mobile No.<span>*</span></label>
                                                <input type="text" class="form-control" required=""
                                                    name="mobile" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empCon" class="form-label">Emergency Mobile No.</label>
                                                <input type="text" class="form-control" name="emergency_contact" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empNA" class="form-label">Next Appraisal</label>
                                                <input type="month" class="form-control" name="next_appraisal" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empBns" class="form-label">Bonus</label>
                                                <input type="month" class="form-control" name="bonus_month" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empAddress" class="form-label">Address<span>*</span></label>
                                                <input type="text" class="form-control" required=""
                                                    name="residential_address" />
                                            </div>
                                        </div>
                                        <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12">
                                            <div class="frm-inp_div">
                                                <label for="empRrk" class="form-label">Remarks<span></span></label>
                                                <input type="text" class="form-control" required=""
                                                    name="remark" />
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <div class="frm-inp_div mb-4">
                                                <span><strong>2. Bank Details</strong></span>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empBnkName" class="form-label">Bank Name<span>*</span></label>
                                                <input type="text" class="form-control" required=""
                                                    name="bank_name" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empAcNo" class="form-label">Bank A/c
                                                    No.<span>*</span></label>
                                                <input type="number" class="form-control" required=""
                                                    name="bank_account_number" maxlength="20" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empIFSC" class="form-label">IFSC Code<span>*</span></label>
                                                <input type="text" class="form-control" required=""
                                                    name="bank_ifsc" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empAcType" class="form-label">Account
                                                    Type<span>*</span></label>
                                                <select name="bank_account_type" class="form-control" required="">
                                                    <option value="Saving">Saving</option>
                                                    <option value="Current">Current</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empbrchLoc" class="form-label">Branch
                                                    Location<span>*</span></label>
                                                <input type="text" class="form-control" name="bank_branch_location" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <div class="mb-3 frm-inp_div">
                                                <label for="empbnkRemrk" class="form-label">Branch
                                                    Description<span></span></label>
                                                <input type="text" class="form-control" name="bank_branch_detail" />
                                            </div>
                                        </div>

                                        <!-- Salary Structure Section -->
                                        <div class="col-sm-12">
                                            <div class="frm-inp_div mb-4">
                                                <span><strong>3. Salary Structure</strong></span>
                                            </div>
                                        </div>

                                        <!-- Salary Components Table -->
                                        <div class="col-12">
                                            <div class="table-responsive">
                                                <table class="table table-bordered salary-structure-table"
                                                    id="salaryStructureTable">
                                                    <thead>
                                                        <tr class="table-primary">
                                                            <th class="text-center align-middle">COMPONENTS</th>
                                                            <th class="text-center month-header" data-month="apr">APR-2024
                                                            </th>
                                                            <th class="text-center month-header" data-month="may">MAY-2024
                                                            </th>
                                                            <th class="text-center month-header" data-month="jun">JUN-2024
                                                            </th>
                                                            <th class="text-center month-header" data-month="jul">JUL-2024
                                                            </th>
                                                            <th class="text-center month-header" data-month="aug">AUG-2024
                                                            </th>
                                                            <th class="text-center month-header" data-month="sep">SEP-2024
                                                            </th>
                                                            <th class="text-center month-header" data-month="oct">OCT-2024
                                                            </th>
                                                            <th class="text-center month-header" data-month="nov">NOV-2024
                                                            </th>
                                                            <th class="text-center month-header" data-month="dec">DEC-2024
                                                            </th>
                                                            <th class="text-center month-header" data-month="jan">JAN-2025
                                                            </th>
                                                            <th class="text-center month-header" data-month="feb">FEB-2025
                                                            </th>
                                                            <th class="text-center month-header" data-month="mar">MAR-2025
                                                            </th>
                                                            <th class="text-center align-middle bg-dark text-white">FY
                                                                TOTAL</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <!-- Basic Row -->
                                                        <tr>
                                                            <td class="fw-bold">Basic</td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[apr][basic]" data-month="apr"
                                                                    data-component="basic" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[may][basic]" data-month="may"
                                                                    data-component="basic" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jun][basic]" data-month="jun"
                                                                    data-component="basic" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jul][basic]" data-month="jul"
                                                                    data-component="basic" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[aug][basic]" data-month="aug"
                                                                    data-component="basic" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[sep][basic]" data-month="sep"
                                                                    data-component="basic" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[oct][basic]" data-month="oct"
                                                                    data-component="basic" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[nov][basic]" data-month="nov"
                                                                    data-component="basic" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[dec][basic]" data-month="dec"
                                                                    data-component="basic" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jan][basic]" data-month="jan"
                                                                    data-component="basic" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[feb][basic]" data-month="feb"
                                                                    data-component="basic" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[mar][basic]" data-month="mar"
                                                                    data-component="basic" value=""></td>
                                                            <td class="fw-bold component-total" data-component="basic">
                                                                0</td>
                                                        </tr>

                                                        <!-- House Rent Allowance -->
                                                        <tr>
                                                            <td class="fw-bold">House Rent Allowance</td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[apr][house_rent_allowance]"
                                                                    data-month="apr" data-component="house_rent_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[may][house_rent_allowance]"
                                                                    data-month="may" data-component="house_rent_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jun][house_rent_allowance]"
                                                                    data-month="jun" data-component="house_rent_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jul][house_rent_allowance]"
                                                                    data-month="jul" data-component="house_rent_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[aug][house_rent_allowance]"
                                                                    data-month="aug" data-component="house_rent_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[sep][house_rent_allowance]"
                                                                    data-month="sep" data-component="house_rent_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[oct][house_rent_allowance]"
                                                                    data-month="oct" data-component="house_rent_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[nov][house_rent_allowance]"
                                                                    data-month="nov" data-component="house_rent_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[dec][house_rent_allowance]"
                                                                    data-month="dec" data-component="house_rent_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jan][house_rent_allowance]"
                                                                    data-month="jan" data-component="house_rent_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[feb][house_rent_allowance]"
                                                                    data-month="feb" data-component="house_rent_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[mar][house_rent_allowance]"
                                                                    data-month="mar" data-component="house_rent_allowance"
                                                                    value=""></td>
                                                            <td class="fw-bold component-total"
                                                                data-component="house_rent_allowance">0</td>
                                                        </tr>

                                                        <!-- Conveyance Allowance -->
                                                        <tr>
                                                            <td class="fw-bold">Conveyance Allowance</td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[apr][conveyance_allowance]"
                                                                    data-month="apr" data-component="conveyance_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[may][conveyance_allowance]"
                                                                    data-month="may" data-component="conveyance_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jun][conveyance_allowance]"
                                                                    data-month="jun" data-component="conveyance_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jul][conveyance_allowance]"
                                                                    data-month="jul" data-component="conveyance_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[aug][conveyance_allowance]"
                                                                    data-month="aug" data-component="conveyance_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[sep][conveyance_allowance]"
                                                                    data-month="sep" data-component="conveyance_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[oct][conveyance_allowance]"
                                                                    data-month="oct" data-component="conveyance_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[nov][conveyance_allowance]"
                                                                    data-month="nov" data-component="conveyance_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[dec][conveyance_allowance]"
                                                                    data-month="dec" data-component="conveyance_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jan][conveyance_allowance]"
                                                                    data-month="jan" data-component="conveyance_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[feb][conveyance_allowance]"
                                                                    data-month="feb" data-component="conveyance_allowance"
                                                                    value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[mar][conveyance_allowance]"
                                                                    data-month="mar" data-component="conveyance_allowance"
                                                                    value=""></td>
                                                            <td class="fw-bold component-total"
                                                                data-component="conveyance_allowance">0</td>
                                                        </tr>

                                                        <!-- Medical Allowance -->
                                                        <tr>
                                                            <td class="fw-bold">Medical Allowance</td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[apr][medical_allowance]" data-month="apr"
                                                                    data-component="medical_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[may][medical_allowance]" data-month="may"
                                                                    data-component="medical_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jun][medical_allowance]" data-month="jun"
                                                                    data-component="medical_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jul][medical_allowance]" data-month="jul"
                                                                    data-component="medical_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[aug][medical_allowance]" data-month="aug"
                                                                    data-component="medical_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[sep][medical_allowance]" data-month="sep"
                                                                    data-component="medical_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[oct][medical_allowance]" data-month="oct"
                                                                    data-component="medical_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[nov][medical_allowance]" data-month="nov"
                                                                    data-component="medical_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[dec][medical_allowance]" data-month="dec"
                                                                    data-component="medical_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jan][medical_allowance]" data-month="jan"
                                                                    data-component="medical_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[feb][medical_allowance]" data-month="feb"
                                                                    data-component="medical_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[mar][medical_allowance]" data-month="mar"
                                                                    data-component="medical_allowance" value="">
                                                            </td>
                                                            <td class="fw-bold component-total"
                                                                data-component="medical_allowance">0</td>
                                                        </tr>

                                                        <!-- Special Allowance -->
                                                        <tr>
                                                            <td class="fw-bold">Special Allowance</td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[apr][special_allowance]" data-month="apr"
                                                                    data-component="special_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[may][special_allowance]" data-month="may"
                                                                    data-component="special_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jun][special_allowance]" data-month="jun"
                                                                    data-component="special_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jul][special_allowance]" data-month="jul"
                                                                    data-component="special_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[aug][special_allowance]" data-month="aug"
                                                                    data-component="special_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[sep][special_allowance]" data-month="sep"
                                                                    data-component="special_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[oct][special_allowance]" data-month="oct"
                                                                    data-component="special_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[nov][special_allowance]" data-month="nov"
                                                                    data-component="special_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[dec][special_allowance]" data-month="dec"
                                                                    data-component="special_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jan][special_allowance]" data-month="jan"
                                                                    data-component="special_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[feb][special_allowance]" data-month="feb"
                                                                    data-component="special_allowance" value="">
                                                            </td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[mar][special_allowance]" data-month="mar"
                                                                    data-component="special_allowance" value="">
                                                            </td>
                                                            <td class="fw-bold component-total"
                                                                data-component="special_allowance">0</td>
                                                        </tr>

                                                        <!-- Shift Allowance -->
                                                        <tr>
                                                            <td class="fw-bold">Shift Allowance</td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[apr][shift_allowance]" data-month="apr"
                                                                    data-component="shift_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[may][shift_allowance]" data-month="may"
                                                                    data-component="shift_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jun][shift_allowance]" data-month="jun"
                                                                    data-component="shift_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jul][shift_allowance]" data-month="jul"
                                                                    data-component="shift_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[aug][shift_allowance]" data-month="aug"
                                                                    data-component="shift_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[sep][shift_allowance]" data-month="sep"
                                                                    data-component="shift_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[oct][shift_allowance]" data-month="oct"
                                                                    data-component="shift_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[nov][shift_allowance]" data-month="nov"
                                                                    data-component="shift_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[dec][shift_allowance]" data-month="dec"
                                                                    data-component="shift_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jan][shift_allowance]" data-month="jan"
                                                                    data-component="shift_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[feb][shift_allowance]" data-month="feb"
                                                                    data-component="shift_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[mar][shift_allowance]" data-month="mar"
                                                                    data-component="shift_allowance" value=""></td>
                                                            <td class="fw-bold component-total"
                                                                data-component="shift_allowance">0</td>
                                                        </tr>

                                                        <!-- Other Allowance -->
                                                        <tr>
                                                            <td class="fw-bold">Other Allowance</td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[apr][other_allowance]" data-month="apr"
                                                                    data-component="other_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[may][other_allowance]" data-month="may"
                                                                    data-component="other_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jun][other_allowance]" data-month="jun"
                                                                    data-component="other_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jul][other_allowance]" data-month="jul"
                                                                    data-component="other_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[aug][other_allowance]" data-month="aug"
                                                                    data-component="other_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[sep][other_allowance]" data-month="sep"
                                                                    data-component="other_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[oct][other_allowance]" data-month="oct"
                                                                    data-component="other_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[nov][other_allowance]" data-month="nov"
                                                                    data-component="other_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[dec][other_allowance]" data-month="dec"
                                                                    data-component="other_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jan][other_allowance]" data-month="jan"
                                                                    data-component="other_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[feb][other_allowance]" data-month="feb"
                                                                    data-component="other_allowance" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[mar][other_allowance]" data-month="mar"
                                                                    data-component="other_allowance" value=""></td>
                                                            <td class="fw-bold component-total"
                                                                data-component="other_allowance">0</td>
                                                        </tr>

                                                        <!-- Bonus -->
                                                        <tr>
                                                            <td class="fw-bold">Bonus</td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[apr][bonus]" data-month="apr"
                                                                    data-component="bonus" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[may][bonus]" data-month="may"
                                                                    data-component="bonus" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jun][bonus]" data-month="jun"
                                                                    data-component="bonus" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jul][bonus]" data-month="jul"
                                                                    data-component="bonus" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[aug][bonus]" data-month="aug"
                                                                    data-component="bonus" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[sep][bonus]" data-month="sep"
                                                                    data-component="bonus" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[oct][bonus]" data-month="oct"
                                                                    data-component="bonus" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[nov][bonus]" data-month="nov"
                                                                    data-component="bonus" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[dec][bonus]" data-month="dec"
                                                                    data-component="bonus" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jan][bonus]" data-month="jan"
                                                                    data-component="bonus" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[feb][bonus]" data-month="feb"
                                                                    data-component="bonus" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[mar][bonus]" data-month="mar"
                                                                    data-component="bonus" value=""></td>
                                                            <td class="fw-bold component-total" data-component="bonus">0
                                                            </td>
                                                        </tr>

                                                        <!-- Total Salary -->
                                                        <tr class="table-info">
                                                            <td class="fw-bold">Total Salary</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="fw-bold component-total"
                                                                data-component="total_salary">1269600</td>
                                                        </tr>

                                                        <!-- PF -->
                                                        <tr>
                                                            <td class="fw-bold">PF</td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[apr][pf]" data-month="apr"
                                                                    data-component="pf" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[may][pf]" data-month="may"
                                                                    data-component="pf" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jun][pf]" data-month="jun"
                                                                    data-component="pf" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jul][pf]" data-month="jul"
                                                                    data-component="pf" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[aug][pf]" data-month="aug"
                                                                    data-component="pf" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[sep][pf]" data-month="sep"
                                                                    data-component="pf" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[oct][pf]" data-month="oct"
                                                                    data-component="pf" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[nov][pf]" data-month="nov"
                                                                    data-component="pf" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[dec][pf]" data-month="dec"
                                                                    data-component="pf" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jan][pf]" data-month="jan"
                                                                    data-component="pf" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[feb][pf]" data-month="feb"
                                                                    data-component="pf" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[mar][pf]" data-month="mar"
                                                                    data-component="pf" value=""></td>
                                                            <td class="fw-bold component-total" data-component="pf">0
                                                            </td>
                                                        </tr>

                                                        <!-- Income Tax -->
                                                        <tr>
                                                            <td class="fw-bold">Income Tax</td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[apr][income_tax]" data-month="apr"
                                                                    data-component="income_tax" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[may][income_tax]" data-month="may"
                                                                    data-component="income_tax" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jun][income_tax]" data-month="jun"
                                                                    data-component="income_tax" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jul][income_tax]" data-month="jul"
                                                                    data-component="income_tax" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[aug][income_tax]" data-month="aug"
                                                                    data-component="income_tax" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[sep][income_tax]" data-month="sep"
                                                                    data-component="income_tax" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[oct][income_tax]" data-month="oct"
                                                                    data-component="income_tax" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[nov][income_tax]" data-month="nov"
                                                                    data-component="income_tax" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[dec][income_tax]" data-month="dec"
                                                                    data-component="income_tax" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jan][income_tax]" data-month="jan"
                                                                    data-component="income_tax" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[feb][income_tax]" data-month="feb"
                                                                    data-component="income_tax" value=""></td>
                                                            <td class="text-center"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[mar][income_tax]" data-month="mar"
                                                                    data-component="income_tax" value=""></td>
                                                            <td class="fw-bold component-total"
                                                                data-component="income_tax">0</td>
                                                        </tr>

                                                        <!-- Total Deductions -->
                                                        <tr class="table-warning">
                                                            <td class="fw-bold">Total Deductions</td>
                                                            <td class="text-center fw-bold"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[apr][total_deductions]"
                                                                    data-month="apr" data-component="total_deductions"
                                                                    value=""></td>
                                                            <td class="text-center fw-bold"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[may][total_deductions]"
                                                                    data-month="may" data-component="total_deductions"
                                                                    value=""></td>
                                                            <td class="text-center fw-bold"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jun][total_deductions]"
                                                                    data-month="jun" data-component="total_deductions"
                                                                    value=""></td>
                                                            <td class="text-center fw-bold"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jul][total_deductions]"
                                                                    data-month="jul" data-component="total_deductions"
                                                                    value=""></td>
                                                            <td class="text-center fw-bold"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[aug][total_deductions]"
                                                                    data-month="aug" data-component="total_deductions"
                                                                    value=""></td>
                                                            <td class="text-center fw-bold"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[sep][total_deductions]"
                                                                    data-month="sep" data-component="total_deductions"
                                                                    value=""></td>
                                                            <td class="text-center fw-bold"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[oct][total_deductions]"
                                                                    data-month="oct" data-component="total_deductions"
                                                                    value=""></td>
                                                            <td class="text-center fw-bold"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[nov][total_deductions]"
                                                                    data-month="nov" data-component="total_deductions"
                                                                    value=""></td>
                                                            <td class="text-center fw-bold"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[dec][total_deductions]"
                                                                    data-month="dec" data-component="total_deductions"
                                                                    value=""></td>
                                                            <td class="text-center fw-bold"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[jan][total_deductions]"
                                                                    data-month="jan" data-component="total_deductions"
                                                                    value=""></td>
                                                            <td class="text-center fw-bold"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[feb][total_deductions]"
                                                                    data-month="feb" data-component="total_deductions"
                                                                    value=""></td>
                                                            <td class="text-center fw-bold"><input type="number"
                                                                    class="form-control salary-input"
                                                                    name="salary[mar][total_deductions]"
                                                                    data-month="mar" data-component="total_deductions"
                                                                    value=""></td>
                                                            <td class="fw-bold component-total"
                                                                data-component="total_deductions">0</td>
                                                        </tr>

                                                        <!-- Net Salary Paid -->
                                                        <tr class="table-success">
                                                            <td class="fw-bold">Net Salary Paid</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="text-center fw-bold">0</td>
                                                            <td class="fw-bold component-total"
                                                                data-component="net_salary">1220640</td>
                                                        </tr>

                                                        <!-- Leave Availed During The Month -->
                                                        <tr>
                                                            <td class="fw-bold">Leave Availed During The Month</td>
                                                            <td class="text-center">
                                                                <div class="row">
                                                                    <div class="col-12 mb-2">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[apr][leave_availed_annual]"
                                                                            data-month="apr"
                                                                            data-component="leave_availed_annual"
                                                                            placeholder="Annual" value="">
                                                                    </div>
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[apr][leave_availed_casual]"
                                                                            data-month="apr"
                                                                            data-component="leave_availed_casual"
                                                                            placeholder="Casual" value="">
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td class="text-center">
                                                                <div class="row">
                                                                    <div class="col-12 mb-2">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[may][leave_availed_annual]"
                                                                            data-month="may"
                                                                            data-component="leave_availed_annual"
                                                                            placeholder="Annual" value="">
                                                                    </div>
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[may][leave_availed_casual]"
                                                                            data-month="may"
                                                                            data-component="leave_availed_casual"
                                                                            placeholder="Casual" value="">
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td class="text-center">
                                                                <div class="row">
                                                                    <div class="col-12 mb-2">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[jun][leave_availed_annual]"
                                                                            data-month="jun"
                                                                            data-component="leave_availed_annual"
                                                                            placeholder="Annual" value="">
                                                                    </div>
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[jun][leave_availed_casual]"
                                                                            data-month="jun"
                                                                            data-component="leave_availed_casual"
                                                                            placeholder="Casual" value="">
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td class="text-center">
                                                                <div class="row">
                                                                    <div class="col-12 mb-2">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[jul][leave_availed_annual]"
                                                                            data-month="jul"
                                                                            data-component="leave_availed_annual"
                                                                            placeholder="Annual" value="">
                                                                    </div>
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[jul][leave_availed_casual]"
                                                                            data-month="jul"
                                                                            data-component="leave_availed_casual"
                                                                            placeholder="Casual" value="">
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td class="text-center">
                                                                <div class="row">
                                                                    <div class="col-12 mb-2">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[aug][leave_availed_annual]"
                                                                            data-month="aug"
                                                                            data-component="leave_availed_annual"
                                                                            placeholder="Annual" value="">
                                                                    </div>
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[aug][leave_availed_casual]"
                                                                            data-month="aug"
                                                                            data-component="leave_availed_casual"
                                                                            placeholder="Casual" value="">
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td class="text-center">
                                                                <div class="row">
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[sep][leave_availed_annual]"
                                                                            data-month="sep"
                                                                            data-component="leave_availed_annual"
                                                                            placeholder="Annual" value="">
                                                                    </div>
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[sep][leave_availed_casual]"
                                                                            data-month="sep"
                                                                            data-component="leave_availed_casual"
                                                                            placeholder="Casual" value="">
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td class="text-center">
                                                                <div class="row">
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[oct][leave_availed_annual]"
                                                                            data-month="oct"
                                                                            data-component="leave_availed_annual"
                                                                            placeholder="Annual" value="">
                                                                    </div>
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[oct][leave_availed_casual]"
                                                                            data-month="oct"
                                                                            data-component="leave_availed_casual"
                                                                            placeholder="Casual" value="">
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td class="text-center">
                                                                <div class="row">
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[nov][leave_availed_annual]"
                                                                            data-month="nov"
                                                                            data-component="leave_availed_annual"
                                                                            placeholder="Annual" value="">
                                                                    </div>
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[nov][leave_availed_casual]"
                                                                            data-month="nov"
                                                                            data-component="leave_availed_casual"
                                                                            placeholder="Casual" value="">
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td class="text-center">
                                                                <div class="row">
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[dec][leave_availed_annual]"
                                                                            data-month="dec"
                                                                            data-component="leave_availed_annual"
                                                                            placeholder="Annual" value="">
                                                                    </div>
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[dec][leave_availed_casual]"
                                                                            data-month="dec"
                                                                            data-component="leave_availed_casual"
                                                                            placeholder="Casual" value="">
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td class="text-center">
                                                                <div class="row">
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[jan][leave_availed_annual]"
                                                                            data-month="jan"
                                                                            data-component="leave_availed_annual"
                                                                            placeholder="Annual" value="">
                                                                    </div>
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[jan][leave_availed_casual]"
                                                                            data-month="jan"
                                                                            data-component="leave_availed_casual"
                                                                            placeholder="Casual" value="">
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td class="text-center">
                                                                <div class="row">
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[feb][leave_availed_annual]"
                                                                            data-month="feb"
                                                                            data-component="leave_availed_annual"
                                                                            placeholder="Annual" value="">
                                                                    </div>
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[feb][leave_availed_casual]"
                                                                            data-month="feb"
                                                                            data-component="leave_availed_casual"
                                                                            placeholder="Casual" value="">
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td class="text-center">
                                                                <div class="row">
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[mar][leave_availed_annual]"
                                                                            data-month="mar"
                                                                            data-component="leave_availed_annual"
                                                                            placeholder="Annual" value="">
                                                                    </div>
                                                                    <div class="col-12">
                                                                        <input type="number"
                                                                            class="form-control salary-input"
                                                                            name="salary[mar][leave_availed_casual]"
                                                                            data-month="mar"
                                                                            data-component="leave_availed_casual"
                                                                            placeholder="Casual" value="">
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td class="fw-bold component-total"
                                                                data-component="leave_availed">0</td>
                                                        </tr>

                                                        <!-- Leave Balance (Annual/Casual) -->
                                                        <tr>
                                                            <td class="fw-bold">Leave Balance (Annual/Casual)</td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[apr][leave_balance]" data-month="apr"
                                                                    data-component="leave_balance" value="28/10"></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[may][leave_balance]" data-month="may"
                                                                    data-component="leave_balance" value="28/10"></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[jun][leave_balance]" data-month="jun"
                                                                    data-component="leave_balance" value="28/10"></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[jul][leave_balance]" data-month="jul"
                                                                    data-component="leave_balance" value="28/10"></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[aug][leave_balance]" data-month="aug"
                                                                    data-component="leave_balance" value="28/10"></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[sep][leave_balance]" data-month="sep"
                                                                    data-component="leave_balance" value="28/10"></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[oct][leave_balance]" data-month="oct"
                                                                    data-component="leave_balance" value="28/10"></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[nov][leave_balance]" data-month="nov"
                                                                    data-component="leave_balance" value="28/10"></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[dec][leave_balance]" data-month="dec"
                                                                    data-component="leave_balance" value="28/10"></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[jan][leave_balance]" data-month="jan"
                                                                    data-component="leave_balance" value="28/10"></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[feb][leave_balance]" data-month="feb"
                                                                    data-component="leave_balance" value="28/10"></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[mar][leave_balance]" data-month="mar"
                                                                    data-component="leave_balance" value="28/10"></td>
                                                            <td class="fw-bold">-</td>
                                                        </tr>
                                                        <!-- Payslip Status -->
                                                        <tr>
                                                            <td class="fw-bold">Payslip Status</td>
                                                            <td class="text-center">
                                                                <label class="d-flex align-items-center">
                                                                    <input type="checkbox" class="payslip-status"
                                                                        data-month="apr" name="payslip_status[apr]">
                                                                    <span class="status-text">Pending</span>
                                                                </label>
                                                            </td>
                                                            <td class="text-center">
                                                                <label class="d-flex align-items-center">
                                                                    <input type="checkbox" class="payslip-status"
                                                                        data-month="may" name="payslip_status[may]">
                                                                    <span class="status-text">Pending</span>
                                                                </label>
                                                            </td>
                                                            <td class="text-center">
                                                                <label class="d-flex align-items-center">
                                                                    <input type="checkbox" class="payslip-status"
                                                                        data-month="jun" name="payslip_status[jun]">
                                                                    <span class="status-text">Pending</span>
                                                                </label>
                                                            </td>
                                                            <td class="text-center">
                                                                <label class="d-flex align-items-center">

                                                                    <input type="checkbox" class="payslip-status"
                                                                        data-month="jul" name="payslip_status[jul]">
                                                                    <span class="status-text">Pending</span>
                                                                </label>
                                                            </td>
                                                            <td class="text-center">
                                                                <label class="d-flex align-items-center">
                                                                    <input type="checkbox" class="payslip-status"
                                                                        data-month="aug" name="payslip_status[aug]">
                                                                    <span class="status-text">Pending</span>
                                                                </label>
                                                            </td>
                                                            <td class="text-center">
                                                                <label class="d-flex align-items-center">
                                                                    <input type="checkbox" class="payslip-status"
                                                                        data-month="sep" name="payslip_status[sep]">
                                                                    <span class="status-text">Pending</span>
                                                                </label>
                                                            </td>
                                                            <td class="text-center">
                                                                <label class="d-flex align-items-center">
                                                                    <input type="checkbox" class="payslip-status"
                                                                        data-month="oct" name="payslip_status[oct]">
                                                                    <span class="status-text">Pending</span>
                                                            </td>
                                                            <td class="text-center">
                                                                <label class="d-flex align-items-center">
                                                                    <input type="checkbox" class="payslip-status"
                                                                        data-month="nov" name="payslip_status[nov]">
                                                                    <span class="status-text">Pending</span>
                                                                </label>
                                                            </td>
                                                            <td class="text-center">
                                                                <label class="d-flex align-items-center">
                                                                    <input type="checkbox" class="payslip-status"
                                                                        data-month="dec" name="payslip_status[dec]">
                                                                    <span class="status-text">Pending</span>
                                                                </label>
                                                            </td>
                                                            <td class="text-center">
                                                                <label class="d-flex align-items-center">
                                                                    <input type="checkbox" class="payslip-status"
                                                                        data-month="jan" name="payslip_status[jan]">
                                                                    <span class="status-text">Pending</span>
                                                                </label>
                                                            </td>
                                                            <td class="text-center">
                                                                <label class="d-flex align-items-center">
                                                                    <input type="checkbox" class="payslip-status"
                                                                        data-month="feb" name="payslip_status[feb]">
                                                                    <span class="status-text">Pending</span>
                                                                </label>
                                                            </td>
                                                            <td class="text-center">
                                                                <label class="d-flex align-items-center">
                                                                    <input type="checkbox" class="payslip-status"
                                                                        data-month="mar" name="payslip_status[mar]">
                                                                    <span class="status-text">Pending</span>
                                                                </label>
                                                            </td>
                                                            <td class="fw-bold">-</td>
                                                        </tr>

                                                        <!-- Remark -->
                                                        <tr>
                                                            <td class="fw-bold">Remark</td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[apr][remark]" data-month="apr"
                                                                    data-component="remark" value=""></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[may][remark]" data-month="may"
                                                                    data-component="remark" value=""></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[jun][remark]" data-month="jun"
                                                                    data-component="remark" value=""></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[jul][remark]" data-month="jul"
                                                                    data-component="remark" value=""></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[aug][remark]" data-month="aug"
                                                                    data-component="remark" value=""></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[sep][remark]" data-month="sep"
                                                                    data-component="remark" value=""></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[oct][remark]" data-month="oct"
                                                                    data-component="remark" value=""></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[nov][remark]" data-month="nov"
                                                                    data-component="remark" value=""></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[dec][remark]" data-month="dec"
                                                                    data-component="remark" value=""></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[jan][remark]" data-month="jan"
                                                                    data-component="remark" value=""></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[feb][remark]" data-month="feb"
                                                                    data-component="remark" value=""></td>
                                                            <td class="text-center"><input type="text"
                                                                    class="form-control salary-input"
                                                                    name="salary[mar][remark]" data-month="mar"
                                                                    data-component="remark" value=""></td>
                                                            <td class="fw-bold">-</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="modal-footer-buttons mt-4">
                                                <!-- Add Employee Buttons -->
                                                <div class="add-employee-buttons">
                                                    <button type="submit" class="btn btn-primary"
                                                        data-action="add">Add
                                                    </button>
                                                    <button type="submit" class="btn btn-success btn-lg px-4 py-2 shadow-sm"
                                                        data-action="add-and-next">Next
                                                    </button>
                                                    <button type="button" class="btn btn-outline-secondary btn-lg px-4 py-2 shadow-sm"
                                                        data-bs-dismiss="modal">Cancel
                                                    </button>
                                                </div>

                                                <!-- Edit Employee Buttons -->
                                                <div class="edit-employee-buttons" style="display: none;">
                                                    <button type="submit" class="btn btn-primary me-2"
                                                        data-action="edit">
                                                        <i class="fa fa-edit me-1"></i>Edit
                                                    </button>
                                                    <button type="button" class="btn btn-info"
                                                        data-action="previous">Go Back
                                                    </button>
                                                    <button type="button" class="btn btn-success"
                                                        data-action="next">Go Next
                                                    </button>
                                                    <button type="button" class="btn btn-outline-secondary"
                                                        data-bs-dismiss="modal">Cancel
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="viewItemModal" tabindex="-1" aria-labelledby="viewItemModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-body-secondary rounded-0">
                    <h5 class="modal-title" id="viewItemModalLabel">Employee Detail</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="slr-div_form">
                        <div class="card bg-white border-0">
                            <div class="card-body">
                                <div class="tab">
                                    <div class="row frm_emp_prsnl_dtl mt-3 employee_detail"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endpush


@include('pages.private.salary_slip')


@push('page_scripts')
    <script type="text/javascript">
        class Employee extends BaseClass {
            constructor() {
                super();

                this.addItemForm = document.getElementById('addItemForm');
                this.addItemModalElem = document.getElementById('addItemModal');
                this.addItemModal = new bootstrap.Modal(this.addItemModalElem, {
                    keyboard: false,
                    backdrop: 'static'
                });

                this.viewItemModalElem = document.getElementById('viewItemModal');
                this.viewItemModal = new bootstrap.Modal(this.viewItemModalElem, {
                    keyboard: false,
                    backdrop: 'static'
                });

                this.add_url = '