<?php
require_once __DIR__ . '/config.php';

$pagename = 'Frequently Asked Questions';

$db   = getDB();
$stmt = $db->prepare('SELECT question, answer FROM lake.faq');
$stmt->execute();
$faqs = $stmt->fetchAll();

include __DIR__ . '/header.php';
?>
<div class="section mt-3" style="padding: 80px 0;">
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-md-7 text-center">
                <div class="heading-block border-bottom-0 mb-4">
                    <h2 class="mb-4 text-transform-none">Frequently Asked Questions</h2>
                </div>
                <div class="svg-line mb-4">
                    <img src="demos/nonprofit/images/divider-1.svg" alt="svg divider" height="20">
                </div>
                <div style="text-align:left">
                    <script src="/js/jquery.js"></script>
                    <style>
                    .faq-item {
                        width: 100%;
                        padding: 4px;
                        box-sizing: border-box;
                        border: 1px solid black;
                        margin-bottom: 10px;
                    }
                    .question { cursor: pointer; font-weight: bold; }
                    .answer { display: none; margin-top: 5px; }
                    </style>

                    <?php if (count($faqs) <= 1): ?>
                        Coming Soon
                    <?php else: ?>
                    <div class="faq-container">
                        <?php foreach ($faqs as $faq): ?>
                        <div class="faq-item">
                            <div class="question"><?= htmlspecialchars($faq->question) ?> +</div>
                            <div class="answer"><?= $faq->answer ?></div>
                        </div><br>
                        <?php endforeach; ?>
                    </div>
                    <?php endif; ?>

                    <script>
                    $(document).ready(function() {
                        $('.question').click(function() {
                            $(this).siblings('.answer').slideToggle();
                        });
                    });
                    </script>
                </div>
                <?php if (!empty($getUser) && $getUser->accesslevel >= 10): ?>
                    <a href="/admin/faq.php">Edit Page</a>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>
</div>
</section><!-- #content end -->
<?php include __DIR__ . '/footer.php'; ?>