{{-- start employment section --}}
<div id="sectionname-rows">
    <template id="sectionname-row-template">
        <div class="sectionname-row border" style="padding:10px;">
            <div class="row">
                <div class="col-12 col-md">
                    <div class="form-group">
                        <label for="employer_name">Employer</label>
                        <input type="text" name="employer_name[]" class="form-control" id="employer_name" placeholder=""
                            value="{{ old('employer_name') }}">
                    </div>
                </div>
                <div class="col-12 col-md">
                    <div class="form-group">
                        <label for="employment_job_title">Job Title </label>
                        <input type="text" name="employment_job_title[]" class="form-control" id="employment_job_title"
                            placeholder="" value="{{ old('employment_job_title') }}">
                    </div>
                </div>
               
            </div><br>


            {{-- employment roles and responsibilities --}}
            <div id="role-rows">
                <template id="sub-sectionname-row">
                    <div class="role-row mb-3 mt-3">
                        <div class="row sectionname-subsection-row" style="margin-bottom: 15px;">
                            <div class="col-12 col-md">
                                <div class="form-group">
                                    <input type="text" name="employment_role_and_respobsibility_description[]"
                                        class="form-control" placeholder="Add Role & Responsibility">
                                </div>
                            </div>
                            <div class="col-12 col-md-2 text-end">
                                <button type="button"
                                    class="btn btn-danger btn-icon-text me-2 mb-2 mb-md-0 delete-role-row-btn"
                                    onclick="removeSubsectionRow(this)">
                                    <i class="btn-icon-prepend" data-feather="minus-circle"></i>
                                    Del Role
                                </button>
                            </div>
                        </div>
                        <!-- End Role and Responsibility input fields -->
                    </div>
                </template>
            </div>
            <button type="button" class="btn btn-secondary mt-3" onclick="addSubsectionRow(this)">Add Role</button>
            <button type="button" class="btn btn-danger mt-3" onclick="removeSectionRow(this)">Remove
                Employment</button>
            {{-- end employment roles and responsibilities --}}
        </div>
    </template>
</div>
<button type="button" class="btn btn-primary mt-3" onclick="addSectionRow()">Add
    Employment</button>
{{-- end employment section --}}











{{-- --------------- ADD EMPLOYMENT AND ROLES COLUMNS ----------------- --}}
<script>
    function addSectionRow() {
        const template = document.getElementById('sectionname-row-template').content.cloneNode(true);
        document.getElementById('sectionname-rows').appendChild(template);
    }

    function removeSectionRow(button) {
        button.closest('.sectionname-row').remove();
    }

    function addSubsectionRow(button) {
        const template = document.getElementById('sub-sectionname-row').content.cloneNode(true);
        button.previousElementSibling.appendChild(template);
    }

    function removeSubsectionRow(button) {
        button.closest('.role-row').remove();
    }

    // Initialize with one employment row
    document.addEventListener('DOMContentLoaded', () => {
        addSectionRow();
    });
</script>