source: frontend/web3-eDnevnik_Frontend/src/pages/KlasenRakovoditel_Pages/Klasen_ViewSlusaniPredmeti/Klasen_ViewSlusaniPredmeti.jsx

import NavbarKlasen from "../../../components/navbarKlasen/NavbarKlasen";
import styles from "./Klasen_ViewSlusaniPredmetiStyles.module.css";

import React, { useState, useEffect } from "react";
import axios from "axios";
import { useParams, useNavigate, Link } from "react-router-dom";
const Klasen_ViewSlusaniPredmeti = () => {
  const { classId } = useParams();
  const navigate = useNavigate();
  const [aktivniPredmeti, setAktivniPredmeti] = useState(null);
  const [neaktivniPredmeti, setNeaktivniPredmeti] = useState(null);
  const [classDetails, setClassDetails] = useState(null);
  const [loading, setLoading] = useState(true);

  const fetchAllData = async () => {
    try {
      setLoading(true);
      const [resClass, resPredmeti] = await Promise.all([
        axios.get(`http://localhost:8080/api/klas/${classId}`, {
          withCredentials: true,
        }),
        axios.get(`http://localhost:8080/api/klas/${classId}/predmeti`, {
          withCredentials: true,
        }),
      ]);
      setClassDetails(resClass.data);
      setAktivniPredmeti(resPredmeti.data.filter((s) => s.active));
      setNeaktivniPredmeti(resPredmeti.data.filter((s) => !s.active));
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (classId) fetchAllData();
  }, [classId]);

  if (loading)
    return (
      <div>
        <NavbarKlasen />
        <div>
          <h2>Вчитување на Предметите план...</h2>
        </div>
      </div>
    );

  return (
    <>
      <div className="m-0 p-0">
        <header>
          <NavbarKlasen />
          <nav
            className="container-fluid text-white h-25 d-flex justify-content-center text-center p-3"
            style={{ backgroundColor: "#147176" }}
          >
            <Link
              className="text-white text-decoration-none m-2 fw-bold fs-md"
              to={"/dashboard"}
            >
              Соопштенија
            </Link>
            <Link
              to={`/klasenRakovoditelDashboard/${classId}/weeklyPlan`}
              className="text-white text-decoration-none m-2 fw-bold"
            >
              Види неделни активности
            </Link>
            <Link
              to={`/klasenRakovoditelDashboard/${classId}/raspored`}
              className="text-white text-decoration-none m-2 fw-bold"
            >
              Види распоред
            </Link>
            <Link
              to={`/klasenRakovoditelDashboard/${classId}/students`}
              className="text-white text-decoration-none m-2 fw-bold"
            >
              Студенти
            </Link>
            <Link
              to={`/klasenRakovoditelDashboard/${classId}/subjects`}
              className="text-white text-decoration-none m-2 fw-bold"
            >
              Види слушани предмети
            </Link>
          </nav>
          <div style={{ backgroundColor: "#D8D8D8" }}>
            <h1 className="m-0">
              Слушани предмети за класот {classDetails?.oddelenie}-
              {classDetails?.paralelka}
            </h1>
          </div>
        </header>
        <main style={{ backgroundColor: "#D8D8D8" }} className="m-0">
          <div className="container-fluid">
            <div className="row">
              <div className="col">
                <h2>Активни предмети</h2>
                {aktivniPredmeti.length > 0 ? (
                  <table className="table table-striped">
                    <thead>
                      <tr>
                        <th>Име</th>
                        <th>Фонд часови</th>
                        <th>Активен ?</th>
                      </tr>
                    </thead>
                    <tbody>
                      {aktivniPredmeti.map((p) => (
                        <tr key={p.id}>
                          <td>{p.ime}</td>
                          <td>{p.fond_casovi}</td>
                          <td>Да</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                ) : (
                  <p>Нема активни предмети во овој клас</p>
                )}
              </div>
              <div className="col">
                <h2>Неактивни предмети</h2>
                {neaktivniPredmeti > 0 ? (
                  <table>
                    <thead>
                      <tr>
                        <th>Име</th>
                        <th>Фонд часови</th>
                        <th>Активен ?</th>
                      </tr>
                    </thead>
                    <tbody>
                      {neaktivniPredmeti.map((p) => (
                        <tr key={p.id}>
                          <td>{p.ime}</td>
                          <td>{p.fond_casovi}</td>
                          <td>Не</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                ) : (
                  <p>Нема неактивни предмети во овој клас</p>
                )}
              </div>
            </div>
          </div>
        </main>
      </div>
    </>
  );
};

export default Klasen_ViewSlusaniPredmeti;