<!DOCTYPE html>
<!--[if IE 8]>
<html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html>
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <base href="#springUrl('/assets/adminlte/')"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>工作台</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="plugins/ionicons/css/ionicons.min.css">

    <!-- DataTables -->
    <link rel="stylesheet" href="plugins/datatables/dataTables.bootstrap.css">

    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
    <!-- Morris chart -->
    <link rel="stylesheet" href="plugins/morris/morris.css">
    <!-- jvectormap -->
    <link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <!-- Date Picker -->
    <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker-bs3.css">
    <link rel="stylesheet"
          href="plugins\bootstrap-fileinput\fileinput.min.css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style media=print>
        .Noprint{display:none;}
        .PageNext{page-break-after: always;}
    </style>
</head>
<body class="hold-transition skin-blue sidebar-mini">


<div class="wrapper">
    <div class="content-wrapper" style="margin-left:0;">
        <div id="importExcelDiv"></div>

        <section class="content-header">
            <h1>
                现场签到管理
                <small>现场签到</small>
            </h1>
            <ol class="breadcrumb">
                <li><a><i class="fa fa-dashboard"></i>首页</a></li>
                <li><a class="active">管理列表</a></li>
            </ol>
        </section>

        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <form id="memberNameSearchTable"
                                  action="#springUrl('/a/workshop/exportExcel?meetingId=')${meetingId}" method="get"
                                  onkeydown="if(event.keyCode==13){return false;}">
                                <div class="col-xs-2">
                                    <input type="text" class="form-control "
                                           name="name" placeholder="会员名">
                                </div>
                                <div class="col-xs-5" style="padding-left: 0;">
                                    <a href="javascript:void (0)" class="btn btn-primary seatchMemberName">搜索</a>
                                </div>
                            </form>
                        </div><!-- /.box-header -->
                        <div class="box-body">
                            <table id="memberNameTable" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <td hidden="true">Id</td>
                                    <th>会员姓</th>
                                    <th>会员名</th>
                                    <th>会员姓名(EN)</th>
                                    <th>预导入公司(CN)</th>
                                    <th>预导入公司(EN)</th>
                                    <th>邀请码</th>
                                    <th>桌号</th>
                                    <th>工厂参观分组</th>
                                    <th>试乘试驾体验分组</th>
                                    <th>所属研讨会</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="memberNameTableRecord">
                                </tbody>
                            </table>
                        </div><!-- /.box-body -->
                    </div><!-- /.box -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </section><!-- /.content -->

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <form id="seachTableForm"
                                  action="#springUrl('/a/workshop/exportExcel?meetingId=')${meetingId}" method="get"
                                  onkeydown="if(event.keyCode==13){return false;}">
                                <div class="col-xs-2">
                                    <textarea type="text" onkeydown='if(event.keyCode==13){doSearch()}' style="width: 130px;height: 35px;" id="code" class="form-control "
                                              name="code" placeholder="邀请码"></textarea>
                                </div>
                                <div class="col-xs-5" style="padding-left: 0;">
                                    <a href="javascript:void (0)" class="btn btn-primary search" style="display:none;">搜索</a>
                                </div>
                            </form>
                        </div><!-- /.box-header -->


                        <div class="box-body" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
                            <div class="">
                                <div class="modal-content" style="box-shadow: none;">
                                    <div class="modal-header">
                                        <h4 class="modal-title" id="myModalLabel">
                                            人员信息打印预览
                                        </h4>
                                    </div>
                                    <div class="modal-body" id="printArea0" style="width: 1050px;height:500px;font-size: 46px;position:relative;margin: 0 auto;text-align: center;background: #fff;padding: 0px 0 30px 0;padding-left:20px">
                                        <!--<p style="margin: 0">邀请码：CB0123</p>-->
                                        <p id="nameCN"  style="margin: 0;font-weight:bold;"></p>
                                        <p id="nameEN"  style="margin: 0;font-weight:bold;"></p>
                                        <p></p>
                                        <div style="height: 156px;padding-top: 36px;">
                                            <p  style="font-weight:bold;font-size: 47px" id="companyCN"></p>
                                            <p style="font-size: 40px;font-weight:bold;" id="companyEN"></p>
                                        </div>

                                        <div class="modal-footer" style="position: absolute;bottom:-40px;left: 0;width: 100%;font-size: 42px;text-align: center">
                                            <p style="float: left;width: 33.33%" id="fl">1</p>
                                            <p style="float: left;width: 33.33%" id="fc">2</p>
                                            <p style="float: left;width: 33.33%" id="fr">3</p>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-primary" id="printButton">
                                            打印
                                        </button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal -->
                            <div id="printContent"    style="display:none;width:276px;height:197px;background-color: red;">
                            </div>
                        </div>


                        <div style="display:none;"  class="box-body">
                            <table id="table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <td hidden="true">Id</td>
                                    <th>会员姓</th>
                                    <th>会员名</th>
                                    <th>会员姓名(EN)</th>
                                    <th>预导入公司(CN)</th>
                                    <th>预导入公司(EN)</th>
                                    <th>邀请码</th>
                                    <th>桌号</th>
                                    <th>工厂参观分组</th>
                                    <th>试乘试驾体验分组</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="tablebody">
                                </tbody>
                            </table>
                        </div><!-- /.box-body -->
                    </div><!-- /.box -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </section><!-- /.content -->



        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3>历史搜索记录</h3>
                        </div><!-- /.box-header -->
                        <div class="box-body">
                            <table id="tableRecord" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <td hidden="true">Id</td>
                                    <th>会员姓</th>
                                    <th>会员名</th>
                                    <th>会员姓名(EN)</th>
                                    <th>预导入公司(CN)</th>
                                    <th>预导入公司(EN)</th>
                                    <th>邀请码</th>
                                    <th>桌号</th>
                                    <th>工厂参观分组</th>
                                    <th>试乘试驾体验分组</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="tablebodyRecord">
                                </tbody>
                            </table>
                        </div><!-- /.box-body -->
                    </div><!-- /.box -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </section><!-- /.content -->

    </div><!-- /.content-wrapper -->
    <div id="addlabelModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- dialog body -->
                <div class="modal-body">
                    <input class="form-control select2"  style="width: 100%" id="addlabel"
                           placeholder='英文名字'>
                    </input>
                </div>
                <div style="text-align: center;padding-bottom: 20px;">
                    <button style="width: 100px;" type="button" class="btn btn-primary" onclick="addlabelsubmit()">确定
                    </button>
                    <button style="width: 100px;" type="button" id="tagCacel" class="btn btn-default">取消</button>
                </div>
                <!-- dialog buttons -->
            </div>
        </div>
    </div>

    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</div><!-- ./wrapper -->
<!-- jQuery 2.1.4 -->
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables/extensions/i18n/lanauage_ch.js"></script>
<script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.min.js"></script>
<!--fileinput js-->
<script src="plugins\bootstrap-fileinput\fileinput.js"></script>
<script src="plugins/bootstrap-fileinput/zh.js"></script>
<script src="plugins/bootstrap-fileinput/zh2.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<script type="text/javascript"
        src="plugins/jquery-validation/js/jquery.validate.min.js"></script>
<script type="text/javascript"
        src="plugins/qrcode/qrcode.js"></script>
<script src="plugins/html2canvas-master/dist/html2canvas.min.js"></script>
<script src="plugins/canvas2image-master/canvas2image.js"></script>
<!-- AdminLTE for demo purposes -->
<script>
    var csrfheader = {name: '_csrf_header', value: '${_csrf.headerName}'};
    var csrftoken = {name: '_csrf', value: '${_csrf.token}'};
</script>
<script src="common/js/cfapp.js"></script>
<script>

    var currentInfo = [];
    var printInfo = localStorage.getItem("empPrint");
    if(printInfo&&printInfo!='')
    {
        currentInfo = JSON.parse(printInfo);
    }

    function  handleUnDefined(str) {
        if(!str)
        {
            str = "";
        }
        return str;
    }

    //初始化历史数据表格
    function initTable() {
        var tmp = trHtml(currentInfo);
        $('#tableRecord #tablebodyRecord').append(tmp);
    }

    function trHtml(obj){
        var tmp = "";
        for (var i = 0; i < obj.length; i++)
        {
            var personInfo = obj[i];
            tmp+= '<tr role="row" data-id ="'+personInfo.invitcode+'" class="odd"><td style="display:none;">'+personInfo.invitcode+'</td><td>'+personInfo.msurname+'</td><td>'+personInfo.mname+'</td><td>'+
                    personInfo.name_en+'</td><td>'+personInfo.organization+'</td><td>'+personInfo.organization_en+'</td>';
            tmp +='<td>'+personInfo.invitcode+'</td>' +
                    '<td>'+personInfo.table_number+'</td><td>'+personInfo.factory_number+'</td><td>'+personInfo.drive_number+'</td><td>'+personInfo.title+'</td>'+
            '<td><a codeinfo="'+personInfo.invitcode+'" onclick="preview(this)">预览</a></td></tr>';
        }
        return tmp;
    }

    function doSearch()
    {
        $("#code").val( $("#code").val().replace("\n","").trim());
        $('.search').click();
    }


    function preview(node)
    {
        var invitecode = $(node).attr("codeinfo");
        $("#printContent img").remove();
        $("#code").val(invitecode);
        $(".search").click();
    }

    initTable();
    function formatDates(now) {
        var now = new Date(now);
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var date = now.getDate();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        return year + "-" + month + "-" + date + "   " + hour + ":"
                + minute + ":" + second;
    }

    function seachTable() {
        var sSource = "#springUrl('/a/signin/signList')";
        var aoData = {
            iDisplayStart: 1,
            iDisplayLength: 10
        }
        var retrieveData = function (sSource, aoData, fnCallback) {

            $("#seachTableForm input").each(function () {
                var params = {
                    name: $(this).attr("name"),
                    value: $(this).val()
                };
                aoData.push(params);
            });

            $("#seachTableForm textarea").each(function () {
                var params = {
                    name: $(this).attr("name"),
                    value: $(this).val()
                };
                aoData.push(params);
            })

            $.ajax({
                "type": "GET",
                "url": sSource,
                "dataType": "json",
                "data": aoData, //以json格式传递
                "success":function(json, settings){
                    fnCallback(json);



                    initComplete(settings, json);
                }
            });
        };

        var initComplete =function(settings, json ) {
            var  arr=json.aaData;
            for(var i=0,j=arr.length;i<j;i++){
                var obj=arr[i];
                var id=obj.id;
                var text=obj.invitcode;
                var divId=id+"-qrcode";
//                var qrcode=new QRCode(divId,{
//                    render: "canvas", //也可以替换为table
//                    width: 140,
//                    height: 140,
//                    text:text
//                });


                var personInfo = obj;
                var node = $("tr[data-id="+personInfo.invitcode+"]");
                if(!$(node).html()){
                    var tmp = '<tr role="row" data-id ="'+personInfo.invitcode+'" class="odd">' +
                            '<td style="display:none;">'+personInfo.invitcode+'</td>' +
                            '<td>'+personInfo.msurname+'</td>' +
                            '<td>'+personInfo.mname+'</td>' +
                            '<td>'+personInfo.name_en+'</td>' +
                            '<td>'+personInfo.organization+'</td>' +
                            '<td>'+personInfo.organization_en+'</td>';
                    tmp +='<td>'+personInfo.invitcode+'</td>';
                    tmp +='<td>'+personInfo.table_number+'</td>' +
                            '<td>'+personInfo.factory_number+'</td>' +
                            '<td>'+personInfo.drive_number+'</td>';
                    tmp +='<td><a codeinfo="'+personInfo.invitcode+'" onclick="preview(this)">预览</a></td>' +
                            '</tr>';
                    currentInfo.push(obj);
                }

            }
            localStorage.setItem("empPrint",JSON.stringify(currentInfo));
            $("#code").val('');
        }



        $('#table').DataTable({
            "lengthChange": false,
            "searching": false,
            "ordering": false,
            "bFiltered": false,
            "bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": sSource,
            "fnServerData": retrieveData,
            "pagingType": "full_numbers",
            "aoColumns": [
                {
                    "mData": "id"
                },
                {
                    "mData": "msurname"
                },
                {
                    "mData": "mname"
                },
                {
                    "mData": "name_en"
                },
                {
                    "mData": "organization"
                },
                {
                    "mData":"organization_en"
                },
                {
                    "mData": "invitcode"
                },
                {
                    "mData": "table_number"
                },
                {
                    "mData": "factory_number"
                },
                {
                    "mData": "drive_number"
                },

                {
                    "mData": "id"
                }],
            "aoColumnDefs": [
                { // set default column settings
                    'visible': false,
                    'targets': [0]
                },{
                    "aTargets": [10],
                    "mData": "id",
                    "mRender": function (a, b, c, d) {//a表示id对应的值，c表示当前记录行对象
                        $("#nameCN").text(handleUnDefined(c.msurname)+handleUnDefined(c.mname));
                        $("#nameEN").text(handleUnDefined(c.name_en));
                        $("#companyCN").text(handleUnDefined(c.organization));
                        $("#companyEN").text(handleUnDefined(c.organization_en));

                        var tableNum = handleUnDefined(c.table_number);//放左边
                        var driverNum = handleUnDefined(c.drive_number);//放中间
                        var facVisitNum = handleUnDefined(c.factory_number);//放右边

                        $("#fl").text(handleUnDefined(c.table_number));
                        $("#fc").text(handleUnDefined(c.drive_number));
                        $("#fr").text(handleUnDefined(c.factory_number));


                        var cntElem = $('#printArea0')[0];

                        var shareContent = cntElem;//需要截图的包裹的（原生的）DOM 对象
                        var width = shareContent.offsetWidth; //获取dom 宽度
                        var height = shareContent.offsetHeight; //获取dom 高度
                        var canvas = document.createElement("canvas"); //创建一个canvas节点
                        var scale = 1; //定义任意放大倍数 支持小数
                        canvas.width = width * scale; //定义canvas 宽度 * 缩放
                        canvas.height = height * scale; //定义canvas高度 *缩放
                        canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
                        var opts = {
                            scale: scale, // 添加的scale 参数
                            canvas: canvas, //自定义 canvas
                            // logging: true, //日志开关，便于查看html2canvas的内部执行流程
                            width: width, //dom 原始宽度
                            height: height,
                            useCORS: true // 【重要】开启跨域配置
                        };


                        html2canvas(document.getElementById("printArea0"),opts).then(function(canvas) {
                            // document.body.appendChild(canvas);
//        $("body").append(canvas);
//        var url = canvas.toDataURL();
                            //  $("#printContent").html(Canvas2Image.convertToImage(canvas, 255, 170, "png"))

                            var context = canvas.getContext('2d');
                            // 【重要】关闭抗锯齿
                            context.mozImageSmoothingEnabled = false;
                            context.webkitImageSmoothingEnabled = false;
                            context.msImageSmoothingEnabled = false;
                            context.imageSmoothingEnabled = false;
                            // 【重要】默认转化的格式为png,也可设置为其他格式
                            var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height,"png");
                            $("#printContent").append(img);
//                            $("#printContent").append('	<div style="page-break-after: always;"></div>');
                            $(img).css({
                                "width":  canvas.width / 2 + "px",
                                "height":   canvas.height / 2.037 + "px",
                                "margin":"0 auto",
                                "display":"block",
                                "border-color":"red",
                                "border-style":"solid", "border-width":"1px"

                        }).addClass('f-full');

                            //    $("#printContent img").hide();

                            setTimeout(function (){
                                printMsg();
                            },800)

                        });

                        return "<a  onclick='printDesc()'>打印</a>";
                    }
                }
            ]
        });
    }

    jQuery(document).ready(function () {
        seachTable();
        $('.datepicker').datepicker({
            show: true,
            format: 'yyyy-mm-dd',
            autoclose: true,
            language: 'zh-CN',
            todayBtn: 'linked',
            clearBtn: 'linked'

        });
        $('.search').click(function () {

            //$('#tableRecord #tablebodyRecord').append($("#table #tablebody tr[role='row']").prop("outerHTML"));


            $("#printContent").html('');

            $("#table").dataTable().fnClearTable();
        });


        $(".seatchMemberName").click(function(){
            $('#memberNameTable #memberNameTableRecord').html("");
            var sSource = "#springUrl('/a/signin/signList')";
            var aoData = {
                iDisplayStart: 0,
                iDisplayLength: 100
            }
            $("#memberNameSearchTable input").each(function () {
                aoData[$(this).attr("name")]=$(this).val();
            })
            $.ajax({
                "type": "GET",
                "url": sSource,
                "dataType": "json",
                "data": aoData, //以json格式传递
                "success":function(json, settings){
                    var tmp = trHtml(json.aaData);
                    $('#memberNameTable #memberNameTableRecord').append(tmp);
                }
            });
        })
    });

    function printDesc(){
        //   $("#myModal").modal("show");

    }

    Cfapp.init();
    function removeData(id, meetingId) {
        Cfapp.confirm({
            message: "确定要删除吗",
            btnoktext: "确定",
            btncanceltext: "取消",
            success: function () {
                $.ajax({
                    type: "POST",
                    url: "#springUrl('/a/workshop/delete')",
                    data: {id: id, _csrf_header: csrfheader.value, _csrf: csrftoken.value},
                    dataType: "json",
                    success: function (data) {
                        if (data.errorNo == 0) {
                            Cfapp.alert({
                                message: "删除成功",
                                btntext: "确定",
                                success: function () {
                                    location.href = "#springUrl('/a/workshop/list?meetingId=')" + meetingId

                                }
                            });
                        }
                    },
                    error: function () {
                    }
                })
            },
            cancel: function () {
                //;
            }
        });
    }
    function importExcel(id) {
        var templateExcelUrl = "#springUrl('/a/workshop/templateExcel')";
        var importExcelUrl = "#springUrl('/a/workshop/importExcel')?_csrf_header=" + csrfheader.value + "&_csrf=" + csrftoken.value + "&id=" + id;


        Cfapp.importExcel({
            title: '人员导入',
            importurl: importExcelUrl,
            templateurl: templateExcelUrl,
            cancel: function () {

            },
            success: function () {
                location.href = "#springUrl('/a/workshop/list?meetingId=')${meetingId}";
            }
        });
    }
    $("#tagCacel").click(function () {
        $("#addlabelModal").modal('hide');
    })
    var id = "";
    function addlabel(id1) {
        id = id1;
        $("#addlabel option").attr("selected", false);
        $("#addlabelModal").modal('show');
    }
    function addlabelsubmit() {
        var values = $("#addlabel").val();
        $.ajax({
            "url": "#springUrl('/a/workshop/updateconpany')",
            "type": "POST",
            "data": {conpany: values, id: id, _csrfheader: csrfheader.value, _csrf: csrftoken.value},
            "  jsonType": "json",
            "success": function (data) {
                Cfapp.confirm({
                    message: "修改成功",
                    btnoktext: "确定",
                    btncanceltext: "取消",
                    success: function () {
                        location.href = "#springUrl('/a/workshop/list?meetingId=')${meetingId}";
                    }, cancel: function () {
                        location.href = "#springUrl('/a/workshop/list?meetingId=')${meetingId}";
                    }
                })
                $("#addlabelModal").modal('hide');
            }
        });
    }

</script>
<script>
    $("#printContent").html('');


    // $("#printArea").hide();



    $("#printButton").click(function(){
                printMsg();

            }
    )


    function printMsg()
    {
        $("#printContent").show();




        $("#printContent img").show();
        var bodyContent = $('body').html();
        var printContent = $('#printContent').html();
//        //将body内容替换后进行打印操作，再把body内容还原
        $('body').html(printContent);
        window.print();
//        //  $('body').html(bodyContent);
//        // $("img").hide();
//        location.reload();

    }
</script>


<script>

    //设置选中
    $("#code").focus();

    setInterval(function ()
    {
        $.ajax({
            "type": "GET",
            "url": "#springUrl('/a/signin/heartBeat')",
            "dataType": "json",
            "success":function(json, settings){
            }
        });
    }, 1800000); //5000



</script>

</body>
</html>
