document.addEventListener("DOMContentLoaded", function () {
    // Create custom alert elements
    const alertOverlay = document.createElement("div");
    alertOverlay.className = "custom-alert-overlay";
    alertOverlay.style.display = "none";
    
    const alertBox = document.createElement("div");
    alertBox.className = "custom-alert-box";
    
    const alertContent = document.createElement("div");
    alertContent.className = "custom-alert-content";
    
    const alertButtons = document.createElement("div");
    alertButtons.className = "custom-alert-buttons";
    
    const okButton = document.createElement("button");
    okButton.className = "custom-alert-button";
    okButton.textContent = "OK";
    
    alertButtons.appendChild(okButton);
    alertBox.appendChild(alertContent);
    alertBox.appendChild(alertButtons);
    alertOverlay.appendChild(alertBox);
    document.body.appendChild(alertOverlay);
    
    // Custom alert styles
    const styles = document.createElement("style");
    styles.textContent = `
        .custom-alert-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .custom-alert-box {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            max-width: 400px;
            width: 90%;
        }
        
        .custom-alert-content {
            margin-bottom: 20px;
            font-size: 16px;
            line-height: 1.5;
        }
        
        .custom-alert-buttons {
            display: flex;
            justify-content: flex-end;
        }
        
        .custom-alert-button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 8px 16px;
            font-size: 14px;
            cursor: pointer;
            border-radius: 4px;
        }
        
        .custom-alert-button:hover {
            background-color: #45a049;
        }
        
        .custom-confirm-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .custom-confirm-cancel {
            background-color: #f44336;
        }
        
        .custom-confirm-cancel:hover {
            background-color: #d32f2f;
        }
    `;
    document.head.appendChild(styles);
    
    // Custom alert function
    window.customAlert = function(message) {
        return new Promise((resolve) => {
            alertContent.textContent = message;
            alertOverlay.style.display = "flex";
            
            okButton.onclick = function() {
                alertOverlay.style.display = "none";
                resolve(true);
            };
        });
    };
    
    // Custom confirm function
    window.customConfirm = function(message) {
        return new Promise((resolve) => {
            alertContent.textContent = message;
            
            // Clear previous buttons
            alertButtons.innerHTML = "";
            
            // Create new buttons
            const cancelButton = document.createElement("button");
            cancelButton.className = "custom-alert-button custom-confirm-cancel";
            cancelButton.textContent = "Cancel";
            
            const confirmButton = document.createElement("button");
            confirmButton.className = "custom-alert-button";
            confirmButton.textContent = "OK";
            
            alertButtons.className = "custom-confirm-buttons";
            alertButtons.appendChild(cancelButton);
            alertButtons.appendChild(confirmButton);
            
            alertOverlay.style.display = "flex";
            
            cancelButton.onclick = function() {
                alertOverlay.style.display = "none";
                // Reset to default alert buttons
                alertButtons.innerHTML = "";
                alertButtons.appendChild(okButton);
                alertButtons.className = "custom-alert-buttons";
                resolve(false);
            };
            
            confirmButton.onclick = function() {
                alertOverlay.style.display = "none";
                // Reset to default alert buttons
                alertButtons.innerHTML = "";
                alertButtons.appendChild(okButton);
                alertButtons.className = "custom-alert-buttons";
                resolve(true);
            };
        });
    };
    
    // Modify your existing script to use custom alerts
    const uploadBox = document.querySelector("#upload-box");
    const fileInput = document.getElementById("file");
    const statusFilter = document.getElementById("status-filter");
    const form = document.getElementById("sk-form");

    const initialUploadBoxContent = uploadBox.innerHTML;

    uploadBox.addEventListener("click", function () {
        fileInput.click();
    });

    fileInput.addEventListener("change", function () {
        handleFiles(fileInput.files);
    });

    uploadBox.addEventListener("dragover", function (event) {
        event.preventDefault();
        uploadBox.classList.add("dragover");
    });

    uploadBox.addEventListener("dragleave", function () {
        uploadBox.classList.remove("dragover");
    });

    uploadBox.addEventListener("drop", function (event) {
        event.preventDefault();
        uploadBox.classList.remove("dragover");
        handleFiles(event.dataTransfer.files);
    });

    async function handleFiles(files) {
        const fileList = document.createElement("ul");
        fileList.innerHTML = "";
        let validFileFound = false;

        const dataTransfer = new DataTransfer();

        for (const file of Array.from(files)) {
            const validExtensions = ["doc", "docx", "xls", "xlsx", "pdf"];
            const fileExtension = file.name.split(".").pop().toLowerCase();

            if (!validExtensions.includes(fileExtension)) {
                await customAlert("File " + file.name + " tidak diperbolehkan.");
                continue;
            }

            if (file.size > 10 * 1024 * 1024) {
                await customAlert("File " + file.name + " terlalu besar.");
                continue;
            }

            validFileFound = true;
            dataTransfer.items.add(file);

            const listItem = document.createElement("li");
            listItem.textContent = file.name;
            fileList.appendChild(listItem);
        }

        if (validFileFound) {
            uploadBox.textContent = "";
            uploadBox.appendChild(fileList);
            fileInput.files = dataTransfer.files;

            statusFilter.value = "Selesai";
            Array.from(statusFilter.options).forEach(option => {
                if (option.value !== "Selesai") {
                    option.disabled = true;
                }
            });
        } else {
            uploadBox.innerHTML = initialUploadBoxContent;
            uploadBox.appendChild(fileInput);
        }
    }

    statusFilter.addEventListener("change", async function () {
        if (statusFilter.value === "Selesai" && fileInput.files.length === 0) {
            await customAlert("Silakan unggah file sebelum memilih status Selesai.");
            statusFilter.value = "Diproses";
        }
    });

    form.addEventListener("submit", async function (event) {
        event.preventDefault(); // Prevent form submission initially
        
        if (statusFilter.value === "Selesai" && fileInput.files.length === 0) {
            await customAlert("Anda harus mengunggah file jika status adalah Selesai.");
            return;
        }

        if (fileInput.files.length > 0 && statusFilter.value !== "Selesai") {
            await customAlert("Jika Anda mengunggah file, status harus Selesai.");
            return;
        }

        const confirmResult = await customConfirm("Apakah Anda yakin ingin menyimpan data ini?");
        if (confirmResult) {
            form.submit(); // Submit the form if confirmed
        }
    });
});