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

    <link rel="stylesheet" href="extensions/fixed-columns/bootstrap-table-fixed-columns.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script>
</head>
<style>
        .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>



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


    <style>
    .select-container {
        position: relative;
        display: inline-block;
    }
    .select-container select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding-right: 30px; /* Adjust this based on your icon size */
    }
    .select-container .fa-chevron-down {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none; /* Allows clicking through the icon to the select element */
    }
</style>


<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="mb-3" style="position: relative;">
                
                    
                </div>


                    <div class="row">
                  
                    <!-- Table Element -->
                    <div class="container-fluid">


                    <div class="container-fluid" style="margin-bottom: 20px;">
                        <form>
                        <div class="row">
                        <div class="col-sm-2 mb-2">
                            <div class="select-container">

                            
                                <input type="text" class="form-control" id="accountInput" name="voucher" onchange="filterTable()" placeholder="Enter Voucher No">

                                
                            </div>
                        </div>


                        <div class="col-sm-2 mb-2">
                            <div class="select-container">
                                <select name="product_type" id="dayInput" onchange="filterTable()" class="form-control">
                                    <option value="">Select Day</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                    <option value="13">13</option>
                                    <option value="14">14</option>
                                    <option value="15">15</option>
                                    <option value="16">16</option>
                                    <option value="17">17</option>
                                    <option value="18">18</option>
                                    <option value="19">19</option>
                                    <option value="20">20</option>
                                    <option value="21">21</option>
                                    <option value="22">22</option>
                                    <option value="23">23</option>
                                    <option value="24">24</option>
                                    <option value="25">25</option>
                                    <option value="26">26</option>
                                    <option value="27">27</option>
                                    <option value="28">28</option>
                                    <option value="29">29</option>
                                    <option value="30">30</option>
                                    <option value="31">31</option>
                                </select>
                                <i class="fas fa-chevron-down"></i>
                            </div>
                        </div>

                        <div class="col-sm-2 mb-2">
                            <div class="select-container">
                                <select name="product_type" id="monthInput" onchange="filterTable()" class="form-control">
                                    <option value="">Select Month</option>
                                    <option value="1">January-1</option>
                                    <option value="2">February-2</option>
                                    <option value="3">March-3</option>
                                    <option value="4">April-4</option>
                                    <option value="5">May-5</option>
                                    <option value="6">June-6</option>
                                    <option value="7">July-7</option>
                                    <option value="8">August-8</option>
                                    <option value="9">September-9</option>
                                    <option value="10">October-10</option>
                                    <option value="11">November-11</option>
                                    <option value="12">December-12</option>
                                </select>
                                <i class="fas fa-chevron-down"></i>
                            </div>
                        </div>

                        <div class="col-sm-2 mb-2">
                            <div class="select-container">
                                <select name="product_type" id="yearInput" onchange="filterTable()" class="form-control">
                                    <option value="">Select Year</option>
                                    <option value="2023">2023</option>';
                                    <option value="2024">2024</option>';
                                    <option value="2025">2025</option>';
                                    <option value="2026">2026</option>';
                                    <option value="2027">2027</option>';
                                    <option value="2028">2028</option>';
                                    <option value="2029">2029</option>';
                                    <option value="2030">2030</option>';
                                    <option value="2031">2031</option>';
                                    <option value="2032">2032</option>';
                                    <option value="2033">2033</option>';
                                    <option value="2034">2034</option>';
                                    <option value="2035">2035</option>';
                                </select>
                                <i class="fas fa-chevron-down"></i>
                            </div>
                        </div>

                        <div class="col-sm-2">
                        <div class="select-container">
                        <!-- <button type="submit" name="baht" class="btn btn-outline-success" style="margin: 10px;" onclick="refreshPage()">Show All</button> -->
                        <button type="submit" class="btn btn-outline-success" onclick="refreshPage()">Show All</button>
                    </div>

                        </form>
                    </div>

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

                    </div>

                        
                    <div class="col">

<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;">
        <table class="table table-bordered table-hover" style="color:white;font-size:18px;"  id="dataTable">
        <thead style="background-color:#19242e">
        <tr>
        <th scope="col">id</th>
        <th scope="col">voucher</th>
        <th scope="col">ရက်စွဲ</th>
        <th scope="col">Action</th>
        </tr>
        </thead>
            <tbody>
                <?php 
                $sql = "SELECT * FROM ".$cargo." WHERE browser_id='$b_id'";
                $result = $connection->query($sql);
                if ($result->num_rows > 0) {
                    $row = $result->fetch_assoc(); // Fetch the row here
                    $cargo_data = $row["cargo_name"];
                
                    $sql = "SELECT * FROM ".$cargo_data."_trans WHERE delete_d='0' group by voucher ORDER BY id DESC ";
                    $result = mysqli_query($connection, $sql);
                    if ($result) {
                        while ($row = mysqli_fetch_assoc($result)) {
                            $expire_date = date('Y-m-d');
                            $row_date = $row['date'];
                            $date1 = new DateTime($row_date);
                            $date2 = new DateTime($expire_date);
                            $interval = $date1->diff($date2);
                            $days_diff = $interval->format('%a'); // Number of days difference
                            
                            // Determine the CSS class based on the date difference
                            $date_class = ($days_diff <= 7) ? 'near-today' : '';
                            
                            echo '<tr>
                                <td>' . htmlspecialchars($row['id']) . '</td>
                                <th scope="row">' . htmlspecialchars($row['voucher']) . '</td>
                                <td>' . htmlspecialchars($row['date']) . '</td>
                                <td>
                                    <form action="product_voucher_print.php" method="POST">
                                        <input type="hidden" name="voucher_no" value="' . $row['voucher'] . '">
                                        <button type="submit" class="btn btn-success">Voucher</button>
                                    </form>
                                </td>
                            </tr>';
                        }
                        mysqli_free_result($result);
                    } else {
                        // Handle query error
                       
                    }
                } else {
                    // Handle case when no rows are found
                  
                }
                
        
                ?>
                
                <style>
                    .near-today {
                        color: red;
                        font-weight: bold;
                    }
                </style>
                

            

            </tbody>
        </table>

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

        <!-- Delete Data -->
        <script>
        function deleteRow(button) {
        const row = button.parentNode.parentNode;
        const id = row.cells[0].textContent; // Assuming the Product ID is in the first column (index 0)
        console.log(id)
        // Send the id to the backend PHP script using AJAX for deletion
        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'product_trans.php', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                row.parentNode.removeChild(row); // Remove the row from the table on successful deletion
                alert('Data deleted successfully!');
                location.reload();

            } else {
                alert('Error deleting data. Please try again.');
            }
            }
        };
        xhr.send('id=' + encodeURIComponent(id));
        }
    </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>
    

<?php 

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

    return $randomString . $timestamp;
}

?>
<script src="js/script.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.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>
