
<div class="page-header">
    <h2>📋 Attendance Listing</h2>
    <p>View and manage student attendance records</p>
</div>
 <div style="display: flex; justify-content: flex-end; margin-bottom: 15px;">
                        <button onclick="addAttendance()"
                            style="padding:8px 12px; background:#0f172a; color:#fff; border:none; border-radius:6px;">
                            Go For Attendance
                        </button>
                    </div>

<div class="card p-4 shadow-sm">


    <!-- Filters -->
    <div class="row g-3 mb-4">


        <div class="col-md-3">
            <label class="fw-bold">Course</label>

            <select id="courseFilter" class="form-select">
                <option value="">All Courses</option>

                <% courses.forEach(course=> { %>
                    <option value="<%= course._id %>">
                        <%= course.title %>
                    </option>
                <% }) %>

            </select>
        </div>



        <div class="col-md-3">

            <label class="fw-bold">Batch</label>

            <select id="batchFilter" class="form-select">

                <option value="">
                    All Batches
                </option>

                <% batches.forEach(batch=> { %>

                    <option value="<%= batch._id %>">
                        <%= batch.title %>
                    </option>

                <% }) %>

            </select>

        </div>



        <div class="col-md-3">

            <label class="fw-bold">
                Date
            </label>

            <input 
                type="date"
                id="dateFilter"
                class="form-control">

        </div>



        <div class="col-md-3">

            <label class="fw-bold">
                Status
            </label>

            <select id="statusFilter" class="form-select">

                <option value="">
                    All
                </option>

                <option value="Present">
                    Present
                </option>

                <option value="Absent">
                    Absent
                </option>

            </select>

        </div>


    </div>


    <button 
        onclick="filterAttendance()"
        class="btn btn-primary mb-4">

        <i class="bi bi-search"></i>
        Search Attendance

    </button>




    <!-- Summary -->

    <div class="row mb-4">


        <div class="col-md-4">

            <div class="card border-0 shadow-sm p-3">

                <h6>Total Students</h6>

                <h3 id="totalCount">
                    0
                </h3>

            </div>

        </div>



        <div class="col-md-4">

            <div class="card border-0 shadow-sm p-3">

                <h6 class="text-success">
                    Present
                </h6>

                <h3 id="presentCount">
                    0
                </h3>

            </div>

        </div>




        <div class="col-md-4">

            <div class="card border-0 shadow-sm p-3">

                <h6 class="text-danger">
                    Absent
                </h6>

                <h3 id="absentCount">
                    0
                </h3>

            </div>

        </div>


    </div>





<table id="attendanceTable" class="table table-bordered table-hover">

<thead>

<tr>

<th>#</th>
<th>Student</th>
<th>Phone</th>
<th>Course</th>
<th>Batch</th>
<th>Date</th>
<th>Status</th>

</tr>

</thead>


<tbody id="attendanceBody">


<tr>

<td colspan="7" class="text-center text-muted">

Select filters and search attendance

</td>

</tr>


</tbody>


</table>


</div>

<script>
    document.addEventListener("DOMContentLoaded", function(){

    filterAttendance();

});
function filterAttendance(){


let course =
document.getElementById("courseFilter").value;


let batch =
document.getElementById("batchFilter").value;


let date =
document.getElementById("dateFilter").value;


let status =
document.getElementById("statusFilter").value;



fetch(
`<%= ROUTES.ADMIN_ATTENDANCE_LIST %>?course=${course}&batch=${batch}&date=${date}&status=${status}`
)


.then(res=>res.json())

.then(data=>{


let html="";


let present=0;
let absent=0;



data.attendance.forEach((item,index)=>{


if(item.status==="Present")
present++;

else
absent++;



html += `

<tr>

<td>${index+1}</td>

<td>${item.student.name}</td>

<td>${item.student.phone}</td>

<td>${item.course.title}</td>

<td>${item.batch.title}</td>

<td>
${new Date(item.attendance_date).toLocaleDateString()}
</td>


<td>

${
item.status==="Present"

?
'<span class="badge bg-success">Present</span>'

:
'<span class="badge bg-danger">Absent</span>'
}


</td>


</tr>

`;


});



document.getElementById("attendanceBody").innerHTML=html;


document.getElementById("totalCount").innerHTML=data.attendance.length;

document.getElementById("presentCount").innerHTML=present;

document.getElementById("absentCount").innerHTML=absent;



});


}

function addAttendance(){
     window.location.href = "<%= ROUTES.STUDENT_ATTENDANCE %>";
}
</script>