@extends('layouts.app')

@section('footer')
<!-- footer -->
<footer>
    <div class="detailsBtn">
        <a class="detailsRight-car shade">立即兑换</a>
    </div>
</footer>
@endsection

@section('pop')

<div class="cardBack"></div>
<div class="cardBuy">
    <form action="{{ route('pick.receivegoods') }}">
        <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="params_id" id="params_id" value="{{ $first->id }}" >
        <div class="cardBuy-btn">
            <span class="cardClose cardBuy-btn-01">关闭</span>
            <button class="cardBuy-btn-02 ajax-post">立即兑换</button>
        </div>
    </form>
</div>

<form class="attribute-form" method="post" id="form" accept-charset="utf-8">
    <!-- 规格弹出页 -->
    <div class="shadeHide backEject"></div>
    <div class="specsEject">
        <div class="ejectRemove">
            <i class="icon icon-remove-circle"></i>
        </div>
        <div class="ejectHead">
            <div class="ejectHead-img">
                <span style="background-image:url({{ $good->cover_path }})"></span>
            </div>
            <div class="ejectHead-text">
                <div class="ejectHead-price">
                    <small>￥0</small>
                </div>
                <div class="ejectHead-size">
                    规格:{{ $first->value }}
                </div>
            </div>
        </div>
        <div class="ejectChoose">
            <p>请选择产品规格</p>
            <ul class="SpecsList">
                @if($params->count() > 0)
                @foreach($params as $param)
                <li  data-id="{{ $param->id }}" data-stock="{{ $param->stock }}" data-price="{{ $param->price }}">
                    <div class="SpecsList-radio">
                        <input type="radio" name="params" value="{{ $param->id }}" id="params{{ $param->id }}"  @if($param->id==$first->id) checked  @endif />
                        <label for="params{{ $param->id }}">
                            {{ $param->value }}
                        </label>
                    </div>
                </li>
                @endforeach
                @endif
            </ul>
        </div>

        <input type="hidden" id="params_stock" value="{{ $first->stock }}">
        <input type="hidden" name="item[id]" value="0">
        <input type="hidden" name="item[type]" id="goodstype" value="PICK">
        @csrf
        <div class="ejectBtn">
            <a class="detailsRight-buy cardBtn" >立即兑换</a>
        </div>
    </div>
</form>
@endsection

@section('content')
<!-- section -->
<section>
    <!-- Swiper -->
    <div class="swiper-container details-banner">
        <div class="swiper-wrapper details-wrapper">
            <div class="swiper-slide details-wrapper-img" style="background-image:url({{ $good->cover_path }})"></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination details-pagination"></div>
    </div>

    <div class="detailsCont">
        <div class="goodsText">
            <div class="goodsText-name">
                {{ $good->title }}
            </div>
            <div class="goodsText-text">{{ $good->description }}</div>
        </div>
        <div class="goodsPrice">
            <div class="goodsPrice-red">
                ￥0
            </div>
            <p class="product-li-sale">销售价：￥{{ $good->min_original }}</p>
        </div>
        <div class="goodsNumber">
            <span class="goodsNumber-flex">已领{{ $good->sold }}件</span>
            <span>库存{{ $good->all_stock }}件</span>
        </div>
    </div>

    <div class="detailsSpecs">
        <div class="detailsLabel shade">
            <div class="detailsLabel-left">
                <label>已选</label>
                <span id="params_select">规格 {{ $first->value }}</span>
            </div>
            <i class="icon icon-angle-right"></i>
        </div>
        <div class="detailsLabel">
            <div class="detailsLabel-left">
                <label>运费</label>
                <span>免运费</span>
            </div>
        </div>
    </div>

    <div class="detailsBrief">
        <p>产品详情</p>
        <div class="detailsBrief-img">
            {!! $good->content !!}
        </div>
    </div>
</section>
@endsection

@section('script')
<script src="/assets/index/js/operation.js"></script>
<script type="text/javascript">
// 产品轮播
var details = new Swiper('.details-banner', {
    pagination: '.details-pagination',
    paginationClickable: true
});


//产品弹出层
$('.shade').on('click', function() {
    var top = $(window).scrollTop();
    $('html').css({
        'overflow': 'hidden',
        'top': -top + 'px'
    })

    $('.backEject').css({
        'display': 'block'
    })
    $('.specsEject').css({
        'bottom': '0px'
    })
})

$('.shadeHide, .ejectRemove').on('click', function() {
    $('html').css({
        'overflow': 'auto',
        'position': 'static'
    })
    $('html,body').scrollTop(top)

    $('.specsEject').css({
        'bottom': '-100%'
    })
    $('.backEject').css({
        'display': 'none'
    })
})


</script>
@endsection