@extends('layouts.app')

@section('content')
<section class="app">
    <!-- 资讯分类 -->
    <div class="newItem">
        <span class="newItem-nav @if(empty($category_id)) newItem-active  @endif" data-href="{{ route('articles.index',['category_id'=>'']) }}">全部</span>
        @foreach ($categorys as $category)
        <span class="newItem-nav @if($category_id==$category->id) newItem-active  @endif" data-href="{{ route('articles.index',['category_id'=>$category->id]) }}" >{{ $category->title }}</span>
        @endforeach
    </div>
    <!-- banner -->
    <div class="banner newBanner">
        <div class="swiper-container swiper-banner newBanner-swiper">
            <div class="swiper-wrapper wrapper-banner">
              @foreach ($adverts as $advert)
              <div class="swiper-slide wrapper-banner-img" style="background-image:url(/storage/{{ $advert->cover }})"></div>
              @endforeach
          </div>

          <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
      </div>
  </div>
  <!-- 资讯列表 -->
  <ul class="newList more">
    @if ($hot)
    <div class="newList-first" data-href="{{ route('articles.show',$hot) }}">
        <p class="text-nowrap"><span class="hot">推荐</span>{{ $hot->title }}</p>
        <div class="newList-icon">
            <span>{{ $hot->category->title }}</span>
            <i class="icon icon-columns"></i>{{ $hot->clicks }}
        </div>
    </div>
    @endif

    @include('articles.more', ['lists'=>$lists])

</ul>
</section>
@endsection

@section('script')
<script type="text/javascript" src="/assets/index/js/PullToRefresh.min.js" ></script>
<script type="text/javascript">
    var banner = new Swiper('.swiper-banner', {
        autoplay: 2000,
        loop: true,
        pagination: '.swiper-pagination',
        autoplayDisableOnInteraction: false,
        spaceBetween: 15
    })
    var loadMore = {{ $lists->hasMorePages()?:'false' }}
    if (loadMore) {
        var page=2;
        var category_id = "{{ $category_id }}";

        var refreshBox=new PullToRefresh({
            container:".app",
            up:{
                callback:function(e){
                    $.get("{{ route('articles.index') }}",{category_id:category_id,page:page},function(data){
                        if(data.status=='SUCCESS'){
                            $(".more").append(data.message);
                            page++;
                            refreshBox.endUpLoading(true)
                        } else {
                            refreshBox.endUpLoading(false)
                        }
                    });
                }
            }
        })
    }
</script>
@endsection