<!DOCTYPE html>
<html>
<head>
<title>NHIS CCC Fetch</title>
</head>
<body>

<h3>NHIS CCC Checker</h3>

<input type="text" id="nhis_number" maxlength="8" placeholder="Enter NHIS number"
       oninput="this.value=this.value.replace(/[^0-9]/g,'')">

<button onclick="fetchCCC()">Fetch CCC</button>

<p><strong>CCC:</strong> <span id="ccc_label">---</span></p>

<p id="result"></p>

<script>
function fetchCCC() {
    const nhis = document.getElementById("nhis_number").value;

    if (nhis.length !== 8) {
        document.getElementById("ccc_label").textContent = "---";
        document.getElementById("result").textContent = "NHIS number must be exactly 8 digits";
        return;
    }

    document.getElementById("ccc_label").textContent = "Fetching...";

    fetch("nhis_ccc_api.php?nhis=" + nhis)
        .then(response => response.json())
        .then(data => {
            // Show full JSON response
            document.getElementById("result").textContent = JSON.stringify(data);

            // Extract CCC if available
            if (data.ccc) {
                document.getElementById("ccc_label").textContent = data.ccc;
            } else {
                document.getElementById("ccc_label").textContent = "Not found";
            }
        })
        .catch(error => {
            document.getElementById("ccc_label").textContent = "Error";
            document.getElementById("result").textContent = "Error fetching data";
        });
}
</script>

</body>
</html>
