
<!-- Frontend HTML + JS for upload and progress -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>SQL Upload & Import</title>
<style>
body { font-family: Arial; background: #f0f0f0; padding: 40px; }
.container { max-width: 450px; margin: auto; background: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 0 12px rgba(0,0,0,0.1);}
h2 { text-align: center; margin-bottom: 20px;}
input[type=file], button { width: 100%; padding: 12px; margin-top: 10px;}
#progressBar { width: 100%; background: #eee; border-radius: 10px; margin-top: 15px; height: 25px; overflow: hidden;}
#progressBar div { height: 100%; width: 0%; background: #4caf50; color: white; text-align: center; line-height: 25px; transition: width 0.4s;}
#status { margin-top: 15px; text-align: center; font-weight: bold;}
</style>
</head>
<body>
<div class="container">
<h2>Upload sql.sql File</h2>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="sql_file" id="sql_file" accept=".sql" required />
<button type="submit">Upload & Import</button>
</form>
<div id="progressBar"><div></div></div>
<div id="status"></div>
</div>

<script>
document.getElementById("uploadForm").addEventListener("submit", function(e){
    e.preventDefault();
    const fileInput = document.getElementById("sql_file");
    const file = fileInput.files[0];
    if(!file){
        setStatus("❌ Please select a file.", "red");
        return;
    }
    if(file.name !== "sql.sql"){
        setStatus("❌ Only 'sql.sql' file allowed.", "red");
        return;
    }
    const formData = new FormData();
    formData.append("sql_file", file);

    const xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", function(e){
        if(e.lengthComputable){
            let percent = Math.round((e.loaded / e.total) * 100);
            updateProgress(percent);
        }
    });

    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            try{
                let res = JSON.parse(xhr.responseText);
                setStatus(res.message, res.status === "success" ? "green" : "red");
                if(res.status === "success") updateProgress(100);
            }catch{
                setStatus("❌ Unexpected server response.", "red");
                console.error(xhr.responseText);
            }
        }
    };

    xhr.open("POST", "", true);
    xhr.send(formData);
});

function updateProgress(p){
    const bar = document.querySelector("#progressBar div");
    bar.style.width = p + "%";
    bar.textContent = p + "%";
}

function setStatus(msg, color){
    const status = document.getElementById("status");
    status.textContent = msg;
    status.style.color = color;
}
</script>
</body>
</html>
