<form 
    enctype="multipart/form-data" 
    method="post" 
    action="https://sm.ms/api/v2/upload" 
    id="uploadForm"
    data-token="14ac5499cfdd2bb2859e4476d2e5b1d2bad079bf"
>
    <div id="interface">
        <img src="img/zb.png" align="left" width="200" height="200">
        <img src="img/zb.png" align="right" width="200" height="200">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
            Hướng dẫn sử dụng
        </button>
        <br><code>Chào mừng bạn đến với [Hệ thống Tải lên Hình Ảnh]</code>
        <img src="https://tool.lu/netcard/" align="center">
        
        <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <h5>Không được tải lên hình ảnh vi phạm quy định</h5>
                    <h5>Định dạng hỗ trợ: png | gif | jpeg | jpg</h5>
                    <h5>Bản quyền thuộc về 7W-Studio</h5>
                </div>
            </div>
        </div>
    </div>
    
    <input type="file" name="imageFile" id="imageInput" class="file-input" style="height:34px;width:600px;margin-left:-8px;border:1px solid #ccc">
    <input type="submit" id="uploadBtn" value="Tải lên" class="submit-btn">
</form>

$(document).ready(function() {
    $("#uploadBtn").on("click", function(e) {
        e.preventDefault();
        
        $.ajax({
            url: $("#uploadForm").attr("action"),
            type: "POST",
            data: new FormData($("#uploadForm")[0]),
            processData: false,
            contentType: false,
            success: function(response) {
                try {
                    const result = JSON.parse(response);
                    
                    if (result.code === "success") {
                        const imageUrl = result.data.url;
                        let imgWidth = result.data.width;
                        let imgHeight = result.data.height;
                        
                        if (imgWidth > 600) {
                            const scale = imgWidth / 580;
                            imgWidth /= scale;
                            imgHeight /= scale;
                        }
                        
                        $("#previewContainer").show();
                        $("#loading").hide();
                        $("#successMessage").show().fadeOut(3000);
                        
                        $("#imageLink").val(imageUrl);
                        $("#htmlCode").val(`<img src='${imageUrl}'/>`);
                        $("#markdownCode").val(`![](${imageUrl})`);
                        
                        $("#previewImage").attr("src", imageUrl);
                        $("#downloadLink").attr("href", imageUrl);
                        $("#previewImage").css({
                            width: imgWidth,
                            height: imgHeight
                        });
                        
                        $("#imagePreview").show();
                    } else {
                        $("#errorMessage").text(result.msg).show().fadeOut(3000);
                    }
                } catch (e) {
                    $("#errorMessage").text("Lỗi xử lý dữ liệu").show().fadeOut(3000);
                }
            },
            error: function() {
                $("#errorMessage").text("Kết nối bị gián đoạn").show().fadeOut(3000);
            }
        });
    });
});