<?php
include_once 'header.php';

// Include database connection
require_once 'db_connection.php';
// Query to fetch blog data
$blogs_sql = "SELECT * FROM blog WHERE status = 1 ORDER BY publish_date DESC";
$blogs = $conn->query($blogs_sql);

// Function to truncate HTML content
function truncateHtml($text, $maxLength) 
{
    // Strip HTML tags to avoid breaking
    $plainText = strip_tags($text);

    // Truncate the text if it exceeds max length
    if (strlen($plainText) > $maxLength) {
        return substr($plainText, 0, $maxLength) . '...';
    }
    return $plainText;
}

// Close the database connection
$conn->close();
?>
<section
      class="u-align-left u-clearfix u-image u-shading u-section-1"
      id="sec-21c9"
      data-image-width="4488" 
      data-image-height="2504"
    >
      <div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
        <div
          class="u-align-left u-container-align-center-sm u-container-align-center-xs u-container-align-left-lg u-container-align-left-md u-container-align-left-xl u-container-style u-expanded-width-xs u-group u-shape-rectangle u-group-1"
          data-animation-name="customAnimationIn"
          data-animation-duration="1500"
          data-animation-delay="500"
        >
          <div
            class="u-container-layout u-valign-middle-lg u-valign-middle-md u-valign-middle-sm u-valign-middle-xs u-container-layout-1"
          >
            <h2
              class="u-align-center-sm u-align-center-xs u-align-left-lg u-align-left-md u-align-left-xl u-custom-font u-font-titillium-Web u-text u-text-1"
            >
              Artikel & Event
            </h2>
          </div>
        </div>
      </div>
    </section>
    <?php if ($blogs->num_rows > 0) : ?>
    <section
      class="u-align-center u-clearfix u-custom-color-5 u-section-2"
      id="sec-14a7"
    >
      <div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
        <!--blog--><!--blog_options_json--><!--{"type":"Recent","source":"","tags":"","count":""}--><!--/blog_options_json-->
        <div class="u-blog u-expanded-width u-blog-1" data-items-per-page="3">
          <div class="u-list-control"></div>
          <div class="u-repeater u-repeater-1">
            <?php while ($blog = $blogs->fetch_assoc()) : ?>
            <!--blog_post-->
            <div
              class="u-align-left u-blog-post u-container-style u-repeater-item u-video-cover u-white u-repeater-item-1"
            >
              <div
                class="u-container-layout u-similar-container u-valign-bottom-lg u-valign-bottom-xs u-container-layout-1"
              >
                <a class="u-post-header-link" href="https://www.indolok.id/blog-detail.php?slug=<?= strtolower($blog['alias']) ?>"
                  ><!--blog_post_image-->
                  <img
                    alt=""
                    class="u-blog-control u-expanded-width u-image u-image-default u-image-1"
                    src="https://www.indolok.id/cms/uploads/blog/<?= $blog['image1'] ?>"
                    data-image-width="4000"
                    data-image-height="3000"
                  /><!--/blog_post_image-->
                </a>
                <h4 class="u-blog-control u-custom-font u-text u-text-1">
                    <?= $blog['blog'] ?>
                </h4>
                <!--blog_post_content-->
                <div
                  class="u-blog-control u-custom-font u-post-content u-text u-text-2 fr-view"
                >
                    <?= truncateHtml($blog['description'], 150) ?>
                </div>
                <!--/blog_post_content--><!--blog_post_readmore-->
                <a
                  href="https://www.indolok.id/blog-detail.php?slug=<?= strtolower($blog['alias']) ?>"
                  class="u-blog-control u-border-none u-btn u-btn-round u-button-style u-custom-color-1 u-hover-palette-1-dark-1 u-radius-5 u-btn-2"
                  ><!--blog_post_readmore_content--><!--options_json--><!--{"content":"Selengkapnya","defaultValue":"Read More"}--><!--/options_json-->Selengkapnya<!--/blog_post_readmore_content--></a
                ><!--/blog_post_readmore-->
              </div>
            </div>
            <?php endwhile ?>  
          </div>
          <div class="u-list-control"></div>
        </div>
        <!--/blog-->
      </div>
    </section>
    <?php endif ?>
<?php include_once 'footer.php'; ?>