<?php
$config = include 'configcongty.php';
?>
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="apple-touch-icon" sizes="180x180" href="anh/LogoCongTy1.png">
    <title>Công Ty</title>
    <style>
body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 10px;
    margin: 0;
    background-color: #f9f9f9;
}
.table-wrapper {
    overflow-x: auto;
    width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 👈 Bắt buộc để các cột chia đều */
    text-align: center;
    margin-top: 20px;
}

th, td {
    border: 2px solid black;
    padding: 5px;
    word-wrap: break-word;
    font-size: 14px;
}

input[type="text"] {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
    font-size: 16px; /* Thêm dòng này */
}


        .info {
            margin-top: 30px;
            font-size: 18px;
            line-height: 1.8;
        }
        
.info-box {
    border: 2px solid #000;
    border-radius: 10px;
    padding: 15px;
    max-width: 500px;
    margin: 0 auto;
    background-color: #f9f9f9;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}

.info-box p {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    margin: 10px 0;
    font-weight: bold;
    background-color: #fff;
}

/* Quy tắc chung */
.info-box span {
  color: green !important;
  font-weight: bold;
}

/* Đổi màu riêng cho KG và Bom */
.info-box span.black-text {
  color: black !important;
}


input.has-value {
    color: red;
    font-weight: bold;
    font-size: 25px;
}



.picker-container {
    width: 250px;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    display: none; /* Mặc định ẩn bảng */
    z-index: 9999;
    border: 2px solid #e1e1e1;
    max-height: 80vh; /* Giới hạn chiều cao tối đa của popup */
    overflow-y: auto; /* Thêm cuộn dọc nếu số lượng quá lớn */
    top: 50%; /* Căn giữa theo chiều dọc */
    transform: translate(-50%, -50%); /* Căn giữa theo chiều dọc */
}


.numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

}

.number-button {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 1px;
}

.number-button:hover {
    background-color: #69a2ff;
    color: white;
    transform: scale(1.1);
}

.pagination {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    width: 100%;
}

.pagination button {
    padding: 8px; /* Giảm padding */
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 30px; /* Giảm kích thước font */
    transition: background-color 0.3s ease;
    flex-grow: 1;
    margin: 0 5px;
}

.pagination button:hover {
    background-color: #45a049;
}

.pagination button:disabled {
    background-color: #ddd;
    cursor: not-allowed;
}

.close-button {
    width: 100%;
    padding: 8px; /* Giảm padding */
    background-color: red !important;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 8px; /* Giảm kích thước font */
    transition: background-color 0.3s ease;
}


.close-button:hover {
    background-color: #ff4040 !important;
}


.navigate-button {
    padding: 8px; /* Giảm padding */
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 8px; /* Giảm kích thước font */
    transition: background-color 0.3s ease;
    width: 100%;
}
.navigate-button:hover {
    background-color: #45a049;
}

.navigate-button:disabled {
    background-color: #ddd;
    cursor: not-allowed;
}
#totalQuantity span, #totalCount span {
    color: black; /* Màu đen */
}

    </style>
</head>

<body>

<h2 style="text-align: center; color: green;">BẢNG TÍNH - Công Ty</h2>
<p id="dateTime" style="text-align: center; font-size: 18px; font-weight: bold; margin: 5px 0;"></p>

<script>
function updateDateTime() {
    const now = new Date();

    let hours = now.getHours();
    let minutes = now.getMinutes();
    const day = now.getDate();
    const month = now.getMonth() + 1; // Tháng bắt đầu từ 0
    const year = now.getFullYear();

    // Xác định sáng/chiều
    const ampm = hours >= 12 ? "Chiều" : "Sáng";

    // Chuyển về 12h format
    hours = hours % 12;
    hours = hours ? hours : 12; // 0 -> 12

    // Định dạng số có 2 chữ số
    const hh = hours.toString().padStart(2, "0");
    const mm = minutes.toString().padStart(2, "0");

    // Ghép chuỗi với màu sắc
    const formatted = `
        <span style="color:black;">Thời gian:</span> 
        <span style="color:red;">${hh}:${mm}</span> (${ampm}) - 
        <span style="color:black;">Ngày:</span> 
        <span style="color:red;">${day}/${month}/${year}</span>
    `;

    document.getElementById("dateTime").innerHTML = formatted;
}

// Gọi khi tải trang
updateDateTime();

// Cập nhật mỗi phút
setInterval(updateDateTime, 60000);
</script>

    <form method="post">
<div class="table-wrapper">
<table>
    <tr>
        <th colspan="2" style="background-color:#d9d9d9; font-size: 22px; font-weight: bold;">Hà Nội</th>
        <th colspan="2" style="background-color:#d9d9d9; font-size: 22px; font-weight: bold;">New</th>
        <th rowspan="2" style="background-color:#d9d9d9; font-size: 22px; font-weight: bold;">Tải</th>
        <th rowspan="2" style="background-color:#d9d9d9; font-size: 22px; font-weight: bold;">Keg</th>
        <th rowspan="2" style="background-color:#d9d9d9; font-size: 22px; font-weight: bold; white-space:nowrap;">Chai</th>
    </tr>
    <tr>
        <td style="background-color:#CCFFCC; font-size: 22px; ">30L</td>
        <td style="background-color:#CCFFCC; font-size: 22px; ">50L</td>
        <td style="background-color:#CCFFCC; font-size: 22px; ">30L</td>
        <td style="background-color:#CCFFCC; font-size: 22px; ">50L</td>
    </tr>
<tr>
    <td class="input-container" data-name="Bia Hà Nội" data-size="30L"><input type="text" readonly data-weight="30"></td>
    <td class="input-container" data-name="Bia Hà Nội" data-size="50L"><input type="text" readonly data-weight="50"></td>
    <td class="input-container" data-name="Bia NEW" data-size="30L"><input type="text" readonly data-weight="30"></td>
    <td class="input-container" data-name="Bia NEW" data-size="50L"><input type="text" readonly data-weight="50"></td>
    <td class="input-container" data-name="Bia Tải" data-size="Tải"><input type="text" readonly data-weight="36"></td>
    <td class="input-container" data-name="Bia Keg" data-size="Keg"><input type="text" readonly data-weight="12"></td>
    <td class="input-container" data-name="Chai Đỏ" data-size="Lốc"><input type="text" readonly data-weight="12"></td>
</tr>

</table>
</div>
<div id="priceInfo" style="display: none; margin-top: 10px;">
    <div style="display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; font-size: 17px; margin-bottom: 10px;">
        <span><span style="color: green;">Bia Hà Nội:</span> 13.000</span>
        <span>-</span>
        <span><span style="color: green;">Bia New:</span> 9.545,455</span>
    </div>

    <div style="display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; font-size: 17px;">
        <span><span style="color: green;">Bia Tải:</span> 12.727,273</span>
        <span>-</span>
        <span><span style="color: green;">Bia Keg:</span> 13.636,364</span>
        <span>-</span>
        <span><span style="color: green;">Chai Đỏ:</span> 16.363,636</span>
    </div>
</div>
    </form>
    
<div style="text-align: center; margin-top: 10px;">
    <button type="button" onclick="togglePriceInfo(event)" style="font-size: 20px; background: none; border: none; cursor: pointer;">▼</button>

</div>


<div class="info">
    <div class="info-box">
<div id="summarySection">
    <p id="totalQuantity" style="font-size: 20px;">Trọng lượng: <span></span></p>
    <p id="totalCount" style="font-size: 20px;">Số lượng: <span></span></p>
    <p style="font-size: 20px;">
        Thành tiền: <span id="totalMoney"></span>
        <button type="button" onclick="toggleDetails()" style="font-size: 16px; background: none; border: none; cursor: pointer;" id="toggleIcon">▶</button>
    </p>
</div>

<!-- HTML phần Popup -->
<div class="picker-container" id="numberPopup" style="display: none;">
    <div style="text-align: center; margin-top: 10px;" id="selectedLabel">
    <strong></strong><span id="selectedName">Chưa chọn</span>
</div>
    <div id="numbers" class="numbers"></div>
    <div class="pagination">
        <button id="previous-page" class="navigate-button" disabled>◀️</button>
        <button id="close-picker" class="close-button">XÓA</button>
        <button id="next-page" class="navigate-button">▶️</button>
    </div>
</div>


<div id="detailsSection" style="display: none;">
    <p style="text-align: center;"><strong>Chi tiết</strong></p>
    <div id="conversionDetails" style="margin-top: 10px;"></div>
    <p>
        <button type="button" onclick="toggleDetails()" style="font-size: 16px; background: none; border: none; cursor: pointer; ">◀ Quay lại</button>
    </p>
</div>

    </div>
</div>





<script>
const CONFIG = <?php echo json_encode($config); ?>;
</script>

<script>
const popup = document.getElementById("numberPopup");
let activeInput = null;
let currentPage = 1; // Trang mặc định là 1 khi mở bảng chọn số
const numbersPerPage = 50; // Số nút trên mỗi trang

// Tạo các nút số dựa trên trang hiện tại
function createNumberButtons() {
    const numbersContainer = document.getElementById("numbers");
    numbersContainer.innerHTML = ""; // Xóa các nút cũ

    // Tính toán phạm vi các số hiển thị trên trang
    const startNumber = (currentPage - 1) * numbersPerPage + 1;
    const endNumber = currentPage * numbersPerPage;

    // Tạo các nút số từ startNumber đến endNumber
    for (let i = startNumber; i <= endNumber; i++) {
        const btn = document.createElement("button");
        btn.textContent = i;
        btn.classList.add("number-button");
        btn.type = "button";
        btn.onclick = () => {
            if (activeInput) {
                activeInput.value = i;
                popup.style.display = "none";

                // Thêm hoặc gỡ class màu đỏ
                if (i > 0) {
                    activeInput.classList.add("has-value");
                } else {
                    activeInput.classList.remove("has-value");
                }

                calculateTotalWeight();
            }
        };
        numbersContainer.appendChild(btn);
    }

    // Cập nhật trạng thái các nút phân trang
    document.getElementById("previous-page").disabled = (currentPage === 1);
    document.getElementById("next-page").disabled = (currentPage * numbersPerPage >= 100); // Giới hạn 100 số
}

// Mở popup khi click vào input
document.querySelectorAll("input[type='text']").forEach(input => {
    input.addEventListener("click", (e) => {
        activeInput = input;
        currentPage = 1; 
        popup.style.display = "grid";
        createNumberButtons(); 

        // Cập nhật nhãn khi click vào input
        const name = input.closest('td').getAttribute('data-name'); // Lấy tên bia từ thuộc tính data-name
        const size = input.closest('td').getAttribute('data-size'); // Lấy dung tích bia từ thuộc tính data-size
        const selectedLabel = document.getElementById("selectedLabel");

        // Cập nhật nhãn với thông tin mới
        if (name && size) {
            document.getElementById("selectedName").textContent = `Chọn ${size} - ${name}`;
        }
    });
});

document.addEventListener("click", (e) => {
    if (!popup.contains(e.target) && !e.target.matches("input[type='text']")) {
        popup.style.display = "none";  // Đóng popup khi click ra ngoài popup
    }
});

document.getElementById("close-picker").addEventListener("click", () => {
    // Xoá giá trị input đang active
    if (activeInput) {
        activeInput.value = ""; // xoá số
        activeInput.classList.remove("has-value"); // gỡ class màu đỏ
    }

    // Đóng popup
    popup.style.display = "none";

    // Tính lại tổng để cập nhật khi xóa giá trị
    calculateTotalWeight();
});

document.getElementById("previous-page").addEventListener("click", () => {
    if (currentPage > 1) {
        currentPage--;
        createNumberButtons(); // Cập nhật các nút khi chuyển trang
    }
});

document.getElementById("next-page").addEventListener("click", () => {
    if (currentPage * numbersPerPage < 100) {
        currentPage++;
        createNumberButtons(); // Cập nhật các nút khi chuyển trang
    }
});



// Hàm làm tròn theo quy tắc riêng
function lamTronTheoQuyTac(value) {
    const nguyen = Math.floor(value);
    const le = value - nguyen;

    if (le > 0.5) {
        return nguyen + 1; // > .500 thì làm tròn lên
    } else {
        return nguyen; // ≤ .500 thì làm tròn xuống
    }
}


function calculateTotalWeight() {
    let totalWeight = 0;
    let totalCount = 0;
    let thanhTien = 0;
    const inputs = document.querySelectorAll("input[type='text']");
    const donGia = {
    hanoi_30: CONFIG.price.hanoi_30,
    hanoi_50: CONFIG.price.hanoi_50,
    new_30: CONFIG.price.new_30,
    new_50: CONFIG.price.new_50,
    tai: CONFIG.price.tai,
    keg: CONFIG.price.keg,
    chai: CONFIG.price.chai
};

    // Tính từng loại
    inputs.forEach((input, index) => {
        const val = parseInt(input.value);
        const weight = parseInt(input.dataset.weight);
        if (!isNaN(val) && !isNaN(weight)) {
            const totalKg = val * weight;
            totalWeight += totalKg;

            if (index >= 0 && index <= 3) totalCount += val;

            let unitPrice = 0;

if (index === 0) unitPrice = donGia.hanoi_30;
else if (index === 1) unitPrice = donGia.hanoi_50;
else if (index === 2) unitPrice = donGia.new_30;
else if (index === 3) unitPrice = donGia.new_50;
else if (index === 4) unitPrice = donGia.tai;
else if (index === 5) unitPrice = donGia.keg;
else if (index === 6) unitPrice = donGia.chai;

            let tien = lamTronTheoQuyTac(totalKg * unitPrice);
            thanhTien += tien;
        }
    });

// Thuế theo config
let thue = thanhTien * CONFIG.tax;
    let phanThapPhan = Math.round((thue - Math.floor(thue)) * 10);

    // Làm tròn thuế như yêu cầu
    if (phanThapPhan >= 6) thue = Math.ceil(thue);
    else thue = Math.floor(thue);
    
    let tongTien = thanhTien + thue;
    document.querySelector("#totalQuantity span").innerHTML = `${totalWeight} <span class="black-text">KG</span>`;
    document.querySelector("#totalCount span").innerHTML = `${totalCount} <span class="black-text">Bom</span>`;
    document.getElementById("totalMoney").textContent = tongTien.toLocaleString("vi-VN"), document.getElementById("totalMoney").style.setProperty("color", "red", "important");

    document.getElementById("tax").textContent = thue.toLocaleString("vi-VN");
}

</script>
<script>
function togglePriceInfo(event) {
    event.preventDefault(); // ← Ngăn form bị submit

    const priceInfo = document.getElementById("priceInfo");
    const button = event.currentTarget;

    if (priceInfo.style.display === "none") {
        priceInfo.style.display = "block";
        button.textContent = "▲";
    } else {
        priceInfo.style.display = "none";
        button.textContent = "▼";
    }
}

</script>
<script>
function toggleDetails() {
    const summary = document.getElementById("summarySection");
    const details = document.getElementById("detailsSection");
    const toggleIcon = document.getElementById("toggleIcon");

    if (details.style.display === "none") {
        summary.style.display = "none";
        details.style.display = "block";
        showConversionDetails();
    } else {
        summary.style.display = "block";
        details.style.display = "none";
        document.getElementById("conversionDetails").innerHTML = '';
    }
}

function showConversionDetails() {
    const inputs = document.querySelectorAll("input[type='text']");
    const container = document.getElementById("conversionDetails");
    container.innerHTML = '';

    const names = ["Hà Nội", "Hà Nội", "NEW", "NEW", "Tải", "Keg", "Chai Đỏ"];
    const sizes = ["30L", "50L", "30L", "50L", "", ""];
const donGia = [
    CONFIG.price.hanoi_30,
    CONFIG.price.hanoi_50,
    CONFIG.price.new_30,
    CONFIG.price.new_50,
    CONFIG.price.tai,
    CONFIG.price.keg,
    CONFIG.price.chai
];

    let thanhTien = 0;

    // Tạo bảng
    const table = document.createElement("table");
    table.style.width = "100%";
    table.style.borderCollapse = "collapse";
    table.style.marginTop = "10px";
    table.style.fontSize = "14px";

const header = `
   <tr style="background-color:#d9d9d9;">
        <th style="border:1px solid #000; padding:4px;">Tên</th>
        <th style="border:1px solid #000; padding:4px;">Trọng lượng</th>
        <th style="border:1px solid #000; padding:4px;">Đơn giá</th>
        <th style="border:1px solid #000; padding:4px;">Thành tiền</th>
    </tr>
`;
    table.innerHTML = header;

    // Từng dòng chi tiết
    inputs.forEach((input, i) => {
        const val = parseInt(input.value);
        const weight = parseInt(input.dataset.weight);

        if (!isNaN(val) && val > 0) {
            const kg = val * weight;
            const price = donGia[i];
            const total = lamTronTheoQuyTac(kg * price);
            thanhTien += total;

            const row = document.createElement("tr");
            row.innerHTML = `
                <td style="border:1px solid #000; padding:4px;">${names[i]}${sizes[i] ? ': ' + sizes[i] : ''}</td>
                <td style="border:1px solid #000; padding:4px;">${kg}</td>
                <td style="border:1px solid #000; padding:4px;">${price.toLocaleString("vi-VN")}</td>
                <td style="border:1px solid #000; padding:4px;">${total.toLocaleString("vi-VN")}</td>
            `;
            table.appendChild(row);
        }
    });

    // Cộng tiền hàng (chưa thuế)
    const rowSubTotal = document.createElement("tr");
    rowSubTotal.innerHTML = `
        <td colspan="3" style="border:1px solid #000; padding:4px; font-weight:bold; text-align:right;">Cộng tiền hàng</td>
        <td style="border:1px solid #000; padding:4px;">${thanhTien.toLocaleString("vi-VN")}</td>
    `;
    table.appendChild(rowSubTotal);

    // Dòng Thuế
let tax = thanhTien * CONFIG.tax;
    let phanThapPhan = Math.round((tax - Math.floor(tax)) * 10);
    tax = phanThapPhan >= 6 ? Math.ceil(tax) : Math.floor(tax);

const rowTax = document.createElement("tr");
rowTax.innerHTML = `
    <td colspan="3" style="border:1px solid #000; padding:4px; font-weight:bold; text-align:right;">
        Thuế (${CONFIG.tax * 100}%)
    </td>
    <td style="border:1px solid #000; padding:4px;">
        ${tax.toLocaleString("vi-VN")}
    </td>
`;
    table.appendChild(rowTax);

    // Dòng Tổng cộng
    const tongCong = thanhTien + tax;
const rowTotal = document.createElement("tr");
rowTotal.style.backgroundColor = "#ffe599"; // vàng nhạt

rowTotal.innerHTML = `
    <td colspan="3" style="border:1px solid #000; padding:4px; font-weight:bold; text-align:right;">Tổng cộng</td>
    <td style="border:1px solid #000; padding:4px; font-weight:bold;">${tongCong.toLocaleString("vi-VN")}</td>
`;
    table.appendChild(rowTotal);

    container.appendChild(table);
}

</script>



</body>
</html>
