let chart;

function hitung() {
  const fungsiInput = document.getElementById("fungsi").value;

  let dataFungsi = [];
  let titikAkar = [];

  for (let x = -10; x <= 10; x += 0.2) {
    let y;

    try {
      y = eval(fungsiInput);
    } catch {
      alert("Fungsi salah!");
      return;
    }

    dataFungsi.push({ x: x, y: y });

    if (Math.abs(y) < 0.1) {
      titikAkar.push({ x: x, y: y });
    }
  }

  // tampilkan akar
  if (titikAkar.length > 0) {
    const akarText = titikAkar.map(t => t.x.toFixed(2));
    document.getElementById("hasil").innerText =
      "Akar: " + akarText.join(", ");
  } else {
    document.getElementById("hasil").innerText = "Akar: Tidak ada";
  }

  if (chart) chart.destroy();

  chart = new Chart(document.getElementById("grafik"), {
    type: "line",
    data: {
      datasets: [
        {
          label: "Grafik Fungsi",
          data: dataFungsi,
          borderWidth: 2,
          fill: false
        },
        {
          label: "Titik Akar",
          data: titikAkar,
          pointBackgroundColor: "red",
          pointRadius: 6,
          showLine: false
        },
        // GARIS SUMBU X
        {
          label: "Sumbu X",
          data: [
            { x: -10, y: 0 },
            { x: 10, y: 0 }
          ],
          borderColor: "black",
          borderWidth: 1,
          pointRadius: 0
        },
        // GARIS SUMBU Y
        {
          label: "Sumbu Y",
          data: [
            { x: 0, y: -50 },
            { x: 0, y: 50 }
          ],
          borderColor: "black",
          borderWidth: 1,
          pointRadius: 0
        }
      ]
    },
    options: {
      parsing: false,
      scales: {
        x: {
          type: "linear",
          position: "bottom"
        }
      }
    }
  });
}