var searchView = '<div class="container col-10 col-lg-4 col-xl-3">'
    + '<div class="form-group">'
    + '<label class="col-12" id="phoneLabel" for="phone">手機號碼</label>'
    + '<input class="form-control" style="min-height: 50px ;font-family:Helvetica;" inputmode="numeric" type="text" name="phone" id="phone" placeholder="輸入手機號碼" required>'
    + '</div>'
    // + '<div class="form-group">'
    // + '<label class="col-12" id="mailLabel" for="mail">電子信箱</label>'
    // + '<input class="form-control" style="font-family:Helvetica;" inputmode="text" type="text" name="mail" id="mail" placeholder="輸入電子信箱" required>'
    // + '</div>'
    + '<div class="row justify-content-center  form-group m-0 p-0">'
    + '<label class="col-12 p-0" id="plate_noLabel" for="plate_no">車牌號碼</label>'
    + '<input class="col-5 form-control m-0 p-0" style="min-height: 50px ;font-family:Helvetica;" type="text" name="plate_no1" id="plate_no1" placeholder="輸入車牌號"  pattern="[A-Z\\-0-9]" required>'
    + '<span  class="col-2" style="font-family:Helvetica; text-align: center ;color:black;">-</span>'
    + '<input class="col-5 form-control m-0 p-0" style="min-height: 50px;font-family:Helvetica;" type="text" name="plate_no2" id="plate_no2" placeholder="輸入車牌號"  pattern="[A-Z\\-0-9]" required>'
    + '</div>'
    + '<div class="row justify-content-center  form-group m-0 p-0" style="min-height:30px;">'
    + '</div>'
    + '<label class="col-12" id="hint" style="min-height:20px; color:red; font-size: 15px;"></label>'
    + '<input type="submit" id="query" value="查詢費用" class="btn-lg btn-secondary btn-block">'
    + '<div class="row justify-content-center  form-group m-0 p-0" style="min-height:50px;">'
    + '</div>'
    + '<div class="row justify-content-center  form-group m-0 p-0">'
    + '<label id="location" class="col-12 p-0" id="location"><i class="fas fa-location-dot"></i></label>'
    + '</div>'
    + '</div>';

var otm2View = '<div class="container col-10 col-lg-4 col-xl-3">'
    + '<div class="form-group">'
    + '<label class="col-12" id="phoneLabel" for="phone">手機號碼</label>'
    + '<input class="form-control" style="font-family:Helvetica;" inputmode="numeric" type="text" name="phone" id="phone" placeholder="輸入手機號碼" required>'
    + '</div>'
    // + '<div class="form-group">'
    // + '<label class="col-12" id="mailLabel" for="mail">電子信箱</label>'
    // + '<input class="form-control" style="font-family:Helvetica;" inputmode="text" type="text" name="mail" id="mail" placeholder="輸入電子信箱" required>'
    // + '</div>'
    + '<div class="row justify-content-center  form-group m-0 p-0">'
    + '<label class="col-12 p-0" id="plate_noLabel" for="plate_no">車牌號碼</label>'
    + '<input class="col-5 form-control m-0 p-0" style="font-family:Helvetica;" type="text" name="plate_no1" id="plate_no1" placeholder="輸入車牌號"  pattern="[A-Z\\-0-9]" required>'
    + '<span  class="col-2" style="font-family:Helvetica; text-align: center ;color:black;">-</span>'
    + '<input class="col-5 form-control m-0 p-0" style="font-family:Helvetica;" type="text" name="plate_no2" id="plate_no2" placeholder="輸入車牌號"  pattern="[A-Z\\-0-9]" required>'
    + '</div>'
    + '<div class="row justify-content-center  form-group m-0 p-0" style="min-height:30px;">'
    + '</div>'
    + '<label class="col-12" id="hint" style="min-height:20px; color:red; font-size: 15px;"></label>'
    + '<input type="submit" id="query" value="驗證並繼續" class="btn-lg btn-secondary btn-block">'
    + '<div class="row justify-content-center  form-group m-0 p-0" style="min-height:50px;">'
    + '</div>'
    + '<div class="row justify-content-center  form-group m-0 p-0">'
    + '<label id="location" class="col-12 p-0" id="location"><i class="fas fa-location-dot"></i></label>'
    + '</div>'
    + '</div>';

var smsView = '<div class="container col-10 col-lg-4 col-xl-3">'
    + '<div class="form-group">'
    + '<label class="col-12" id="phoneLabel" for="phone">請輸入簡訊驗證碼</label>'
    + '<input class="col-12 form-control" inputmode="numeric" type="text" name="valid_no" id="valid_no" placeholder="輸入驗證碼" required>'
    + '<label class="validlabel col-12 p-0" id = "resendvalid" > 重新發送驗證碼</label >'
    + '</div>'
    + '<label class="col-12" id="hint" style="min-height:20px; color:red; font-size: 15px;"></label>'
    + '<input type="submit" id="sms_confirm" value="驗證並繼續" class="mt-2 btn-lg btn-secondary btn-block">'
    + '<input type="submit" id="sms_cancel" value="上一步" class="btn-lg btn-secondary btn-block">'
    + '</div>';


var detailsView =
    // + '<div class="row  col-12 d-flex justify-content-center m-0">'
    '<div class="row  col-12 d-flex justify-content-center m-0 p-0">'
    + '<section class="row align-items-center justify-content-around col-12 m-0 p-0">'
    // + '<label class="col-12">繳費資料</label>'
    + '<label class="col-12" style="font-size: 1.2rem; color: rgb(32,69,67)" >繳費資料</label>'
    + '<div id="hr"></div>'
    + '<div  class="col-12" style="min-height:20px;"></div>'

    // + '<label class="details col-12" id="ParkingPlateLabel"><i class="fas fa-car"></i>車牌號碼：</label>'

    + '<div class="col-10 p-0 m-0" style="align-items: center;">'
    + '<label class="col-6 p-0" id="phoneLabel" for="phone" style="text-align:left; color: rgb(32,69,67) " ><i class="fas fa-car"></i>車牌號碼：</label>'
    + '<label class="col-6 p-0" style="text-align: left;" id="ParkingPlateLabel" ></label>'
    + '</div>'

    // + '<label class="details col-12" id="ParkingPriceLabel"><i class="fas fa-parking"></i>停車費用：</label>'

    + '<div class="col-10 p-0 m-0" style="align-items: center;">'
    + '<label class="col-6 p-0" id="phoneLabel" for="phone" style="text-align:left; color: rgb(32,69,67) " ><i class="fas fa-parking"></i>停車費用：</label>'
    + '<label class="col-6 p-0" style="text-align: left;" id="ParkingPriceLabel" ></label>'
    + '</div>'

    + '<div class="row col-10 p-0 m-0" style="align-items: center; border: 2px solid #adb5bd !important; background: white;color: grey; border-radius: .3rem;">'
    + '<div class="m-0 p-0 col-4">'
    + '<label class="details m-0 p-0 col-12"  id="note_date_In"></label>'
    + '<label class="details m-0 p-0 col-12"  id="note_time_In"></label>'
    + '</div>'
    + '<label class="m-0 p-0 col-4" style="text:align:center;"><i class="fas fa-arrow-right" ></i></label>'
    + '<div class="m-0 p-0 col-4">'
    + '<label class="details m-0 p-0 col-12"  id="note_date_Out"></label>'
    + '<label class="details m-0 p-0 col-12"  id="note_time_Out"></label>'
    + '</div>'
    + '</div>'

    // + '<label class="details col-12 mt-2" id="ChargePriceLabel"><i class="fas fa-charging-station"></i>充電費用：</label>'
    + '<div class="col-10 p-0 mt-2 m-0" style="align-items: center;">'
    + '<label class="col-6 p-0" id="phoneLabel" for="phone" style="text-align:left; color: rgb(32,69,67) " ><i class="fas fa-charging-station"></i>充電費用：</label>'
    + '<label class="col-6 p-0" style="text-align: left;" id="ChargePriceLabel" ></label>'
    + '</div>'


    + '<div class="row col-10 p-0 m-0" style="align-items: center; border: 2px solid #adb5bd !important; background: white;color: grey; border-radius: .3rem;">'
    + '<div class="m-0 p-0 col-4">'
    + '<label class="details m-0 p-0 col-12"  id="cnote_date_In"></label>'
    + '<label class="details m-0 p-0 col-12"  id="cnote_time_In"></label>'
    + '</div>'
    + '<label class="m-0 p-0 col-4" style="text:align:center;"><i class="fas fa-arrow-right" ></i></label>'
    + '<div class="m-0 p-0 col-4">'
    + '<label class="details m-0 p-0 col-12"  id="cnote_date_Out"></label>'
    + '<label class="details m-0 p-0 col-12"  id="cnote_time_Out"></label>'
    + '</div>'
    + '</div>'


    // + '<label class="details col-12" id="ChargeNoteLabel">明細：</label>'
    + '<div class="row col-10 p-0 m-0 mt-3" style="align-items: center;">'
    + '<label class="col-4 p-0" id="phoneLabel" for="phone" style="text-align:left; color: rgb(32,69,67) " >明細：</label>'
    + '<label class="col-8 p-0" style="text-align: left;" id="ChargeNoteLabel" ></label>'
    + '</div>'
    + '<div class="m-0 p-0 col-12 justify-content-around">'
    + '<label id="total" class="col-9">總計：</label>'
    + '<label class="details_total pl-0 col-2" id="details_total"></label>'
    + '<label id="money" col-1">元</label>'
    + '</div>'


    + '</section>'

    + '<div id="hr"></div>'
    + '<label class="col-12 mt-2" id="hint" style="min-height:20px; color:red; font-size: 15px;"></label>'
    + '<div class="row  col-10 d-flex justify-content-center m-0 mt-2">'
    + '<input type="submit" id="invoice_setting" value="發票設定" class="btn-lg btn-secondary btn-block ">'
    + '<input type="submit" id="pay_confirm" value="繳費" class="btn-lg btn-secondary btn-block ">'
    + '<input type="submit" id="pay_cancel" value="回首頁" class="btn-lg btn-secondary btn-block ">'
    + '<label id="leavehint" style="min-height:20px; font-size: 15px;" class="mt-2 col-12"></label>'
    + '</div>'
    + '</div>';
//※繳費完成後請於10分鐘內離場


var invoiceView = '<div class="container col-10 col-lg-4 col-xl-3">'
    + '<label class="col-12" style="font-size: 1.2rem; color: rgb(32,69,67)" >發票設定</label>'
    + '<div id="hr"></div>'


    + '<div id="border">'
    + '<div class="input-group">'
    + '<input id="buyermail_input" type="text" class="form-control radio_input"  placeholder="中獎通知信箱">'
    + '</div>'
    + '</div>'

    + '<div id="border">'
    + '<div class="input-group">'
    + '<div class="input-group-prepend">'
    + '<div class="input-group-text">'
    + '<input id="phone_barcode" type="radio" class="radio_click">'
    + '</div>'
    + '</div>'
    + '<input id="phone_barcode_input" type="text" class="form-control radio_input"  placeholder="手機條碼載具">'
    + '</div>'
    + '</div>'


    + '<div id="border">'
    + '<div class="input-group">'
    + '<div class="input-group-prepend">'
    + '<div class="input-group-text">'
    + '<input id="gui_number" type="radio" class="radio_click">'
    + '</div>'
    + '</div>'
    + '<input id="gui_input" type="text" class="form-control radio_input"  placeholder="統一編號">'
    + '</div>'
    + '</div>'


    + '<div id="border">'
    + '<div class="input-group">'
    + '<div class="input-group-prepend">'
    + '<div class="input-group-text">'
    + '<input id="donation" type="radio" class="radio_click">'
    + '</div>'
    + '</div>'
    + '<input id="donation_input" type="text" class="form-control radio_input"  placeholder="發票捐贈 愛心碼">'
    + '</div>'
    + '</div>'

    // + '<div id="border">'
    // + '<div class="input-group">'
    // + '<div class="input-group-prepend">'
    // + '<div class="input-group-text">'
    // + '<input id="cloud" type="radio" class="radio_click">'
    // + '</div>'
    // + '</div>'
    // + '<label class="form-check-label" for="phone_barcode">雲端發票</label>'
    // + '</div>'
    // + '</div>'

    + '<div class="row justify-content-center  form-group m-0 p-0" style="min-height:30px;">'
    + '</div>'
    + '<label class="col-12 mt-2" id="hint" style="min-height:20px; color:red; font-size: 15px;"></label>'
    + '<input type="submit" id="invoice_back" value="確認" class="btn-lg btn-secondary btn-block">'

    + '</div>';


var otmView ='<div>'
    + '<label class="col-12" style="font-size: 1.2rem; color: rgb(32,69,67)" >充電代碼</label>'

    + '<div class="m-0 p-0 row col-12 justify-content-center" style="align-items: center;">'
    + '<label class="col-10" style="border-top: 1px solid grey !important; font-size: 1.2rem; color: black" ></label>'
    +'</div>'

    + '<div class="col-12" style="min-height:20px;"></div>'

    + '<div class="col-12 row justify-content-center  m-0 p-0">'
// + '<label class="col-10" style="min-height:20px; text-align: left;" id="phone" for="phone">手機號碼</label>'
    + '<div class="col-10 p-0 m-0" style="align-items: center;">'
    + '<label class="col-6 p-0" style="text-align:left; color: rgb(32,69,67) " ><i class="fas fa-phone"></i>手機號碼：</label>'
    + '<label class="col-6 p-0" style="min-height:20px; text-align: left;" id="phone" for="phone">手機號碼</label>'
    + '</div>'
// + '<label class="col-10 mt-2" style="min-height:20px; text-align: left;" id="plate" for="plate_no">車牌號碼</label>'

    + '<div class="col-10 p-0 m-0" style="align-items: center;">'
    + '<label class="col-6 p-0" style="text-align:left; color: rgb(32,69,67) " ><i class="fas fa-car"></i>車牌號碼：</label>'
    + '<label class="col-6 p-0" style="min-height:20px; text-align: left;" id="plate">車牌號碼</label>'
    + '</div>'

    // + '<label class="col-10 mt-2" style="min-height:20px; text-align: left;" id="space" for="plate_no">車位號碼</label>'
    + '<div class="col-10 p-0 m-0" style="align-items: center;">'
    + '<label class="col-6 p-0" style="text-align:left; color: rgb(32,69,67) " ><i class="fas fa-parking"></i>車位號碼：</label>'
    + '<label class="col-6 p-0" style="min-height:20px; text-align: left;" id="space">車位號碼</label>'
    + '</div>'
    // + '<label class="col-10 mt-2" style="min-height:20px; text-align: left;" id="otp" for="plate_no">充電代碼</label>'
    + '<div class="col-10 p-0 m-0" style="align-items: center;">'
    + '<label class="col-6 p-0" style="text-align:left; color: rgb(32,69,67) " ><i class="fas fa-charging-station"></i>充電代碼：</label>'
    + '<label class="col-6 p-0" style="min-height:20px; text-align: left;" id="otp">充電代碼</label>'
    + '</div>'

    + '<div class="row col-10 p-0 m-0" style="align-items: center;">'
    + '<label class="col-4 p-0" style="text-align:left; color: rgb(32,69,67) " >費率：</label>'
    + '<label class="col-8 p-0" style="min-height:20px; text-align: left;" id="rate"></label>'
    + '</div>'

    // + '<label class="col-10 mt-2" style="min-height:20px; text-align: left;" id="note" for="plate_no">備註</label>'
    + '<div class="row col-10 p-0 m-0" style="align-items: center;">'
    + '<label class="col-4 p-0" style="text-align:left; color: rgb(32,69,67) " >備註：</label>'
    + '<label class="col-8 p-0" style="min-height:20px; text-align: left;" id="note"></label>'
    + '</div>'

    + '</div>'

    + '<div class="row justify-content-center  form-group m-0 p-0" style="min-height:30px;">'
    + '</div>'
    + '<label class="col-12" id="hint" style="min-height:20px; color:red; font-size: 15px;"></label>'
    + '<div class="col-10 row justify-content-center  m-0 p-0">'
    + '<input type="submit" id="charge" value="開始充電" class="col-8 btn-lg btn-secondary btn-block">'
    + '</div>'
    + '<div class="col-12 row justify-content-center  form-group m-0 p-0" style="min-height:20px;">'
    + '</div>'
    + '<div class="col-10 row justify-content-center  m-0 p-0">'
    + '<input type="submit" id="stop" value="停止充電並繳費" class="col-8 btn-lg btn-secondary btn-block">'
    + '</div>'
    + '<div class="row justify-content-center  form-group m-0 p-0" style="min-height:50px;">'
    + '</div>'
    + '<div class="row justify-content-center  form-group m-0 p-0">'
    + '<label id="location" class="col-12 p-0" id="location"><i class="fas fa-location-dot"></i></label>'
    + '</div>'
    + '</div>';


var otmView2 = '<div>'
    + '<label class="col-12" style="font-size: 1.2rem; color: rgb(32,69,67)" >充電代碼</label>'

    + '<div class="m-0 p-0 row col-12 justify-content-center" style="align-items: center;">'
    + '<label class="col-10" style="border-top: 1px solid grey !important; font-size: 1.2rem; color: black" ></label>'
    + '</div>'

    + '<div class="col-12" style="min-height:20px;"></div>'

    + '<div class="col-12 row justify-content-center  m-0 p-0">'
    // + '<label class="col-10" style="min-height:20px; text-align: left;" id="phone" for="phone">手機號碼</label>'
    + '<div class="col-10 p-0 m-0" style="align-items: center;">'
    + '<label class="col-6 p-0" style="text-align:left; color: rgb(32,69,67) " ><i class="fas fa-phone"></i>手機號碼：</label>'
    + '<label class="col-6 p-0" style="min-height:20px; text-align: left;" id="phone" for="phone">手機號碼</label>'
    + '</div>'
    // + '<label class="col-10 mt-2" style="min-height:20px; text-align: left;" id="plate" for="plate_no">車牌號碼</label>'

    + '<div class="col-10 p-0 m-0" style="align-items: center;">'
    + '<label class="col-6 p-0" style="text-align:left; color: rgb(32,69,67) " ><i class="fas fa-car"></i>車牌號碼：</label>'
    + '<label class="col-6 p-0" style="min-height:20px; text-align: left;" id="plate">車牌號碼</label>'
    + '</div>'

    // + '<label class="col-10 mt-2" style="min-height:20px; text-align: left;" id="space" for="plate_no">車位號碼</label>'
    + '<div class="col-10 p-0 m-0" style="align-items: center;">'
    + '<label class="col-6 p-0" style="text-align:left;  color: rgb(32,69,67) " ><i class="fas fa-parking"></i>車位號碼：</label>'
    // + '<label class="col-6 p-0" style="min-height:20px; text-align: left;" id="space">車位號碼</label>'


    + '<select class="col-6 p-0" style="min-height:40px; font-size: 1.2rem; text-align: left;" id="space_select">車位號碼</select>'

    + '</div>'
    // + '<label class="col-10 mt-2" style="min-height:20px; text-align: left;" id="otp" for="plate_no">充電代碼</label>'
    + '<div class="col-10 p-0 m-0" style="align-items: center;">'
    + '<label class="col-6 p-0"style="text-align:left; color: rgb(32,69,67) " ><i class="fas fa-charging-station"></i>充電代碼：</label>'
    + '<label class="col-6 p-0" style="min-height:20px; text-align: left;" id="otp">充電代碼</label>'
    + '</div>'


    // + '<label class="col-10 mt-2" style="min-height:20px; text-align: left;" id="note" for="plate_no">備註</label>'
    + '<div class="row col-10 p-0 m-0" style="align-items: center;">'
    + '<label class="col-4 p-0" style="text-align:left; color: rgb(32,69,67) " >備註：</label>'
    + '<label class="col-8 p-0" style="min-height:20px; text-align: left;" id="note"></label>'
    + '</div>'

    + '</div>'

    + '<div class="row justify-content-center  form-group m-0 p-0" style="min-height:30px;">'
    + '</div>'
    + '<label class="col-12" id="hint" style="min-height:20px; color:red; font-size: 15px;"></label>'
    // + '<div class="col-10 row justify-content-center  m-0 p-0">'
    // + '<input type="submit" id="charge" value="開始充電" class="col-8 btn-lg btn-secondary btn-block">'
    // + '</div>'
    + '<div class="col-12 row justify-content-center  form-group m-0 p-0" style="min-height:20px;">'
    + '</div>'
    + '<div class="col-10 row justify-content-center  m-0 p-0">'
    + '<input type="submit" id="stop" value="停止充電並繳費" class="col-8 btn-lg btn-secondary btn-block">'
    + '</div>'
    + '<div class="row justify-content-center  form-group m-0 p-0" style="min-height:50px;">'
    + '</div>'
    + '<div class="row justify-content-center  form-group m-0 p-0">'
    + '<label id="location" class="col-12 p-0" id="location"><i class="fas fa-location-dot"></i></label>'
    + '</div>'
    + '</div>';


var codeView = '<div class="container row  col-12 d-flex justify-content-center m-0 p-0">'
    + '<div class="col-10 form-group">'
    + '<label class="col-12" id="phoneLabel" for="phone">充電代碼</label>'
    + '</div>'

    + '<div class="col-10 m-0 p-0 row justify-content-around">'

    + '<input class="autotab form-control col-1" style="font-family:Helvetica; min-width:40px; min-height:50px;" inputmode="numeric" maxlength="1" type="text" name="phone" id="c1" placeholder="" required>'
    + '<input class="autotab form-control col-1" style="font-family:Helvetica; min-width:40px; min-height:50px;" inputmode="numeric" maxlength="1" type="text" name="phone" id="c2" placeholder="" required>'
    + '<input class="autotab form-control col-1" style="font-family:Helvetica; min-width:40px; min-height:50px;" inputmode="numeric" maxlength="1" type="text" name="phone" id="c3" placeholder="" required>'
    + '<input class="autotab form-control col-1" style="font-family:Helvetica; min-width:40px; min-height:50px;" inputmode="numeric" maxlength="1" type="text" name="phone" id="c4" placeholder="" required>'
    + '<input class="autotab form-control col-1" style="font-family:Helvetica; min-width:40px; min-height:50px;" inputmode="numeric" maxlength="1" type="text" name="phone" id="c5" placeholder="" required>'
    + '<input class="autotab form-control col-1" style="font-family:Helvetica; min-width:40px; min-height:50px;" inputmode="numeric" maxlength="1" type="text" name="phone" id="c6" placeholder="" required>'

    + '</div>'

    + '<div class="row justify-content-center  form-group m-0 p-0" style="min-height:60px;">'
    + '</div>'
    + '<label class="col-10" id="hint" style="min-height:20px; color:red; font-size: 15px;"></label>'
    + '<input type="submit" id="query" value="驗證並繼續" class="col-10 btn-lg btn-secondary btn-block">'
    + '<div class="row justify-content-center  form-group m-0 p-0" style="min-height:60px;">'
    + '</div>'
    + '<div class="row justify-content-center  form-group m-0 p-0">'
    + '</div>'
    + '</div>';


var codeView2 = '<div class="container row  col-12 d-flex justify-content-center m-0 p-0">'
    + '<label class="col-12" style="font-size: 1.2rem; color: rgb(32,69,67)" >充電代碼</label>'
    + '<div id="hr"></div>'
    + '<div style="min-height:20px;">'
    + '</div>'
    + '<div id="inputs" class="row inputs " style="max-height:50px"> '

    + '<input class="input" style="border: 1px solid rgba(0,0,0,.125); border-radius: 10px; font-family:Helvetica; " inputmode="numeric" maxlength="1" type="text" id="c1" placeholder="" required>'
    + '<input class="input" style="border: 1px solid rgba(0,0,0,.125); border-radius: 10px; font-family:Helvetica; " inputmode="numeric" maxlength="1" type="text" id="c2" placeholder="" required>'
    + '<input class="input" style="border: 1px solid rgba(0,0,0,.125); border-radius: 10px; font-family:Helvetica; " inputmode="numeric" maxlength="1" type="text" id="c3" placeholder="" required>'
    + '<input class="input" style="border: 1px solid rgba(0,0,0,.125); border-radius: 10px; font-family:Helvetica; " inputmode="numeric" maxlength="1" type="text" id="c4" placeholder="" required>'
    + '<input class="input" style="border: 1px solid rgba(0,0,0,.125); border-radius: 10px; font-family:Helvetica; " inputmode="numeric" maxlength="1" type="text" id="c5" placeholder="" required>'
    + '<input class="input" style="border: 1px solid rgba(0,0,0,.125); border-radius: 10px; font-family:Helvetica; " inputmode="numeric" maxlength="1" type="text" id="c6" placeholder="" required>'

    + '</div>'

    + '<div class="row justify-content-center  form-group m-0 p-0" style="min-height:60px;">'
    + '</div>'

    + '<label class="col-10" id="hint" style="min-height:20px; color:red; font-size: 15px;"></label>'
    // + '<input type="submit" id="query" value="掃描QR code" class="col-10 btn-lg btn-secondary btn-block">'

    + '<div id="scan_qr" class="row col-10 justify-content-center  m-0 p-0" style="align-items: center; min-height: 50px; align-items: center; box-shadow: 2px 2px 9px 1px rgba(0, 0, 0, 0.1)!important;border: none !important; border-radius: .3rem; background: #6c757d;color: white;">'
    + '<label id="query_label" class="col-12 m-0 p-0" style="font-size: 1.2rem; text-align:center; color: white" ><i class="fas fa-qrcode"></i>&nbsp掃描QR code</label>'
    + '</div>'

    + '<input type="submit" id="query" value="驗證並繼續" class="col-10 mt-1 btn-lg btn-secondary btn-block">'
    + '<div class="col-12 row justify-content-center  form-group m-0 p-0" style="height:60px;">'
    + '</div>'

    + '<div class="row justify-content-center  form-group m-0 p-0">'
    + '</div>'
    + '</div>';


var invoiceView2 = '<div class="container col-10 col-lg-4 col-xl-3">'
    + '<label class="col-12">發票開立設定</label>'
    + '<div id="hr"></div>'

    + '<div id="_border">'
    + '<div class="input-group">'
    + '<div class="input-group-prepend">'
    + '<div class="input-group-text">'
    + '<input id="phonebarcode_checkbox" type="checkbox" class="radio_click">'
    + '</div>'
    + '</div>'
    + '<label class="mt-2 p-0" style="text-align: center;">使用載具號碼</label>'
    + '</div>'
    + '</div>'
    + '<div id="pb_container" class="form-label-group mt-1">'
    + '</div>'

    + '<div id="_border">'
    + '<div class="input-group">'
    + '<div class="input-group-prepend">'
    + '<div class="input-group-text">'
    + '<input id="gui_checkbox" type="checkbox" class="radio_click">'
    + '</div>'
    + '</div>'
    + '<label class="mt-2 p-0" style="text-align: center;">使用統一編號</label>'
    + '</div>'
    + '</div>'
    + '<div id="gui_container" class="form-label-group mt-1">'
    + '</div>'


    + '<div id="_border">'
    + '<div class="input-group">'
    + '<div class="input-group-prepend">'
    + '<div class="input-group-text">'
    + '<input id="lovecode_checkbox" type="checkbox" class="radio_click">'
    + '</div>'
    + '</div>'
    + '<label class="mt-2 p-0" style="text-align: center;">使用愛心碼</label>'
    + '</div>'
    + '</div>'
    + '<div id="lovecode_container" class="form-label-group mt-1">'
    + '</div>'

    + '<div id="_border">'
    + '<div class="input-group">'
    + '<div class="input-group-prepend">'
    + '<div class="input-group-text">'
    + '<input id="mail_checkbox" type="checkbox" class="radio_click">'
    + '</div>'
    + '</div>'
    + '<label class="mt-2 p-0" style="text-align: center;">使用信箱載具</label>'
    + '</div>'
    + '</div>'
    + '<div id="mail_container" class="form-label-group mt-1">'
    + '</div>'


    + '<label class="col-12 mt-2" id="hint" style="min-height:20px; color:red; font-size: 15px;"></label>'
    + '<input type="submit" id="invoice_back" value="確認" class="btn-lg btn-secondary btn-block">'

    + '<div class="row justify-content-center  form-group m-0 p-0" style="min-height:30px;">'
    + '</div>'
    + '</div>';




var pb_view = '<input id="pb_input" style="font-family:Helvetica;" type="text" class="form-control  m-0"  placeholder="">'
    + '<label  for="pb_input" >載具號碼</label>'


var gui_view = '<div id=" border" class="form-label-group">'
    + '<input id="gui_input" style="font-family:Helvetica;" type="text" class="form-control  m-0"  placeholder="">'
    + '<label  for="gui_input" >統一編號</label>'
    + '</div>'
    + '<div id=" border" class="form-label-group mt-1">'
    + '<input id="mail_input" style="font-family:Helvetica;" type="text" class="form-control  m-0"  placeholder="">'
    + '<label  for="mail_input" >通知信箱</label>'
    + '</div>'

var lovecode_view = '<input id="lovecode_input" style="font-family:Helvetica;" type="text" class="form-control  m-0"  placeholder="">'
    + '<label  for="lovecode_input" >愛心碼</label>'

var mail_view = '<input id="mail_input" style="font-family:Helvetica;" type="text" class="form-control  m-0"  placeholder="">'
    + '<label  for="mail_input" >通知信箱</label>'


var invoiceView3 = '<div class="container col-10 col-lg-4 col-xl-3">'
    + '<label class="col-12">發票設定</label>'

    + '<div id="hr"></div>'

    + '<div id="pb_container" class="mt-2" >'
    + '</div>'
    + '<div id="gui_container" class="mt-2">'
    + '</div>'
    + '<div id="lovecode_container" class="mt-2">'
    + '</div>'
    + '<div id="mail_container" class="mt-2">'
    + '</div>'

    + '<label class="col-12 mt-2" id="hint" style="min-height:20px; color:red; font-size: 15px;"></label>'
    + '<input type="submit" id="invoice_back" value="確認" class="btn-lg btn-secondary btn-block">'
    + '<input type="submit" id="invoice_cancel" value="取消並返回" class="btn-lg btn-secondary btn-block">'
    + '<div class="row justify-content-center  form-group m-0 p-0" style="min-height:30px;">'
    + '</div>'
    + '</div>';

var pb_block_view = '<div id="pb_block_border" class="p-1" style="border: 1px solid rgba(0,0,0,.125); border-radius: 10px; background: #f8f9fa">'
    + '<label class="mt-2 p-0" style="text-align: center;">手機載具</label>'
    + '</div>'

var gui_block_view = '<div id="gui_block_border" class="p-1" style="border: 1px solid rgba(0,0,0,.125); border-radius: 10px; background: #f8f9fa">'
    + '<label class="mt-2 p-0" style="text-align: center;">統一編號</label>'
    + '</div>'

var lovecode_block_view = '<div id="lovecode_block_border" class="p-1" style="border: 1px solid rgba(0,0,0,.125); border-radius: 10px; background: #f8f9fa">'
    + '<label class="mt-2 p-0" style="text-align: center;">愛心捐贈</label>'
    + '</div>'

var mail_block_view = '<div id="mail_block_border" class="p-1" style="border: 1px solid rgba(0,0,0,.125); border-radius: 10px; background: #f8f9fa">'
    + '<label class="mt-2 p-0" style="text-align: center;">不使用載具</label>'
    + '</div>'


var pb_input_view = '<div id="pb_input_border" class="p-1" style="border: 1px solid rgba(0,0,0,.125); border-radius: 10px; background: #6c757d">'
    + '<div>'
    + '<span style="color:white; font-size: 1.0rem;" >手機載具號碼</span>'
    + '</div>'

    + '<div id="hr" style ="border-top: 1px solid white;"></div>'
    + '<div id="" class="mt-2">'
    + '<input id="pb_input" style="min-height: 50px !important; font-family:Helvetica; border: none !important; " type="text" class="form-control p-2"  placeholder="手機條碼">'
    + '</div>'

    + '</div>'


var gui_input_view = '<div id="gui_input_border" class="p-1" style="border: 1px solid rgba(0,0,0,.125); border-radius: 10px; background: #6c757d">'
    + '<div id="">'
    + '<span class="" style="color:white; font-size: 1.0rem;" >統一編號</span>'
    + '</div>'

    + '<div id="hr" style ="border-top: 1px solid white;"></div>'

    + '<div id="" class="mt-2">'
    + '<input id="gui_input" style="min-height: 50px !important; font-family:Helvetica;  border: none !important;" type="text" class="form-control  m-0"  placeholder="統一編號">'
    + '<div class="row justify-content-center  form-group m-0 p-0" style="min-height:10px;"></div>'
    + '<input id="mail_input" style="min-height: 50px !important; font-family:Helvetica;  border: none !important;" type="text" class="form-control  m-0"  placeholder="通知信箱">'
    + '</div>'
    + '</div>'


var lovecode_input_view = '<div id="lovecode_input_border" class="p-1" style="border: 1px solid rgba(0,0,0,.125); border-radius: 10px; background: #6c757d">'
    + '<div id="">'
    + '<span class="" style="color:white; font-size: 1.0rem;" >愛心捐贈碼</span>'
    + '</div>'

    + '<div id="hr" style ="border-top: 1px solid white;"></div>'
    + '<div id="" class="mt-2">'
    + '<input id="lovecode_input" style="min-height: 50px !important; font-family:Helvetica;  border: none !important;" type="text" class="form-control  m-0"  placeholder="愛心碼">'
    + '</div>'

var mail_input_view = '<div id="mail_input_border" class="p-1" style="border: 1px solid rgba(0,0,0,.125); border-radius: 10px; background: #6c757d">'
    + '<div id="">'
    + '<span class="" style="color:white; font-size: 1.0rem;" >通知信箱</span>'
    + '</div>'

    + '<div id="hr" style ="border-top: 1px solid white;"></div>'
    + '<div id="" class="mt-2">'
    + '<input id="mail_input" style="min-height: 50px !important; font-family:Helvetica;  border: none !important;" type="text" class="form-control  m-0"  placeholder="通知信箱">'
    + '</div>'