@extends('mobile.module.layouts.content')

@push('meta')

@endpush

@push('css')
    <link rel="stylesheet" href="{{ theme_asset('mobile/css/company.css') }}">
@endpush

@push('js')
@endpush
@section('content')
    <div class="order-top">
        <div class="txt">
            增值包有效期与您的套餐到期时间一致，购买后请尽快使用。当前套餐到期时间：<span class="font_yellow">@if(!$mysetmeal->endtime) 无期限 @else {{ date('Y-m-d',strtotime($mysetmeal->endtime)) }} @endif</span>
        </div>
    </div>
    <div class="split-block"></div>
    <div class="list_height plist-txt last">
        <div class="pic"></div>
        <div class="tit font14">选择职位</div>
        <div class="describe font13">
            @if($joblist)
                <span class="for-select"></span>
                <select id="jobs_choose">
                    @foreach($joblist as $key => $val)
                        <option value="{{ $val['id'] }}- {{ $val['stick'] }}" @if($val['id'] == $job_id) selected @endif>{{ $val['jobs_name'] }}</option>
                    @endforeach
                </select>
                @else
                <span id="no_jobs_choose">没有可选择的职位</span>
            @endif
        </div>
        <div class="arrow"></div>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div class="split-block"></div>
    <div class="ptitle border">
        <div class="th1">选择紧急增值包</div>
    </div>
    @foreach($cat_arr as $key => $vo)
        <div class="list_height plist-txt order-service-item @if($key == '0') active @endif @if($key == count($cat_arr)-1)last @endif " service_id="{{ $vo->id }}" service_type="{{ $vo->cat }}" service_price="{{ $vo->service_price }}" service_points="{{ $vo->service_points }}" service_name="{{ $vo->name }}">
        <div class="pic"></div>
        <div class="tit font14">{{ $vo->name }}，<span class="font_yellow">{{ $vo->service_price }}元</span><span class="font_gray9">（VIP价：{{ $vo->vip_price}}元）</span></div>
        <div class="clear"></div>
        </div>
    @endforeach
    <div class="clear"></div>
    <div class="split-block"></div>
    <div class="list_height plist-txt notarrow">
        <div class="pic"></div>
        <div class="tit font14">订单金额</div>
        <div class="describe font13"><span class="discount_notice font12">触屏版专享优惠价</span><span class="font_yellow" id="total_amount">{{  $cat_arr[0]->service_price }}</span>元</div>
        <div class="arrow"></div>
        <div class="clear"></div>
    </div>
    <div class="list_height plist-txt notarrow pay-type">
        <div class="pic"></div>
        <div class="tit font14">支付方式</div>
        <div class="describe font12">
            <div class="radio-list pay-type-list">
                <div class="radio points active">
                    <div class="pic"></div>
                    <div class="txt">积分支付</div>
                </div>
                <div class="radio cash">
                    <div class="pic"></div>
                    <div class="txt">在线支付</div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="arrow"></div>
        <div class="clear"></div>
    </div>
    <div class="list_height plist-txt notarrow points-pay-relation last">
        <div class="pic"></div>
        <div class="tit font14">所需积分</div>
        <div class="describe font13"><span class="font_yellow" id="total_points">{{  $cat_arr[0]->service_points }}</span></div>
        <div class="arrow"></div>
        <div class="clear"></div>
    </div>
    <div class="list_height plist-txt notarrow cash-pay-relation">
        <div class="pic"></div>
        <div class="tit font14">积分抵扣</div>
        <div class="describe font13"><input type="number" value="" placeholder="当前共有{{ $mypoint->points }}积分" id="deductible_val"></div>
        <div class="arrow"></div>
        <div class="clear"></div>
    </div>
    <div class="list_height plist-txt notarrow cash-pay-relation last">
        <div class="pic"></div>
        <div class="tit font14">应付金额</div>
        <div class="describe font13"><span class="font_yellow" id="need_amount">{{  $cat_arr[0]->service_price }}</span></div>
        <div class="arrow"></div>
        <div class="clear"></div>
    </div>
    <div class="split-block"></div>
    <div class="payment-list cash-pay-relation" style="display:none;">
        @if(is_weixin())
            <div class="payment wechat active">
                <div class="pic wechat"></div>
                <div class="txt">
                    <div class="payment-name font14">微信支付</div>
                    <div class="payment-intro font12 font_gray9">推荐已在微信中绑定银行卡的用户使用</div>
                </div>
                <div class="radio active"></div>
            </div>
        @else
            <div class="payment alipay active">
                <div class="pic alipay"></div>
                <div class="txt">
                    <div class="payment-name font14">支付宝支付</div>
                    <div class="payment-intro font12 font_gray9">推荐已下载支付宝客户端的用户使用</div>
                </div>
                <div class="radio active"></div>
            </div>
            <div class="payment wechat last">
                <div class="pic wechat"></div>
                <div class="txt">
                    <div class="payment-name font14">微信支付</div>
                    <div class="payment-intro font12 font_gray9">推荐已在微信中绑定银行卡的用户使用</div>
                </div>
                <div class="radio "></div>
            </div>
        @endif
        <div class="clear"></div>
    </div>
    <div class="btn-spacing"><div class="qs-btn qs-btn-blue font18" id="submit_pay">提交订单</div></div>
    @if($job_id)
        <input name="jobs_id" id="jobs_id" type="hidden" value="{{ $job_id }}" />
        <input name="buy" id="buy" type="hidden" value="{{ $jobs_buy }}" />
        @else
        <input name="jobs_id" id="jobs_id" type="hidden" value="{{ $joblist[0]['id'] or 0 }}" />
        <input name="buy" id="buy" type="hidden" value="{{ $joblist[0]['stick'] or 0 }}" />
    @endif
    <div class="split-block"></div>
    <!--当前用户的积分数-->
    <input type="hidden" name="my_points" id="my_points" value=" {{ $mypoint->points }} ">
    <!--当前服务类型id-->
    <input type="hidden" name="service_id" id="service_id" value="{{  $cat_arr[0]->id }}">
    <!--当前服务类型名称-->
    <input type="hidden" name="service_type" id="service_type" value="{{  $cat}}">
    <!--当前服务类型所需积分数-->
    <input type="hidden" name="service_points" id="service_points" value="{{  $cat_arr[0]->service_points }}">
    <!--当前服务类型所需人民币-->
    <input type="hidden" name="service_price" id="service_price" value="{{  $cat_arr[0]->service_price }}">
    <!--当前选择的支付方式-->
    <input type="hidden" name="payment" id="payment" value="@if(is_weixin()) wechat @else alipay @endif">
    <!--当前需要支付的金额-->
    <input type="hidden" name="pay_amount" id="pay_amount" value="{{  $cat_arr[0]->service_price }}">
@endsection
@section('script')
    <script type="text/javascript">
        //定义当前用户的积分数
        var my_points = parseInt($('#my_points').val());
        //设置支付方式
        function set_payment(){
            if($('.pay-type-list .radio.points').hasClass('active')){
                $('#payment').val('points');
            }else{
                $('#payment').val($('.payment-list .payment.active').hasClass('wechat')?'wechat':'alipay');
            }
        }
        //初始化界面显示
        function init_shows(choose_pay_type){
            $('#submit_pay').addClass('enable');
            $('#submit_pay').addClass('qs-btn-blue');
            $('#submit_pay').removeClass('qs-btn-border-gray');
            $('#submit_pay').html("提交订单");
            //定义当前服务类型所需积分数
            var service_points = parseFloat($('#service_points').val());
            if(choose_pay_type){
                //定义当前所选支付类型
                var pay_type = $('.pay-type-list .radio.points').hasClass('active')?'points':'cash';
                if(pay_type=='points'){
                    $('.cash-pay-relation').hide();
                    $('.points-pay-relation').show();
                    if(my_points<service_points){
                        $('#submit_pay').removeClass('enable');
                        $('#submit_pay').addClass('qs-btn-border-gray');
                        $('#submit_pay').removeClass('qs-btn-blue');
                        $('#submit_pay').html("积分不足，无法完成支付");
                    }
                }else{
                    $('.cash-pay-relation').show();
                    $('.points-pay-relation').hide();
                }
            }else{
                if(my_points>=service_points){
                    $('.cash-pay-relation').hide();
                    $('.points-pay-relation').show();
                    $('.pay-type-list .radio').removeClass('active');
                    $('.pay-type-list .radio.points').addClass('active');
                }else{
                    $('.cash-pay-relation').show();
                    $('.points-pay-relation').hide();
                    $('.pay-type-list .radio').removeClass('active');
                    $('.pay-type-list .radio.cash').addClass('active');
                }
            }
        }
        init_shows(false);
        set_payment();
        //选择服务类型
        $('.order-service-item').on('click',function(){
            $('.order-service-item').removeClass('active');
            $(this).addClass('active');
            $('#service_id').val($(this).attr('service_id'));
            $('#service_type').val($(this).attr('service_type'));
            $('#service_points').val($(this).attr('service_points'));
            $('#service_price').val($(this).attr('service_price'));
            //订单金额显示
            $('#total_amount').html($(this).attr('service_price'));
            //应付金额显示
            $('#need_amount').html($(this).attr('service_price'));
            //所需积分显示
            $('#total_points').html($(this).attr('service_points'));
            init_shows(false);
            after_deductible();
            set_payment();
        });
        //选择支付类型（积分？现金？）
        $('.pay-type-list .radio').on('click',function(){
            $('.pay-type-list .radio').removeClass('active');
            $(this).addClass('active');
            init_shows(true);
            set_payment();
        });
        //选择支付方式（支付宝？微信？）
        $('.payment-list .payment').on('click',function(){
            $('.payment-list .payment').removeClass('active');
            $('.payment-list .payment .radio').removeClass('active');
            $(this).addClass('active');
            $(this).children('.radio').addClass('active');
            $('#payment').val($(this).hasClass('wechat')?'wechat':'alipay');
        });
        //填写抵扣积分数
        $('#deductible_val').on('keyup',function(){
            var input_val = parseInt($(this).val());
            var service_points = parseInt($('#service_points').val());
            var max_val = my_points<service_points?my_points:service_points;
            if(input_val>max_val){
                $(this).val(max_val);
            }
            after_deductible();
        });
        //计算抵扣后的金额
        function after_deductible(){
            var return_val = 0.0;
            var service_points = parseInt($('#service_points').val());
            var deductible = $('#deductible_val').val()==''?0:parseInt($('#deductible_val').val());
            var rate = parseInt("{{ $payment_rate}}");
            var minus_val = service_points-deductible;
            if(minus_val>0){
                return_val = parseFloat(minus_val/rate);
            }
            $('#need_amount').html(return_val);
            $('#pay_amount').val(return_val);
        }
        //没有职位的提示
        $('#no_jobs_choose').on('click',function(){
            qsToast({type:2,context: "没有可选择的职位！"});
            return false;
        });
        //选择职位赋值
        $("#jobs_choose").on('change',function(){
            var val_str = $(this).val();
            var val_arr = val_str.split('-');
            $("#jobs_id").val(val_arr[0]);
            $("#buy").val(val_arr[1]);
        });

        function isWeiXin() {
            var ua = window.navigator.userAgent.toLowerCase();
            console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
            if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            return true;
            } else {
            return false;
            }
        }


        function onBridgeReady(result){

            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId":result.appId,     //公众号名称，由商户传入     
                    "timeStamp":result.timeStamp,         //时间戳，自1970年以来的秒数     
                    "nonceStr":result.nonceStr, //随机串     
                    "package":result.package,     
                    "signType":result.signType,         //微信签名方式：     
                    "paySign":result.paySign //微信签名 
                },
                function(res){
                if(res.err_msg == "get_brand_wcpay_request:ok" ){
                // 使用以上方式判断前端返回,微信团队郑重提示：
                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                        alert("支付成功！")
                        window.location.href ="{{route($sub_site.'mobile.firm.service.order.index')}}";
                } 
            }); 
        }


        //提交订单
        var lock = 0;
        $('#submit_pay').on('click',function(){
            if($(this).hasClass('enable') && !lock){
                lock = 1;
                var jobs_id = $('#jobs_id').val();
                var payment = $('#payment').val();
                var service_id = $('#service_id').val();
                var service_type = $('#service_type').val();
                var deductible_val = $('#deductible_val').val();
                var need_amount = $("#pay_amount").val();
                var url = "{{ route($sub_site.'mobile.firm.service.increment.pay') }}";
                var is_deductible = 0;
                if(deductible_val) {
                    is_deductible = 1;
                }
                if(jobs_id == 0){
                    qsToast({type:2,context: "请选择职位！"});
                    lock = 0;
                    return false;
                }
                if(parseInt($("#buy").val())!=0){
                    qsToast({type:2,context: "该职位已设置【紧急】，不能重复购买！"});
                    lock = 0;
                    return false;
                }
                if(need_amount == 0) {
                    payment ='points';
                }
                if(payment != "points") {
                    var data = "?service_type="+service_type+"&jobs_id="+jobs_id+"&amount="+need_amount+"&cat={{ $cat }}&is_deductible="+is_deductible+"&payment_name="+payment+"&pay_type="+payment+"&project_id="+service_id+"&deductible="+deductible_val;
                    url = url+data;
                    if(!isWeiXin()){ //H5 支付
                                window.location.href = url;
                        }else{ //微信内支付
                                $.get(url,function (result) {
                                            
                                    if(result.status==0){
                                        alert(result.msg);
                                    }else{
                                        onBridgeReady(result.msg)
                                    }
                                  
                                }, 'json');
                    }
                } else {
                    $.post(url, {
                        jobs_id: jobs_id,
                        payment_name: payment,
                        pay_type: payment,
                        cat: "{{ $cat }}",
                        amount: need_amount,
                        is_deductible: is_deductible,
                        service_type: service_type,
                        project_id: service_id,
                        deductible: deductible_val,
                        _token: "{{ csrf_token() }}"
                    }, function (result) {
                        if (result.status == 1) {
                            qsToast({type: 1, context: "该职位已成功设置【紧急推广】"});
                            setTimeout(function () {
                                location.href = "{{ route($sub_site.'mobile.firm.service.order.index') }}";
                            },2000)

                        } else {
                            qsToast({type: 2, context: result.msg});
                            lock = 0;
                            return false;
                        }
                    }, 'json');
                }
            }
        });

    </script>
@endsection