source: frontend/web3-eDnevnik_Frontend/src/pages/PredmetenNastavnikPages/PredmetenNastavnik_AddAktivnostZaKlas/PredmetenNastavnik_AddAktivnostZaKlas.jsx

import React, { useState, useEffect } from "react";
import axios from "axios";
import { useParams, useNavigate, Link } from "react-router-dom";
import Navbar from "../../../components/nav/Navbar.jsx";

const PredmetenNastavnik_AddAktivnostZaKlas = () => {
  const { classId } = useParams();
  const navigate = useNavigate();
  const [predmeti, setPredmeti] = useState([]);
  const [selectedPredmetId, setSelectedPredmetId] = useState("");
  const [selectedRedenCas, setSelectedRedenCas] = useState("");

  const [planId, setPlanId] = useState(null);
  const [loading, setLoading] = useState(true);
  const [submitLoading, setSubmitLoading] = useState(false);

  const [formData, setFormData] = useState({
    naslov: "",
    opis: "",
    denVoNedelata: "Ponedelnik",
    predmet_id: "",
    reden_cas: "",
  });

  useEffect(() => {
    const fetchPlan = async () => {
      try {
        const res = await axios.get(
          `http://localhost:8080/api/klas/${classId}/nedelenPlan`,
          {
            withCredentials: true,
          }
        );
        setPlanId(res.data.id);
        const resPredmeti = await axios.get(
          `http://localhost:8080/api/klas/${classId}/predmeti`,

          { withCredentials: true }
        );
        setPredmeti(resPredmeti.data);
      } catch (err) {
        console.error(
          "Грешка при наоѓање на планот или предметите за класот:",
          err
        );
      } finally {
        setLoading(false);
      }
    };
    fetchPlan();
  }, [classId]);

  const handleChange = (e) => {
    const { name, value } = e.target;

    if (name === "predmetId") {
      setSelectedPredmetId(value);

      const selectedPredmet = predmeti.find(
        (p) => String(p.id) === String(value)
      );
      console.log("value:", value, "found:", selectedPredmet);

      if (!selectedPredmet) return;

      setFormData({
        ...formData,
        naslov: selectedPredmet.ime,
        predmet_id: selectedPredmet.id,
      });
    } else if (name === "reden_cas") {
      const redenCasNum = Number(value);
      setSelectedRedenCas(redenCasNum);

      setFormData({
        ...formData,
        reden_cas: redenCasNum,
      });
    } else {
      setFormData({ ...formData, [name]: value });
    }
  };
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!planId)
      return (
        <div class="alert alert-warning" role="alert">
          Не е пронајден активен план за овој клас
        </div>
      );

    setSubmitLoading(true);
    try {
      const resActivity = await axios.post(
        "http://localhost:8080/api/nedelnaAktivnost",
        formData,
        { withCredentials: true }
      );

      await axios.post(
        `http://localhost:8080/api/nedelenPlan/${planId}/aktivnosti`,
        { aktivnostZaNedelenPlanId: resActivity.data.id },
        { withCredentials: true }
      );

      <div className="alert alert-success" role="alert">
        Успешно додадено
      </div>;
      navigate(-1);
    } catch (err) {
      <div className="alert alert-danger" role="alert">
        Грешка при додавање
      </div>;
    } finally {
      setSubmitLoading(false);
    }
  };

  if (loading)
    return (
      <div>
        <Navbar />
        <p>Вчитавање...</p>
      </div>
    );

  return (
    <div style={{ backgroundColor: "#f4f7f6", minHeight: "100vh" }}>
      <Navbar />
      <div>
        <div className="navbar navbar-expand-lg bg-secondary justify-content-start ">
          <ul className="navbar-nav">
            <li className="nav-item active">
              <Link className="nav-link text-white fs-4">
                {" "}
                Соопштенија за класот{" "}
              </Link>
            </li>

            <li className="nav-item">
              <Link
                className="nav-link text-white fs-4"
                to={`/predmetenNastavnikDashboard/klas/${classId}/weeklyPlan`}
              >
                {" "}
                Неделни активности
              </Link>
            </li>
            <li className="nav-item">
              <Link
                className="nav-link text-white fs-4"
                to={`/predmetenNastavnikDashboard/klas/${classId}/schedule`}
              >
                {" "}
                Распоред
              </Link>
            </li>
            <li className="nav-item">
              <Link
                className="nav-link text-white fs-4"
                to={`/predmetenNastavnikDashboard/klas/${classId}/students`}
              >
                {" "}
                Студенти
              </Link>
            </li>
            <li className="nav-item">
              <Link
                className="nav-link text-white fs-4"
                to={`/predmetenNastavnikDashboard/klas/${classId}/subjects`}
              >
                {" "}
                Види слушани предмети
              </Link>
            </li>
          </ul>
        </div>
        <div className="container">
          <h2 className="m-3">Додади активност во распоредот</h2>
          <form onSubmit={handleSubmit}>
            <div>
              <label className="form-label">Предмет</label>
              <select
                name="predmetId"
                value={selectedPredmetId}
                required
                onChange={handleChange}
                className="form-control"
              >
                <option value="">-- Избери Предмети --</option>
                {predmeti.map((n) => (
                  <option key={n.id} value={n.id}>
                    {n.ime} {n.fond_csovi}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="form-label">Реден час</label>
              <select
                name="reden_cas"
                value={selectedRedenCas}
                required
                onChange={handleChange}
                className="form-control"
              >
                <option value="">-- Избери реден час --</option>

                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
              </select>
            </div>
            <div>
              <label className="form-label">Наслов</label>
              <input
                type="text"
                name="naslov"
                value={formData.naslov}
                onChange={handleChange}
                className="form-control"
                required
              />
            </div>
            <div>
              <label className="form-label">Опис/Тема</label>
              <textarea
                name="opis"
                value={formData.opis}
                onChange={handleChange}
                required
                className="form-control"
              />
            </div>
            <div>
              <label className="form-label">Ден во неделата</label>
              <select
                name="denVoNedelata"
                value={formData.denVoNedelata}
                onChange={handleChange}
                className="form-control"
              >
                <option value="Ponedelnik">Понеделник</option>
                <option value="Vtornik">Вторник</option>
                <option value="Sreda">Среда</option>
                <option value="Cetvrtok">Четврток</option>
                <option value="Petok">Петок</option>
                <option value="Sabota">Сабота</option>
              </select>
            </div>
            <div className="text-center m-3">
              <button
                type="submit"
                disabled={submitLoading}
                className="btn btn-primary"
              >
                {submitLoading ? "Се процесира..." : "Зачувај активност"}
              </button>
              <button className="btn btn-danger" onClick={() => navigate(-1)}>
                Откажи
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
};

export default PredmetenNastavnik_AddAktivnostZaKlas;