<?php
$tt_page_info = array(
  'Page_Info' =>   array(
    'Title' => 'ওয়েব স্টোর ',
    'Description' =>'',
    'Keyword' => '',
  ),
  'Social_og' => array(
    'Image' => '',
    'Type' => 'website',
    'URL' => "photo-stories/",
  ),
);

require_once('./header.php'); // Include Footer
?>
<section class="tt-gray py-4">
  <div class="container">
      <div class="tt-white p-md-3 p-2">
        <div>
            <h4 class="m-0">ওয়েব স্টোরি </h4>
        </div>
      </div>
      <div class="row g-3">

        <div class="col-md-12">
              <?php

              $the_item_post = showAllttdata('mahamudfutureit_photostories', "WHERE  story_status = 'Published' AND story_date <= '$the_time' ORDER BY story_date DESC LIMIT 12");
              if (!empty($the_item_post)) {
                $count_the_item_post = 1;
                echo '<div class="row g-3  mt-3 " id="news-container">';
                foreach ($the_item_post as $the_story) {
                  $story_items = json_decode($the_story['story_items'],true);
                  ?>
                  <div class="col-md-2 col-6  position-relative">
                    <a href="<?php echo $site_domain."photo-stories/".$the_story['story_url'] ?>/" class="story-single-block" style="background-image:url(<?php echo $story_items[1]['storyimage'] ?>)">
                      <h3 class="news-title-4"><?php echo $the_story['story_title'] ?></h3>
                      <span class="photo-stories-icon"><i class="bi bi-files-alt"></i></span>
                    </a>
                  </div>
                  <?php
                }
                echo '</div>';
                ?>
               <div class="row mb-2">
                    <div id="loader" class="col-md-12 text-center py-3" style="display: none;"><img src="<?php echo $site_domain ?>assets/image/loading-post.gif" style=" height:40px;"></div>
                    <div class="col-12 text-center py-3">
                        <button class="btn btn-more-details tt-white tt-text" id="load-more-button"> আরো দেখুন  </button>
                    </div>
               </div>
                <?php
              }else {
                ?>
                <div class="row my-3">
                  <div class="col-12">
                    <?php echo  noPost(); ?>
                  </div>
                </div>
                <?php
              }
           ?>
        </div>
      </div>
  </div>
</section>
<script>
let page=2;
var data_type="ttstp";
data_id="";
let isLoading=!1;

function loadMoreNews() {
    if (isLoading) {
        return;
    }

    isLoading = true;
    $('#loader').show();

    $.ajax({
        url: '<?php echo $site_domain ?>ajax_master/load-post/',
        type: 'POST',
        data: {
            page: page ,
            data_id : data_id,
            data_type :data_type,

            },
        success: function(data) {
            const newsContainer = $('#news-container');
            newsContainer.append(data);

            page++;
            isLoading = false;
            $('#loader').hide();
            lazyLoadImages();
        },
        error: function(error) {
            isLoading = false;
            $('#loader').hide();
        }
    });
}
$('#load-more-button').click(function() {
    loadMoreNews();
});

</script>
<?php
require_once('./footer.php'); // Include Footer
?>
