document.addEventListener("DOMContentLoaded", () => {
    const dbName = "CustomerDB";
    let db;

    const request = indexedDB.open(dbName, 1);

    request.onerror = (event) => {
        console.error("Database error:", event.target.error);
    };

    request.onupgradeneeded = (event) => {
        db = event.target.result;
        const objectStore = db.createObjectStore("customers", { keyPath: "customer_id" });
        objectStore.createIndex("email", "email", { unique: true });
        console.log("IndexedDB setup complete");
    };

    request.onsuccess = (event) => {
        db = event.target.result;
        console.log("Database connected successfully");
    };

    function saveToIndexedDB(customer) {
        if (!db) { return };
        const transaction = db.transaction(["customers"], "readwrite");
        const objectStore = transaction.objectStore("customers");
        const request = objectStore.put(customer);

        request.onsuccess = () => {
            console.log("Customer saved to local IndexedDB:", customer);
        };

        request.onerror = (event) => {
            console.error("Error saving to IndexedDB:", event.target.error);
        };
    }

    function deleteFromIndexedDB(id) {
        if (!db) { return };
        const transaction = db.transaction(["customers"], "readwrite");
        const objectStore = transaction.objectStore("customers");
        const request = objectStore.delete(Number(id));
    }

    const customerId = document.getElementById("customer_id");
    const customerName = document.getElementById("customer_name");
    const customerEmail = document.getElementById("customer_email");
    const customerPhone = document.getElementById("customer_phone");
    const message = document.getElementById("message");

    document.getElementById("new").addEventListener("click", clearForm);
    document.getElementById("add_customer").addEventListener("click", addCustomer);
    document.getElementById("update_customer").addEventListener("click", updateCustomer);
    document.getElementById("delete_customer").addEventListener("click", deleteCustomer);
    document.getElementById("find_customer").addEventListener("click", findCustomer);

    function validateInput() {

    }

    function showMessage(msg, isSuccess = true) {
        message.textContent = msg;
        message.className = "message" + (isSuccess ? "success" : "error");
        setTimeout(() => {
            message.textContent = "";
        }, 5000);
    }

    function clearForm() {
        customerId.value = "";
        customerName.value = "";
        customerEmail.value = "";
        customerPhone.value = "";
        customerId.focus();
    }

    function addCustomer() {

    }

    function updateCustomer() {

    }

    function deleteCustomer() {

    }
    function findCustomer() {

    }
});