@extends('layouts.appUi')

@section('title') บทความ @endsection

@section('header')
  <div class="appHeader">
    <div class="left">
      <a href="javascript:;" onclick="goBack()" class="headerButton goBack">
        <ion-icon name="chevron-back-outline"></ion-icon>
      </a>
    </div>
    <div class="pageTitle">วิธีเล่น</div>
    <div class="right">
      <a href="#" class="headerButton toggle-searchbox">
          <ion-icon name="search-outline" role="img" class="md hydrated" aria-label="search outline"></ion-icon>
      </a>
    </div>
  </div>
@endsection

@section('customStyle')
  <style>
    img {
      max-width: 100%;
    }

    .article-list:empty::before {
      content: 'ไม่มีข้อมูล';
      display: block;
      padding: 15px 30px;
      text-align: center;
      flex-basis: 100%;
    }

  </style>
@endsection

@section('content')
  <div id="howtoplay-section" class="section mt-4 mb-3">
    {{-- <div class="section-heading padding">
      <h2 class="title">บทความ</h2>
      <!-- <a href="javascript:void(0)" class="link">View All</a> -->
    </div> --}}

    <div class="article-list row g-2 g-sm-3"></div>
    <div class="load-more-container mt-3"></div>
  </div>
@endsection

@section('script')
  <script>
    let fetchAmount = 10;
    const currentOffset = {
      // article: 0,
      // news: 0,
      howtoplay: 0,
    };

    const createLoadMoreBtn = target => {
      const $loadMoreBtn = document.createElement('button');
      $loadMoreBtn.textContent = 'โหลดเพิ่ม';
      $loadMoreBtn.className = 'btn btn-block btn-primary btn-lg';
      $loadMoreBtn.onclick = async (e) => {
        const fetchResult = await fetchArticle(target);
        createArticles(target, fetchResult);
      }
      return $loadMoreBtn;
    }

    const fetchArticle = async target => {
      const query = new URLSearchParams({
        type: target,
        offset: currentOffset[target],
        limit: fetchAmount,
      });
      const res = await fetchData(`{{ route('api.front.getArticles') }}?${query.toString()}`, 'GET')
      const data = res.json();
      return data;
    }

    const createArticles = async (target, fetchResult) => {
      try {
        console.log(target);
        if (!fetchResult.success) throw fetchResult;
        console.log(fetchResult)
        currentOffset[target] = fetchResult.offset;

        const $loadMoreContainer = document.getElementById(`${target}-section`).querySelector('.load-more-container');
        $loadMoreContainer.textContent = '';

        if (!fetchResult.data.length) {
          const $noMoreData = document.createElement('p');
          $noMoreData.className = 'col-12 text-center lead text-black-50 my-4';
          $noMoreData.textContent = 'ไม่มีข้อมูลเพิ่มเติม';
          document.getElementById(`${target}-section`).querySelector('.article-list').appendChild($noMoreData);
          return;
        }

        for (const i in fetchResult.data) {
          const $articleCol = createArticleEl(fetchResult.data[i]);
          document.getElementById(`${target}-section`).querySelector('.article-list').appendChild($articleCol);
        }

        $loadMoreContainer.appendChild(createLoadMoreBtn(target));

      } catch (e) {
        console.error(e)
        return errorSwal({
          text: e.text
        });
      }
    }

    const createArticleEl = data => {
      const $col = document.createElement('div');
      const $a = document.createElement('a');
      const $blogCard = document.createElement('div');
      const $img = document.createElement('img');
      const $text = document.createElement('div');
      const $title = document.createElement('h4');

      $col.className = 'col-6';
      $a.href = data.url;
      $blogCard.className = 'blog-card';
      $img.className = 'images w-100';
      $text.className = 'text';
      $title.className = 'title';

      $text.appendChild($title);
      $blogCard.appendChild($img);
      $blogCard.appendChild($text);
      $a.appendChild($blogCard);
      $col.appendChild($a);

      $title.textContent = data.title;
      $img.src = data.picture;

      return $col;
    }

    const init = async (target) => {
      const fetchResult = await fetchArticle(target);
      createArticles(target, fetchResult);
    }

    document.addEventListener('DOMContentLoaded', () => {
      // init('article');
      // init('news');
      init('howtoplay');
    });
  </script>
@endsection