<!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">
</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 class="bs-example bs-example-form" 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>
                        <button style="margin-left: 20px;margin-bottom: 20px;"  type="submit" class="btn btn-default" onclick="zong()">提交</button>
                    </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 taocan = [
                    {id:'tc1',name:'血清维生素含量检测套餐',neirong:'检测血清中维生素A、维生素E、维生素D2、维生素D3、维生素K、维生素B1、维生素B2、维生素B3、维生素B5、维生素B6、维生素C、维生素B7、维生素B9（叶酸）、维生素B12的含量，精准指导各种维生素的补充。维生素的失衡与众多慢性疾病和肿瘤密切相关，体内维生素的平衡是保证健康的关键。',jiage:'1480',youhui:'1180'},
                    {id:'tc2',name:'骨骼营养健康关爱套餐',neirong:'检测包含了维生素A代谢、维生素D代谢、钙质代谢、锌质代谢能力检测。维生素A、D、钙、锌是直接关系到骨骼健康的营养物质，它们的利用需要人体的各种代谢能力的参与，通过本检测，指导和骨骼健康物质的补充和调整。',jiage:'720',youhui:'570'},
                    {id:'tc3',name:'心脑血管呵护检测套餐',neirong:'<p style=xxxx">心脑血管疾病的发生与相关的基因缺陷存在着密切的关系，该检测通过对与冠心病、心房纤维性颤动、静脉血栓栓塞、心原性猝死、中风相关基因进行检测，明确高危因素，及早调整生理状态，做到疾病的早期预防。',jiage:'720',youhui:'570'},
                    {id:'tc4',name:'遗传性肿瘤基因检测经济套餐',neirong:'涵盖了结直肠癌、肺癌、肝癌、胃癌、甲状腺癌、乳腺癌（女性）、宫颈癌（女性）、子宫内膜癌（女性）、卵巢癌（女性），共计9种肿瘤发病风险的评估。本检测覆盖了与肿瘤相关的数十个主要遗传位点。',jiage:'980',youhui:'780'},
                    {id:'tc5',name:'遗传性肿瘤基因检测实用套餐',neirong:'涵盖了结直肠癌、肺癌、肝癌、膀胱癌、肾癌、胃癌、甲状腺癌、胰腺癌、慢性淋巴细胞白血病、基底细胞癌、鼻咽癌、口腔癌、咽喉癌、黑色素瘤、骨髓增生性肿瘤、霍奇金氏淋巴瘤、食管癌、前列腺癌（男性）、睾丸癌（男性）、乳腺癌（女性）、宫颈癌（女性）、子宫内膜癌（女性），共计9种肿瘤发病风险的评估。本检测覆盖了与肿瘤相关的数十个主要遗传位点。',jiage:'2400',youhui:'1900'},
                    {id:'tc6',name:'心脑血管药物治疗安全指导套餐',neirong:'心脑血管常用的治疗药物的药效、毒副作用、用药剂量都与个人的遗传背景密切相关，同医不同药、同药不同量。通过基因检测技术，精准评估心脑血管疾病相关的37种药物效果，并精准提供指导个性用药指导，做到用对药、少吃药、治好病的目的。',jiage:'3960',youhui:'3160'},
                    {id:'tc7',name:'成人健康护卫套餐',neirong:'几乎除了外伤以外的所有疾病都与遗传相关。每个人的遗传特质决定了自身患病风险不同或者对环境刺激的反应不同，它们都影响着自身的健康。我们对多种肿瘤（22种）、心脑血管疾病（5种）、 营养代谢能力（11种）、神经类疾病（3种）、心理类疾病（3种）、肥胖风险（3种）、慢性疾病（27种）等，进行综合性精准检测，明确自身风险，做到早期的预防和干预。本检测覆盖了和人体疾病与营养相关的上千个遗传位点的检测。',jiage:'5640',youhui:'4500'},
                    {id:'tc8',name:'健康无忧套餐',neirong:'本检测通过大规模医院检测技术，针对恶性肿瘤、慢性遗传性疾病、心脑血管疾病、免疫代谢性疾病、神经系统疾病、营养代谢能力、常见药物用药有效性安全性等上千种疾病以及遗传特质进行全面评估，明确高危因素，及早调整生理状态，做到疾病的早期预防。本检测覆盖了人类基因组上数十万个遗传位点。',jiage:'27000',youhui:'21000'},
                ]*/
                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 chose = [
               {name:'肿瘤风险类',data:[
                    {id:'a1',name:'结直肠癌',price:'300',youhui:'280'},
                    {id:'a2',name:'肺癌',price:'300',youhui:'280'},
                    {id:'a3',name:'黑色素瘤',price:'300',youhui:'280'},
                    {id:'a4',name:'卵巢癌（女性）',price:'300',youhui:'280'},
                    {id:'a5',name:'胰腺癌',price:'300',youhui:'280'},
                    {id:'a6',name:'乳腺癌（女性）',price:'300',youhui:'280'},
                    {id:'a7',name:'宫颈癌（女性）',price:'300',youhui:'280'},
                    {id:'a8',name:'膀胱癌',price:'300',youhui:'280'},
                    {id:'a9',name:'前列腺癌（男性)',price:'300',youhui:'280'},
                    {id:'a10',name:'肾癌',price:'300',youhui:'280'},
                    {id:'a11',name:'胃癌',price:'300',youhui:'280'},
                    {id:'a12',name:'子宫内膜癌（女性）',price:'300',youhui:'280'},
                    {id:'a13',name:'腹主动脉瘤',price:'300',youhui:'280'},
                    {id:'a14',name:'基底细胞癌',price:'300',youhui:'280'},
                    {id:'a15',name:'肝细胞癌（肝癌）',price:'300',youhui:'280'},
                    {id:'a16',name:'骨髓增生性肿瘤',price:'300',youhui:'280'},
                    {id:'a17',name:'脑动脉瘤',price:'300',youhui:'280'},
                    {id:'a18',name:'慢性淋巴细胞性白血病',price:'300',youhui:'280'},
                    {id:'a19',name:'食管癌',price:'300',youhui:'280'},
                    {id:'a20',name:'霍奇金淋巴瘤',price:'300',youhui:'280'},
                    {id:'a21',name:'鼻咽癌',price:'300',youhui:'280'},
                    {id:'a22',name:'口腔和咽喉癌',price:'300',youhui:'280'},
                    {id:'a23',name:'甲状腺癌',price:'300',youhui:'280'},
                    {id:'a24',name:'睾丸癌（男性）',price:'300',youhui:'280'},
                    ]},
                {name:'精神和心理',data:[
                    {id:'b1',name:'抑郁狂躁性忧郁症',price:'300',youhui:'280'},
                    {id:'b2',name:'双相型障碍',price:'300',youhui:'280'},
                    {id:'b3',name:'强迫症',price:'300',youhui:'280'},
                    {id:'b4',name:'精神分裂症',price:'300',youhui:'280'}
                    ]},
                {name:'神经系统',data:[
                    {id:'c1',name:'老年痴呆',price:'300',youhui:'280'},
                    {id:'c2',name:'帕金森病',price:'300',youhui:'280'}
                    ]},
                {name:'消化系统',data:[
                    {id:'d1',name:'结直肠癌',price:'300',youhui:'280'},
                    {id:'d2',name:'原发性胆汁性肝硬化',price:'300',youhui:'280'},
                    {id:'d3',name:'胆结石',price:'300',youhui:'280'},
                    {id:'d4',name:'乳糜泻',price:'300',youhui:'280'},
                    {id:'d5',name:'非酒精性脂肪肝',price:'300',youhui:'280'},
                    ]},
                {name:'骨骼肌肉系统',data:[
                    {id:'e1',name:'骨质疏松症',price:'300',youhui:'280'},
                    {id:'e2',name:'强直性脊柱炎',price:'300',youhui:'280'},
                    {id:'e3',name:'骨关节炎',price:'300',youhui:'280'},
                    {id:'e4',name:'痛风',price:'300',youhui:'280'},
                    {id:'e5',name:'类风湿性关节炎',price:'300',youhui:'280'},
                    {id:'e6',name:'迟发型运动障碍',price:'300',youhui:'280'},
                    ]},
                {name:'内分泌',data:[
                    {id:'f1',name:'I型糖尿病',price:'300',youhui:'280'},
                    {id:'f2',name:'II型糖尿病',price:'300',youhui:'280'},
                    {id:'f3',name:'甲状腺功能减退',price:'300',youhui:'280'},
                    ]},
                {name:'营养与代谢',data:[
                    {id:'g1',name:'肥胖症',price:'300',youhui:'280'},
                    {id:'g2',name:'高甘油三脂',price:'300',youhui:'280'},
                    {id:'g3',name:'节食减肥能力',price:'300',youhui:'280'},
                    {id:'g4',name:'运动减肥能力',price:'300',youhui:'280'},
                    {id:'g5',name:'维生素A代谢',price:'300',youhui:'280'},
                    {id:'g6',name:'叶酸代谢',price:'300',youhui:'280'},
                    {id:'g7',name:'维生素B12代谢',price:'300',youhui:'280'},
                    {id:'g8',name:'维生素D代谢',price:'300',youhui:'280'},
                    {id:'g9',name:'维生素E代谢',price:'300',youhui:'280'},
                    {id:'g10',name:'乳糖代谢',price:'300',youhui:'280'},
                    {id:'g11',name:'钙代谢',price:'300',youhui:'280'},
                    {id:'g12',name:'铁代谢',price:'300',youhui:'280'},
                    {id:'g13',name:'尼古丁代谢',price:'300',youhui:'280'},
                    {id:'g14',name:'咖啡因代谢',price:'300',youhui:'280'},
                    {id:'g15',name:'酒精代谢',price:'300',youhui:'280'},
                    ]},
                {name:'眼科',data:[
                    {id:'h1',name:'老年性黄斑变性',price:'300',youhui:'280'},
                    {id:'h2',name:'剥落性青光眼',price:'300',youhui:'280'},
                    ]},
                {name:'循环系统',data:[
                    {id:'i1',name:'冠心病',price:'300',youhui:'280'},
                    {id:'i2',name:'高血压',price:'300',youhui:'280'},
                    {id:'i3',name:'房颤',price:'300',youhui:'280'},
                    {id:'i4',name:'中风',price:'300',youhui:'280'},
                    {id:'i5',name:'静脉血栓栓塞',price:'300',youhui:'280'},
                    {id:'i6',name:'猝死',price:'300',youhui:'280'},
                    {id:'i7',name:'心梗',price:'300',youhui:'280'},
                    ]},
                {name:'呼吸系统',data:[
                    {id:'j1',name:'慢性阻塞性肺病',price:'300',youhui:'280'},
                    {id:'j2',name:'哮喘',price:'300',youhui:'280'},
                    {id:'j3',name:'过敏性鼻炎',price:'300',youhui:'280'},
                    ]},
                {name:'皮肤',data:[
                    {id:'k1',name:'系统性红斑狼疮',price:'300',youhui:'280'},
                    {id:'k2',name:'牛皮癣',price:'300',youhui:'280'},
                    {id:'k3',name:'泛发性白癜风',price:'300',youhui:'280'},
                    {id:'k4',name:'过敏性皮炎',price:'300',youhui:'280'},
                    {id:'k5',name:'斑秃',price:'300',youhui:'280'},
                    ]},
                {name:'泌尿、生殖系统',data:[
                    {id:'l1',name:'子宫内膜异位症（女性）',price:'300',youhui:'280'},
                    {id:'l2',name:'男性不孕症（男性）',price:'300',youhui:'280'},
                    {id:'l3',name:'慢性肾病',price:'300',youhui:'280'},
                    {id:'l4',name:'肾病',price:'300',youhui:'280'},
                    {id:'l5',name:'肾结石',price:'300',youhui:'280'},
                    ]},
                    ];  */
        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;


        function zong(){
            var items = document.getElementsByName("tcan");
            console.log(items)
            var sum = 0 ;
            for(var x=0;x<items.length;x++){
                if(items[x].checked){
                    sum += parseInt(items[x])
                }
            }
            console.log(sum)
        }
        // 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>