<?php 
    header('Access-Control-Allow-Origin: *');
    include 'header.php';
?>
<title><?php echo payment; ?></title>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<meta http-equiv="refresh" content="1;url=http://127.0.0.1/payment.php" /> -->
<style>
* {
    box-sizing: border-box;
}
video {
    height: 500px;
}
.row:after {
    content: "";
    clear: both;
    display: table;
}
[class*="coll-"] {
    float: left;
    padding: 15px;
    width: 100%;
}
@font-face {
    font-family: 'myFirstFont';
    src: url('../font/BoonTookRegular.woff');
}
@media only screen and (max-width: 599px) {
    div.text01 {font-size: 20px;}
    div.text01 {font-size: 15px;}

    .coll-s-6 {width: 50%; font-size: 30px;}
    img.rotate90 {
        width:70%;
    }
}
@media only screen and (min-width: 600px) {
    div.text01 {font-size: 20px;}
    div.text02 {font-size: 15px;}
    .coll-s-1 {width: 8.33%;}
    .coll-s-2 {width: 16.66%;}
    .coll-s-3 {width: 25%;}
    .coll-s-4 {width: 33.33%;}
    .coll-s-5 {width: 41.66%;}
    .coll-s-6 {width: 50%; font-size: 30px;}
    .coll-s-7 {width: 58.33%;}
    .coll-s-8 {width: 66.66%;}
    .coll-s-9 {width: 75%;}
    .coll-s-10 {width: 83.33%;}
    .coll-s-11 {width: 91.66%;}
    .coll-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    div.text01 {font-size: 30px;}
    div.text02 {font-size: 15px;}
    .coll-1 {width: 8.33%;}
    .coll-2 {width: 16.66%;}
    .coll-3 {width: 25%;}
    .coll-4 {width: 33.33%;}
    .coll-5 {width: 41.66%;}
    .coll-6 {width: 50%; font-size: 80px;}
    .coll-7 {width: 58.33%;}
    .coll-8 {width: 66.66%;}
    .coll-9 {width: 75%;}
    .coll-10 {width: 83.33%;}
    .coll-11 {width: 91.66%;}
    .coll-12 {width: 100%;}
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #101820;
    font-family: myFirstFont;
    color: #ffffff;
    padding: 15px;
}
.text01 {

    font-family: myFirstFont;

}
.text02 {

    font-family: myFirstFont;

}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
</style>
</head>
<body>

<div class="header">
  <h1>ชำระเงินด้วย QRCode</h1>
</div>

<div class="row">

<div class="coll-3 coll-s-3 menu">

</div>

<div class="coll-6 coll-s-9">
  <div style="text-align: center;" class="text01" >ค้นหาด้วย ชื่อ-นามสกุล เลขที่สัญญา เลขบัตรประชาชน เบอร์โทรศัพท์ อย่างใดอย่างหนึ่ง</div>
  <p></p>
  <div class="text02" >
        <style type="text/css">
            .rotate90 {
                -webkit-transform: rotate(90deg);
                -moz-transform: rotate(90deg);
                -o-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                transform: rotate(90deg);
            }
        </style>
        <div>
            <input type="text" id="tbsearch" class="form-control" style="width: 79%;">
            <input type="button" id="btsearch" value="ค้นหา" class="btn btn-primary" style="display: inline;float: right;width: 19%;margin-top: -35px;" onclick="getbarcode();">
        </div>
    <br>
        <p style="color: red;">หมายเหตุ: หากมีหลายรายการชำระ โปรดเลื่อนลงด้านล่าง</p>
        <p style="color: red;">*** เมื่อลูกค้าชำระเงินแล้ว ทางบริษัทจะรับทราบ อีก 1 วันทำการ ***</p>

    </br>
    <iframe width="480" height="360"
        src="https://www.youtube.com/embed/13zu-Hal230?controls=1">
    </iframe>
    </br>
    <div id="searchresult" align="center"></div>
  </div>
</div>
</div>
</body>
<script type="text/javascript">
    function getbarcode(){
        if(document.getElementById('tbsearch').value==""){
            return;
        }
        $.ajax({
            url:"http://barcode.ezmember.org/getpsdata.php"                
            ,Accept : "application/json; charset=utf-8"
            ,type:"POST"
            ,data:"text="+document.getElementById('tbsearch').value
        })
        .success(function(obj){
            // var obj = jQuery.parseJSON(result);
            console.log(obj);
            if(obj.status=="ไม่พบ"){
                $('#searchresult').html("ไม่พบลูกค้า");
            }else if(obj.status=="โปรดระบุชื่อ-นามสกุล ให้ถูกต้อง"){
                $('#searchresult').html("โปรดระบุชื่อ-นามสกุล ให้ถูกต้อง");
            }else{
                var str="";
                for(var i=0;i<obj.datalist.length;i++){
                    str+="<img src='test.php?cnsvrefcode="+obj.datalist[i].cnsvrefcode+"&due_amnt="+obj.datalist[i].due_amnt+"'><br>";
                    str+="|044555500035500 "+obj.datalist[i].cnsvrefcode+" 346200003800 "+parseInt(obj.datalist[i].due_amnt)+"00<br>";
                    str+="เลขที่สัญญา "+obj.datalist[i].ct_no+"<br>";
                    str+="ชื่อ "+obj.datalist[i].ps_name+"<br>";
                    str+="สินค้า "+obj.datalist[i].product_name+"<br>";
                    str+="ค่างวด "+parseInt(obj.datalist[i].due_amnt)+" บาท<br>";
                }
                $('#searchresult').html(str);
            }
        });
    };
</script>
</html>


<?php include 'footer.php'; ?>