<!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">
    <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">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<style>
    video {
        width: 100%;
        height: 200px;

        object-fit: cover;
        /* Ensures the video fills the container */
        display: block;
    }

    
</style>

<script>
    function formatNumber(input) {
        // Remove all non-digit characters
        let value = input.value.replace(/\D/g, '');

        // Format the number with commas
        let formattedValue = new Intl.NumberFormat().format(value);

        // Update the input value
        input.value = formattedValue;
    }

    document.addEventListener('DOMContentLoaded', function() {
        const formattedInput = document.getElementById('formatted');
        formattedInput.addEventListener('input', function() {
            formatNumber(this);
        });
    });
</script>


<?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";
include "cal_pro_remain.php";
include "cal_pro_rate.php";



if (isset($_POST['search'])) {
    $product_type = $_POST['product_type'];


    $sql = "UPDATE $catagories SET active='1' WHERE type='$product_type'";
    if (!$connection->query($sql)) {
    }

    $sql = "UPDATE $catagories SET active='0' WHERE type!='$product_type'";
    if (!$connection->query($sql)) {
        // Log error or handle it appropriately

    }
}

if (isset($_POST['all'])) {
  

    $sql = "UPDATE $catagories SET active='1'";
    if (!$connection->query($sql)) {
    }

    // $sql = "UPDATE $catagories SET active='0' WHERE type!='$product_type'";
    // if (!$connection->query($sql)) {
    //     // Log error or handle it appropriately

    // }
}



?>

<script>
    function refreshPage() {
        location.reload();
    }
</script>


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

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

                            <div class="card-header gx-5">

                                <form class="d-flex flex-row-reverse" action="product_view.php" method="POST">

                                    <div class="col-auto" style="margin-left:10px;margin-right:10px">
                                        <input type="text" class="form-control" id="searchInput" placeholder="Search">
                                    </div>

                                    <div class="col-auto" style="margin-left:10px">
                                        <!-- <select name="product_type" id="accountInput" onchange="filterTable()" class="form-control"> -->
                                        <select name="product_type" id="accountInput" class="form-control">
                                            <?php
                                            $sql = "SELECT * FROM " . $catagories . "";
                                            $result = $connection->query($sql);
                                            if ($result && $result->num_rows > 0) {
                                                while ($row = $result->fetch_assoc()) {
                                                    $account = $row['type']; // Database
                                                    echo '<option value="' . $account . '">' . $account . '</option>';
                                                }
                                            }
                                            ?>
                                        </select>

                                    </div>

                                    <div class="col-auto" style="margin-left:10px">
                                        <button type="submit" class="btn btn-primary mb-3" name="search">Search</button>
                                    </div>

                                    <div class="col-auto" style="margin-left:10px">
                                        <button type="submit" class="btn btn-success mb-3" onclick="refreshPage()">Refresh</button>
                                    </div>

                                    <div class="col-auto" style="margin-left:10px">
                                        <button type="submit" class="btn btn-warning mb-3" name="all">All</button>
                                    </div>

                                    <div class="col-auto" style="margin-left:10px">
                                        <button type="button" class="btn btn-danger mb-3" onclick="window.location.href='product_view_photo.php';">Photo</button>
                                    </div>



                                </form>
                            </div>

                            <div class="scrollable-table" style="height:80vh;">
                                <table class="table table-bordered table-hover" style="color:white;font-size:18px;" id="dataTable">
                                    <thead style="background-color:#19242e" class="text-center align-middle">
                                        <tr>
                                            <th rowspan="2" scope="col">no</th>
                                            <th rowspan="2" scope="col">update</th>
                                            <th rowspan="2" scope="col">barcode</th>
                                            <!-- <th rowspan="2" scope="col" style="display:none;">barcode_2</th> -->
                                            <th rowspan="2" scope="col">barcode_2</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="color:#ACE1AF">မူရင်းကဒ်</th>
                                            <th rowspan="2" scope="col" style="color:#ACE1AF">မူရင်းဗူး</th>
                                            <th rowspan="2" scope="col">ဖာလိုက်ဝယ်ဈေး</th>

                                            <!-- <th rowspan="2" scope="col" style="color:#ACE1AF">ငွေဈေး</th> -->
                                            <th rowspan="2" scope="col">ငွေအမျိုးစား</th>
                                            <th rowspan="2" scope="col">ငွေဈေးနှုန်း</th>

                                            <th colspan="3" scope="col" style="color:#FFA62F">ရောင်းဈေး</th>
                                            <th colspan="3" scope="col" style="color:#42f560">လက်ကျန်</th>
                                            <th colspan="3" scope="col" style="color:#00ffbb">ပစ္စည်းဖြည့်</th>
                                            <th colspan="3" scope="col" style="color:#fff41c">လက်ခံ</th>
                                            <th colspan="3" scope="col" style="color:#0866ff">ရောင်းပီး</th>
                                            <th colspan="3" scope="col" style="color:#ff0d41">ပျက်စီး</th>
                                            <th rowspan="2" scope="col" style="color:red">Delete</th>
                                        </tr>
                                        <tr>
                                            <th scope="col" style="color:#FFA62F">ဖာ</th>
                                            <th scope="col" style="color:#FFA62F">ကဒ်</th>
                                            <th scope="col" style="color:#FFA62F">ဗူး</th>

                                            <th scope="col" style="color:#42f560">ဖာ</th>
                                            <th scope="col" style="color:#42f560">ကဒ်</th>
                                            <th scope="col" style="color:#42f560">ဗူး</th>

                                            <th scope="col" style="color:#00ffbb">ဖာ</th>
                                            <th scope="col" style="color:#00ffbb">ကဒ်</th>
                                            <th scope="col" style="color:#00ffbb">ဗူး</th>

                                            <th scope="col" style="color:#fff41c">ဖာ</th>
                                            <th scope="col" style="color:#fff41c">ကဒ်</th>
                                            <th scope="col" style="color:#fff41c">ဗူး</th>

                                            <th scope="col" style="color:#0866ff">ဖာ</th>
                                            <th scope="col" style="color:#0866ff">ကဒ်</th>
                                            <th scope="col" style="color:#0866ff">ဗူး</th>

                                            <th scope="col" style="color:#ff0d41">ဖာ</th>
                                            <th scope="col" style="color:#ff0d41">ကဒ်</th>
                                            <th scope="col" style="color:#ff0d41">ဗူး</th>
                                        </tr>

                                    </thead>
                                    <tbody id="tableBody">
                                        <!-- Data will be populated here -->
                                    </tbody>

                                </table>


                                <script>
                                    function loadTableData() {
                                        $.ajax({
                                            url: 'product_view_table.php', // PHP script for fetching table data
                                            type: 'GET',
                                            success: function(data) {
                                                $('#dataTable tbody').html(data); // Update table body
                                                enableEditableCells(); // Rebind editable cell functionality
                                            },
                                            error: function() {
                                                alert('Failed to load table data. Please try again.');
                                            }
                                        });
                                    }

                                    function enableEditableCells() {
    $('#dataTable').off('blur', '[contenteditable="true"]'); // Remove previous event bindings
    $('#dataTable').on('blur', '[contenteditable="true"]', function() {
        const cell = $(this);
        const columnName = cell.data('column');
        let value;

        if (cell.is('select')) {
            value = cell.val(); // Get the selected option value
        } else {
            value = cell.text().trim(); // Get text value for other cells
        }

        // Retrieve the product_name value from the corresponding cell
        const productName = cell.closest('tr').find('[data-column="product_name"]').text().trim();

        if (!productName) {
            alert('Product name not found.');
            return;
        }

        // Update via AJAX
        $.ajax({
            url: 'product_view_update_cell.php',
            type: 'POST',
            data: {
                column: columnName,
                value: value,
                product_name: productName
            },
            success: function(response) {
                console.log(response);
                loadTableData(); // Reload table after successful update
            },
            error: function() {
                alert('Failed to update. Please try again.');
            }
        });
    });
}

                                  
                                    $(document).ready(function() {
                                        // Load the table when the page is ready
                                        loadTableData();

                                        // Handle "Submit" button click
                                        $('#myForm').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);
                                                    $('#myForm')[0].reset(); // Clear form fields
                                                    loadTableData(); // Refresh table data
                                                },
                                                error: function() {
                                                    alert('Failed to add entry. Please try again.');
                                                }
                                            });
                                        });

                                        // Handle "Save" button click
                                        $('#saveBtn').on('click', function() {
                                            $.ajax({
                                                url: 'sell_ll_save.php',
                                                type: 'POST',
                                                data: $('#myForm').serialize(),
                                                success: function(response) {
                                                    $('#result').html(response);
                                                    $('#myForm')[0].reset(); // Clear form fields
                                                    loadTableData(); // Refresh table data
                                                },
                                                error: function() {
                                                    alert('Failed to save data. Please try again.');
                                                }
                                            });
                                        });

                                        // Handle "Update" button click
                                        $('#updateBtn').on('click', function() {
                                            $.ajax({
                                                url: 'sell_ll_update.php',
                                                type: 'POST',
                                                data: $('#myForm').serialize(),
                                                success: function(response) {
                                                    $('#result').html(response);
                                                    $('#myForm')[0].reset(); // Clear form fields
                                                    loadTableData(); // Refresh table data
                                                },
                                                error: function() {
                                                    alert('Failed to update data. Please try again.');
                                                }
                                            });
                                        });
                                    });
                               
                               
                                    $(document).ready(function () {
                                        $('#dataTable').on('click', 'button[data-action="delete"]', function () {
                                            const button = $(this);
                                            const productName = button.data('product-name');

                                            if (!productName) {
                                                alert('Product name not found.');
                                                return;
                                            }

                                            if (confirm(`Are you sure you want to delete the product "${productName}"?`)) {
                                                $.ajax({
                                                    url: 'product_view_delete.php', // Replace with your server-side delete script
                                                    type: 'POST',
                                                    data: { product_name: productName },
                                                    success: function (response) {
                                                        console.log(response);
                                                        alert('Product deleted successfully!');
                                                        // Reload or remove the row from the table
                                                        button.closest('tr').remove();
                                                    },
                                                    error: function () {
                                                        alert('Failed to delete the product. Please try again.');
                                                    }
                                                });
                                            }
                                        });
                                    });

                               </script>





                                <!-- Search for js code -->
                                <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

                                <script>
                                    $(document).ready(function() {
                                        $("#searchInput").on("keyup", function() {
                                            var value = $(this).val().toLowerCase();

                                            $("#dataTable tbody tr").filter(function() {
                                                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                                            });
                                        });
                                    });
                                </script>







                            </div>
                        </div>


                    </div>
                </div>
            </main>

            <script>
                // Call filterTable immediately after the page loads
                window.onload = function() {
                    filterTable(); // Automatically filters based on the first option selected
                };
            </script>


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

    <!-- Number Format -->
    <script>
        function formatNumber() {
            const inputField = document.getElementById('package_price');
            let value = inputField.value;

            // Remove any non-numeric characters (except for decimal points)
            value = value.replace(/[^0-9.]/g, '');

            // Format the number
            const formattedValue = new Intl.NumberFormat().format(value);

            // Set the formatted value back to the input field
            inputField.value = formattedValue;
        }
    </script>



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