
<html lang="en" data-bs-theme="dark">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>လက်လိအရောင်း</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css">
    <script src="https://kit.fontawesome.com/ae360af17e.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="icon" href="../../image/logo.png" type="image/png">
</head>


<body>
    <div class="wrapper">
        <?php 
        include "../../sidebar.php";
        include "../../database/database.php";
        include "../../database/data.php";
        ?>



        <div class="main">
            <nav class="navbar navbar-expand px-3 border-bottom">
                <button class="btn" id="sidebar-toggle" type="button">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse navbar">
                    <ul class="navbar-nav">
                        <li class="nav-item dropdown">
                            <a href="#" data-bs-toggle="dropdown" class="nav-icon pe-md-0">
                                <img src="../../image/logo.png" class="avatar img-fluid rounded" alt="">
                            </a>
                            <?php include "../../logo_profile.php";?>
                        </li>
                    </ul>
                </div>
            </nav>
            <main class="content px-3 py-2">
                <div class="container-fluid">

                <div class="mb-3" style="position: relative;">
                    <h4 style="font-size:25px">လက်လီ အရောင်း</h4>
                </div>

                <div class="mb-3" style="position: relative;">
                
                <div class="card-header gx-5" style="margin-top:30px">

                        <form class="d-flex flex-row-reverse ">
                        <div class="col-auto" style="margin-left:10px">
                            <input type="password" class="form-control" id="inputPassword2" placeholder="Search">
                        </div>
                        <div class="col-auto">
                            <button type="submit" class="btn btn-primary mb-3"><i class="fa-solid fa-magnifying-glass"></i></button>
                        </div>
                    </form> 

                        </div>
                    
                </div>


                    <div class="row">

                        <div class="col-sm-4">
                        <form action="lat_li.php" method="POST">

                        <table style="border:none;">
                            <tr style="height: 50px;">
                                <th> <label for="pwd"> Barcode:</label></th>
                                <th><input type="text" class="form-control"  name="barcode" id="barcodeInput" autofocus></th>
                            </tr>

                            <tr style="height: 50px;">
                                <th> <label for="pwd">Banking:</label></th>
                                <th>
                                    <select name="banking" id="bankingInput" class="form-control">
                                    <option value="kpay">kpay</option>
                                        <?php
                                        // $sql = "SELECT * FROM ".$banking."";
                                        // $result = $connection->query($sql);
                                        // if ($result && $result->num_rows > 0) {
                                        //     while ($row = $result->fetch_assoc()){
                                        //         $name = $row['type']; // Database
                                        //         echo '
                                        //         <option value="' . $name . '">' . $name . '</option>
                                        //         ';
                                        //     }
                                        // }
                                        ?>
                                    </select>

                                </th>
                            </tr>

                            <tr style="height: 50px;">
                                <th> <label for="pwd"> rate:</label></th>
                                <th> <input type="text" class="form-control"  type="text" name="rate" id="rate" ></th>
                            </tr>
                        </table>


                        

                        <div style="margin-top: 20px; display: flex; justify-content: center;" class="container-fluid">
                            <button type="button" class="btn btn-outline-warning" style="margin: 10px;">Print</button>
                            <button type="button" class="btn btn-outline-danger" style="margin: 10px;">Save</button>
                            <button type="button" class="btn btn-outline-info" style="margin: 10px;">Baht</button>
                            <button type="button" class="btn btn-outline-info" style="margin: 10px;">Yuan</button>
                        </div>

                        </form>

       
                                    


                        </div>
                  
                    <!-- Table Element -->
                    <div class="col-sm-8">
    
                        <div class="card-body">
                            <table class="table table-striped table-bordered rounded">
                                <thead>
                                    <tr>
                                        <th scope="col">Product Name</th>
                                        <th scope="col">Price</th>
                                        <th scope="col">Qty</th>
                                        <th scope="col">Type</th>
                                        <th scope="col">Total</th>
                                        <th scope="col">Tra ID</th>
                                        <th scope="col">Banking</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                  
                                </tbody>
                            </table>
                        </div>
                    </div>


                </div>
                </div>
            </main>
            <a href="#" class="theme-toggle">
                <i class="fa-regular fa-moon"></i>
                <i class="fa-regular fa-sun"></i>
            </a>
            <footer class="footer">
                <div class="container-fluid">
                    <div class="row text-muted">
                        <div class="col-6 text-start">
                            <p class="mb-0">
                                <a href="#" class="text-muted">
                                    <?php 
                                        include "../../version.php";
                                    ?>
                                </a>
                            </p>
                        </div>
                        <div class="col-6 text-end">
                            <ul class="list-inline">
                                <li class="list-inline-item">
                                    <a href="#" class="text-muted">Contact</a>
                                </li>
                                <li class="list-inline-item">
                                    <a href="#" class="text-muted">About Us</a>
                                </li>
                                <li class="list-inline-item">
                                    <a href="#" class="text-muted">Terms</a>
                                </li>
                                <li class="list-inline-item">
                                    <a href="#" class="text-muted">Booking</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>


    <!-- <script src="lat_li.js"></script> -->
    <!-- get data auto from input barcode/banking -->
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
    const barcodeInput = document.getElementById('barcodeInput');
    const bankingInput = document.getElementById('bankingInput');
    const outputDiv = document.getElementById('output');

    // Simulate a barcode scanner by listening for input events
    barcodeInput.addEventListener('input', handleBarcodeInput);

    let barcode = '';
    let timeout;

    function handleBarcodeInput(event) {
        clearTimeout(timeout);
        
        // Check for input data and append to barcode
        barcode += event.data || event.target.value; 
        
        // Clear the input field
        event.target.value = '';

        // Wait for a short period to determine if input is complete
        timeout = setTimeout(() => {
            processBarcode(barcode);
            barcode = ''; // Reset barcode
        }, 100); // Adjust timeout as needed
    }

    async function processBarcode(barcode) {
        // Get banking input value
        const bankingData = bankingInput.value;

        // Display the processed barcode and banking data on the page
        outputDiv.innerHTML = `Processed Barcode: ${barcode} <br> Banking Data: ${bankingData}`;
        console.log(`Processed Barcode: ${barcode}`);
        console.log(`Banking Data: ${bankingData}`);

        // Send the barcode and banking data to the server
        try {
            const response = await fetch('lat_li.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ 
                    barcode: barcode,
                    bankingData: bankingData
                })
            });

            if (!response.ok) {
                throw new Error('Network response was not ok');
            }

            const responseData = await response.json();
            console.log('Server response:', responseData);
        } catch (error) {
            console.error('Error sending data:', error);
        }
    }
});
    </script>
    <div id="output"></div>


    <?php
// header('Content-Type: application/json');
$input = file_get_contents('php://input');
$data = json_decode($input, true);

if ($data && isset($data['barcode']) && isset($data['bankingData'])) {
    // Process the barcode and banking data here
    $barcode = $data['barcode'];
    $bankingData = $data['bankingData'];

    include '../../database/database.php';

    // Log received data for debugging purposes
    error_log("Received barcode: " . $barcode);
    error_log("Received bankingData: " . $bankingData);

    $query = "UPDATE imv_account SET account='$barcode', amount='$bankingData' WHERE id='1'";
    if ($connection->query($query)) {
        // Example response
        echo json_encode([
            'status' => 'success', 
            'receivedBarcode' => $barcode,
            'receivedBankingData' => $bankingData
        ]);
    } else {
        die("ERROR: Query failed. " . $connection->error);
    }
} else {
    echo json_encode(['status' => 'error', 'message' => 'Invalid data']);
}


?>

        


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../js/script.js"></script>
</body>

</html>
