@extends('template.main-android')

@section('content')
<div class="page-content">
    <section>
      <div class="container">
        <div class="row">
          @if(!empty($projects))
          <div class="col-12 list-category">
            <div>
              <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist" style="width: fit-content; margin:auto;">
                <li class="nav-item">
                    <a class="nav-link active nav-menu-theme menu-theme-active font-weight-bold select-category" category="all" data-toggle="pill" href="#" role="tab" aria-controls="pills-home" aria-selected="true">ALL</a>
                </li>
                @foreach($project_category as $c)
                <li class="nav-item">
                  <a class="nav-link nav-menu-theme font-weight-bold select-category text-dark" category="{{ $c->category }}" data-toggle="pill" href="#" role="tab" aria-controls="pills-profile" aria-selected="false">{{ strtoupper($c->category) }}</a>
                </li>
                @endforeach
              </ul>
            </div>
          </div>
          @foreach($projects as $p)
          <div class="col-lg-4 col-md-4 col-sm-6 list-project mb-3" project-id="{{ $p->id }}">
            <div class="post">
              <div class="post-image">
                <img class="img-fluid w-100" loading="lazy" src="{{ $p->image ? asset('media/' . $p->image) : asset('soft/images/blog/01.jpg') }}" alt="{{ \App\Http\Controllers\TemplateController::checkALtMedia($p->image) }}" style="height:175px; !important !important">
              </div>
              <div class="post-desc">
                <div class="post-title">
                  <h4><a href="{{ route('template.android.project-detail', ['slug' => $p->slug]) }}">{{ $p->title }}</a></h4>
                </div>
                <p>{{ $p->description }}</p>
                <a class="icon-btn mt-4" href="{{ route('template.android.project-detail', ['slug' => $p->slug]) }}"> <i class="la la-angle-right"></i>
                </a>
              </div>
            </div>
          </div>
          @endforeach
          @if($project_count > 9)
          <div class="col-12 text-center mt-5">
            <button class="btn btn-theme btn-circle btn-load-more" category="all" type="button" data-text="Load More">
              <span>L</span>
              <span>o</span>
              <span>a</span>
              <span>d</span>
              <span> </span>
              <span>M</span>
              <span>o</span>
              <span>r</span>
              <span>e</span>
            </button>
          </div>
          @endif
          @endif
        </div>
      </div>
    </section>
</div>
@endsection

@section('js')
<script>
$(document).ready(function() {
    $('body').on('click', '.btn-load-more', function() {
        let last_id = $('body').find('.list-project').last().attr('project-id')
        let category = $(this).attr('category')
        $.ajax({
          type: 'GET',
          url: "{{ route('template.android.load-more-project') }}",
          data: {
              _token: "{{ csrf_token() }}",
              last_id,
              category
          },
          beforeSend() {
              $('body').find('.btn-load-more').attr('data-text', 'Loading..')
              $('body').find('.btn-load-more').html(`
              <span>L</span>
              <span>o</span>
              <span>a</span>
              <span>d</span>
              <span>i</span>
              <span>n</span>
              <span>g</span>
              <span>.</span>
              <span>.</span>
              `)
          },
          success(response) {
              if(response) {
                  $('body').find('.btn-load-more').attr('data-text', 'Load More')
                  $('body').find('.btn-load-more').html(`
                      <span>L</span>
                      <span>o</span>
                      <span>a</span>
                      <span>d</span>
                      <span> </span>
                      <span>M</span>
                      <span>o</span>
                      <span>r</span>
                      <span>e</span>
                  `)

                  $(response).insertAfter('.list-project[project-id="' + last_id + '"]')
              } else {
                  $('body').find('.btn-load-more').remove()
              }
          }
        })
    })

    $('body').on('click', '.select-category', function() {
      let category = $(this).attr('category');
      $('body').find('.select-category').remove('text-dark')
      $('body').find('.select-category').each(function(e) {
        $(this).addClass('text-dark')
      })
      $(this).removeClass('text-dark')
      $.ajax({
        type: 'GET',
        url: "{{ route('template.android.project-by-category') }}",
        data: {
          _token: "{{ csrf_token() }}",
          category
        },
        success(response) {
          $('body').find('.list-project').remove()
          $('body').find('.btn-load-more').parent().remove()
          $(response).insertAfter('.list-category')
        }
      })
    })
})
</script>
@endsection