<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>英文單字</title>
    <link rel="shortcut icon" href="../data/軟體下載.jpg" />
    <link rel="bookmark" href="../data/軟體下載.jpg" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>    
    <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <style>
        /* 用來定義表格樣式，讓表格在小螢幕上也能夠閱讀 */
        .rwd-table {
            overflow: hidden; /* 隱藏超出容器範圍的內容 */
            border-width: 1px; /* 設定邊框寬度 */
            border-style: solid; /* 設定邊框樣式 */
            border-color: rgb(192, 192, 192); /* 設定邊框顏色 */
            padding: 5px; /* 設定內邊距 */
        }               
            /* 設定表格的隔行背景色 */
            .rwd-table tr:nth-of-type(2n) {
                background: rgb(245, 245, 245); /* 隔行背景色 */
                border-width: 1px; /* 邊框寬度 */
                border-style: solid; /* 邊框樣式 */
                border-color: rgb(192, 192, 192); /* 邊框顏色 */
            }
            /* 設定表格列的懸浮停留顏色 */
            .rwd-table tr:hover {
                background-color: transparent !important; /* 懸浮停留時的背景顏色,'!important'為提高樣式優先層級 */
            }
            /* 設定表格的邊框樣式 */
            .rwd-table th,
            .rwd-table td {
                border-width: 1px; /* 邊框寬度 */
                border-style: solid; /* 邊框樣式 */
                border-color: rgb(225, 225, 225); /* 邊框顏色 */
            }
        /* 設定表格的最小寬度 */
        .rwd-table {
            min-width: 100%; /* 表格寬度至少為 100% */
        }
            /* 在小螢幕上隱藏表頭 */
            .rwd-table th {
                display: none; /* 隱藏表頭 */
            }
            /* 在小螢幕上，表格的每個單元格顯示為獨立區塊 */
            .rwd-table td {
                display: block; /* 將表格的單元格設置為區塊顯示 */
            }
                /* 在小螢幕上，在每個單元格前添加表頭內容 */
                .rwd-table td:before {
                    content: attr(data-th) " : "; /* 在單元格內容前添加表頭 *//
                    font-weight: bold; /* 設定字體加粗 */
                    width: 6.5em; /* 設定表頭內容的寬度 */
                    display: inline-block; /* 內聯區塊顯示 */
                }
            /* 設定表格中文字的對齊方式和字體樣式 */
            .rwd-table th, .rwd-table td {
                text-align: left; /* 文字向左對齊 */
                font-family: 微軟正黑體; /* 字體為微軟正黑體 */
                font-size: 20px; /* 字體大小 */
            }
                /* 設定表頭和單元格的字體顏色和粗細 */
                .rwd-table th, .rwd-table td:before {
                    color: rgb(210, 11, 42); /* 設定文字顏色 */
                    font-weight: bold; /* 設定字體加粗 */
                }                
        /* 當螢幕寬度大於 480px 時的樣式 */
        @media (min-width: 480px) {
            .rwd-table td:before {
                display: none; /* 隱藏小螢幕顯示的表頭內容 */
            }
		/* 設定表格各欄位寬度 */        
			.rwd-table td[data-th="編號"] {
    			width: 50px; /* 單字欄位寬度 */
			} 
			.rwd-table td[data-th="單字"] {
    			width: 200px; /* 單字欄位寬度 */
			}        
			.rwd-table td[data-th="音標"] {
    			width: 100px; /* 音標欄位寬度 */
			}
			.rwd-table td[data-th="詞性"] {
    			width: 200px; /* 詞性欄位寬度 */
			}
			.rwd-table td[data-th="解釋"] {
    			width: 360px; /* 解釋欄位寬度 */
			}
			.rwd-table td[data-th="錯誤次數"] {
    			width: 70px; /* 錯誤次數欄位寬度 */
    			text-align: center;  /* 錯誤次數文字置中 */
    			vertical-align: middle; /* 進度條上下置中 */
			}			
            .rwd-table th, .rwd-table td {
                display: table-cell; /* 將單元格設置為表格顯示 */
                padding: 0.25em 0.5em; /* 設定內邊距 */
            }

            .rwd-table th:first-child,
            .rwd-table td:first-child {
                padding-left: 0; /* 首個單元格左側無內邊距 */
            }

            .rwd-table th:last-child,
            .rwd-table td:last-child {
                padding-right: 0; /* 最後一個單元格右側無內邊距 */
            }

            .rwd-table th,
            .rwd-table td {
                padding: 1em !important; /* 強制設置內邊距 */
            }
        }
		/* 設定表格錯誤次數欄位進度條樣式 */ 
			.error-bar-wrapper {
				position: relative;
				width: 100%;
				height: 24px;  /* 與line-height要一致 */
				background: #eee;
				border-radius: 10px;
				overflow: hidden;
		}
			.error-bar {
				position: absolute;
				left: 0;
				top: 0;				
				height: 100%;
				border-radius: 10px;
				transition: width 0.4s ease;
		}
		/* 進度條顏色 */
			.error-low { background: #4CAF50; }   /* 綠色 */
			.error-mid { background: #FFC107; }   /* 黃色 */
			.error-high { background: #F44336; }  /* 紅色 */
			.error-zero { background: #BDBDBD; }  /* 灰色 */
		/* 進度條字形 */
			.error-text {
				position: absolute;
				width: 100%;
				text-align: center;
				font-size: 14px;
				top: 0;
				line-height:24px;
				font-weight: bold;
		} 						
        /* DataTables 搜索框容器样式 */
        .dataTables_wrapper .dataTables_filter {
            text-align: center; /* 搜尋框文字置中 */
            margin-bottom: 20px; /* 增加搜尋框的外邊框 */
        }
            /* 搜索框本身样式 */
            .dataTables_wrapper .dataTables_filter input {
                display: none; /* 隱藏預設搜尋框*/
                width: auto;
                margin: 0 auto; /* 搜尋框置中 */
            }
        /* 強制搜尋框大小為100% */
        .dataTables_wrapper {
            width: 100%;
        }
            /* 强制搜尋框内元素置中 */
            .dataTables_wrapper .top {
                text-align: center;
                width: 100%;
            }
            /* 搜尋框内右側有叉叉 */
        	.custom-search{
				position: relative;
				display: inline-block;
			}
			#customSearchBox{
				padding-right: 8px; /* 留空間給叉叉 */
			}		
			#clearSearch{
				position: absolute;
				right: 4px;
				top: 50%;
				transform: translateY(-50%);
				border: none;
				outline: none;
				box-shadow: none;  
				background: dodgerblue;  
				font-size: 16px;
				font-weight: bold;
				color: black;
			}             
        /* 設定表格的背景顏色 */
        #c1 {
            background-color: rgb(250, 250, 250);
        }

        #c2 {
            background-color: rgb(237, 237, 237);
        }
        /* 設定標籤頁按鈕的樣式 */
        .tab {
            margin-bottom: 10px; /* 底部外邊距 */
            outline: 100px; /* 外框 */
        }
            /* 設定標籤頁按鈕懸停時的背景顏色 */
            .tab button:hover {
                background-color: gray; /* 懸停時背景色 */
            }
            /* 設定當前活動標籤頁按鈕的背景顏色 */
            .tab button.active {
                background-color: dodgerblue; /* 活動標籤頁的背景色 */
            }
        /* 設定標籤頁內容區的樣式 */
        .tabcontent {
            display: flex; /* 彈性盒子佈局 */
            border: none solid #ccc; /* 邊框樣式 */
            font-family: "微軟正黑體"; /* 字體 */
            font-size: 14px; /* 字體大小 */
            color: black; /* 字體顏色 */
        }
        /* 設定輸入容器的樣式 */
        .input-container {
            display: flex; /* 彈性盒子佈局 */
            width: 100%; /* 容器寬度 */
            margin-bottom: 14px; /* 底部外邊距 */
        }
        /* 設定圖標的樣式 */
        .icon {
            background: dodgerblue; /* 背景色 */
            color: black; /* 字體顏色 */
            min-width: 35px; /* 最小寬度 */
            text-align: center; /* 文字居中對齊 */
            font-size: 25px; /* 字體大小 */
        }
        /* 設定輸入欄位的樣式 */
        .input-field {
            padding: 1px; /* 內邊距 */
            width: 100%; /* 寬度 */
        }
            /* 當輸入欄位獲得焦點時的邊框樣式 */
            .input-field:focus {
                border: 2px solid dodgerblue; /* 獲得焦點時的邊框顏色 */
            }
        /* 定義按鈕頁籤樣式 */
        .tabcontent {
            color: black;
        }
        /* 單字選項頁籤切換 */
        table1 {
            display: block;
            white-space: nowrap;
        }
        /* 設定按鈕的樣式 */
        .btn {
            background-color: dodgerblue; /* 按鈕背景色 */
            color: black; /* 按鈕字體顏色 */
            font-family: "微軟正黑體"; /* 按鈕字體 */
            font-size: 14px; /* 按鈕字體大小 */
        }
            /* 設定按鈕懸停時的樣式 */
            .btn:hover {
                opacity: 1; /* 懸停時透明度 */
            }
        /* 設定容器的樣式 */
        .container, .container-fluid {
            width: 100%; /* 容器寬度 */
            padding-right: var(--bs-gutter-x, 2rem); /* 右邊內邊距 */
            padding-left: var(--bs-gutter-x, 1rem); /* 左邊內邊距 */
            margin-right: auto; /* 右邊外邊距自動 */
            margin-left: auto; /* 左邊外邊距自動 */
        }
    </style>
</head>
<body id="c1">
    <div id="members" class="w3-container w3-center">
        <h1 style="text-align:center;font-family:微軟正黑體;color:rgb(191, 54, 12)" class="w3-panel w3-border w3-hover-border-gray" id="c2">
            <span style="font-size:48px">英文單字</span>
        </h1>
        <br>
        <div class="w3-container-fluid">
            <table1>
                <tr>
                    <td>
                        <!-- 新增單字 -->
                        <div class="tab">
                            <button class="tablinks" onclick="openCity(event,'add')" id="defaultOpen">新增單字</button>
                            <button class="tablinks" onclick="openCity(event, 'revise')">修改單字</button>
                            <button class="tablinks" onclick="openCity(event, 'delete')">刪除單字</button>
                            <button class="tablinks" onclick="openCity(event, 'download')">下載資料</button>
                        </div>

                        <div id="add" class="tabcontent  w3-container">
                            <form action="php/word_add.php" method="post" style="max-width:230px;margin:auto">
                                <div class="input-container">
                                    <i class="fa fa-file-word-o icon"></i>
                                    <input class="input-field" type="text" placeholder="請輸入欲新增單字" id="word" name="word" required>
                                </div>
                                <div class="input-container">
                                    <i class="fa fa-code icon"></i>
                                    <input class="input-field" type="text" placeholder="請輸入欲新增音標" id="kk" name="kk" required>
                                </div>                                
                                <div class="input-container">
                                    <i class="fa fa-commenting icon"></i>
                                    <select class="input-field" id="speech" name="speech" required>
                                        <option value="">請選擇詞性</option>
                                        <option value="名詞(n.)">名詞(n.)</option>
                                        <option value="代名詞(pron.)">代名詞(pron.)</option>
                                        <option value="動詞(v.)">動詞(v.)</option>
                                        <option value="副詞(adv.)">副詞(adv.)</option>
                                        <option value="形容詞(adj.)">形容詞(adj.)</option>
                                        <option value="介系詞(prep.)">介系詞(prep.)</option>
                                        <option value="連接詞(conj.)">連接詞(conj.)</option>
                                        <option value="片語(phr.)">片語(phr.)</option>
                                        <option value="前綴(prefix)">前綴(prefix)</option>
                                        <option value="動詞(v.)/名詞(n.)">動詞(v.)/名詞(n.)</option>
                                        <option value="動詞(v.)/形容詞(adj.)">動詞(v.)/形容詞(adj.)</option>
                                        <option value="形容詞(adj.)/名詞(n.)">形容詞(adj.)/名詞(n.)</option>
                                        <option value="形容詞(adj.)/代名詞(pron.)">形容詞(adj.)/代名詞(pron.)</option>
                                        <option value="助動詞(aux.)">助動詞(aux.)</option>
                                        <option value="介系詞(prep.)/副詞(adv.)">介系詞(prep.)/副詞(adv.)</option>
                                    </select>
                                </div>
                                <div class="input-container">
                                    <i class="fa fa-globe icon"></i>
                                    <input class="input-field" type="text" placeholder="請輸入欲新增解釋" id="interpretation" name="interpretation" required>
                                </div>
                                <div class="input-container">
                                    <i class="fa fa-times icon"></i>                              
                                    <select class="input-field" id="errortimes" name="errortimes" required>                               	   
                                        <!--請選擇錯誤次數預設為0-->
                                        <option value="0" selected>0</option>
                                    </select>
                                </div>
                                <!-- 顯示新增結果 -->
                                <div id="confirmation" style="margin-top:20px;">
                                    <!-- 這裡將顯示欲新增的資料 -->	
                                </div>
                                <button type="submit" class="btn" value="新增" style="width:29%" id="btn_showConfirmation" onclick="showConfirmation()"><span style="font-size:14px;font-family:微軟正黑體">新增</span></button>
                                <button type="reset" class="btn" value="重置" style="width:29%" id="btn_logout" onclick="logout();"><span style="font-size:14px;font-family:微軟正黑體">重置</span></button>
                                <button type="button" class="btn" value="放棄新增" style="width:39%" onclick="location.href='word.html'"><span style="font-size:14px;font-family:微軟正黑體">放棄新增</span></button>
                            </form>
                        </div>
                        <!-- 修改單字 -->
                        <div id="revise" class="tabcontent  w3-container">
                            <form action="php/word_revise.php" method="post" style="max-width:230px;margin:auto">
                                <div class="input-container">
                                    <i class="fa fa-id-card icon"></i>
                                    <input class="input-field" type="text" placeholder="請輸入欲修改單字ID" id="id" name="id" required><!--required-->
                                </div>
                                <button type="submit" class="btn" value="修改" style="width:29%" id="btn_searchData" onclick="searchData()"><span style="font-size:14px;font-family:微軟正黑體">修改</span></button>
                                <button type="reset" class="btn" value="重置" style="width:29%" id="btn_logout" onclick="logout()"><span style="font-size:14px;font-family:微軟正黑體">重置</span></button>
                                <button type="button" class="btn" value="放棄修改" style="width:39%" onclick="location.href='word.html'"><span style="font-size:14px;font-family:微軟正黑體">放棄修改</span></button>
                            </form>
                        </div>    
                        <!-- 刪除單字 -->
                        <div id="delete" class="tabcontent  w3-container">
                            <form action="php/word_delete.php" method="post" style="max-width:230px;margin:auto">
                                <div class="input-container">
                                    <i class="fa fa-trash icon"></i>
                                    <input class="input-field" type="text" placeholder="請輸入欲刪除單字ID" id="deleteid" name="id" required><!--required--><!--id一定要是"deleteid"否則alert會亂跳-->
                                </div>
                                <button type="submit" class="btn" value="刪除" style="width:29%" id="btn_showDeleteConfirmation" onclick="showDeleteConfirmation()"><span style="font-size:14px;font-family:微軟正黑體">刪除</span></button>
                                <button type="reset" class="btn" value="重置" style="width:29%" id="btn_logout" onclick="logout();"><span style="font-size:14px;font-family:微軟正黑體">重置</span></button>
                                <button type="button" class="btn" value="放棄刪除" style="width:39%" onclick="location.href='word.html'"><span style="font-size:14px;font-family:微軟正黑體">放棄刪除</span></button>
                            </form>
                        </div>
                        <!-- 下載資料 -->
                        <div id="download" class="tabcontent  w3-container">
        					<!-- 匯出為CSV格式 -->       
        					<br>
            				<form action="php/export_csv.php" method="post"  style="max-width:350px;margin:auto" class="export-btn-container">
                				<button type="submit" class="btn" value="匯出" id="btn_showDeleteConfirmation" onclick=""><span style="font-size:14px;font-family:微軟正黑體">下載CSV</span></button>
            				</form>
            				<!-- 匯出為PDF格式 -->
            				<br>
            				<form action="php/export_pdf.php" method="post" target="_blank" style="max-width:350px;margin:auto" class="export-btn-container">
                				<button type="submit" class="btn" value="匯出" id="btn_showDeleteConfirmation" onclick=""><span style="font-size:14px;font-family:微軟正黑體">下載PDF</span></button>
            				</form>            				
                        </div>                        
            </table1>
        </div>
        <br>
        <hr>
        <!-- 關鍵字搜尋框 -->
        <br>
        <div class="custom-search">
            關鍵字搜尋:
            <input type="text" id="customSearchBox" placeholder="請輸入欲搜尋的單字">
            <button type="button" id="clearSearch" aria-label="清除搜尋">X</button>
        <br>       
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 col-sm-6">
                <table class="rwd-table table table-hover" id="myTable">
                    <thead>
                        <tr>
                            <th>編號</th>
                            <th>單字</th>
                            <th>音標</th>
                            <th>詞性</th>
                            <th>解釋</th>
                            <th>錯誤次數</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                           <!-- 資料會加載到這裡 -->
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <br>
    <div id="members" class="w3-container w3-center main">
        <h3 style="text-align:center;font-family:Comic Sans MS;color:rgb(191, 54, 12)" class="w3-panel w3-border w3-hover-border-gray" id="c2">
            <font size="3">Designer:Hayden.&nbsp2019</font>
        </h3>
    </div>
    <!-- 抓取資料庫資料到表格 -->
    <script>
        $(document).ready(function () {
            $.ajax({
                url: 'php/word_catch.php',
                type: 'POST',
                success: function (data) {
                    // 將載入的資料填入到表格中
                    $('#myTable tbody').html(data);

                    // DataTable 啟用搜索功能
                    var table = $('#myTable').DataTable({
                        //語言選項修改
                        "language": {
                            "emptyTable": "無資料...",
                            "processing": "處理中...",
                            "loadingRecords": "載入中...",
                            "lengthMenu": "顯示 _MENU_ 筆數結果",
                            "zeroRecords": "無搜尋結果",
                            "info": "顯示第 _START_ 至 _END_ 項筆數，共 _TOTAL_ 項",
                            "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                            "infoFiltered": "(從 _MAX_ 筆資料過濾)",
                            "search": "",
                            "paginate": {
                                "first": "首頁",
                                "last": "末頁",
                                "next": "下頁",
                                "previous": "前頁"
                            },
                            "aria": {
                                "sortAscending": ": 升冪",
                                "sortDescending": ": 降冪"
                            }
                        },
                        "lengthMenu": [5, 10, 25, 50],/*選單值設定*/
                        "pageLength": 25, /* 每頁列數 */
                        "lengthChange": false, /* 禁用選單 */
                        "searching": true, /* 啟用搜索功能 */
                        "paging": true, /* 啟用分頁功能 */
                        "ordering": true /* 啟用排序功能 */
                    });

                    // 自訂搜索功能
                    $('#customSearchBox').on('keyup', function () {
                        table.search(this.value).draw();                        
                    });
                    $('#clearSearch').click(function () {
    					$('#customSearchBox').val('').trigger('keyup');
					});
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log("AJAX 請求失敗：", textStatus, errorThrown);
                    alert('無法加載資料');
                }
            });
        });
    </script>


    <!-- 網頁上方的輸入資料區塊 -->
    <script>
        function openCity(evt, cityName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(cityName).style.display = "block";
            evt.currentTarget.className += " active";
        }
        document.getElementById("defaultOpen").click();
    </script>
    <!-- 抓取資料庫資料 -->
    <script>
        $(document).ready(function () {
            $.ajax({
                url: 'php/word_catch.php',
                type: 'POST',
                success: function (data) {
                    $('#mytable').html(data);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log("AJAX 請求失敗：", textStatus, errorThrown);
                    alert('無法加載資料');
                }
            });
        });
    </script>
    <!-- 新增資料 -->
    <script>
        function showConfirmation() {
            // 獲取輸入的值
            var word = document.getElementById('word').value.trim();
            var speech = document.getElementById('speech').value.trim();
            var interpretation = document.getElementById('interpretation').value.trim();
            var errortimes = document.getElementById('errortimes').value.trim();

            // 輸入驗證
            if (!word || !speech || !interpretation) {
                alert('請填寫所有欄位');
                return; // 終止函數執行
            }

            if (isNaN(errortimes) || parseInt(errortimes) < 0) {
                alert('錯誤次數必須是非負數字');
                return; // 終止函數執行
            }

            // 顯示確認區域
            document.getElementById('confirmation').style.display = 'block';

            // 填充確認資料
            document.getElementById('confirmWord').innerText = word;
            document.getElementById('confirmSpeech').innerText = speech;
            document.getElementById('confirmInterpretation').innerText = interpretation;
            document.getElementById('confirmErrortimes').innerText = errortimes;

            // 設置隱藏字段
            document.getElementById('hiddenWord').value = word;
            document.getElementById('hiddenSpeech').value = speech;
            document.getElementById('hiddenInterpretation').value = interpretation;
            document.getElementById('hiddenErrortimes').value = errortimes;
        }

        function hideConfirmation() {
            document.getElementById('confirmation').style.display = 'none';
        }

        function submitData() {
            var form = document.getElementById('confirmForm');
            var formData = new FormData(form);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'php/word_add.php', true);
            xhr.onload = function () {
                if (xhr.status === 200) {
                    alert('資料新增成功！');
                    document.getElementById('dataForm').reset();
                    hideConfirmation();
                } else {
                    alert('資料新增失敗');
                }
            };
            xhr.send(formData);
        }
    </script>
    <!-- 修改資料 -->
    <script>
        $(document).ready(function () {
            // 處理ID查詢表單
            $('#btn_searchData').on('click', function () {
                var id = $('#id').val();
                if (!id) {
                    alert('請輸入欲修改單字 ID');
                    return;
                }

                $.ajax({
                    url: 'php/word_revise.php',
                    type: 'POST',
                    data: { id: id }, // 發送ID資料
                    success: function (response) {
                        try {
                            var data = JSON.parse(response);
                            if (data.error) {
                                alert(data.error);
                            } else {
                                // 將資料傳送到修改表單
                                $('#reviseForm #reviseId').val(data.id);
                                $('#reviseForm #word').val(data.word);
                                $('#reviseForm #speech').val(data.speech);
                                $('#reviseForm #interpretation').val(data.interpretation);
                                $('#reviseForm #errortimes').val(data.errortimes);
                                $('#reviseForm').show();
                                $('#idForm').hide();
                            }
                        } catch (e) {
                            console.error('解析失敗', e);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.error("AJAX 請求失敗：", textStatus, errorThrown);
                        alert('無法載入資料');
                    }
                });
            });

            // 處理修改表單
            $('#reviseForm').on('submit', function (e) {
                e.preventDefault(); // 阻止預設表單提交

                $.ajax({
                    url: 'php/word_revise.php',
                    type: 'POST',
                    data: $(this).serialize(), // 傳送修改資料
                    success: function (response) {
                        try {
                            var data = JSON.parse(response);
                            if (data.error) {
                                alert(data.error);
                            } else {
                                alert(data.success);
                                // 清理表單和返回預設狀態
                                $('#reviseForm').hide();
                                $('#idForm').show();
                                $('#reviseForm')[0].reset();
                            }
                        } catch (e) {
                            console.error('解析失敗', e);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.error("AJAX 請求失敗：", textStatus, errorThrown);
                        alert('無法修改資料');
                    }
                });
            });
        });
    </script>
    <!-- 刪除資料 -->
	<script>
    	function showDeleteConfirmation() {
        	// 獲取輸入的ID
        	var id = document.getElementById('deleteid').value.trim();
        
        	// 輸入驗證：檢查是否輸入ID
            	if (!id) {
                	alert('請輸入欲刪除單字 ID');
                	return; // 終止函數執行
            	}

        	// 顯示確認區域
        	document.getElementById('confirmation').style.display = 'block';

        	// 填充確認資料
        	document.getElementById('confirmId').innerText = id;

        	// 設置隱藏字段
        	document.getElementById('hiddenId').value = id; // 假設有一個隱藏字段
    	}

    	function hideConfirmation() {
        	document.getElementById('confirmation').style.display = 'none';
    	}

    	function deleteData() {
        	var id = document.getElementById('hiddenId').value; // 從隱藏字段獲取ID

        	var formData = new FormData();
        	formData.append('id', id); // 將ID添加到表單數據中

        	var xhr = new XMLHttpRequest();
        	xhr.open('POST', 'php/word_delete.php', true);
        	xhr.onload = function () {
            	if (xhr.status === 200) {
                	alert('資料刪除成功！');
                	// 你可以在這裡重置表單或進行其他操作
                	hideConfirmation();
            	} else {
                	alert('資料刪除失敗');
            	}
        	};
        	xhr.send(formData); // 發送請求
    	}
	</script>
    <!-- 錯誤次數轉換成進度條 -->
	<script>
		function applyErrorBar() {
			document.querySelectorAll('td[data-th="錯誤次數"]').forEach(cell => {

    			const n = parseInt(cell.textContent.trim(), 10);
    			if (isNaN(n)) return; // 已轉換過就跳過

    			const max = 10;
    			const percent = Math.min((n / max) * 100, 100);

    			let color = "#4CAF50";
    			if (n >= 8) color = "#F44336";
    			else if (n >= 5) color = "#FFC107";
    			else if (n === 0) color = "#BDBDBD";

    			cell.innerHTML = `
    			<div style="position:relative;height:18px;background:#eee;border-radius:10px;">
        			<div style="height:100%;width:${percent}%;background:${color};border-radius:10px;"></div>
        			<div style="position:absolute;width:100%;text-align:center;font-size:12px;top:0;line-height:18px;">
        			${n}
        			</div>
    			</div>
    			`;
     });
   }
			setInterval(applyErrorBar, 500); // 每0.5秒更新一次進度條
	</script>

    <!-- 第1版html程式撰寫日期2019.07.15,第1版table程式撰寫日期2020.07.15-->
    <!-- 第2版html程式撰寫日期2021.08.15 -->
    <!-- 第3版html程式撰寫日期,導入單字資料庫2024.08.23 -->
</body>
</html>