@extends('layouts.app')


@section('footer','')

@section('content')

<div class="cardBack"></div>
<div class="cardBuy">
    <form action="{{ route('pick.receivemobile') }}">
        <div class="cardBuy-list">
            <label>卡密</label>
        </div>
        <div class="cardBuy-list passdiv flex">
            <input type="tel" name="pass[]" maxlength='4' onfocus="this.value='';" onkeyup="this.value=this.value.replace(/\D/g,'');checkNumFoc(this,1)" class="input" placeholder="卡密">
            <input type="tel" name="pass[]" maxlength='4' onfocus="this.value='';" onkeyup="this.value=this.value.replace(/\D/g,'');checkNumFoc(this,2)" class="input" placeholder="卡密">
            <input type="tel" name="pass[]" maxlength='4' onfocus="this.value='';" onkeyup="this.value=this.value.replace(/\D/g,'');checkNumFoc(this,3)" class="input" placeholder="卡密">
            <input type="tel" name="pass[]" maxlength='4' onfocus="this.value='';" onkeyup="this.value=this.value.replace(/\D/g,'');checkNumFoc(this,0)" class="input" placeholder="卡密">
        </div>
        @csrf
        <input type="hidden" name="mobile_id" id="mobile_id"  value="">
        <div class="cardBuy-btn">
            <span class="cardClose cardBuy-btn-01">关闭</span>
            <button class="ajax-post cardBuy-btn-02">立即提货</button>
        </div>
    </form>
</div>

<!-- 购买靓号 -->
<div class="liangHaoBuy">
    <span class="liangHaoBuy-hide">取消</span>
    <span class="liangHaoBuy-buy cardBtn">提货</span>
</div>
<!-- section -->
<section class="app">
    <!-- banner -->
    <div class="banner liangHao-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 }})"></div>
             @endforeach
         </div>
     </div>
 </div>

 <!-- 手机靓号 -->

 <div class="liangHao">
    <form action="{{ url()->current() }}">
        <div class="liangHao-select">
            <div class="liangHao-Location" data-href="{{ route('location.address',['callback'=>url()->current()]) }}">
                <i class="icon icon-map-marker"></i>
                {{ $area->name }}
            </div>
            <div class="liangHao-input">
                <i class="icon icon-search"></i>
                <input type="search" name="number" value="{{ $number??'' }}" placeholder="请输入尾号进行搜索">
            </div>
            <div class="liangHao-btn" data-href="{{ route('pick.search') }}">
                高级搜索
            </div>
        </div>
    </form>

    <ul class="liangHao-list">
       @if ($lists->isNotEmpty())
       @include('pick.mobile', ['lists'=>$lists])
       @else
       <div class="noData">
        <input type="image" src="/assets/index/img/no_data.png" />
        <span style="padding-bottom: 30px">暂无数据</span>
    </div>
    @endif
</ul>
</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                    : 2000,
    loop                        : true,
    autoplayDisableOnInteraction: false
})

 $(document).on('click', '.liangHao-click',function() {
    $(this).parent().find('li').each(function(e, index){
        if($(this).parent().find('li').hasClass('liangHao-list-border')){
            $(this).parent().find('li').removeClass('liangHao-list-border');
        }
    });
    $(this).addClass('liangHao-list-border');
    var top = $(window).scrollTop();
    $('html').css({
        'overflow': 'hidden',
        'top': -top + 'px'
    })
    $('footer').css({
        'display': 'none'
    })
    $('.liangHaoBuy').css({
        'bottom': '0'
    })
})
 $('.liangHaoBuy-hide').on('click', function() {
    $('html').css({
        'overflow': 'auto',
        'position': 'static'
    })
    $('html,body').scrollTop(top)

    $('footer').css({
        'display': 'flex'
    })
    $('.liangHaoBuy').css({
        'bottom': '-100%'
    })
    $('.liangHao-list').find('.liangHao-list-border').removeClass('liangHao-list-border');
})

 var loadMore = {{ $lists->hasMorePages()?:'false' }}
 if (loadMore) {
     var page=2;

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


<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    @php
    $app          = app('wechat.official_account');
    @endphp

    wx.config(<?php echo $app->jssdk->buildConfig(['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'hideMenuItems', 'getLocation', 'openLocation', 'checkJsApi', 'scanQRCode']) ?>);
    wx.ready(function() {
        wx.getLocation({
            type : 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success : function(res) {
                console.log(res);
                var token = "{{ csrf_token() }}";
                $.post("{{ route('location.set') }}",{lat:res.latitude,lng:res.longitude,_token:token},function(result){
                    if (result.statusCode==200) {
                        location.reload();
                    }
                });
            },
            cancel : function(res) {
            }
        });
    });

    wx.error(function(res) {
       // updateAlert(res.errMsg);
   });

</script>

@endsection