<?= $this->extend('App\Views\website\index') ?>
<?= $this->section('content') ?>
<div class="container">
<?= $this->include('App\Views\website\ads\main_top') ?>
<!-- Page Content !-->
<div class="row grey lighten-2">
    <div class="col s12 ybcrumbs">
        <small>
        <a href="<?= base_url(); ?>" class="breadcrumb">Home</a>
        <a href="<?= base_url('posts'); ?>" class="breadcrumb">Posts</a>
        <a href="<?= base_url('posts/'.$singleCat->master_category_alias); ?>" class="breadcrumb"><?= $singleCat->master_category; ?></a>
        <a href="<?= base_url('posts/'.$singleCat->master_category_alias.'/'.$singleCat->category_alias); ?>" class="breadcrumb"><?= $singleCat->category; ?></a>
        </small>
    </div>
</div><!-- Breadcrumb !-->
<div class="row">
    <div class="col l2 m2 side-stay hide-on-small-only">
        <?= $this->include('App\Views\website\home\sidebar') ?>
        <hr>
        <?= $this->include('App\Views\website\ads\sidebar_ad') ?>
    </div><!-- Menu col !-->
    <div class="col l7 m6 s12">
        <!-- preloader !-->
        <div id="preloader" class="preloader">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <!-- Preloader !-->
        <div id="posts-container">
            <!-- loading posts page !-->
            <?= $this->include('App\Views\website\home\main_category_posts') ?>
        </div>
        <div class="card z-depth-0">
            <div class="card-action center">
            <a id="post-button" class="red-text darken-3" href="<?= base_url('sub-posts/' . (count($posts))); ?>"><i class="material-icons" style="vertical-align: -6px;">autorenew</i> Load More</a>
            </div>
        </div><!-- load more btn !-->
    
    </div><!-- Main Content !-->
    <div class="col l3 m4 s12 side-stay grey lighten-4">
        <h5 class="card-title">Available Categories </h5>
        <div class="collection" style="border:0px !important;">
            <?php foreach($categories as $cat):?>
                <a href="<?= base_url('posts/'.$cat->master_category_alias.'/'.$cat->category_alias) ?>" class="collection-item grey lighten-4 " style="border:0px !important; border-bottom: 1px solid #ccc !important; padding: 5px 1px; font-size: 14px; "><?= $cat->category; ?></a>
            <?php endforeach; ?>
        </div><!-- Other Sub Categories in Main !-->
        <div>
            <?= $this->include('App\Views\website\ads\right_square') ?>
        </div>
        <div class="card z-depth-0 grey lighten-4">
            <div class="card-content">
                <h5 class="card-title">TAGS</h5>
                <p>For all your Tags with articles.</p>
                <?php foreach($tags as $tag):?>
                    <a href="<?= base_url('tags/tag/'.$tag->tag_alias);?>"><span class="badge teal lighten-1 white-text" style="margin: 3px;font-size: 11px;"><?= $tag->tag; ?></span></a> 
                <?php endforeach; ?>
            </div><!-- card content !-->
        </div><!-- TAGS card !-->
    </div><!-- More Content !-->
</div><!-- row !-->
<!-- END Page Content !-->
</div><!-- main container !-->

<!-- JS !-->
<script>
document.addEventListener("DOMContentLoaded", function() {
    var productContainer = document.getElementById("posts-container");
    var loadMoreButton = document.getElementById("post-button");
    var preloader = document.getElementById("preloader"); // preloader
    

    loadMoreButton.addEventListener("click", function(event) {
        event.preventDefault();
        var url = loadMoreButton.getAttribute("href");

        // Display the preloader before making the AJAX request
        preloader.style.display = "block";

        fetch(url)
        .then(response => response.text())
        .then(data => {
            productContainer.innerHTML += data;

            if (data.trim() === "") {
                loadMoreButton.style.display = "none";
            }

            // Hide the preloader after loading
            preloader.style.display = "none";
        })
        .catch(error => console.error('Error:', error));
    });
});
</script>
<?= $this->endSection() ?>