{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.featured %}

<main class="main-page-container" style="padding-bottom: 60px;">
    <section class="background-light section-padding" style="border-bottom: 1px #E3E4E5 solid">
        <div class="heading">
            FAQ for Drivers
        </div>
    </section>
    <div class="expand-all">
        <div class="expand-all-expand" onclick="showAllAnswers()">
            Expand All
            <i class="fal fa-plus expand-all-icon"></i>
        </div>
        <div class="expand-all-collapse np-hidden" onclick="hideAllAnswers()">
            Collapse All
            <i class="fal fa-minus expand-all-icon"></i>
        </div>
    </div>
    <section class="background-light section-padding np-hidden" id="faq-section">
        {{ custom_page.content }}
    </section>
</main>

<style>
    .expand-all {
        padding: 16px 16px 0 16px;
        text-align: end;
        color: #216CFF;
        font-weight: bold;
        font-size: 14px;
    }

    .expand-all i {
        margin-left: 10px;
    }

    .faq-item {
        cursor: pointer;
        border-bottom: 1px #E3E4E5 solid;
        padding: 16px 0;
    }

    .faq-item:first-child {
        border-top: 1px #E3E4E5 solid;
    }

    .faq-question-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 50px;
    }

    .faq-item-open .faq-plus-icon {
        display: none;
    }

    .faq-item .faq-minus-icon {
        display: none;
    }

    .faq-item-open .faq-minus-icon {
        display: block;
    }

    .faq-plus-icon, .faq-minus-icon {
    }

    .faq-item-open .faq-question {
        font-weight: bold;
    }

    .faq-answer {
        padding-top: 10px;
        display: none;
        width: 80%;
    }

    .faq-item.faq-item-open .faq-answer{
        display: block;
    }

    @media (max-width: 768px) {
        .faq-item {
            padding: 16px 16px 0 16px;
        }

        .faq-question-wrapper {
            gap: 20px;
        }

        .faq-answer {
            width: 100%;
        }
    }
</style>

<script>
    function toggleAnswer(faqItem) {
        faqItem.classList.toggle('faq-item-open');
        let faqItems = document.querySelectorAll('.faq-item').length;
        let faqItemsOpen = document.querySelectorAll('.faq-item-open').length;
        if (faqItems === faqItemsOpen) {
            document.querySelector('.expand-all-expand').classList.add('np-hidden');
            document.querySelector('.expand-all-collapse').classList.remove('np-hidden');
        } else {
            document.querySelector('.expand-all-expand').classList.remove('np-hidden');
            document.querySelector('.expand-all-collapse').classList.add('np-hidden');
        }
    }

    function showAllAnswers() {
        document.querySelectorAll('.faq-item').forEach(
            faqItem => {
                faqItem.classList.add('faq-item-open');
            }
        );
        document.querySelector('.expand-all-expand').classList.add('np-hidden');
        document.querySelector('.expand-all-collapse').classList.remove('np-hidden');
    }

    function hideAllAnswers() {
        document.querySelectorAll('.faq-item').forEach(
            faqItem => {
                faqItem.classList.remove('faq-item-open');
            }
        );
        document.querySelector('.expand-all-expand').classList.remove('np-hidden');
        document.querySelector('.expand-all-collapse').classList.add('np-hidden');
    }

    window.addEventListener('load', function() {
        const faqSection = document.querySelector('#faq-section');
        faqSection.querySelectorAll('table').forEach(
            faqTable => {
                let faqTableHTML = '<div class="faq-table">';
                faqTable.querySelectorAll('tr').forEach(
                    faqItem => {
                        let question = faqItem.querySelectorAll('td')[0].innerText.trim();
                        let answer = faqItem.querySelectorAll('td')[1].innerText.trim();
                        faqTableHTML += `<div class="faq-item" onclick="toggleAnswer(this)">
                                <div class="faq-question-wrapper">
                                    <div class="faq-question">
                                        ${question}
                                    </div>
                                    <i class="fal fa-plus faq-plus-icon"></i>
                                    <i class="fal fa-minus faq-minus-icon"></i>
                                </div>

                                <div class="faq-answer">
                                    ${answer}
                                </div>
                            </div>`;
                    }
                );
                faqTable.outerHTML = faqTableHTML + '</div>';
            }
        );
        faqSection.classList.remove('np-hidden');
    });

</script>