@extends('layouts.app')

@section('content')
<!-- 购买靓号 -->
<div class="liangHaoBuy">
    <span class="liangHaoBuy-hide">取消</span>
    <span class="liangHaoBuy-buy  cardBtn ">提货</span>
</div>

<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>

<!-- section -->
<section>
    <!-- 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">

        <div class="liangHao-title">
            <div class="liangHao-img">
                手机靓号
            </div>
            <a href="{{ route('pick.lists') }}" >查看更多<i class="icon icon-angle-right"></i></a>
        </div>
        <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 class="liangHao-barter refresh">
            <i class="icon icon-refresh"></i>换一批
        </div>
    </div>

    <div class="free">
        <!-- <div class="liangHao-title">
            <div class="liangHao-img">
                免费提货产品
            </div>
        </div> -->
        <div class="recommend-title"><span>免费提货产品</span></div>
        <div class="freeFruits" style="background-image: url(/assets/index/img/free_01.png);" data-href="{{ route('pick.detail',94) }}">
            <div class="freeFruits-title">
                <img src="/assets/index/img/free_title_01.png" >
            </div>
            <div class="freeFruits-btn freeFruits-btn-one">
                免费提取
            </div>
        </div>
        <div class="freeFruits" style="background-image: url(/assets/index/img/free_00.png);" data-href="{{ route('pick.detail',58) }}">
            <div class="freeFruits-title">
                <img src="/assets/index/img/free_title_00.png" >
            </div>
            <div class="freeFruits-btn">
                免费提取
            </div>
        </div>
    </div>

</section>
@endsection

@section('script')
<script type="text/javascript">
    var banner = new Swiper('.swiper-banner',{
        autoplay                    : 2000,
        loop                        : true,
        autoplayDisableOnInteraction: false
    })

    function checkNumFoc(inp,next)
    {
        var $this=$(inp);
        var str=$this.val();
        if (str.length >= 5) {
            str = str.substr(0, 4);
        }
        $this.val(str);
        if(str.length==4 && next!=0){
            $('.passdiv').find('input').eq(next).focus();
        }
    }

    //手机靓号购买
    $(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');
            }
        });
        var id = $(this).data('id');
        $('#mobile_id').val(id);
        $(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');
    })

    // 卡号绑定
    $('.cardBtn').on('click', function() {
        var top = $(window).scrollTop();
        $('html').css({
            'overflow': 'hidden',
            'top': -top + 'px'
        })
        $('footer').css({
            'display': 'flex'
        })
        $('.cardBuy').css({
            'top': 'calc(50% - 110px)'
        })
        $('.cardBack').css({
            'display': 'block'
        })
        $('.liangHaoBuy').css({
            'bottom': '-100%'
        })

    })
    $('.cardClose').on('click', function() {
        $('html').css({
            'overflow': 'auto',
            'position': 'static'
        })
        $('html,body').scrollTop(top)
        $('.cardBuy').css({
            'top': '-100%'
        })
        $('.cardBack').css({
            'display': 'none'
        })
        $('.liangHaoBuy').css({
            'bottom': '-100%'
        })
        $('.liangHao-list').find('.liangHao-list-border').removeClass('liangHao-list-border');

    })


    $('.refresh').click(function(){
        $.post("{{ route('pick.index') }}",{'_token': '{{ csrf_token() }}'},function(data){
            if(data.status=='SUCCESS'){
                $('.liangHao-list').html(data.message);
            }else{
                updateAlert(data.message);
            }
        });
    });

    $('.buy_mobile').click(function(){
        var id =$("#mobile_id").val();
        if (id=='') {
            updateAlert('没有找到靓号');
            return false;
        }
        $.post("{{ route('pick.receivemobile') }}",{id:id,'_token': '{{ csrf_token() }}'},function(data){
            updateAlert(data.message);
            if(data.redirect!=''){
                setTimeout(function(){
                    location.href=data.redirect;
                },1500);
            }
        });
    });

</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