<?php $this->load->view('includes/head') ?>
<?php $this->load->view('includes/topbar') ?>
<?php $this->load->view('includes/header') ?>



<div class="container-fluid home-section">
    <div class="home-slider py-3">
        <div class="container-fluid px-lg-5">
            <div class="row">
                <!-- Sidebar -->
                <div class="col-lg-2">
                    <div class="card">
                        <div class="card-header bg-danger">
                            <h5 class="text-white bold my-2 text-center">Editions</h5>
                        </div>
                        <div class="card-body p-0 border border-warning">
                            <div id="file_content">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item bold">
                                        <a title="Jan 2024" href="#" onclick="showEdition('jan2024')">JAN 2024</a>
                                    </li>
                                    <li class="list-group-item bold">
                                        <a title="Apr 2024" href="#" onclick="showEdition('apr2024')">APR 2024</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Content Area -->
                <div class="col-lg-10">
                    <!-- JAN 2024 Edition -->
                    <div class="edition-content" id="jan2024">
                        <div class="card-header bg-danger mb-2">
                            <h5 class="text-white bold my-2 text-center">Siddha Prabha JAN 2024</h5>
                        </div>
                        <div class="card">
                            <div style="position:relative;padding-top:max(60%,324px);width:100%;height:0;">
                                <iframe style="position:absolute;border:none;width:100%;height:100%;left:0;top:0;"
                                    src="https://online.fliphtml5.com/zjuhe/yrtq/#p=1" seamless="seamless"
                                    scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true">
                                </iframe>
                            </div>
                            <!-- <p class="text-center p-3">
                                If you have any trouble in opening the PDF, please download and view <br>
                                <a class="btn btn-danger" href="pdf/Siddha-Prabha-JAN-2024.pdf">Download the PDF</a>
                            </p> -->
                        </div>
                    </div>

                    <!-- APR 2024 Edition -->
                    <div class="edition-content" id="apr2024" style="display: none;">
                        <div class="card-header bg-danger mb-2">
                            <h5 class="text-white bold my-2 text-center">Siddha Prabha APR 2024</h5>
                        </div>
                        <div class="card">
                            <div style="position:relative;padding-top:max(60%,324px);width:100%;height:0;">
                                <iframe style="position:absolute;border:none;width:100%;height:100%;left:0;top:0;"
                                    src="https://online.fliphtml5.com/zjuhe/vrga/#p=1" seamless="seamless"
                                    scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true">
                                </iframe>
                            </div>
                            <!-- <p class="text-center p-3">
                                If you have any trouble in opening the PDF, please download and view <br>
                                <a class="btn btn-danger" href="pdf/Siddha_Prabha_v2.1_comp.pdf">Download the PDF</a>
                            </p> -->
                        </div>
                    </div>

                </div> <!-- col-lg-10 -->
            </div> <!-- row -->
        </div> <!-- container-fluid px-lg-5 -->
    </div> <!-- home-slider -->
</div> <!-- container-fluid home-section -->

<script>
    function showEdition(edition) {
        document.getElementById("jan2024").style.display = (edition === 'jan2024') ? "block" : "none";
        document.getElementById("apr2024").style.display = (edition === 'apr2024') ? "block" : "none";
    }
</script>







<?php $this->load->view('includes/footer') ?>
<?php $this->load->view('includes/script') ?>