<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>We Complete You</title>
    <!-- <link href="https://data.chinahighlights.com/css/complete-trip.css" rel="stylesheet"> -->
    <link href="http://202.103.68.221/css/complete-trip.css" rel="stylesheet">
    <style type="text/css" media="screen and (min-device-width:768px)">
      .modal-dialog {width: 600px;margin: 100px auto;}
      .modal-content {-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);box-shadow: 0 5px 15px rgba(0,0,0,.5);}
    </style>
    <style type="text/css">
    .sendBtn{border: none;}
    .text-danger{color: #a31022;}
    .complete-tips{ border-bottom: 1px dashed #a31022;}
    .hidden{display: none;}
    .modal-open .modal {overflow-x: hidden;overflow-y: auto;}
    .fade.in {opacity: 1;}
    .modal {display: none;overflow: hidden;position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1050;-webkit-overflow-scrolling: touch;outline: 0;}
    .fade {opacity: 0;-webkit-transition: opacity .15s linear;-o-transition: opacity .15s linear;transition: opacity .15s linear;}
    .modal.in .modal-dialog {-webkit-transform: translate(0, 0);-ms-transform: translate(0, 0);-o-transform: translate(0, 0);transform: translate(0, 0);}
    .modal.fade .modal-dialog {-webkit-transform: translate(0, -25%);-ms-transform: translate(0, -25%);-o-transform: translate(0, -25%);transform: translate(0, -25%);-webkit-transition: -webkit-transform .3s ease-out;-moz-transition: -moz-transform .3s ease-out;-o-transition: -o-transform .3s ease-out;transition: transform .3s ease-out;}
    .modal-content {position: relative;background-color: #fff;border: 1px solid #999;border: 1px solid rgba(0,0,0,.2);border-radius: 6px;-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);box-shadow: 0 3px 9px rgba(0,0,0,.5);background-clip: padding-box;outline: 0;}
    .modal-header {padding: 15px;border-bottom: 1px solid #e5e5e5;min-height: 16.43px;}
    .modal-header .close {margin-top: -2px;}
    button.close {padding: 0;cursor: pointer;background: 0 0;border: 0;-webkit-appearance: none;}
    .close {float: right;font-size: 18px;font-weight: 700;line-height: 1;color: #000;text-shadow: 0 1px 0 #fff;opacity: .2;filter: alpha(opacity=20);}
    h4.modal-title {margin: 0;line-height: 1.428571429;}
    .modal-body {position: relative;padding: 30px;}
    .modal-footer {padding: 30px;text-align: right;border-top: 1px solid #e5e5e5;}
    .btn-default {color: #333;background-color: #fff;border-color: #ccc;}
    .btn {display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;vertical-align: middle;touch-action: manipulation;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 12px;line-height: 1.428571429;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
    .modal-backdrop.in {opacity: .5;filter: alpha(opacity=50);}
    .modal-backdrop.fade {opacity: 0;filter: alpha(opacity=0);}
    .modal-backdrop {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1040;background-color: #000;}
    sup{color: #a31022;font-size: 16px;vertical-align: baseline;top: -0.5em;}
    </style>
    <script src="//data.chinahighlights.com/js/min.php?f=/js/jquery-1.8.2.min.js,/js/ChtPublic.js,/public/js/bootstrap.min.js">
    </script>
    <script type="text/javascript">
    $(document).ready(function() {
      $.ajax({ type: "get", url: "/secureforms/form_token" }).done(function(data) { $("form").append(data); });
      $("#btn").click(function() {
        $.ajax({
          url:"/securedemandform/form_save",
          // url:"/guide-use.php/demandform/form_save",
          type:"POST",
          dataType:"JSON",
          data:$("#demandform").serialize(),
          beforeSend:function(xhr) {
            var flag;
            $("#btn").text('Please wait...');
          },
          complete:function() {
            $("#btn").text('Send to Simon');
          }
        }).done(function(data) {
          if (data.code == 0) {
            $(".required-error").addClass("text-danger");
            $(".complete-tips").removeClass("hidden");
          } else {
            $('#myModal').modal('show');
            $(".complete-tips").addClass("hidden");
          }
        })
      })
    });
    </script>
  </head>
  <body>
    <header>
      <div id="header">
        <!-- <div class="logo"><img src="https://data.chinahighlights.com/pic/logo/logo-132x104.png"></div> -->
        <div class="logo"><img src="http://202.103.68.79/pic/logo/logo-132x104.png"></div>
        <span class="pageTitle"></span>
      </div>
    </header>
    <div id="content">
    <form action="/guide-use.php/demandform/form_save" method="POST" target="hidden-frame" id="demandform" name="demandform">
      <?php echo __FORM_TOKEN__ ?>
      <input type="hidden" name="coli_sn" value="<?=$coli?>">
      <input type="hidden" name="fid" value="<?=$form->F_id?>">
      <ul class="headList">
        <li><?php
         $form_com = str_replace("\r\n", "<br>", $form->F_comment);
         $form_com = str_replace("\n", "<br>", $form_com);
         echo $form_com;
        ?>
        </li>
      </ul>

      <?php foreach ($part as $key => $p) { ?>
        <h2><?=$p["title"]?></h2>
        <div><?php foreach ($p["data"] as $kf => $q) { ?>
          <p class="<?php if($q->FD_required==1){ ?>required-error<?php } ?>">
            <strong><?php echo ($kf+1) ?>.</strong> <em><?php echo $q->FD_question ?>
              <?php if($q->FD_required==1){ ?>
              <sup>&lowast;</sup>
              <?php } ?>
            </em></p>
            <input type="hidden" name="q[q<?=$q->FD_id?>][qclass]" value="<?=trim($q->FD_class)?>">
            <input type="hidden" name="q[q<?=$q->FD_id?>][qtype]" value="<?=trim($q->FD_AnswerType)?>">
            <input type="hidden" name="q[q<?=$q->FD_id?>][fdid]" value="<?=trim($q->FD_id)?>">
            <input type="hidden" name="q[q<?=$q->FD_id?>][ismain]" value="<?=trim($q->FD_ismain)?>">
            <input type="hidden" name="q[q<?=$q->FD_id?>][required]" value="<?=trim($q->FD_required)?>">
          <?php if (intval(trim($q->FD_AnswerType)) > 0) { // 选择题
            $answer_type = intval(trim($q->FD_AnswerType))==1 ? "radio" : "checkbox";
          ?>
              <?php foreach ($q->answer as $ka => $an) { ?>
                  <label>
                  <input type="<?=$answer_type?>" name="q[q<?=$q->FD_id?>][answer][]"
                  value="<?=trim($an->A_number)?>=_<?=trim($q->FD_class) . trim($an->A_class)?>=_<?=$an->A_content?>" id="ra_<?=$q->FD_id?>_<?=$an->A_id?>">
                <?php if(trim($an->A_content) == '') { // 这里不要了 ?>
                  <!-- <input type="text" name="q[q<?=$q->FD_id?>][atext]" data-radioid="ra_<?=$q->FD_id?>_<?=$an->A_id?>" > -->
                <?php } else {?>
                  <em><?php echo trim($an->A_content) ?></em>
                <?php } ?>
                  </label>
              <?php } ?>
          <?php } else { // 填空?>
            <textarea placeholder="<?=$q->FD_comment?>" name="q[q<?=$q->FD_id?>][atext]"></textarea>
            <!-- <input type="text" name="q[q<?=$q->FD_id?>][atext]"> -->
          <?php } ?>
        <?php } ?>
        </div>
      <?php } ?>

      <p class="hidden complete-tips text-danger">Please complete the highlighted questions.</p>
      <button type="submit" class="sendBtn">
        <a href="javascript:void(0)" id="btn">
        Send to Simon
        </a>
      </button>
      </form>
    </div>

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Message</h4>
          </div>
          <div class="modal-body">
            <p>Thank you!</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>
