@extends('layouts.app')
@section('content')
<section class="app">
    <div>
        <form action="{{ route('goods.lists') }}" method="get" accept-charset="utf-8">
            <div class="search">
                <div class="indexClassify" data-href="{{ route('goods.category') }}">
                    <img src="/assets/index/img/icon/indexClassify.png" >
                </div>
                <div class="searchCont">
                    <input type="text" name="title" value="{{ $title }}" class="input" placeholder="请输入关键字">
                    @csrf
                    <button type="submit" class="btn"><i class="icon-search"></i></button>
                </div>
                <div class="indexLogo">
                    <img src="/assets/index/img/logo.png">
                </div>
            </div>
        </form>

        <!-- banner -->
        <div class="banner">
            <div class="swiper-container swiper-banner">
                <div class="swiper-wrapper wrapper-banner">
                    @foreach ($adverts as $advert)
                    <div class="swiper-slide wrapper-banner-img"
                    style="background-image:url(/storage/{{ $advert->cover }})"

                    @if ($advert->url!='#' && $advert->url!='')
                        data-href="{{ $advert->url }}"
                    @endif

                    ></div>
                    @endforeach
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination wrapper-pagination"></div>
            </div>
        </div>
        <!-- 商品分类 -->
        <div class="classify">
            <span class="classify-item classify-active"  data-href="{{ route('goods.lists') }}">
                <img src="/assets/index/img/icon/db_05.png" >
                全部商品
            </span>
            @foreach ($c_lists as $category)
            <span class="classify-item classify-active"  data-href="{{ route('goods.lists',['category_id'=>$category->id]) }}">
                <img src="{{ $category->cover_path }}" >
                {{ $category->title }}
            </span>
            @endforeach

        </div>
        <!-- 商品列表 -->
        <div class="product-list">
            <div class="product-list-title">热销推荐<span>人气爆款 & 新品首发</span></div>
            @if ($lists->isNotEmpty())
            <ul class="product-ul more" >
                @include('index.more', ['lists'=>$lists])
            </ul>
            @else
        </div>
        <div class="noData">
            <input type="image" src="/assets/index/img/no_data.png" />
            <span style="padding-bottom: 30px">暂无数据</span>
        </div>
        @endif

    </div>

</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                    : 4000,
        loop                        : true,
        autoplayDisableOnInteraction: false,
        pagination: '.wrapper-pagination'
    })
    var loadMore = {{ $lists->hasMorePages()?:'false' }}
    if (loadMore) {
        var page=2;
        var title = "{{ $title }}";

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


</script>
@endsection