<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link href="{{cdn_asset('/assets/css/bootstrap.min.css')}}" rel="stylesheet">
    <title>tijian</title>
    <script type="text/javascript">
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if(clientWidth>=640){
                        docEl.style.fontSize = '100px';
                    }else{
                        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                    }
                };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
    <style type="text/css">
        .all{
            width: 100%;
            height: 100%;
            overflow-y: scroll;
        }
        .all .tishi{
            width: 90%;
            margin: 0 auto;
            margin-top: 10px;
        }
        .tishi text{
            display: inline-block;
            width: 100%;
            text-indent: 20px;
        }
        .all .qbox{
            width: 90%;
            margin: 0 auto;
        }
        .all .qbox h3{
            margin-top: 30px;
            color: #aaa;
        }
        .all .qbox .quest{
            width: 100%;
            height: auto;
            margin-bottom: 20px;
        }
        .quest h4{
            font-weight: 700;
            margin-bottom: 10px;
            width: 100%;
        }
        .quest label{
            margin-top: 10px;
            z-index: 99;
        }
        .quest input{
            display: inline-block;
            font-size: 10px;
            border:1px solid #999;
        }
        .quest .tcan{
            font-size: 20px;
        }
        .price{
            color: #f74;
            margin: 0 10px;
        }
        .youhui{
            color:#f04;
        }
        .quest .jiage{
            margin-bottom: 20px;
        }
        .jiage text{
            font-size: 16px;
            font-weight: 700;
            color: #f74;
        }
        .jiage .youhui{
            color: #f04;
            font-size: 16px;
            font-weight: 700;
        }
        .quest .neirong{
            width: 90%;
            height: auto;
            margin: 0 auto;
            text-indent:30px;
            margin-bottom: 20px;
            color: #777;
        }
        .foot{
            width: 90%;
            height: auto;
            margin: 0 auto;
            margin-bottom: 30px;
        }
        .foot text{
            width: 100%;
            display: inline-block;
            font-size: 14px;
        }
        h3 text{
            font-size: 16px;
            color: #f74;
        }
        .jia{
            font-weight: 700;
            color: #f14;
            margin-left: 20px;
        }
        .top img{
            height: 40px;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    function submits(){
                var sth = document.getElementById("total_price").value;
                console.log(sth)
                if(!sth||sth==0){
                    alert("提交失败！");
                }else{
                    document.getElementById("form1").submit();
                }
            }
</script>
<div class="all">
        <div>
            <div class="col-xs-0 col-lg-2"></div>
            <div class="col-xs-12 col-lg-8" style="margin: 0 auto;border-left:1px solid #ccc;border-right:1px solid #ccc;margin-top: 10px;">
                 <form id="form1"  role="form" action="" method="post" enctype="multipart/form-data">
                     <input type="hidden" name="_token" value="{{ csrf_token() }}">
                     <input type="hidden" name="id" value="{{ $id }}">
                     <input type="hidden" id="total_price" name="total_price" value=""/>
                <div class="top" style="width: 90%;margin: 0 auto;display: flex;margin-bottom: 40px;">
                    <img  class="col-xs-3 col-lg-2" src="{{cdn_asset('/assets/img/logo.jpg')}}">
                    <img  class="col-xs-9 col-lg-10" src="{{cdn_asset('/assets/img/top.jpg')}}" alt="">
                </div>
                <div class="tishi" style="border-bottom: 1px solid #ccc;">
                    <h4>温馨提示：</h4>
                    <text>1.如仅对某单项项目有检测的需求，请在单项项目列表中勾选检测项目。</text> 
                    <text>2.如果对我们提供的套餐项目有检测的需求，请在套餐项目列表中勾选检测项目。</text>
                    <text>3.套餐项目中的内容是对单项项目的优化搭配组合，如需要套餐检测与单项检测搭配使用，请留意检测内容是否有覆盖重复。</text>
                    <text>4.在项目选择中有任何疑问，请随时咨询我们的现场工作人员，他们将为您提供最合理的项目搭配。</text>
                </div>

                <div class="qbox" id="qbox">
                <h3>若以下单项项目有检测的需求，请勾选检测项目。</h3>
                <text class="col-xs-12" style="margin-bottom: 20px;color:#f74;">项目价格<text style="color:#f04;" class="jia">现场优惠价</text></text>
                </div>
                <div style="margin-bottom: 30px;">
                    <div class="col-xs-3 col-lg-8"></div>
                    <div class="col-xs-9 col-lg-4">
                        <text style="color:#f04;">总计：￥<span id="zongjia"></span>元</text>
                        <input style="margin-left: 20px;margin-bottom: 20px;"  type="button" class="btn btn-default" value="提交" onclick="submits()"/>
                    </div>
                </div>
                <div class="foot">
                    <text>总部地址：成都市天府新区湖畔路北段366号天府菁蓉中心A区4号楼</text>
                    <text>联系电话：028-86380818</text>
                    <text>医学检验实验室地址：成都市高新区科园南路88号天府生命科技园B1栋302、402</text>
                    <text>联系电话：028-86051561</text>
                    <text>网址：www.scprecisionmedicine.cn</text>
                    <text>咨询电话：4008381377</text>
                    <text>微信公众号：MyHealth我的健康</text>
                </div>
                 </form>
            </div>
        </div>
    </div>
    
    <script type="text/javascript">
                
                var data_single = "{{$data_single}}";
                data_single = data_single.replace(/&quot;/g,'\"');
                data_single = data_single.replace(/&lt;/g,'\<');
                data_single = data_single.replace(/&gt;/g,'\>');
                var chose = JSON.parse(data_single);


                var data_combo = "{{$data_combo}}";
                data_combo = data_combo.replace(/&quot;/g,'\"');
                data_combo = data_combo.replace(/&lt;/g,'\<');
                data_combo = data_combo.replace(/&gt;/g,'\>');
                var taocan = JSON.parse(data_combo);

               
        var cl = chose.length
        console.log(cl)
        var choses = ''
        for (var i = 0; i < cl; i++) {
            choses += '<div class="col-lg-12 quest">'
            choses += '<h4>'+chose[i].name+'</h4>';
            var dl = chose[i].data.length;
            for (var d = 0; d < dl; d++) {
                choses += '<label class="col-xs-12 col-lg-4">'
                choses += '<input type="checkbox" class="cprice" value="'+chose[i].data[d].id+'" name="xiangmu[]"/>'+chose[i].data[d].name+'<span class="price">'+chose[i].data[d].price+'</span><span class="youhui">'+chose[i].data[d].youhui+'</span>';
                choses += '</label>';
            }
            choses += '</div>'
        }
        console.log(choses)
        document.getElementById("qbox").innerHTML += choses;
        var tl = taocan.length
        console.log(tl)
        var taocans = '<hr/><h3 style="margin-top:35px;">若以下体检套餐有需求，请勾选该套餐。</h3>';
        for (var t = 0; t < tl; t++) {
            taocans += '<div class="quest">';
            taocans += '<label class="tcan">'
            taocans += '<input class="tprice" type="checkbox" value="'+taocan[t].id+'" name="tcan[]">'+taocan[t].name;
            taocans += '</label>';
            taocans += '<div class="col-xs-12 jiage">';
            taocans += '<div class="col-xs-2"></div>';
            taocans += '价格：<text>'+taocan[t].jiage+'</text>';
            taocans += '现场优惠：<span class="youhui">'+taocan[t].youhui+'</span>';
            taocans += '</div>';
            taocans += '<div class="neirong">'+taocan[t].neirong+'</div>';
            taocans += '</div>'
        }           
        console.log(taocans)
        document.getElementById("qbox").innerHTML += taocans;


        
        // var spanNode = document.getElementById("sum");
        // spanNode.innerHTML = sum +"元" ;
    </script>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="{{cdn_asset('/assets/js/jquery-3.2.1.js')}}"></script>
<script src="{{cdn_asset('/assets/js/bootstrap.min.js')}}"></script>
<script type="text/javascript">
        var zonger = 0
        $(document).ready(function(){
        //点击增加按钮触发事件
            $(".tprice").click(function(){
                if($(this)[0].checked){
                    var num = $(this).parent().parent().children(".jiage").children(".youhui");
                    console.log(parseInt(num.text()))
                    var price = parseInt(num.text())
                    zonger += price;
                }else if(!$(this)[0].checked){
                    var num = $(this).parent().parent().children(".jiage").children(".youhui");
                    console.log(parseInt(num.text()))
                    var price = parseInt(num.text())
                    zonger -= price;
                }
                console.log(zonger)
                document.getElementById("zongjia").innerHTML = zonger;
                document.getElementById("total_price").value = zonger

            });
            $(".cprice").click(function(){
                if($(this)[0].checked){
                    var num = $(this).parent().children(".youhui");
                    console.log(parseInt(num.text()))
                    var price = parseInt(num.text())
                    zonger += price;
                }else if(!$(this)[0].checked){
                    var num = $(this).parent().children(".youhui");
                    console.log(parseInt(num.text()))
                    var price = parseInt(num.text())
                    zonger -= price;
                }
                console.log(zonger)
                document.getElementById("zongjia").innerHTML = zonger;
                document.getElementById("total_price").value = zonger

            });
        })
    </script>
</body>
</html>