<?php 
$page_title = "Our Blog | Vertex Sphere";
$page_description = "Read the latest insights, updates, and expert perspectives from Vertex Sphere on web development, AI automation, SaaS, and digital growth.";
$schema_markup = '{
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  "name": "Vertex Sphere Blog"
}';

include('header.php'); 
include('blogs_data.php');

$search_query = isset($_GET['search']) ? trim($_GET['search']) : '';
$category_filter = isset($_GET['category']) ? trim($_GET['category']) : '';

// Filter the $blogs array
if ($search_query !== '' || $category_filter !== '') {
    $filtered_blogs = [];
    foreach ($blogs as $b) {
        $matches_search = true;
        if ($search_query !== '') {
            $search_lower = strtolower($search_query);
            $title_lower = strtolower($b['title']);
            $content_lower = strtolower($b['content_html']);
            if (strpos($title_lower, $search_lower) === false && strpos($content_lower, $search_lower) === false) {
                $matches_search = false;
            }
        }
        
        $matches_category = true;
        if ($category_filter !== '') {
            if (strtolower($b['category']) !== strtolower($category_filter)) {
                $matches_category = false;
            }
        }
        
        if ($matches_search && $matches_category) {
            $filtered_blogs[] = $b;
        }
    }
    $display_blogs = $filtered_blogs;
} else {
    $display_blogs = $blogs;
}


// Extract dynamic categories and their counts
$category_counts = [];
foreach ($blogs as $b) {
    $cat = $b['category'];
    if (!isset($category_counts[$cat])) {
        $category_counts[$cat] = 0;
    }
    $category_counts[$cat]++;
}

// Pagination Logic
$blogs_per_page = 8;
$total_blogs = count($display_blogs);
$total_pages = ceil($total_blogs / $blogs_per_page);
$current_page = isset($_GET['page']) && is_numeric($_GET['page']) ? (int)$_GET['page'] : 1;

if ($current_page < 1) $current_page = 1;
if ($current_page > $total_pages && $total_pages > 0) $current_page = $total_pages;

$offset = ($current_page - 1) * $blogs_per_page;
$paginated_blogs = array_slice($display_blogs, $offset, $blogs_per_page);
?>
<div id="smooth-wrapper">
   <div id="smooth-content">
      <!-- ==== main start ==== -->
      <main>
         <!-- ==== banner start ==== -->
         <section class="cmn-banner bg-img" data-background="assets/images/banner/cmn-banner-bg.png">
            <div class="container">
               <div class="row gaper align-items-center">
                  <div class="col-12 col-lg-5 col-xl-7">
                     <div class="text-center text-lg-start">
                        <h2 class="title title-anim">Our Blog</h2>
                        <nav aria-label="breadcrumb">
                           <ol class="breadcrumb">
                              <li class="breadcrumb-item">
                                 <a href="index.php">
                                    <i class="fa-solid fa-house"></i>
                                    Home
                                 </a>
                              </li>
                              <li class="breadcrumb-item active" aria-current="page">
                                 Blog
                              </li>
                           </ol>
                        </nav>
                     </div>
                  </div>
                  <div class="col-12 col-lg-7 col-xl-5">
                     <div class="text-center text-lg-start">
                        <p class="primary-text">Vertex Sphere pushes the boundaries of what’s possible with cutting-edge
                           AI automation and immersive 3D experiences.</p>
                     </div>
                  </div>
               </div>
            </div>
         </section>
         <!-- ==== / banner end ==== -->
         <!-- ==== blog section start ==== -->
         <section class="section blog-main fade-wrapper">
            <div class="container">
               <div class="row gaper">
                  <div class="col-12 col-lg-8">
                     <div class="blog-main__content">
                           <?php if(count($paginated_blogs) > 0): ?>
                           <?php foreach($paginated_blogs as $blog): ?>
                           <div class="blog-main__single fade-top">
                              <div class="meta">
                                 <div class="meta__left">
                                    <p>
                                       <strong>Written by :</strong> <?php echo htmlspecialchars($blog['author']); ?>
                                    </p>
                                    <span></span>
                                    <p><?php echo htmlspecialchars($blog['date']); ?></p>
                                 </div>
                                 <div class="meta__right">
                                    <a href="blog.php?category=<?php echo urlencode($blog['category']); ?>"><?php echo htmlspecialchars($blog['category']); ?></a>
                                 </div>
                              </div>
                              <div class="content">
                                 <h4 class="h4">
                                    <a href="blog/<?php echo htmlspecialchars($blog['slug']); ?>">
                                       <?php echo htmlspecialchars($blog['title']); ?>
                                    </a>
                                 </h4>
                                 <p style="margin-bottom: 20px;">
                                    <?php echo htmlspecialchars($blog['meta_description']); ?>
                                 </p>
                                 <div class="cta">
                                    <a href="blog/<?php echo htmlspecialchars($blog['slug']); ?>">
                                       <i class="fa-sharp fa-regular fa-arrow-right"></i>
                                    </a>
                                 </div>
                              </div>
                           </div>
                           <?php endforeach; ?>
                           <?php else: ?>
                           <div class="blog-main__single fade-top">
                              <div class="content text-center py-5">
                                 <h4 class="h4">No posts found</h4>
                                 <p>We couldn't find any articles matching your criteria.</p>
                                 <a href="blog.php" class="btn btn--secondary mt-4">View All Posts</a>
                              </div>
                           </div>
                           <?php endif; ?>
                           
                           <div class="pagination-wrapper">
                              <ul class="pagination">
                                 <?php 
                                 $qs = '';
                                 if($search_query) $qs .= '&search='.urlencode($search_query);
                                 if($category_filter) $qs .= '&category='.urlencode($category_filter);
                                 ?>
                                 <?php if($current_page > 1): ?>
                                     <li><a href="blog.php?page=<?php echo $current_page - 1; ?><?php echo $qs; ?>"><i class="fa-solid fa-arrow-left"></i></a></li>
                                 <?php endif; ?>
                                 
                                 <?php for($p = 1; $p <= $total_pages; $p++): ?>
                                     <li>
                                        <a href="blog.php?page=<?php echo $p; ?><?php echo $qs; ?>" class="<?php echo ($p == $current_page) ? 'active' : ''; ?>">
                                            <?php echo str_pad($p, 2, '0', STR_PAD_LEFT); ?>
                                        </a>
                                     </li>
                                 <?php endfor; ?>
                                 
                                 <?php if($current_page < $total_pages): ?>
                                     <li><a href="blog.php?page=<?php echo $current_page + 1; ?><?php echo $qs; ?>"><i class="fa-solid fa-arrow-right"></i></a></li>
                                 <?php endif; ?>
                              </ul>
                           </div>
                        </div>
                  </div>
                  <div class="col-12 col-lg-4">
                     <div class="blog-main__sidebar" style="position: sticky; top: 120px;">
                        <div class="widget ">
                           <div class="widget__head">
                              <h5 class="h5">Search</h5>
                           </div>
                           <div class="widget-search">
                               <form action="blog.php" method="get">
                                  <div class="form-group-input">
                                     <input type="search" name="search" id="blogSearch"
                                        placeholder="Search here. . ." value="<?php echo htmlspecialchars($search_query); ?>">
                                     <button type="submit">
                                        <i class="fa-solid fa-magnifying-glass"></i>
                                     </button>
                                  </div>
                               </form>
                            </div>
                        </div>
                        <div class="widget ">
                           <div class="widget__head">
                              <h5 class="h5">Categories</h5>
                           </div>
                           <div class="widget__list">
                               <ul>
                                  <?php foreach($category_counts as $cat_name => $count): ?>
                                  <li>
                                     <a href="blog.php?category=<?php echo urlencode($cat_name); ?>" <?php if($category_filter == $cat_name) echo 'style="color: var(--theme-color-1);"'; ?>>
                                        <?php echo htmlspecialchars($cat_name); ?> (<?php echo $count; ?>)
                                     </a>
                                  </li>
                                  <?php endforeach; ?>
                               </ul>
                            </div>
                        </div>
                        <div class="widget">
                           <div class="widget__head">
                              <h5 class="h5">Recent Posts</h5>
                           </div>
                           <div class="widget__latest">
                              <?php 
                              $recent_blogs = array_slice($blogs, 0, 4);
                              foreach($recent_blogs as $rb): ?>
                               <div class="latest-single ">
                                  <div class="latest-content">
                                     <p><?php echo htmlspecialchars($rb['date']); ?></p>
                                     <p>
                                        <a href="blog/<?php echo htmlspecialchars($rb['slug']); ?>">
                                           <?php echo htmlspecialchars($rb['title']); ?>
                                        </a>
                                     </p>
                                  </div>
                               </div>
                               <?php endforeach; ?>
                            </div>
                         </div>
                         <div class="widget ">
                           <div class="widget__head">
                              <h5 class="h5">Tags</h5>
                           </div>
                           <div class="widget__tags">
                               <style>
                                  .widget__tags ul { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
                                  .widget__tags ul li a { 
                                      display: inline-block; 
                                      padding: 8px 16px; 
                                      background: rgba(255, 255, 255, 0.04); 
                                      border: 1px solid rgba(255, 255, 255, 0.1); 
                                      color: #e0e0e0; 
                                      border-radius: 30px; 
                                      font-size: 13px !important; 
                                      transition: all 0.3s ease; 
                                      text-transform: capitalize;
                                  }
                                  .widget__tags ul li a:hover { 
                                      background: var(--theme-color-1) !important; 
                                      color: var(--white) !important; 
                                      border-color: var(--theme-color-1); 
                                  }
                               </style>
                               <ul>
                                  <li><a href="blog.php?search=AI">AI</a></li>
                                  <li><a href="blog.php?search=Development">Development</a></li>
                                  <li><a href="blog.php?search=SaaS">SaaS</a></li>
                                  <li><a href="blog.php?search=Design">Design</a></li>
                                  <li><a href="blog.php?search=App">App</a></li>
                                  <li><a href="blog.php?search=Web">Web</a></li>
                                  <li><a href="blog.php?search=Business">Business</a></li>
                                  <li><a href="blog.php?search=Automation">Automation</a></li>
                                  <li><a href="blog.php?search=USA">USA</a></li>
                               </ul>
                            </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </section>
         <!-- ==== blog section start ==== -->
      </main>
      <!-- ==== / main end ==== -->

<?php include('footer.php'); ?>
    </div>
</div>