<div class="content-wrapper">
    <div class="container-full">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="d-flex align-items-center">
                <div class="me-auto">
                    <h3 class="page-title">FAQ</h3>
                    <div class="d-inline-block align-items-center">
                        <nav>
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#"><i class="mdi mdi-home-outline"></i></a></li>
                                <li class="breadcrumb-item" aria-current="page">Dashboard</li>
                                <li class="breadcrumb-item active" aria-current="page">FAQ</li>
                            </ol>
                        </nav>
                    </div>
                </div>

            </div>
        </div>

        <!-- Main content -->
        <section class="content">

            <div class="row">

                <div class="col-12">
                    <!-- /.box -->
                    <div class="box">
                        <div class="box-body">
                            <!-- Tab panes -->

                            <!-- Categroy 1 -->
                            <div class="tab-pane animation-fade">
                                <div class="panel-group panel-group-simple panel-group-continuous" id="accordion2" aria-multiselectable="true" role="tablist">

                                    <?php
                                    $faq_content = [];
                                    $faq_heading = [];
                                    
                                    $this->db->where('category', 1);
                                    $all_faq = $this->db->get('faq_content')->result();

                                    foreach ($all_faq as $faq) {
                                        $faq_content[] = json_decode($faq->content);
                                        $faq_heading[] = json_decode($faq->heading);
                                    }

                                    $panel_count = 1; // Unique ID counter
                                    foreach ($faq_heading as $key => $headings) {
                                        foreach ($headings as $index => $heading) {
                                            $question_id = 'question-' . $panel_count;
                                            $answer_id = 'answer-' . $panel_count;
                                            $answer_text = isset($faq_content[$key][$index]) ? $faq_content[$key][$index] : 'No answer available.';
                                    ?>
                                            <div class="panel">
                                                <div class="panel-heading" id="<?= $question_id; ?>" role="tab">
                                                    <a class="panel-title" aria-controls="<?= $answer_id; ?>" aria-expanded="false" data-bs-toggle="collapse" href="#<?= $answer_id; ?>" data-parent="#accordion2">
                                                        <?= $heading; ?>
                                                    </a>
                                                </div>
                                                <div class="panel-collapse collapse" id="<?= $answer_id; ?>" aria-labelledby="<?= $question_id; ?>" role="tabpanel" data-bs-parent="#accordion2">
                                                    <div class="panel-body">
                                                        <?= $answer_text; ?>
                                                    </div>
                                                </div>
                                            </div>
                                    <?php
                                            $panel_count++;
                                        }
                                    }
                                    ?>
                                </div>
                            </div>

                            <!-- End Categroy 1 -->
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
        </section>
    </div>
</div>