<%- include('navbar.ejs') %>

    <style>
        .student-card {
            background: #ffffff;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        }

        .student-title {
            font-weight: 600;
            color: #333;
        }

        .search-box {
            border-radius: 30px;
            padding: 8px 18px;
            border: 1px solid #ddd;
            transition: 0.3s ease;
        }

        .search-box:focus {
            border-color: #4e73df;
            box-shadow: 0 0 0 3px rgba(78, 115, 223, 0.15);
            outline: none;
        }

        .custom-table thead {
            background: linear-gradient(90deg, #4e73df, #224abe);
            color: #fff;
            border-radius: 10px;
        }

        .custom-table th {
            padding: 15px;
            font-weight: 500;
            border: none;
        }

        .custom-table td {
            padding: 14px;
            vertical-align: middle;
            border-top: 1px solid #f1f1f1;
        }

        .custom-table tbody tr {
            transition: 0.2s ease-in-out;
        }


        .badge-individual {
            background: linear-gradient(45deg, #1cc88a, #17a673);
            color: #fff;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 12px;
        }

        .badge-bulk {
            background: linear-gradient(45deg, #e74a3b, #c0392b);
            color: #fff;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 12px;
        }

        .total-count {
            font-size: 14px;
            color: #888;
        }
    </style>

    <div class="container-fluid mt-4">

      <div class="student-card">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="student-title">All Students</h4>

        <input type="text" id="searchInput" class="search-box" placeholder="Search students...">
    </div>

    <div class="total-count mb-3">
        Total Students:
        <strong><%= students.length %></strong>
    </div>

    <div class="table-responsive">
        <table class="table custom-table" id="studentsTable">

            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Mobile</th>
                    <th>Registered On</th>
                </tr>
            </thead>

            <tbody>

                <% students.forEach(student => { %>

                    <tr>

                        <td>
                            <%= student.id %>
                        </td>

                        <td class="fw-semibold">
                            <%= student.name %>
                        </td>

                        <td>
                            <%= student.email %>
                        </td>

                        <td>
                            <%= student.mobile %>
                        </td>

                        <td>
                            <%= new Date(student.created_at).toLocaleDateString('en-IN') %>
                        </td>

                    </tr>

                <% }) %>

            </tbody>

        </table>
    </div>

</div>

    </div>

    <%- include('footer.ejs') %>

        <script>
            const searchInput = document.getElementById("searchInput");
            const table = document.getElementById("studentsTable");
            const rows = table.getElementsByTagName("tr");

            searchInput.addEventListener("keyup", function () {
                let filter = searchInput.value.toLowerCase();

                for (let i = 1; i < rows.length; i++) {
                    let text = rows[i].innerText.toLowerCase();
                    rows[i].style.display = text.includes(filter) ? "" : "none";
                }
            });
        </script>