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

import React, { useState, useEffect } from "react";
import axios from "axios";
import { useParams } from "react-router-dom";
import Navbar from "../../../components/nav/Navbar";
import styles from "./Klasen_ViewStudentsPrisustvaPageStyles.module.css";

const Klasen_ViewStudentsPrisustvaPage = () => {
  const { classId } = useParams();
  const [studentsData, setStudentsData] = useState([]);
  const [classDetails, setClassDetails] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchAllData = async () => {
      try {
        setLoading(true);
        const [resPrisustva, resClass] = await Promise.all([
          axios.get(`http://localhost:8080/api/klas/${classId}/prisustva`, {
            withCredentials: true,
          }),
          axios.get(`http://localhost:8080/api/klas/${classId}`, {
            withCredentials: true,
          }),
        ]);

        setStudentsData(resPrisustva.data.ucenici || []);
        setClassDetails(resClass.data);
      } catch (err) {
        setError("Грешка при преземање на податоците.");
        console.error(err);
      } finally {
        setLoading(false);
      }
    };
    if (classId) fetchAllData();
  }, [classId]);

  if (loading)
    return <div className={styles.loadingState}>Вчитување на дневникот...</div>;
  if (error) return <div>{error}</div>;

  return (
    <div className={styles.pageContainer}>
      <Navbar />

      <main className={styles.contentWrapper}>
        <header className={styles.pageHeader}>
          <div>
            <h1>
              Евиденција за {classDetails?.oddelenie}-{classDetails?.paralelka}
            </h1>
            <p>Преглед на присуство на учениците</p>
          </div>
        </header>

        <div className={styles.tableContainer}>
          <table className="table">
            <thead>
              <tr>
                <th>Ученик</th>
                <th>Час / Ден</th>
                <th>Датум</th>
                <th>Статус</th>
                <th>Забелешка</th>
              </tr>
            </thead>
            <tbody>
              {studentsData.length > 0 ? (
                studentsData.map((student) =>
                  student.prisustva.map((p, index) => (
                    <tr key={p.id}>
                      <td className={styles.studentName}>
                        {index === 0 ? `${student.ime} ${student.prezime}` : ""}
                      </td>
                      <td>
                        <div className={styles.classInfo}>
                          <span className={styles.classNumber}>
                            {p.reden_cas}. час
                          </span>
                          <span className={styles.dayName}>
                            {p.denVo_Nedelata}
                          </span>
                        </div>
                      </td>
                      <td>{new Date(p.datum).toLocaleDateString("mk-MK")}</td>
                      <td>
                        <span>{p.status}</span>
                      </td>
                      <td className={styles.noteCell}>{p.zabeleska || "—"}</td>
                    </tr>
                  ))
                )
              ) : (
                <tr>
                  <td colSpan="5" className={styles.emptyMessage}>
                    Нема евидентирано присуства.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </main>
    </div>
  );
};

export default Klasen_ViewStudentsPrisustvaPage;