const personalInformation = document.getElementById('per_info');
const academicQualification =  document.getElementById('aca_qua');
const about = document.getElementById('about');
const detailInfoDiv = document.getElementById('sms-teacher-info-details');

personalInformation.addEventListener('click', function(){
    personalInformation.classList.add('sms-teacher-info-btn-active');
    academicQualification.classList.remove('sms-teacher-info-btn-active');
    about.classList.remove('sms-teacher-info-btn-active');

    detailInfoDiv.innerHTML = `
    <table class="table table-striped">
        <tbody>
            <tr>
                <td>Name</td>
                <td>${teacher_name}</td>
            </tr>
            <tr>

                <td>Employee Id</td>
                <td>${teacher_employee_id}</td>
            </tr>
            <tr>
                <td>Designation</td>
                <td>${teacher_designation}</td>
            </tr>
            <tr>
                <td>Joining Date</td>
                <td>${teacher_joining_date}</td>
            </tr>
            <tr>
                <td>Teaching Subject</td>
                <td>${teacher_teaching_subject}</td>
            </tr>
            <tr>
                <td>Address</td>
                <td>${teacher_address}</td>
            </tr>
            <tr>
                <td>Phone</td>
                <td>${teacher_phone}</td>
            </tr>
            <tr>
                <td>Email</td>
                <td>${teacher_email}</td>
            </tr>
        </tbody>
    </table>`;
})

academicQualification.addEventListener('click', function(){
    academicQualification.classList.add('sms-teacher-info-btn-active');
    personalInformation.classList.remove('sms-teacher-info-btn-active');
    about.classList.remove('sms-teacher-info-btn-active');

    detailInfoDiv.innerHTML = `${teacher_academic_qualification}`;
})

about.addEventListener('click', function(){
    about.classList.add('sms-teacher-info-btn-active');
    personalInformation.classList.remove('sms-teacher-info-btn-active');
    academicQualification.classList.remove('sms-teacher-info-btn-active');

    detailInfoDiv.innerHTML = `${teacher_about}`;
})