@extends('template.main-site')

@section('content')
<section class="pos-r o-hidden">
    <div class="container">
      <div class="row">
        <div class="col-xl-10 col-lg-10 col-md-10 ml-auto mr-auto">
          <div class="section-title">
            <h2 class="title text-center">Silahkan Pilih Desain Website Yang Sesuai Dengan Bisnis Anda</h2> 
          </div>
        </div>
      </div>
      <div class="row">
        @if(!empty($templates))
        <div class="col-12 list-category">
          <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item mx-auto">
                <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($template_category as $t)
            <li class="nav-item mx-xauto">
              <a class="nav-link nav-menu-theme font-weight-bold select-category text-dark" category="{{ $t->category }}" data-toggle="pill" href="#" role="tab" aria-controls="pills-profile" aria-selected="false">{{ strtoupper($t->category) }}</a>
            </li>
            @endforeach
          </ul>
        </div>
        @foreach($templates as $t)
        <div class="col-md-4 mb-4 list-template" template-id="{{ $t->id }}">
            <div class="item">
              <div class="post style-2">
                <div class="post-image">
                  <img class="img-fluid h-100 w-100" loading="lazy" src="{{ asset('media/' . $t->image) }}" alt="{{ \app\Http\Controllers\TemplateController::checkAltMedia($t->image) }}">
                </div>
                <div class="post-desc"> <a class="post-categories" href="{{ $t->link_demo }}" target="_blank">Demo</a>
                  <div class="post-title">
                    <h4><a href="{{ route('template.site.template-detail', ['slug' => $t->slug]) }}">{{ $t->name }}</a></h4>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
                <div class="col-12 text-center mt-3">
                    @if(isset($_GET['pid']) && $_GET['pid'])
                    <a href="{{ route('template.site.cart') }}?domain={{ $domain }}&theme={{ \Crypt::encrypt($t->id) }}&pid={{ $_GET['pid'] }}" class="btn btn-sm btn-theme">Choose</a>
                    @else
                    <a href="{{ route('template.site.order-pricing') }}?domain={{ $domain }}&theme={{ \Crypt::encrypt($t->id) }}" class="btn btn-sm btn-theme">Choose</a>
                    @endif
                </div>
            </div>
        </div>
        @endforeach
        @if($template_count > 9)
        <div class="col-12 text-center">
          <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>
@endsection

@section('js')
@if(isset($_GET['pid']) && $_GET['pid'])
<script>
  const pid = "{{ $_GET['pid'] }}"
</script>
@else
<script>
  const pid = null
</script>
@endif

<script>
const domain = "{{ $domain }}"   
$(document).ready(function() {
  $('body').on('click', '.btn-load-more', function() {
    let last_id = $('body').find('.list-template').last().attr('template-id')
    let category = $(this).attr('category')
    $.ajax({
      type: 'GET',
      url: "{{ route('template.site.load-more-template') }}",
      data: {
        _token: "{{ csrf_token() }}",
        last_id,
        category,
        domain,
        pid
      },
      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-template[template-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.site.template-by-category') }}",
      data: {
        _token: "{{ csrf_token() }}",
        category,
        domain,
        pid
      },
      success(response) {
        $('body').find('.list-template').remove()
        $('body').find('.btn-load-more').parent().remove()
        $(response).insertAfter('.list-category')
      }
    })
  })
})
</script>
@endsection