<?php
  session_start();
  // error_reporting(0);
  $ct_no = $_GET['ct_no'];
  // $ct_no = "0109640001";
  include '_connect.php';
?>
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>ตรวจสอบยอดค้างชำระ / ใบเสร็จ</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <?php
          include 'css.php';
        ?>
        <style media="screen">
          table {
            border-collapse: collapse;
            border-radius: 15px;
            overflow: hidden;
          }
          body{
            font-size: 25px;
            background-color: #fff;
            background-image: url("img/xBG01.jpg");
            background-repeat: no-repeat;
            background-size: 210%;
          }
          .xxstable {
            height: 70px;
            overflow-y: scroll;
          }
        </style>
        <style>
          .customers {
            font-family: Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
            height: 50%;
            border-radius: 20px;
            overflow: hidden;
          }

          .customers td, .customers th {
            border: 1px solid #ddd;
            padding: 8px;
          }

          .customers tr:nth-child(even){background-color: #f2f2f2;}

          .customers tr:hover {background-color: #ddd;}

          .customers th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            /* background-color: red; */
            color: white;
          }
        </style>
        <style>
        .buttonx {
          /* background-color: yellow; /* Green */
          border: none;
          color: black;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 20px;
          margin: 4px 2px;
          cursor: pointer;
        }
        .button1 {padding: 10px 24px;}
        .button2 {padding: 12px 28px;}
        .button3 {padding: 14px 40px;}
        .button4 {padding: 32px 16px;}
        .button5 {padding: 10px;}
        </style>
      </head>
      <body>
      <br>

      <center>
      <!-- ข้อมูลลูกค้า -->
      <table border="0" id="table_2" class="customers" style="width:97%; border-radius: 4px;">
      <thead>
        <tr style="background-color:red; color:#fff;">
          <th style="width:80%;" colspan="2"> ตรวจสอบยอดค้างชำระ </th>
          <!-- <th> <img src="img/logo.png" alt="" style="width:50%;"> </th> -->
        </tr>
      </thead>
      <tbody>
      </tbody>
      <tfoot>
      <div class="container">
      <tr>
        <td style="width:10%; text-align:right;">
            <input type="submit" name="" class="buttonx button5" style="background-color: LightSeaGreen;" data-toggle="collapse" data-target="#demo" value="ประวัติการชำระ">
        </td>
      </tr>
      </tfoot>
      </table>

      <!-- <table border="0" id="" class="customers" style="width:97%; border-radius: 4px;">
        <tr >
          <td style="width:80%; text-align:right;"> 
          <div class="container">
          <input type="submit" name="" class="buttonx button5" style="background-color: LightSeaGreen;" data-toggle="collapse" data-target="#demo" value="ประวัติการชำระ">       
        </td>
        </tr>
      </table> -->
    
      <hr>
      <div id="demo" class="collapse">
        <table border="0" id="table_3" class="xxstable customers" style="width:92%; background-color:;">
          <thead>
            <tr style="background-color:black; color:#fff;">
              <th style="text-align:center;">ครั้งที่</th>
              <th style="text-align:center;">วันที่</th>
              <th style="text-align:center;">จำนวนเงิน / บาท</th>
              <th style="text-align:center;">ใบเสร็จ</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      <br><br>
      </center>
      </div>
      </div>
      
        <input type="text" value="" id="userId" hidden>
        <img src="" id="pictureUrl" alt="" hidden>
        <input type="text" value="" id="displayName" hidden>
        <input type="text" value="" id="statusMessage" hidden>
     <br><br>


    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
    <script src="_liffid.js"></script>

    <?php 
    // include '_index_linejson_1.php' 
    echo '<script type="text/javascript">';
    echo "var ct_no = '$ct_no';"; // ส่งค่า $data จาก PHP ไปยังตัวแปร data ของ Javascript
    echo '</script>';
    ?>

    <script>
      // ส่งข้อมูล ผ่าน ajax
      $.ajax({
        url: '_index_linejson_1.php?ct_no='+ct_no,
        type: 'GET',
        dataType: 'JSON',
        // แสดงข้อมูล
        success: function(response){
            var len = response.length;
            for(var i=0; i<len; i++){
            var ct_no = response[i].ct_no;
            var ps_name = response[i].ps_name;
            var product_name = response[i].product_name;
            var due_amnt = response[i].due_amnt;
            var outBK = response[i].outBK;
            var output = response[i].output;
            var price = response[i].price;
            var echoprice = response[i].echoprice;

            var cnsvbarcode = response[i].cnsvbarcode;
            var cnsvrefcode = response[i].cnsvrefcode;
            var cnsvrefno = response[i].cnsvrefno;

            var tr_str = 
              "<tr>" +
              "<td colspan='2'>" + 
              "เลขที่สัญญา : " + ct_no + "<br>" +
              "ชื่อ-นามสกุล : " + ps_name + "<br>" +
              "สินค้า : " + product_name + "<br>" +
              "ชำระต่องวด : <b>" + due_amnt + "</b> บาท<br>" +
              outBK + " : <b><font color='red'>" + output +"</font></b> บาท<br>" +
              "<b><font color='red'> ยอดรวมชำระทั้งหมด : " + price +" บาท</font></b><br>" + 
              "</td>" +
              "</tr>" + 
              "<tr><td style='width:90%; text-align:right;'  colspan='2'>" + 
              "<a href='_line_barcode.php?ct_no=" + ct_no + "&cnsvbarcode=" + cnsvbarcode + "&cnsvrefcode=" + cnsvrefcode + "&cnsvrefno=" + cnsvrefno + "'>" +
              "<input type='submit' name='' class='buttonx button5' style='background-color: Gold;' value='ชำระเงินผ่าน Barcode'>" +
              "</a>" + 
              "<a href='_line_qrcode.php?ct_no=" + ct_no + "&billerid=" + echoprice + "'>" +
              "<input type='submit' name='' class='buttonx button5' style='background-color: Gold;' value='ชำระเงินผ่าน QR Code'>" +
              "</a></td>" 
              "</tr>";
            $("#table_2 tbody").append(tr_str);
            }
          } 
      });
    </script>

    <script>
          // ส่งข้อมูล ผ่าน ajax
          $.ajax({
            url: '_index_linejson_2.php?ct_no='+ct_no,
            type: 'GET',
            dataType: 'JSON',
            // แสดงข้อมูล
            success: function(response){
                var len = response.length;
                for(var i=0; i<len; i++){
                var ct_no = response[i].ct_no;
                var TR_NO = response[i].TR_NO;
                var PAY_AMNT = response[i].PAY_AMNT;
                var tr_datex = response[i].tr_datex;
                var td_detail = response[i].td_detail;
                var pay_amnt_c = response[i].pay_amnt_c;

                var d = response[i].d;
                var e = response[i].e;
                var bcolor = response[i].bcolor;
                var color = response[i].color;
                
                var icon = response[i].icon;

                var recbranch = response[i].recbranch;
                var REF_NO = response[i].REF_NO;
                var REF_SEQ = response[i].REF_SEQ;

                var tr_str = 
                  "<tr>" +
                    "<td style='text-align:; background-color:" + bcolor + ";color:" + color + ";'>" + TR_NO + "</td>" +
                    "<td style='text-align:; background-color:" + bcolor + ";color:" + color + ";'>" + tr_datex + td_detail +  "</td>" +
                    "<td style='text-align:right; background-color:" + bcolor + ";color:" + color + ";'>" + e + " " + PAY_AMNT + pay_amnt_c +  "</td>" +
                    "<td style='text-align:center; background-color:" + bcolor + ";color:" + color + ";'>" + 
                    "<a href='_printslip.php?sid=hps&fid=printslip&ct_no=" + ct_no + 
                      "&recbranch=" + recbranch + 
                      "&ref_no=" + REF_NO + 
                      "&ref_seq=" + REF_SEQ + "&flg=1' target=''>"
                      + icon +
                    "</a>"
                    + "</td>" +
                  "</tr>";
                $("#table_3 tbody").append(tr_str);
                }
              } 
          });
        </script>

  </body>
</html>



