<?php
require_once('../config.php');
if (isset($_POST['mediaType'])) {

  $media_type = $_POST['mediaType'];
  $media_target_field =  $_POST['target'];

  if ($media_type == 'all' || $media_type == '') {
    $custom_condition = "";
  }else {
    $custom_condition = "WHERE MediaType = '$media_type'";
  }
  $media_library = showAllttdata('tt_media', $custom_condition .'ORDER BY  MediaId  DESC LIMIT 24');
  if (!empty($media_library)){
    echo "<div class='row' id='MoreGetPost'>";
    foreach ($media_library as $the_media) {
      ?>
      <div class="col-4 col-sm-4 col-md-3 col-lg-2  mb-2">
        <div class="attachment-preview clickableText" data-bs-dismiss="modal"  data-target="<?php echo $media_target_field ?>" data-url="<?php echo $the_media['MediaURL'] ?>">
          <div class="thumbnail">
            <?php
            $tt_file_type = isImage($the_media['MediaName']);
            if ($tt_file_type == 'image') {
              ?>
              <div class="centered">
                <img src="<?php echo $the_media['MediaURL'] ?>" alt="<?php echo $the_media['MediaName'] ?>">
              </div>
              <?php
            }else {
              ?>
              <div class="text-center">
                <span class="p-1 mb-2 bg-primary text-white d-block"><i class="fs-6 ri-file-warning-line"></i></span>
                <span class="fs-6"><?php echo $the_media['MediaName'] ?></span>
              </div>
              <?php
            }
            ?>
          </div>
        </div>
      </div>
       <?php
    }
    ?>
      </div>
      <div class="col-12 text-center mt-2">
        <div id="loaderMore" class="col-md-12 text-center py-4" style="display: none;"><img src="assets/img/loading.gif" style=" height:40px;"></div>
        <button data-target="<?php echo $media_target_field ?>" data-media_type="<?php echo $media_type ?>" id="loadMoreBtnTTAdvanceNews" class="btn btn-primary btn-sm mb-2" type="button">Load More</button>
      </div>
      <script>
      $(document).ready(function() {
          var page = 3;
          var data_type = 'select_media';

          var ttmore_target = $('#loadMoreBtnTTAdvanceNews').data('target');
          var ttmore_mediaType = $('#loadMoreBtnTTAdvanceNews').data('media_type');

          $('#loadMoreBtnTTAdvanceNews').on('click', function() {
            $('#loaderMore').show();
              // Make an AJAX request when the button is clicked
              $.ajax({
                  url: 'inc/fetch-media.php',
                  type: 'POST',
                  data: {
                    page: page,
                    data_type :data_type,
                    ttmore_target : ttmore_target,
                    ttmore_mediaType :ttmore_mediaType
                  },
                  dataType: 'html',
                  success: function(data) {
                      // Append the fetched data to the media container
                      $('#loaderMore').hide();
                      $('#MoreGetPost').append(data);

                      page++; // Increment the page for the next request
                  },
                  error: function() {
                      alert('Error loading more content.');
                  }
              });
          });
      });
      </script>
      <script type="text/javascript">
      $(document).ready(function() {
          $('.clickableText').on('click', function() {
              var urlValue = $(this).data('url');
              var targetInputId = $(this).data('target');
              $(targetInputId).val(urlValue);
              var Preview_Image_Div = targetInputId+'_Preview';
              $(Preview_Image_Div).attr('src', urlValue)
          });
      });
      </script>
    <?php
  }else {
    ?>
    <div class='row' id='MoreGetPost'>
      <div class="col-12">
          <p class="m-0 text-muted  rounded-3 p-3 mb-2 text-center bg-white">No Media   Found !</p>
      </div>
    </div>
    <?php
  }

}
?>
