resman/backend/public/js/resources.js

window.resources = []

window.loadResources = async function(){

    window.resources = await api(API + "/resources/active")
    const resources = window.resources

    const mappings = await api(API + "/domainmap")

    const table = document.getElementById("resources")
    table.innerHTML = ""

    resources.forEach(r => {

        let ips = ""

        if(Array.isArray(r.ips)){
            ips = r.ips.map(ip => {
                const cls = (ip.type || "").toLowerCase().includes("public")
                  ? "ip public"
                  : "ip"

                return "<span class='" + cls + "'>" +
                (ip.type || "") + " " + ip.ip +
                "</span>"

            }).join("")

        }

        let domains = mappings
            .filter(m => m.resource_id == r.id)
            .map(m => "<span class='ip'>🌐 " + m.domain_name + "</span>")
            .join("")

        const tr = document.createElement("tr")

        tr.innerHTML = `
        <td>
        <span style="cursor:pointer;color:#1e3a8a;font-weight:bold"
        onclick='openServerDetail(${JSON.stringify(r)})'>
        ${r.name}
        </span>
        </td>

        <td>${r.produkt || ""}</td>
        <td><span class="provider">${r.provider || ""}</span></td>

        <td id="status-${r.id}">...</td>

        <td>
        <div class="system">
        ${r.cpu ? r.cpu + " CPU" : ""}
        ${r.ram ? " • " + r.ram + " RAM" : ""}
        ${r.disk ? " • " + r.disk : ""}
        ${r.os ? " • " + r.os : ""}
        </div>
        </td>

        <td>${domains}</td>

        <td>
        ${ips}
        <br>
        <button type="button" onclick="openIPManager(${r.id})">IPs</button>
        </td>

        <td>
        <button onclick='openEdit(${JSON.stringify(r)})'>Edit</button>
        <button onclick="deleteResource(${r.id})">Delete</button>
        </td>
        `

        table.appendChild(tr)

        checkServerStatus(r)
    })
}

window.saveResource = async function(){

    const id = document.getElementById("resource_id").value

    let kostenMonat=document.getElementById("kosten_monat").value
    let kostenJahr=document.getElementById("kosten_jahr").value

    if(kostenMonat) kostenMonat=kostenMonat.replace(",",".")
    if(kostenJahr) kostenJahr=kostenJahr.replace(",",".")
    
    const data={
        name:name.value,
        produkt:produkt.value,
        provider:provider.value,
        art:art.value,
        cpu:cpu.value,
        ram:ram.value,
        disk:disk.value,
        os:os.value,
        kosten_monat:kostenMonat || null,
        kosten_jahr:kostenJahr || null,
        providername:providername.value,
        ipv6_net:ipv6_net.value,
        bestelldatum:bestelldatum.value || null,
        kuendbar_ab:kuendbar_ab.value || null,
        kuendigungsdatum:kuendigungsdatum.value || null,
        status:status.value,
        bemerkung:bemerkung.value
    }

    if(id){
        await api(API+"/resources/"+id,{method:"PUT",headers:{'Content-Type':'application/json'},body:JSON.stringify(data)})
    }else{
        await api(API+"/resources",{method:"POST",headers:{'Content-Type':'application/json'},body:JSON.stringify(data)})
    }

    closeModal()
    loadResources()
}

window.deleteResource = async function(id){
    if(!confirm("delete resource?")) return
    await api(API+"/resources/"+id,{method:"DELETE"})
    loadResources()
}

window.checkServerStatus = async function(resource){

    if(!Array.isArray(resource.ips)) return

    let ip = resource.ips.find(i => i.type?.includes("public")) || resource.ips[0]
    if(!ip) return

    try{
        const res = await fetch(API+"/ping/"+ip.ip)
        const data = await res.json()

        const el = document.getElementById("status-"+resource.id)

        if(el){
            el.innerHTML = data.status === "online" ? "🟢" : "🔴"
        }

    }catch(e){
        console.log(e)
    }
}

window.loadCancelled = async function(){

    const data = await api(API + "/resources/cancelled")

    const table = document.getElementById("cancelled")
    table.innerHTML = ""

    data.forEach(r => {

        const tr = document.createElement("tr")

        tr.innerHTML = `
        <td>${r.name}</td>
        <td>${r.produkt || ""}</td>
        <td>${r.provider || ""}</td>
        <td>${r.cpu || ""}</td>
        <td>${r.ram || ""}</td>
        <td>${r.disk || ""}</td>
        <td>${r.status || ""}</td>
        `

        table.appendChild(tr)

    })

}

window.saveIP = async function(){

    const resourceId = document.getElementById("ip_resource_id").value

    const ipField = document.getElementById("new_ip")
    const id = ipField.dataset.editId

    const ip = ipField.value
    const type = document.getElementById("new_type").value
    const comment = document.getElementById("new_comment").value

    if(id){
        // 🔥 UPDATE
        await api(API + "/ips/" + id, {
            method: "PUT",
            headers: {'Content-Type':'application/json'},
            body: JSON.stringify({ip, type, comment})
        })

        delete ipField.dataset.editId

    }else{
        // 🔥 CREATE

        try{
            const result = await api(API + "/ipcheck/" + ip)

            if(result.length){
                if(!confirm("IP existiert bereits. Trotzdem speichern?")){
                    return
                }
            }
        }catch(e){
            console.log("Save IP Fehler:", e)
        }

        await api(API + "/resources/" + resourceId + "/ips", {
            method: "POST",
            headers: {'Content-Type':'application/json'},
            body: JSON.stringify({ip, type, comment})
        })
    }

    // Felder reset
    ipField.value = ""
    document.getElementById("new_type").value = ""
    document.getElementById("new_comment").value = ""

    loadIPs(resourceId)
    loadResources()
    cancelIPEdit()
}


window.deleteIP = async function(id, resourceId){

    if(!confirm("IP löschen?")) return

    await api(API + "/ips/" + id, {
        method: "DELETE"
    })

    loadIPs(resourceId)   // Modal neu laden
    loadResources()       // Tabelle aktualisieren

}

window.loadIPs = async function(resourceId){

    const ips = await api(API + "/resources/" + resourceId + "/ips")

    const container = document.getElementById("ipList")
    container.innerHTML = ""

    ips.forEach(ip => {

        // ✅ HIER rein!
        const cls = (ip.type || "").toLowerCase().includes("public")
            ? "ip public"
            : "ip"

        const div = document.createElement("div")

        div.innerHTML = `
            <span class="${cls}">
                ${ip.ip} (${ip.type || ""}) ${ip.comment || ""}
            </span>

            <button onclick="editIP(${ip.id}, '${ip.ip}', '${ip.type || ""}', '${ip.comment || ""}')">
                Edit
            </button>

            <button onclick="deleteIP(${ip.id}, ${resourceId})">
                Delete
            </button>
        `

        container.appendChild(div)

    })

}



window.editIP = function(id, ip, type, comment){

    document.getElementById("new_ip").value = ip
    document.getElementById("new_type").value = type
    document.getElementById("new_comment").value = comment

    document.getElementById("new_ip").dataset.editId = id

    // 👇 UX Highlight + Fokus
    document.getElementById("ipForm").classList.add("edit-mode")
    document.getElementById("ipSaveBtn").innerText = "Update"
    document.getElementById("ipCancelBtn").style.display = "inline-block"

    document.getElementById("new_ip").focus()   // 👈 HIER
}




window.cancelIPEdit = function(){

    const ipField = document.getElementById("new_ip")

    delete ipField.dataset.editId

    ipField.value = ""
    document.getElementById("new_type").value = ""
    document.getElementById("new_comment").value = ""

    document.getElementById("ipForm").classList.remove("edit-mode")
    document.getElementById("ipSaveBtn").innerText = "Add"
    document.getElementById("ipCancelBtn").style.display = "none"

}