<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>China Reisen und China Rundreisen individuell | Chinarundreisen.com</title>

    <link href="https://data.chinarundreisen.com/information-view/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://data.chinarundreisen.com/information-view/information/css/order.css" rel="stylesheet" type="text/css"/>
    <link href="https://data.chinarundreisen.com/information-view/information/css/bootstrap-datetimepicker.min.css?v=201506022" rel="stylesheet" type="text/css"/>
    <!--[if lt IE 9]>
    <script src="https://data.chinarundreisen.com/information-view/bootstrap/js/respond.min.js" type="text/javascript"></script>
    <![endif]-->
    <script src="https://data.chinarundreisen.com/information-view/information/js/jquery.min.js" type="text/javascript"></script>
    <script src="https://data.chinarundreisen.com/information-view/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <script src="https://data.chinarundreisen.com/information-view/information/js/jquery-ui.min.1-11-3.js" type="text/javascript"></script>
    <script src="https://data.chinarundreisen.com/information-view/information/js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
    <style type="text/css">.popover{background-color:#f2f600;}</style>
</head>

<body>

<div id="headerWrapper">
  <div id="header">
    <div id="mainnav" class="nav navbar" role="navigation">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-3 col-sm-4 logobox hidden-xs">
            <a href="/">
              <img width="135" src="http://data.chinarundreisen.com/public/pic/common/widget/header/pic/logo1_3d64397.jpg" alt="logo">
            </a>
          </div>
          <div class="col-lg-14 col-sm-13 col-lg-offset-3 col-sm-offset-4">
            <div class="navbar-header">
              <div class="col-xs-24 btn-lg"></div>
              <div class="col-xs-24 text-white"><?php if(!isset($dear)) $dear='Liebe/r'; echo $dear; ?> <?php echo $username; ?></div>
              <div class="col-xs-24 text-white">Buchungsnummer: <?php echo $userinfo[0]->COLI_ID; ?></div>
            </div>
          </div>

          <div class="col-lg-7 col-sm-7 hidden-xs pull-right nopadding">
            <div class="tollfree pull-right" style="padding-top:10px;">
              <div class="currentNo col-sm-24 nopadding"><span class="glyphicon glyphicon-earphone" style="font-size:12px;"></span> +86 773 <?php echo $userinfo[0]->OPI_Telephone; ?>(GMT+8)</div>
              <div class="col-sm-24">
                <div class="currentNo col-sm-24 nopadding"> 800-822-4462(gebührenfrei aus Deutschland)</div>
              </div>
            </div>
          </div>

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

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-24 btn-lg"></div>

    <div class="col-xs-24 welcome-text">
      <h4 class="text-center text-red">Vielen Dank für die Buchung bei Chinarundreisen! </h4>
      <h4 class="text-center text-red">Bitte füllen Sie das folgende Formular aus und schicken es zurück.</h4>
    </div>
    <form id="form-confirm-info" method="post" action="/secureinfoconfirm/confirm/save_confirm_info">
    <div class="col-xs-24 personinfo-box">
      <div class="panel panel-default">
        <div class="panel-body">

          <div class="row panel-new-head">
            <h4 class="text-red">Kunden informationen</h4>
			<p>Bitte prüfen Sie, ob Ihr Name richtig geschrieben ist (vollständiger Name wie im Reisepass) . Da wir die Folgekosten durch ein wegen falschem Namen stornierten Hotel oder Flugticket nicht tragen, ist die richtige Schreibweise Ihres Namens und Ihrer alle Daten unbedingt wichtig.</p>
          </div>

          <div class="col-xs-24 nopadding">
            <div class="form-group col-sm-7 nopadding-R" style="margin-bottom:0px;">
                <label style="width:100%;text-align:left !important;font-weight:normal">
                  <span class="col-xs-6 nopadding"></span>
                  <div class="col-xs-18 nopadding-L" style="height:15px;">
                    <div class="col-xs-11 nopadding text-right">Nachname</div>
                    <div class="col-xs-1 nopadding text-right" style="font-size:18px;width:10px;">/</div>
                    <div class="col-xs-11 nopadding" style="padding-left: 2px !important;">Name</div>    
                  </div>
                </label>
            </div>
			<div class="form-group col-sm-4 nopadding-R" style="margin-bottom:0px;">
                <label class="" style="font-weight:normal">Geburtstag</label>
            </div>
            <div class="form-group col-sm-4 nopadding-R" style="margin-bottom:0px;">
                <label class="" style="font-weight:normal">Passnr.</label>
            </div>
            <div class="form-group col-sm-5 nopadding-R" style="margin-bottom:0px;">
                <label class="" style="font-weight:normal">Verfallsdatum des Reisepasses</label>
            </div>
            
            <div class="form-group col-sm-4" style="margin-bottom:0px;">
                <label class="" style="font-weight:normal">Nationalität</label>
            </div>
          </div>

          <div class="col-xs-24 nopadding personinfo-input-box">

            <div class="form-group col-sm-7 nopadding-R">
                <div class="row">
                  <div class="col-xs-6 nopadding-R">

                    <select class="form-control input-sm nopadding-L" name="gender[]">
                      <option value="100001">Herr</option>
                      <option value="100003">Frau</option>
                    </select>
                  </div>
                  <div class="col-xs-18 nopadding-L">
                    <div class="input-group">
                      <div class="form-control input-sm nopadding">
                        <div class="col-xs-11 nopadding">
                          <input name="sur_name[]" class="common_input form-control input-sm nopadding-R" placeholder="" style="border:none;height:28px;" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie hier Ihren Nachname!">
                        </div>
                        <div class="col-xs-1 nopadding text-center" style="font-size:18px;width:10px;">/</div>
                        <div class="col-xs-11 col-sm-11 nopadding">
                          <input name="given_name[]" class="common_input form-control input-sm nopadding-R" placeholder="" style="border:none;height:28px;" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie hier Ihren Name!">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
			
			<div class="form-group col-sm-4 nopadding-R">
                <div class="input-groups date " data-date="1970-05-20">
                  <input class="form-control input-sm common_input bd_datepicker" type="text" name="birthday[]" value="" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie Ihr Geburtsdatum ein!" autocomplete="off" style="color:#333333 !important;">
                </div>
            </div>
			
            <div class="form-group col-sm-4 nopadding-R">
                <input type="text" class="form-control input-sm common_input" name="passport[]" value="" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie Ihre Ausweisnummer ein!" autocomplete="off">
            </div>

            <div class="form-group col-sm-5 nopadding-R">
                <div class="input-groups date">
                  <input class="form-control input-sm common_input datepicker" type="text" name="passport_expiration_date[]" value="" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie das Datum ein, wann Ihr Personalausweis abläuft!" autocomplete="off" style="color:#333333 !important;">
                </div>
            </div>

            

            <div class="form-group col-sm-4">
                <div class="input-group">
                   <select class="form-control input-sm common_input" name="nationality[]">
                    <optgroup label="--Top Nationalitäten--">
                        <option value="6" selected="selected">
                            Deutschland
                        </option>
                        <option value="470">
                            Österreich
                        </option>
                        <option value="25">
                            die Schweiz
                        </option>
                        <option value="572">
                          Luxemburg
                        </option>
                    </optgroup>
                    <optgroup label="--Mehr Nationalitäten--">
                        
                        <option value="5">
                            Kanada
                        </option>
                        <option value="8">
                            Frankreich
                        </option>
						<option value="527">
                          Finland
                        </option>
                    </optgroup>
                  </select>
                  <span class="input-group-addon" style="background:#fff;border:none;padding:2px 3px;">
                    <span class="glyphicon glyphicon-minuss text-danger"></span>
                  </span>
                </div>
            </div>
            
          </div>

          <div class="col-xs-24 add-personinfo-box">
            <span class="text-red" id="btn-add-personinfo-box">
              <span class="glyphicon glyphicon-plus"></span> Mitreisende hinzufügen
            </span>
            <div class="col-xs-24 btn-lg"></div>
          </div>

          <div class="form-group col-xs-24 Home-Address">
                <div class="input-group">
                  <span class="input-group-addon">
                    Kontakttelefon:
                  </span>
                  <div class="form-control input-sm nopadding" style="border:none;-webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,0.075);box-shadow: inset 0 0px 0px rgba(0,0,0,0.">
                    <div class="col-xs-11 nopadding">
                      <input type="text" name="landline" value="" class="common_input form-control input-sm" placeholder="land line" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie Ihre Nummer an Land ein!">
                    </div>
                    <div class="col-xs-13 nopadding">
                      <input type="text" name="mobile" value="" class="common_input form-control input-sm" placeholder="Handy" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie Ihre Handynummer ein!">
                    </div>
                  </div>
                </div>
          </div>
          <?php if($userinfo[0]->COLI_CustomerType!=44003){ ?>
          <div class="form-group col-xs-24 Home-Address">
                <div class="input-group">
                  <span class="input-group-addon" style="min-width:120px;">
                    Anschrift:
                  </span>
                  <div class="form-control input-sm hidden-xs nopadding">
                    <div class="col-xs-7 nopadding">
                      <input name="address_street" class="input_home_address form-control input-sm" placeholder="Straße" style="border:none;height:28px;" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie Ihre Heimatadresse ein!">
                    </div>
                    <div class="col-xs-1 nopadding" style="font-size:18px;width:10px;">,</div>
                    <div class="col-xs-7 nopadding">
                      <input name="address_city" class="input_home_address form-control input-sm nopadding" placeholder="Stadt" style="border:none;height:28px;" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie Ihre Heimatadresse ein!">
                    </div>
                    <div class="col-xs-1 nopadding hidden" style="font-size:18px;width:10px;">,</div>
                    <div class="col-xs-5 nopadding hidden">
                      <input name="address_state" class="input_home_address form-control input-sm nopadding" placeholder="State" style="border:none;height:28px;" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie Ihre Heimatadresse ein!">
                    </div>
                    <div class="col-xs-1 nopadding" style="font-size:18px;width:10px;">,</div>
                    <div class="col-xs-8 nopadding">
                      <input name="address_country" class="input_home_address form-control input-sm nopadding" placeholder="Land" style="border:none;height:28px;" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie Ihre Heimatadresse ein!">
                    </div>
                  </div>
                  <input class="form-control input-sm visible-xs-block" name="home_address">
                </div>
          </div>
          <?php } ?>

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

    <div class="col-xs-24 flightinfo-box">
      <div class="panel panel-default">
        <div class="panel-body">

          <div class="row panel-new-head">
            <h4 class="text-red">Fluginformationen</h4>
          </div>

          <div class="col-xs-24 flight-info-box">
              <div class="form-group col-sm-6 nopadding">
                <label>Ankunftsflug in China </label>
                <input type="text" class="form-control input-sm" name="MEI_ArrivalFlightNo" value=""  data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie Ihre Flugnummer ein!">
              </div>

              <div class="form-group col-sm-6 nopadding-R">
                <label>Ankunftszeit</label>
                <div class="input-groups date" >
                  <input class="form-control input-sm f_datepicker" type="text" name="MEI_ArrivalTime" value="" autocomplete="off" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie Ihre Ankunftszeit ein!" style="color:#333333 !important;">
                </div>
              </div>

              <div class="form-group col-sm-6 nopadding-R">
                <label>Abflugnummer von China</label>
                <input type="text" class="form-control input-sm" name="MEI_DepartureFlightNo" value="" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie Ihre Flugnummer ein!">
              </div>

              <div class="form-group col-sm-6 nopadding-R">
                <label>Abflugzeit</label>
                <div class="input-groups date ">
                  <input class="form-control input-sm f_datepicker" type="text" name="MEI_DepartureTime" value="" autocomplete="off" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie Ihre Abfahrtszeit ein!" style="color:#333333 !important;">
                </div>
              </div>

          </div>

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

    <div class="col-xs-24">
      <div class="panel panel-default">
        <div class="panel-body">

          <div class="row panel-new-head">
            <h4 class="text-red">
              Besondere Anforderungen
            </h4>
          </div>

          <div class="col-xs-24 special_request_box">
              <div class="form-group">
                <div class="col-xs-24 nopadding">
                  <textarea class="form-control input-sm" rows="5" name="special_request" placeholder="Großes Bett für
Vegetarisches Essen für 
Andere Abfahrts-/Ankunftszeit für
"></textarea>
                </div>
                <div class="col-xs-24 btn-lg"></div>
              </div>
          </div>

        </div>
      </div>
    </div>
    <?php if($userinfo[0]->COLI_CustomerType!=44003){ ?>
    <div class="col-xs-24">
      <div class="panel panel-default">
        <div class="panel-body">

          <div class="row panel-new-head">
            <h4 class="text-red">
              Kontaktinformationen für Notfälle 
              <span class="text-muted" style="font-size:15px;">(im Falle eines Notfalls während Ihrer Chinareise)</span>
            </h4>
          </div>

          <div class="col-xs-24 new-form-horizontal emergencyx_box">
              
            <div class="form-group col-sm-13">
                <label class="col-sm-9 control-label nopadding-L">Kontaktsperson</label>
                <div class="col-sm-13 nopadding">
                  <input type="text" class="form-control input-sm" name="emergency_person_name" value="" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie Ihren Kontakt für Notfälle ein!">
                </div>
              </div>
              
              <div class="form-group col-sm-11">
                <label class="col-sm-7 control-label nopadding-L">Email Adresse</label>
                <div class="col-sm-17 nopadding">
                  <input type="text" class="form-control input-sm" name="emergency_email" value="" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie ihre E-Mail-Adresse ein!">
                </div>
              </div>

              <div class="form-group col-sm-13">
                <label class="col-sm-9 control-label nopadding-L">Beziehung mit ihm/ihr</label>
                <div class="col-sm-13 nopadding">
                  <input type="text" class="form-control input-sm" name="emergency_relationship" placeholder="z.B.: Er ist der Vater von Sue." value="" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie hier Ihren Beziehungsstatus ein!">
                </div>
              </div>

              <div class="form-group col-sm-11">
                <label class="col-sm-7 control-label nopadding-L">Telefon Nr. </label>
                <div class="col-sm-17 nopadding">
                  <input type="text" class="form-control input-sm" name="emergency_telephone" placeholder="Länderkürzel + Postleitzahl (land line gibt es nicht in Deutschland)" value="" data-trigger="manual" data-container="body" data-toggle="popover" data-placement="top" data-content="Bitte tragen Sie hier Ihre Telefonnummer ein!">
                </div>
              </div>

              <div class="col-xs-24 btn-lg"></div>

          </div>
        </div>
      </div>
    </div>
    <?php } ?>

    <div class="col-xs-24">
      <input type="hidden" name="toname" value="<?php echo $userinfo[0]->OPI_FirstName; ?>">
      <input type="hidden" name="tomail" value="<?php echo $userinfo[0]->OPI_Email; ?>">      
      <input type="hidden" name="COLI_ID" value="<?php echo $userinfo[0]->COLI_ID; ?>">
      <input type="hidden" name="COLI_SN" value="<?php echo $userinfo[0]->COLI_SN; ?>">
      <input type="hidden" name="visitor_link" value="<?php echo $visitor_link; ?>">
      <div class="col-sm-15 col-xs-24 nopadding">
        <button type="submit" id="btn-add-userinfo" class="btn btn-danger btn-lg col-sm-9 col-xs-24 pull-right" style="min-width:300px;font-size:24px;">Überprüfen & Absenden</button>
      </div>
      <div class="partner-text col-sm-9 col-xs-24 text-left">Danke! Mit besten Grüßen, <?php echo $userinfo[0]->OPI_FirstName; ?></div>
    </div>

    </form>

  </div>
</div>

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Fehler!</h4>
      </div>
      <div class="modal-body" style="height:150px;">
        <p class="text-danger lead" style="padding-top:10px;">Fehler: Bitte kontaktieren Sie Ihren Reisebegleiter.</p>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
$(document).ready(function(){

  $(".common_input,textarea").each(function(){
    if ($(this).val()==''  && $(this).attr('placeholder')!='') {
        var valstr=$(this).val($(this).attr('placeholder'));
        $(this).css("color","#999999");
    }
  });
  $(".common_input,textarea").click(function(){
    if ($(this).val()==$(this).attr('placeholder') || $(this).val()=='') {
        $(this).val('');
        $(this).css("color","#333333");
    }
    $(this).popover('hide');
  });
  $(".common_input,textarea").blur(function(){
    if ($(this).val()=='' && $(this).attr('placeholder')!='') {
        $(this).val($(this).attr('placeholder'));
        $(this).css("color","#999999");
    }
  });


  //提交信息
  $("#form-confirm-info").submit(function(event){
    event.preventDefault();
    var $btn = $("#btn-add-userinfo").button('loading');

    var flag=true;
    $(".common_input").each(function(){
        if ($(this).val()==$(this).attr('placeholder') || $(this).val()=='') {
            $(this).popover('show');
            flag = false;
            $btn.button('reset');
            return false;
        };
    });
    if (!flag) {
      $btn.button('reset');
      return false;
    };

    $(".input_home_address").each(function()
    {
        if ($(this).val()==$(this).attr('placeholder')) {
            $(this).val('');
        }
    });
    if ($("textarea").val()==$("textarea").attr('placeholder')) {
        $("textarea").val('');
    };

    var url=$(this).attr('action');
    var data=$(this).serialize();
    $.ajax({
        type: "post",
        url: url,
        dataType: "json",
        data: data,
        success: function(json_data) {
            if (json_data.status == 'ok') {
                location.href='/secureinfoconfirm/confirm/index/0/0/0/gm';
            } else {
                $btn.button('reset');
                $('#myModal').modal('show');
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            $btn.button('reset');
            alert(errorThrown);
        }
    });
  });

  //移除一个客户信息
  $('body').on('click','.glyphicon-minus',function(){
    if(confirm("entfernen den Kunde?"))
    {
      $(this).parents('.personinfo-input-box').remove();
    }
  });

  //添加一个客户信息
  $("#btn-add-personinfo-box").click(function()
  {
    var html=$(".personinfo-input-box:first").clone();
    $('.add-personinfo-box').before(html);

    var num=$(".personinfo-input-box").length;
    var $currentbox=$(".personinfo-input-box:last");

    $currentbox.find('.glyphicon-minuss').addClass('glyphicon-minus').removeClass('glyphicon-minuss');
    $currentbox.find('label').remove();
    $currentbox.find('input').val('');
    $currentbox.find('.datepicker').removeClass('hasDatepicker').attr('id','');
    $currentbox.find('.bd_datepicker').removeClass('hasDatepicker').attr('id','');
    
    $('.datepicker').datepicker({
        controlType: 'select',
        oneLine: true,
        changeMonth: true,
        changeYear: true,
        yearRange: '2010:2025',
        timeFormat: 'mm/dd/yy'
      });
    $('.bd_datepicker').datepicker({
        controlType: 'select',
        oneLine: true,
        changeMonth: true,
        changeYear: true,
        defaultDate:'-45y',
        yearRange: '1920:2015',
        timeFormat: 'mm/dd/yy'
      });
    
  });

  //日期初始化

  $('.f_datepicker').datetimepicker({
    controlType: 'select',
    oneLine: true,
    changeMonth: false,
    changeYear: false,
    timeFormat: 'H:mm'
  });

  $('.bd_datepicker').datepicker({
    controlType: 'select',
    oneLine: true,
    changeMonth: true,
    changeYear: true,
    defaultDate:'-45y',
    yearRange: '1920:2015',
    timeFormat: 'mm/dd/yy'
  });
  $('.datepicker').datepicker({
    controlType: 'select',
    oneLine: true,
    changeMonth: true,
    changeYear: true,
    yearRange: '2010:2025',
    timeFormat: 'mm/dd/yy'
  });

});

$(document).on('click','.common_input',function(){
    $(this).popover('hide');
});

</script>

</body>
</html>