<h1>Excel表格匹配工具</h1>

    <div class="instructions">
        <h2>使用指引</h2>
        <p>本工具可將兩組 Excel 表格的資料進行匹配，根據 Email 進行對應，並生成結果。</p>
        <p>操作步驟：</p>
        <ol>
            <li>將第一組 Excel 資料（Email、Student ID、Attendance）複製並貼到左側的文字框。</li>
            <li>將第二組 Excel 資料（Student ID、Email）複製並貼到右側的文字框。</li>
            <li>點擊「處理並生成結果」按鈕，完成匹配後結果將顯示在下方。</li>
            <li>按下「複製結果」按鈕，將匹配結果複製到剪貼板，然後貼回 Excel。</li>
        </ol>
        <h2>使用範例</h2>
        <h3>第一組資料（貼到左側）：</h3>
        <pre>
Email	Student ID	Attendance
s1157404@s.eduhk.hk		
s1152812@s.eduhk.hk		
s1153554@s.eduhk.hk		
s1157434@s.eduhk.hk		
s1157117@s.eduhk.hk		
s1141587@s.eduhk.hk		
s1157257@s.eduhk.hk		
        </pre>
        <h3>第二組資料（貼到右側）：</h3>
        <pre>
Student ID	Email
11528124	s1152812@s.eduhk.hk
11571171	s1157117@s.eduhk.hk
11415872	s1141587@s.eduhk.hk
        </pre>
        <h3>匹配結果（生成後）：</h3>
        <pre>
Email	Student ID	Attendance
s1157404@s.eduhk.hk		
s1152812@s.eduhk.hk	11528124	Y
s1153554@s.eduhk.hk		
s1157434@s.eduhk.hk		
s1157117@s.eduhk.hk	11571171	Y
s1141587@s.eduhk.hk	11415872	Y
s1157257@s.eduhk.hk		
        </pre>
    </div>

    <div class="container">
        <div class="textarea-group">
            <label for="firstGroup">第一組Excel表格</label>
            <textarea id="firstGroup" placeholder="貼上第一組Excel數據，例如：Email   Student ID   Attendance"></textarea>
        </div>
        <div class="textarea-group">
            <label for="secondGroup">第二組Excel表格</label>
            <textarea id="secondGroup" placeholder="貼上第二組Excel數據，例如：Student ID   Email"></textarea>
        </div>
    </div>
    <button onclick="processTables()">處理並生成結果</button>

    <div class="result" id="resultBlock" style="display: none;">
        <h2>結果表格</h2>
        <pre id="resultContent"></pre>
        <button class="copy-btn" onclick="copyResult()">複製結果</button>
    </div>

    <script>
        function processTables() {
            const firstGroupText = document.getElementById('firstGroup').value.trim();
            const secondGroupText = document.getElementById('secondGroup').value.trim();

            if (!firstGroupText || !secondGroupText) {
                alert("請確保已經貼上兩組數據！");
                return;
            }

            // 解析第一組數據 (Tab 分隔)
            const firstGroupRows = firstGroupText.split('\n').map(row => row.split('\t').map(cell => cell.trim()));

            // 解析第二組數據 (Tab 分隔)
            const secondGroupRows = secondGroupText.split('\n').map(row => row.split('\t').map(cell => cell.trim()));

            // 將第二組數據轉成匹配表 (Email -> Student ID)
            const secondGroupMap = {};
            secondGroupRows.forEach(row => {
                const email = row[1]; // 第二列是Email
                const studentId = row[0]; // 第一列是Student ID
                if (email && studentId) {
                    secondGroupMap[email] = studentId;
                }
            });

            // 更新第一組數據
            const updatedRows = firstGroupRows.map(row => {
                const email = row[0]; // 第一列是Email
                if (secondGroupMap[email]) {
                    row[1] = secondGroupMap[email]; // 填入Student ID
                    row[2] = 'Y'; // 填入Attendance
                }
                return row;
            });

            // 生成結果表格，格式化為Tab分隔的格式
            const resultContent = updatedRows.map(row => row.join('\t')).join('\n');
            document.getElementById('resultContent').textContent = resultContent;
            document.getElementById('resultBlock').style.display = 'block';
        }

        function copyResult() {
            const resultContent = document.getElementById('resultContent').textContent;
            navigator.clipboard.writeText(resultContent).then(() => {
                alert("結果已複製到剪貼板！");
            }).catch(err => {
                alert("複製失敗，請重試！");
            });
        }

        // 禁用右鍵和快捷鍵
        document.addEventListener('contextmenu', function (event) {
            event.preventDefault(); // 禁用右鍵功能
        });

        document.addEventListener('keydown', function (event) {
            // 禁用 Ctrl+C, Ctrl+X, Command+C, Command+X
            if ((event.ctrlKey || event.metaKey) && (event.key === 'c' || event.key === 'x')) {
                alert('複製和剪下功能已被禁用！');
                event.preventDefault();
            }
        });
    </script>