<!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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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>
    
video {
width: 100%;
height: 200px;

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

.image-container {
width: 200px;
/* Adjust this width as needed */
height: 200px;
/* Adjust this height as needed */
overflow: hidden;
position: relative;
border: 1px solid #ccc;
/* Add a border for the frame effect */
}

.image-container img {
width: 100%;
height: 100%;
object-fit: contain;
/* Ensure the entire image is visible */
}
</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 "cal_pro_remain.php";
include "login_check.php";





if (isset($_POST['delete'])) {
$product_name = $_POST['product_name'];

//Delete Photo
$extensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
// Loop through the extensions to find the existing file
$fileToDelete = '';
foreach ($extensions as $ext) {
$potentialFile = 'uploads/' . $product_name . '.' . $ext;
if (file_exists($potentialFile)) {
$fileToDelete = $potentialFile;
break;
}
}

// Check if a matching file was found
if ($fileToDelete) {
// Attempt to delete the file
if (unlink($fileToDelete)) {
// echo "File deleted successfully: $fileToDelete";
} else {
// echo "Error: Unable to delete the file.";
}
} else {
// echo "Error: File does not exist with any of the expected extensions.";
}

//Update Data
$product_tables = [$product, $cargo_1];

foreach ($product_tables as $product_data) {
$query = "DELETE FROM " . $product_data . " WHERE product_name = '$product_name'";
if ($connection->query($query)) {
echo 'Deleted successfully.';
} else {
echo 'alert("Update failed!");';
}
}
}



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

}
}


?>

<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="container-fluid">

        <div class="container-fluid" style="margin-bottom: 20px;">

            <form action="product_view_photo.php" method="POST">

       

                <div class="row" style="margin-top:10px;text-align:center">


        
                 

                <div class="col " style="margin:5px">
                        <button type="submit" class="btn btn-success mb-3" name="refresh">Refresh</button>
                    </div>

                    <div class="col" style="margin:5px">
                        <button type="button" class="btn btn-success mb-3" onclick="window.location.href='product_view.php';">Table</button>
                    </div>

                    <div class="col" style="margin:5px">
                        <button type="button" class="btn btn-success mb-3" onclick="window.location.href='product_view_all.php';">All</button>
                    </div>

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

                    <div class="col" style="margin:5px">
                        <button type="button" class="btn btn-success mb-3" onclick="window.location.href='product_view_photo_search.php';">Search Photo</button>
                    </div>


                </div>

    
            </form>
        </div>


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


        <div class="container-fluid">
    <div class="card-view mt-4">
        <div id="cardContainer" class="row">
            <!-- Cards will be dynamically loaded here -->
        </div>
    </div>
</div>

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

            $.ajax({
                url: "search.php", // The server-side script for search
                method: "GET",
                data: { q: query },
                success: function(data) {
                    $("#cardContainer").html(data);
                },
                error: function() {
                    console.error("Error fetching search results.");
                }
            });
        });

        // Optionally, load initial data (first page) when the page loads
        $("#searchInput").trigger("keyup");
    });
</script>



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