<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css-file/teacher.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
    <title>Teacher Dashboard</title>
</head>
<body id="body">
    <%- include('navbar') %>

    <div>
        <ul class="logout">
            <li>
                <a style="text-decoration: none;" href="index.ejs">
                    <i class='bx bx-log-out'></i>
                    <span class="links_name">Logout</span>
                </a>
            </li>
        </ul>
    </div>
           
    <main class="main-content">
        <div class="table-container">
            <h2>Attendance List</h2>
            <form action="/u1.ejs" method="get">
                <table class="table" border="2">
                    <thead>
                        <tr> 
                            <th>Date</th>
                            <th>Update</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% attendanceList.forEach(function(attendance) { %>
                            <tr>
                                <td><%= attendance.date %></td>
                                <td>
                                    <button>
                                        <a href="/u1.ejs?date=<%= attendance.date %>&course_id=<%= attendance.course_id %>">update</a>
                                    </button>
                                </td>
                            </tr>
                        <% }); %>
                    </tbody>
                </table>
            </form>
        </div>

        <!-- Form to add new attendance -->
        <h2>Add New Attendance</h2>
        <form action="/addAttendance" method="POST">
            <label for="date">Date:</label>
            <input type="date" id="date" name="date" required>
            
            <label for="course_id">Course:</label>
            <select id="course_id" name="course_id" required>
                <% courses.forEach(course => { %>
                    <option value="<%= course.course_id %>"><%= course.course_name %></option>
                <% }); %>
            </select>

            
            <table>
                <thead>
                    <tr>
                        <th>Student ID</th>
                        <th>Student Name</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <% students.forEach(student => { %>
                        <tr>
                            <td><%= student.id %></td>
                            <td><%= student.name %></td>
                            <td>
                                <input type="checkbox" name="attendance[<%= student.id %>][status]" value="present"> Present
                                <input type="hidden" name="attendance[<%= student.id %>][student_id]" value="<%= student.id %>">
                            </td>
                        </tr>
                    <% }); %>
                </tbody>
            </table>
            <button type="submit">Add Attendance</button>
        </form>
    </main>
</body>
</html>
