<!DOCTYPE html>
<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">
    
    <!-- Load only the full version of jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://kit.fontawesome.com/ae360af17e.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="image/logo.png" type="image/png">
</head>



<style>
    /* Basic styling for dropdown suggestions */
    #suggestions {
        border: 1px solid #ddd;
        max-height: 150px;
        overflow-y: auto;
        display: none;
        position: absolute;
        margin-left: 130px;
        margin-top: 50px;
        background-color: darkslategray;

    }

    #suggestions div {
        padding: 8px;
        cursor: pointer;
    }

    #suggestions div:hover {
        background-color: #f0f0f0;
    }
</style>


<?php
session_start();

if (isset($_SESSION['browser_id'])) {
    $browserId = $_SESSION['browser_id'];
} else {
    // Generate a new browser ID
    $browserId = generateUniqueBrowserId();

    // Store the browser ID in the session for future use
    $_SESSION['browser_id'] = $browserId;
}

include "database/database.php";
include "database/data.php";
include "login_check.php";

?>




<body>
    <div class="wrapper">
        <?php
        include "sidebar.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">
                        <div class="mb-3" style="margin-right:30px">
                            <h4 style="font-size:25px">လက်လီ</h4>
                        </div>

                        <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="row">

                        <div class="col-sm-4" style="background-color:#19242e;border-radius:20px;color:orange;margin-bottom:20px">

                            <!-- <form id="myForm" action="sell_ll.php" method="POST" style="margin-top:20px;margin-left:20px" enctype="multipart/form-data"> -->
                            <form id="userForm">
                                <table>
                                    <tr>
                                        <th>Username:</th>
                                        <td><input type="text" class="form-control" id="name" name="name"></td>
                                    </tr>
                                    <tr>
                                        <th>Email:</th>
                                        <td><input type="email" class="form-control" id="email" name="email"></td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <button type="submit" id="submitBtn">Submit</button>
                                            <button type="button" id="saveBtn">Save</button>
                                        </td>
                                    </tr>

                                </table>
                            </form>
                            <div id="result"></div>
                        </div>

                        <!-- Table Element -->
                        <div class="col-sm-8">

                        <div class="card-header gx-5">
                                <form class="d-flex flex-row-reverse ">
                                    <div class="col-auto" style="margin-left:10px">
                                        <input type="text" class="form-control" id="searchInput" 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 class="scrollable-table" style="height:60vh;">

                                <div id="result"></div>
                                <table class="table table-bordered table-hover" style="color:white;font-size:18px;" id="recordsTable">
                                    <thead style="background-color:#19242e" class="text-center align-middle">
                                        <tr>
                                        <th rowspan="2" style="display: none;" scope="col">tra_id</th>
                                            <th rowspan="2" scope="col">info</th>
                                            <th rowspan="2" scope="col">barcode</th>
                                            <th rowspan="2" scope="col">ပစ္စည်းအမည်</th>
                                            <th rowspan="2" scope="col">အမျိုးစား</th>
                                            <th rowspan="2" scope="col">ရောင်းဈေး</th>
                                            <th rowspan="2" scope="col">လျော့ဈေး</th>
                                            <th rowspan="2" scope="col">ပမာဏ</th>
                                            <th rowspan="2" scope="col">စုစုပေါင်း</th>
                                            <th rowspan="2" scope="col">ဘဏ်</th>
                                            <th rowspan="2" scope="col" style="display: none;">ကဒ်နံပါတ်</th>
                                            <th rowspan="2" scope="col">Delete</th>
                                            <th rowspan="2" scope="col">အားလုံး</th>
                                            <th rowspan="2" scope="col">Voucher</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody">
                                        <!-- Data will be populated here -->
                                    </tbody>
                                </table>

                                <script>
    // Function to load table data
    function loadTableData() {
        $.ajax({
            url: 'sell_ll_table.php',
            type: 'GET',
            success: function(data) {
                $('#tableBody').html(data);
            }
        });
    }

    // Initial load of table data
    loadTableData();

    // Handle "Submit" button click
    $('#userForm').on('submit', function(e) {
        e.preventDefault(); // Prevent form submission

        $.ajax({
            url: 'sell_ll_add.php',
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                $('#result').html(response);
                $('#userForm')[0].reset(); // Clear form fields
                loadTableData(); // Refresh table data
            }
        });
    });

    // Handle "Save" button click
    $('#saveBtn').on('click', function() {
        $.ajax({
            url: 'sell_ll_save.php',
            type: 'POST',
            data: $('#userForm').serialize(),
            success: function(response) {
                $('#result').html(response);
                $('#userForm')[0].reset(); // Clear form fields
                loadTableData(); // Refresh table data
            }
        });
    });
</script>
       

                            </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>



    <div id="output"></div>


    <?php





    function generateUniqueBrowserId()
    {
        $randomString = bin2hex(random_bytes(16));
        $timestamp = time();

        return $randomString . $timestamp;
    }
    ?>



    <script src="js/script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>