<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Giấy Đề Nghị Thanh Toán TT200</title>
    <link rel="shortcut icon" href="logo.png" type="image/x-icon">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="action-buttons">
        <input type="file" id="excelFile" accept=".xlsx, .xls" style="display: none;">
        <button class="action-button" onclick="document.getElementById('excelFile').click()">Import Excel</button>
        <button class="action-button" onclick="printDocument()">In Ngay</button>
        <button class="action-button" onclick="exportToPDF()">Xuất PDF</button>
        <button class="action-button" onclick="showGuide()">Hướng dẫn</button>
    </div>

    <div class="container">
        <div class="header">
            <div class="header-row">
                <div class="header-left">
                    Đơn vị:...................</br>
                    Bộ phận:.................</br>
                </div>
                <div class="header-right">
                    <b>Mẫu số: 05-TT</b></br>
                    (Ban hành theo Thông tư 200/2014/TT-BTC</br>
                    ngày 24/12/2014 của Bộ trưởng BTC)
                </div>
            </div>
        </div>

        <div class="title-section">
            <div class="title-center">
                <h2>GIẤY ĐỀ NGHỊ THANH TOÁN</h2>
            </div>
            <div class="info-date">
                <i>Ngày ... tháng ... năm ....</i>
            </div>
        </div>

        <div class="form-content">
            <div class="form-row">
                Kính gửi: <span class="dotted-line">..........................................................................</span>
            </div>
            <div class="form-row">
                Họ và tên người đề nghị thanh toán: <span class="dotted-line">................................................</span>
            </div>
            <div class="form-row">
                Bộ phận (hoặc địa chỉ): <span class="dotted-line">............................................................</span>
            </div>
            <div class="form-row">
                Nội dung thanh toán: <span class="dotted-line">................................................................</span>
            </div>
            <div class="form-row">
                Số tiền: <span class="dotted-line">...........................</span> (Viết bằng chữ): <span class="dotted-line">.............................</span>
            </div>
            <div class="form-row">
                (Kèm theo: <span class="dotted-line">...........................</span> chứng từ gốc)
            </div>
        </div>

        <div class="signatures">
            <div class="signature-block">
                <div>Người đề nghị</div>
                <div>thanh toán</div>
                <div>(Ký, họ tên)</div>
            </div>
            <div class="signature-block">
                <div>Kế toán trưởng</div>
                <div>(Ký, họ tên)</div>
            </div>
            <div class="signature-block">
                <div>Người duyệt</div>
                <div>(Ký, họ tên)</div>
            </div>
        </div>
    </div>

    <div id="guideModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeGuide()">&times;</span>
            <h3>Hướng dẫn sử dụng</h3>
            <p>Định dạng Excel để điền thông tin:</p>
            <p>File Excel cần có các cột sau:</p>
            <ul>
                <li>donvi: Tên đơn vị</li>
                <li>bophan: Tên bộ phận</li>
                <li>kinhgui: Người/bộ phận nhận</li>
                <li>nguoidenghi: Tên người đề nghị</li>
                <li>noidung: Nội dung thanh toán</li>
                <li>sotien: Số tiền (số)</li>
                <li>kemtheo: Số chứng từ kèm theo</li>
                <li>ngay: Ngày lập</li>
                <li>thang: Tháng lập</li>
                <li>nam: Năm lập</li>
            </ul>
            <a href="MauFileDeNghiTT200.xlsx">Tải file mẫu</a>
        </div>
    </div>

    <script>
         function handleExcelImport() {
            document.getElementById('excelFile').addEventListener('change', function(e) {
                const file = e.target.files[0];
                const reader = new FileReader();

                reader.onload = function(e) {
                    const data = new Uint8Array(e.target.result);
                    const workbook = XLSX.read(data, {type: 'array'});
                    const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
                    const jsonData = XLSX.utils.sheet_to_json(firstSheet);

                    const receiptsContainer = document.createElement('div');
                    receiptsContainer.className = 'receipts-container';

                    jsonData.forEach((row, index) => {
                        const receiptDiv = document.createElement('div');
                        receiptDiv.className = 'container';
                        receiptDiv.innerHTML = document.querySelector('.container').innerHTML;
                        
                        fillReceiptData(receiptDiv, row);

                        if (index < jsonData.length - 1) {
                            receiptDiv.style.pageBreakAfter = 'always';
                        }

                        receiptsContainer.appendChild(receiptDiv);
                    });

                    const oldContainer = document.querySelector('.container');
                    oldContainer.parentNode.replaceChild(receiptsContainer, oldContainer);
                };

                reader.readAsArrayBuffer(file);
            });
        }

        function fillReceiptData(receiptElement, data) {
            const formattedAmount = formatCurrency(data.sotien || '');
            const bangChu = data.sotien ? numberToWords(parseInt(data.sotien)) : '';

            receiptElement.querySelector('.header-left').innerHTML = `
                <b>${data.donvi || '..................'}</b><br>
                <b>${data.bophan || '..................'}</b>
            `;

            const formRows = receiptElement.querySelectorAll('.form-row');
            formRows[0].innerHTML = `Kính gửi: ${data.kinhgui || '...................................'}`;
            formRows[1].innerHTML = `Họ và tên người đề nghị thanh toán: ${data.nguoidenghi || '...................................'}`;
            formRows[2].innerHTML = `Bộ phận (hoặc địa chỉ): ${data.bophan || '...................................'}`;
            formRows[3].innerHTML = `Nội dung thanh toán: ${data.noidung || '...................................'}`;
            formRows[4].innerHTML = `Số tiền: ${formattedAmount} (Viết bằng chữ): ${bangChu}`;
            formRows[5].innerHTML = `(Kèm theo: ${data.kemtheo || '........................'} chứng từ gốc)`;

            const dateString = `Ngày ${data.ngay || '...'} tháng ${data.thang || '...'} năm ${data.nam || '...'}`;
            receiptElement.querySelector('.title-section i').innerHTML = dateString;
        }

        function formatCurrency(number) {
            if (!number) return '';
            return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " VNĐ";
        }

        function numberToWords(number) {
            const units = ["", "một", "hai", "ba", "bốn", "năm", "sáu", "bảy", "tám", "chín"];
            const positions = ["", "nghìn", "triệu", "tỷ"];

            if (number === 0) return "không";

            function readGroup(group) {
                let result = "";
                let hundreds = Math.floor(group / 100);
                let tens = Math.floor((group % 100) / 10);
                let ones = group % 10;

                if (hundreds > 0) {
                    result += units[hundreds] + " trăm ";
                }

                if (tens > 0) {
                    if (tens === 1) {
                        result += "mười ";
                    } else {
                        result += units[tens] + " mươi ";
                    }
                }

                if (ones > 0) {
                    if (tens === 0 && hundreds !== 0) {
                        result += "lẻ ";
                    }
                    if (ones === 1 && tens > 1) {
                        result += "mốt ";
                    } else if (ones === 5 && tens > 0) {
                        result += "lăm ";
                    } else {
                        result += units[ones] + " ";
                    }
                }

                return result;
            }

            let result = "";
            let groupCount = 0;
            let temp = number;

            while (temp > 0) {
                let group = temp % 1000;
                if (group !== 0) {
                    result = readGroup(group) + positions[groupCount] + " " + result;
                }
                temp = Math.floor(temp / 1000);
                groupCount++;
            }

            result = result.trim();
            result = result.charAt(0).toUpperCase() + result.slice(1);
            result += " đồng";
            return result;
        }

        function printDocument() {
            window.print();
        }

        function exportToPDF() {
            const element = document.querySelector('.receipts-container') || document.querySelector('.container');
            const opt = {
                margin: 1,
                filename: 'de-nghi-thanh-toan.pdf',
                image: { type: 'jpeg', quality: 0.98 },
                html2canvas: { scale: 2 },
                jsPDF: { unit: 'cm', format: 'a4', orientation: 'portrait' }
            };

            html2pdf().set(opt).from(element).save();
        }

        function showGuide() {
            document.getElementById('guideModal').style.display = "block";
        }

        function closeGuide() {
            document.getElementById('guideModal').style.display = "none";
        }

        window.onclick = function(event) {
            if (event.target.className === 'modal') {
                event.target.style.display = "none";
            }
        }

        window.onload = function() {
            handleExcelImport();
        }
    </script>
</body>
</html>