Untitled

const formatDates = (dateString) => {
    if (dateString.trim() === '') {
        return 'Not applicable';
    }
    const dateObj = new Date(dateString);
    if (dateObj) {
        const month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
        const year = dateObj.getFullYear().toString();
        return `${month}/${year}`;
    }

    return 'Not applicable';
};

const getFullCareerName = (extCareer) => {
    return extCareer === 'UGRD' ? 'Undergraduate' : 'Graduate';
};

const getDegreeStatusName = (degreeStatus) => {
    return degreeStatus === 'C' ? 'Yes' : 'No';
};

const getFormattedGPAScale = (gpaType) => {
    switch (gpaType) {
        case '3PT':
            return '3.00';
        case '4PT':
            return '4.00';
        case '5PT':
            return '5.00';
        case 'NGPA':
            return 'No GPA';
        default:
            return gpaType;
    }
};

const summaryDeleteEvents = () => {
    // Close the popup
    $('.eduSummaryDetailsPanel').on('click', '.popup-close, .cancel-button, .modal-overlay', () => {
        $('.confirmation-popup, .modal-overlay').remove();
    });

    // Handle the delete button click
    $('.eduSummaryDetailsPanel').on('click', '.delete-confirm-button', (e) => {
        const $this = $(e.target);
        const extOrgId = $this.data('ext-org-id');
        const schoolName = $this.data('school');
        const updatedEducationData = filteredEducationData.filter((item) => item.extOrgId !== extOrgId && item.schoolName !== schoolName);
        Cookies.set('educationData', JSON.stringify(updatedEducationData));
        $(this).closest('.accordion-item').remove();
        if (updatedEducationData.length === 0) {
            eduSummaryContinue.enabled = false;
            addSchool.enabled = true;
        }
        $('.confirmation-popup, .modal-overlay').remove();
    });

    $('.eduSummaryDetailsPanel').on('click', '.delete-button', (e) => {
        const $this = $(e.target);
        const extOrgId = $this.data('ext-org-id');
        const schoolName = $this.data('school');
        // popup html
        const popupHtml = `
       <div class="modal-overlay"></div>
        <div class="confirmation-popup">
            <span class="popup-close">&times;</span>
            <div class="popup-content">
                <p>Are you sure you want to delete this school?</p>
                <button class="cancel-button">Cancel</button>
                <button class="delete-confirm-button" data-ext-org-id="${extOrgId} data-school-name="${schoolName}">Delete</button>
            </div>
        </div>`;
        $('.confirmation-popup, .modal-overlay').remove();
        $('.eduSummaryDetailsPanel').append(popupHtml);
    });
};

const summaryAccordionEvent = () => {
    $('.eduSummaryDetailsPanel').on('click', '.accordion-item .view-more-button', (e) => {
        const $this = $(e.target);
        const content = $this
            .closest('.accordion-item')
            .find('.accordion-content');
        const degreeName = $this.closest('.accordion-item').find('.degree-name');
        const isDesktopView = window.innerWidth > 768;
        if (content.height() === 0) {
            degreeName.hide();
            if (isDesktopView) {
                content.css('max-height', '170px');
            } else {
                content.css('max-height', '340px');
            }
            $this.html('View Less  <b>-</b>');
        } else {
            degreeName.show();
            content.css('max-height', '0px');
            $this.html('View More <b>+</b>');
        }
    });
}

const addCollegeSummaryPanel = () => {
    const accordions = guideBridge.resolveNode('eduSummaryDetailsPanel');
    const eduSummaryContinue = guideBridge.resolveNode('eduSummaryContinue');
    const educationData = JSON.parse(Cookies.get('educationData'));
    const addSchool = guideBridge.resolveNode('addSchool');
    let filteredEducationData = educationData.filter((item) => item.schoolType !== 'HS');
    if (!accordions) return;
    $('.accordion-container').html(`<div class="accordion">
      ${filteredEducationData.map((sectionData) => {
        const {
            extOrgId,
            schoolName,
            descr,
            fromDate,
            gpa,
            degreeStatus,
            extCareer,
            toDate,
            gpaType,
            degreeDate
        } = sectionData;
        const formattedGPA = gpa === 0 ? 'No GPA' : gpa;
        return `
            <div class="accordion-item" data-ext-org-id="${extOrgId}" data-school="${schoolName}">
              <div class="accordion-title">
                <span>${schoolName}</span>
                <button class="delete-button desktop-section" data-ext-org-id="${extOrgId}"  data-school="${schoolName}">Delete</button>
              </div>
              <div class="degree-name"><span class="key-names">Degree: </span><span class='key-values'>${descr}</span></div>
              <div class="accordion-content">
                <div class="section1">
                    <div><p class='key-names'>Degree</p><p class='key-values'>: ${descr}</p></div>
                    <div><p class='key-names'>Start Date</p><p class='key-values'>: ${formatDates(fromDate)}</p></div>
                    <div><p class='key-names'>GPA</p><p class='key-values'>: ${formattedGPA}</p></div>
                    <div><p class='key-names'>Graduated</p><p class='key-values'>: ${getDegreeStatusName(degreeStatus)}</p></div>
                </div>
                <div class="section2">
                    <div><p class='key-names'>Degree Level</p><p class='key-values'>: ${getFullCareerName(extCareer)}</p></div>
                    <div><p class='key-names'>End Date</p><p class='key-values'>: ${formatDates(toDate)}</p></div>
                    <div><p class='key-names'>GPA Scale</p><p class='key-values'>: ${getFormattedGPAScale(gpaType)}</p></div>
                    <div><p class='key-names'>Graduation Date</p><p class='key-values'>: ${formatDates(degreeDate)}</p></div>
                </div>
              </div>
              <div class ='footer-content'>
                <div class ='footer-btn'>
                    <button class="delete-button mobile-section" data-ext-org-id="${extOrgId}"  data-school="${schoolName}">Delete</button>
                </div>
                <div class="view-more-button">View More <b>+</b></i></div>
              </div>
            </div>
          `;
    }).join('')}
      </div>
    `);
    addSchool.enabled = filteredEducationData.length <= 8;
};