@extends('web.layouts.h5base')
@section('add_css')
    <link href="{{ url('/style/web/h5/js/clipboard.min.js') }}" rel="stylesheet" media="screen">
    <script type="text/javascript" src="{{ url('/style/web/') }}/h5/js/clipboard.min.js"></script>
    <script src="{{ url('/style/web/') }}/h5/layer_mobile/layer.js"></script>
    <style>
        .expired {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            opacity: .95;
            background: #fff url({{ url('/style/web/') }}/h5/images/expired.png) center center no-repeat;
        }

        .paid {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            opacity: .95;
            background: #fff url({{ url('/style/web/') }}/h5//images/paid.png) center center no-repeat;
        }

        .hidden {
            display: none;
        }

        .code_tan h3 .closer {
            position: absolute;
            top: 0.05rem;
            right: 0.0rem;
            font-size: .21rem;
            color: #ccc !important;
            background: #fff;
            width: 0.28rem;
            height: 0.28rem;
            border-radius: 50%;
        }

        .tan_bg .code_tan {
            border-radius: 0.1rem;
        }

        .tan-title h3 {
            color: #666;

        }

        .tan-title {
            border-bottom: 1px solid #ededed;
            margin-bottom: 0.1rem;
        }

        .code_tan {
            padding-bottom: 0.2rem;
            height: auto;
        }

        .tan_button a {
            margin: 0 0.27rem;
            display: inline-block;
            width: 3rem;
            height: .4rem;
            line-height: .4rem;
            text-align: center;
            border-radius: .05rem;
            box-sizing: border-box;
            box-shadow: none;
            border: 0.01rem solid limegreen;
        }

        .bg_ccc {
            background-color: #f8f9fc;
        }

        .impot-tip {
            background: #e85453;
            line-height: 0.4rem;
            color: #fff;
            text-align: center;
        }

        .fail_icon {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            opacity: .95;
            background: #fff url(/style/web/h5/images/close.png) center center no-repeat;
        }

        .code .code_bg .code_img {
            width: 2.2rem;
            height: 2.2rem;
            margin: 0 auto;

        }

        .code .code_bg .img, .code .code_bg img {
            width: 100%;
            height: 100%;
        }

        .code .org_button2 .a, .code .org_button2 a {
            display: inline-block;
            width: 3.2rem;
            height: 0.35rem;
            background-color: #00a0e9;
            color: #fff;
            font-size: .16rem;
            line-height: 0.35rem;
            text-align: center;
            border-radius: .05rem;
            box-sizing: border-box;
            box-shadow: none;
        }

        .code .org_button2 .weixin {
            display: inline-block;
            width: 3.2rem;
            height: 0.35rem;
            background-color: #2ba245;
            color: #fff;
            font-size: .16rem;
            line-height: 0.35rem;
            text-align: center;
            border-radius: .05rem;
            box-sizing: border-box;
            box-shadow: none;
        }

        .p-t-20 {
            padding-top: .1rem;
        }

        body {
            background: #fff;
        }

        .pay-tip {
            width: 0.5rem;
            background: #e85453;
            line-height: 1.5;
            top: -0.0rem;
            right: -0.72rem;
            position: absolute;
            color: #fff;
            padding: 0.1rem;
            border-radius: 0.1rem;
            font-size: 0.14rem;
        }

        .pay-tip:after {

            content: "";
            position: absolute;
            transform: rotate(-16deg);
            left: -.06rem;
            bottom: -2px;
            width: 0;
            height: 0;
            border-left: 0.2rem solid transparent;
            border-right: 0 solid transparent;
            border-bottom: .13rem solid #e85453;


        }

        .impot-top {
            background: #fff;
            line-height: 0.4rem;
            color: #333;
            text-align: center;
        }

        .exp {
            text-align: left;
            margin-left: 100px
        }

        .color {
            color: #FF0000;
            font-size: 32px;
        }

        .color1 {
            color: #666;
            font-size: 12px;
        }
        .bank-item
        {
            padding-top: 20px;
        }
        .code h4{
            color: red;
            text-align: right;
            padding-right: 15px;
        }

    </style>
@endsection
@section('content')

    <div id="app" style="position: relative">
        @if(!in_array($pay_type,['tr_bank','tr_bank2']) )
        <p class="impot-top fff tcenter" style="line-height: normal"><img
                    src="{{ url('/style/web/') }}/h5/images/{{ $pay_type }}.png" alt=""></p>
        @endif
        <p class="impot-tip fff tcenter">重复支付和修改金额无法到账，概不负责</p>
        <div class="code">
            <h5 class=" code_noti bg_color_white">
                <span class="color_999 font-16 p-l-20 t-status">{{ $pay_status }}</span>
                <div class="pull_right p-r-20 font-14 ">
                    <span class="color_999 p-r-05 f-w-400 color_666">支付倒计时</span>
                    @verbatim <span class="color_999" id="OnlyTime"></span>@endverbatim
                </div>
            </h5>

            <h5 class="font-12 p-l-20 bg_color_white p-r-20 f-w-400 p-b-05">
                <span class="color_999">订单编号：</span>
                <span class="color_999">{{ $order->order_sn }}</span>
                <span class="pull_right color_999 copy" data-clipboard-text="{{ $order->order_sn }}">复制订单编号</span>
            </h5>


            <div class="code_bg m10 bg_ccc">
                <h3 class="color_333 f-w-400 p-t-20 text-center">¥ <span
                            class="color">{{ $order->order_money }}</span><span class="color1">（请勿修改金额付款）</span></h3>
{{--                <h3 class="color_333 f-w-400 exp p-b-10">付款备注：<span class="color">{{ $order->ewm_mark }}</span><span class="color1">（请在支付备注上填写）</h3>--}}

{{--                <h3 class="color_red text-center font-20">--}}
{{--                    <span class="p-r-05">￥</span><span>{{ $order->order_money }}</span></h3>--}}
{{--              <h3 class="color_red text-center font-20 p-b-10">付款备注：{{ $order->ewm_mark }}</h3>--}}
                @if($pay_type=='tr_bank2')

                    <h5 class="font-12 bank-item p-l-20 bg_color_white p-r-20 f-w-400 p-b-05">
                        <span class="color_999">银行类型：</span>
                        <span class="color_999">{{ $gateway['bank_name'] }}</span>

                    </h5>
                    <h5 class="font-12 bank-item p-l-20 bg_color_white p-r-20 f-w-400 p-b-05">
                        <span class="color_999">收款姓名：</span>
                        <span class="color" style="font-size: 16px">{{ $gateway['username'] }}</span>
                        <span class="pull_right color_999 copy" data-clipboard-text="{{ $gateway['username'] }}">复制收款姓名</span>
                    </h5>
                    <h5 class="font-12 bank-item p-l-20 bg_color_white p-r-20 f-w-400 p-b-05">
                        <span class="color_999">卡号：</span>
                        <span class="color" style="font-size: 16px">{{ $gateway['mch_id'] }}</span>
                        <span class="pull_right color_999 copy" data-clipboard-text="{{ $gateway['mch_id'] }}">复制卡号</span>
                    </h5>
                    <h5 class="font-12 bank-item p-l-20 bg_color_white p-r-20 f-w-400 p-b-05">
                        <span class="color_999">开户行：</span>
                        <span class="color_999">{{ $gateway['source'] }}</span>
                        <span class="pull_right color_999 copy" data-clipboard-text="{{ $gateway['source'] }}">复制开户行</span>
                    </h5>
                    <div class="" style="clear: both"></div>

                @else
                    <div class="bg_color_white  code_img trade-order-detail" style="position: relative">
                        <img class="" src="{{ url($bank['thumb']) }}"/>
                        <div class="expired hidden"></div>
                        <div class="paid hidden"></div>
                        <div class="hidden fail_icon"></div>
                    </div>
                    @endif

                 <h5 class="color_333 f-w-400 text-center p-t-20">
                     <span class="p-r-05">付款页面备注请填写</span>
                     <span>(</span>
                     <span class="color_FF0000">必填</span>
                     <span>)</span>
                 </h5>
                 <h3 class="color_red text-center font-20 p-b-10">{{ $order->ewm_mark }}</h3>

            </div>
            @if($pay_type=='tr_wxalbank')
                <h3 class="color_red text-center font-20 p-b-10" style="font-size: 16px;margin-top: 20px">使用支付宝或微信或银行支付</h3>




            @endif
            @if($pay_type=='tr_wxal')
                <h3 class="color_red text-center font-20 p-b-10" style="font-size: 16px;margin-top: 20px">使用支付宝或者微信支付</h3>




            @endif
            @if($pay_type=='tr_alipay')
                @if($bank['url'])
                    <div class="org_button2 p-t-10i" id="goPay">
                        <a href="javascript:void(0)">打开支付宝跳转付款页面</a>
                    </div>
                @endif

            @endif
            @if($pay_type=='tr_weixin')
                <div class="org_button2 p-t-10i" id="tips-button">
                    <a href="#" class="weixin">1.长按二维码保存到相册</a>
                </div>
                <div class="org_button2 p-t-10i" id="tips-button">
                    <a href="weixin://scanqrcode" class="weixin">2.打开微信扫一扫</a>
                </div>
            @endif



        </div>
{{--        <div class="none"></div>--}}
{{--        <div class="code_footer" style="{{ !$is_mobile?'position: static':'' }}">--}}
{{--            <a href="javascript:void(0)" onclick="payOk()"--}}
{{--               style="background-color: {{ $pay_type=='tr_alipay'?'#00a0e9':'' }}">--}}
{{--                <span>我已付款</span>--}}
{{--                <span>{{ $order->order_money }}</span>--}}
{{--                <span>元</span>--}}
{{--            </a>--}}
{{--            <a href="javascript:void(0)" id="cancleOrder">取消此交易</a>--}}
{{--        </div>--}}

        <div class="pay_tan tan_bg hide">
            <div class="code_tan bg_color_white"
                 style="position:fixed; top: 50% !important; left: 50% !important;  transform: translate(-50%, -50%);">
                <div class="tan-title">
                    <h3 class="font-18 text-center f-w-400">付款填写
                        <i class="fa fa-close closer"></i>
                    </h3>
                </div>
                <p class="work-break p-l-20 p-r-20 color_333">填写转账信息，方便核实订单，请填写。</p>
                <div class="list-input"><label>付款账号</label> <input name="pay_account" placeholder="请输入付款账号"></div>
                <div class="list-input"><label>备注</label> <input name="ewm_mark" placeholder="请输入备注"></div>


                <div class="tan_button  p-t-10i">
                    <a class="color-white font-14  pay_sen_msg" href="javascript:void(0)"
                       style="background-color: {{ $pay_type=='tr_alipay'?'#00a0e9':'#32cd32' }};border-color: {{ $pay_type=='tr_alipay'?"#00a0e9":"" }}"><span
                                class=" "></span> 提交转账信息 </a>

                </div>


                {{--<div class="tan_button p-t-10i">
                    <a class="color_666 font-14" href="">查看充值教程</a>
                </div>--}}


            </div>
        </div>


        <div class="first_tan tan_bg hide">
            <div class="code_tan bg_color_white"
                 style="position:fixed; top: 50% !important; left: 50% !important;  transform: translate(-50%, -50%);">
                <div class="tan-title">
                    <h3 class="font-18 text-center f-w-400">重要通知
                        <i class="fa fa-close closer"></i>
                    </h3>
                </div>


                <p class="work-break p-l-20 p-r-20 color_333">
                    1.付款金额一定要精确到小数点后两位。比如：<span
                            style="color:#f00">界面提醒付款金额为{{ $order->order_money }}元</span>，您支付的时候<span
                            style="color:#f00">一定要支付{{ $order->order_money }}，一分不能少</span>。


                </p>
                <p class="m-t-15"></p>

                <p class="work-break p-l-20 p-r-20 color_333"> 2.注意如修改金额支付，或没有填写支付备注，支付后无法查证，不补不退，概不负责。</p>
                <p class="m-t-35"></p>
                <p class="work-break p-l-20 p-r-20 color_333">
                    3.<span style="color:#f00">订单超过15分钟订单自动取消,请勿付款之前的码</span>，补单2小时内有效，补单2小时内有效，补单2小时内有效，超过补单时间自行负责。</p>
                <p class="m-t-35"></p>


                <div class="tan_button  p-t-10i">
                    <a class="bg_limegreen color-white font-14 closer2 copy2" href="javascript:void(0)"
                       style="background-color: {{ $pay_type=='tr_alipay'?'#00a0e9':'' }};border-color: {{ $pay_type=='tr_alipay'?"#00a0e9":"" }}"><span
                                class="only_time"></span> 我已知晓，继续支付 </a>
                    {{--data-clipboard-text="{{ $order->order_money }}"--}}
                </div>


                {{--<div class="tan_button p-t-10i">
                    <a class="color_666 font-14" href="">查看充值教程</a>
                </div>--}}


            </div>
        </div>
    </div>

@endsection
@section('header')

@endsection
@section('footer')

@endsection
@section('foot_js')

    <script type="text/javascript">
        $(document).ready(function () {
            var back_url = "{{ route('web.pay.scan.return',['order_sn'=>$order->order_sn]) }}";
            var clipboard = new Clipboard('.copy');
            $('.first_tan').show();
            var only_times = 3;
            $('.only_time').text('(' + only_times + 's)');
            var only_timer_interval = setInterval(function () {
                if (only_times <= 0) {
                    clearInterval(only_timer_interval);

                    $('.only_time').text('');
                } else {
                    $('.only_time').text('(' + only_times + 's)');
                    only_times--;
                }

            }, 1000)
            $('.closer2').click(function () {
                if (only_times <= 0) {
                    $('.first_tan').hide();
                }


            });

            $('.closer').click(function () {

                $('.tan_bg').hide();


            });
            var clipboard2 = new Clipboard('.copy2');
            clipboard2.on('success', function () {
                layer.open({
                    content: '复制金额成功'
                    , skin: 'msg'
                    , time: 2 //2秒后自动关闭
                });
            })
            clipboard.on('success', function () {
                layer.open({
                    content: '复制订单号成功'
                    , skin: 'msg'
                    , time: 2 //2秒后自动关闭
                });
            })


            /* $('.org_button2').click(function () {
                 $('.tan_bg').show();
             });*/
            //取消订单
            $("#cancleOrder").click(function () {
                $.ajax({
                    method: 'post',
                    url: '{{ route('web.api.pay_cancle.order') }}',
                    data: {
                        order_sn: addon.order_sn
                    },
                    success: function (res) {
                        //订单取消，进行跳转
                        if (res.error == 0) {
                            if (res.backurl) {
                                //  window.location.href = res.backurl;
                            }
                            updateTips('取消支付');
                            $(".fail_icon").show();
                            $(".code_footer").hide();
                            clearTimeout(ci);
                            layer.open({
                                content: '取消支付成功'
                                , skin: 'msg'
                                , time: 2 //2秒后自动关闭
                            });

                        } else {

                            layer.open({
                                content: res.msg
                                , skin: 'msg'
                                , time: 2 //2秒后自动关闭
                            });
                        }


                    },
                    error: function () {

                    }
                })
            })
        });

    </script>
    <script>
        var addon = {
            successtips: "支付成功!请关闭当前窗口以便于继续操作!",
            expiretips: "二维码已过期,请重新发起订单支付!",
            jumptips: "支付成功!2秒后将自动跳转!",
            order_sn: "{{ $order->order_sn }}"
        }
        var remainseconds = "{{ $only_time }}";
        var checktime = 3000;
        var queryurl = "{{ route('web.api.pay_check') }}";
        var timer, minutes, seconds, ci, qi;
        timer = parseInt(remainseconds) - 1;

        //启动支付宝打开
        $("#goPay").on('click', function () {
            $('.first_tan').hide();
            var a = location.href = "alipays://platformapi/startapp?appId=20000067&url={{ urlencode($bank['url']) }}";
        });
        //提交付款信息
        $(".pay_sen_msg").click(function () {
            var pay_account = $('[name="pay_account"]').val();
            var pay_mark=$('[name="ewm_mark"]').val();
            if(pay_account=='' && pay_mark=='')
            {
                layer.open({
                    content: '请输入转账账号或备注'
                    , skin: 'msg'
                    , time: 2 //2秒后自动关闭
                });
                return false;
            }
            $.ajax({
                method:'post',
                url: "{{ route('web.api.update.order') }}",
                data: {
                    order_sn: addon.order_sn,
                    pay_account:pay_account,
                    pay_mark:pay_mark
                },
                success: function (res) {
                    console.log(res);
                    //如果没有支付成功，继续执行
                    if (res.error == 1) {

                        layer.open({
                            content: res.msg
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });
                    } else {
                        //支付成功

                        /*  setTimeout(function () {
                              location.href = res.backurl;
                          }, 2000);*/
                        //updateTips(res.msg)

                        layer.open({
                            content: res.msg
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });
                        $(".code_footer").hide();
                        $(".pay_tan").hide();

                    }


                },
                error: function () {

                }
            })
        });

        function payOk() {
            $(".pay_tan").show();
        }

        function payOk1() {
            $.ajax({
                url: queryurl + '?times=' + new Date().getTime(),
                data: {
                    order_sn: addon.order_sn
                },
                success: function (res) {
                    console.log(res);
                    //如果没有支付成功，继续执行
                    if (res.error == 1) {

                        layer.open({
                            content: res.msg
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });
                    } else {
                        //支付成功

                        /*  setTimeout(function () {
                              location.href = res.backurl;
                          }, 2000);*/
                        updateTips(res.msg)

                        layer.open({
                            content: res.msg
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });

                    }


                },
                error: function () {

                }
            })
        }

        function updateTips(msg) {
            $(".t-status").text(msg);
        }

        //定时查询订单状态
        var checkOrderStatus = function () {
            clearTimeout(qi);
            if (timer <= 0) {
                $(".expired").show();
                $(".code_footer").hide();
                return false;
            }
            $.ajax({
                url: queryurl + '?times=' + new Date().getTime(),
                data: {
                    order_sn: addon.order_sn
                },
                success: function (res) {
                    //如果没有支付成功，继续执行
                    if (res.error == 1) {
                        qi = setTimeout(function () {
                            checkOrderStatus();
                        }, checktime);
                    } else {
                        //支付成功
                        clearTimeout(ci);
                        updateTips(res.msg)
                        $(".paid").removeClass("hidden");

                        layer.open({
                            content: res.msg
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });
                        /*  setTimeout(function () {
                              location.href = res.backurl;
                          }, 2000);*/


                    }


                },
                error: function () {
                    qi = setTimeout(function () {
                        checkOrderStatus();
                    }, checktime);
                }
            })

        };
        checkOrderStatus();

        ci = setInterval(function () {
            minutes = parseInt(timer / 60, 10)
            seconds = parseInt(timer % 60, 10);
            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;
            $("#OnlyTime").text(minutes + ':' + seconds);

            if (--timer < 0) {
                $(".expired").removeClass("hidden");
                clearInterval(ci);
                clearInterval(qi);

            }
        }, 1000);

    </script>
@endsection