<h2 style="margin-bottom:15px;">Courses</h2>


<style>
  
</style>

<% if (typeof error_msg !=='undefined' && error_msg) { %>

    <div class="alert alert-danger">
        <%= error_msg %>
    </div>

    <% } %>


        <% if (typeof success_msg !=='undefined' && success_msg) { %>
            <div class="alert alert-success">
                <%= success_msg %>
            </div>
            <% } %>

                <div class="table-card">

                    <div style="display: flex; justify-content: flex-end; margin-bottom: 15px;">
                        <button onclick="window.location.href='<%= ROUTES.ADMIN_COURSES_ADD %>'"
                            style="padding:8px 12px; background:#0f172a; color:#fff; border:none; border-radius:6px;">
                            Add Course
                        </button>
                    </div>
                    <div id="tableLoader" style="
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                    <table id="coursesTable" class="display datatable" style="width:100%; visibility:hidden;">

                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Title</th>
                                <th>Description</th>
                                <th>Duration</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Status</th>
                                <th class="action-column">Actions</th>

                            </tr>
                        </thead>
                        <tbody>

                            <% courses.forEach((course, index) => { %>
                                    <tr>
                                        <td>
                                            <%= index + 1 %>
                                        </td>
                                        <td>
                                            <%= course.title || '-' %>
                                        </td>
                                        <td>
                                            <%= course.description ? (course.description.length> 50
                                                ? course.description.substring(0, 50) + '...'
                                                : course.description)
                                                : '-' %>
                                        </td>
                                        <td>
                                            <%= course.duration || '-' %>
                                        </td>
                                        <td>
                                            <%= course.start_date ? new Date(course.start_date).toLocaleDateString() : '-' %>
                                        </td>
                                        <td>
                                            <%= course.end_date ? new Date(course.end_date).toLocaleDateString() : '-' %>
                                        </td>
                                        <td>
                                            <%= course.status ||  '-' %>
                                        </td>
                                        <td class="action-column">

                                            <!-- EDIT -->


                                            <a href="<%= ROUTES.ADMIN_COURSES_EDIT.replace(':id', course._id) %>"
                                                class="action-btn btn-edit">
                                                ✏ Edit
                                            </a>
                                              <a href="javascript:void(0);"
                                            class="action-btn <%= course.status === 'Active' ? 'btn-delete' : 'btn-edit' %>"
                                            onclick="confirmStatus('<%= ROUTES.ADMIN_COURSES_ACTION.replace(':id', course._id)
        .replace(':status', course.status === 'Active' ? 'Inactive' : 'Active') %>')">

                                            <%= course.status==='Active' ? 'Inactive' : 'Active' %>
                                        </a>

                                           
                                        </td>


                                    </tr>
                                    <% }) %>
                                        

                        </tbody>


                    </table>

                </div>

                <!-- JS -->




                <script>

                    $(document).ready(function () {

                        const table = $('#coursesTable').DataTable({
                            language: {
                                emptyTable: "No courses found"
                            },
                            pageLength: 10,
                            responsive: true,
                            deferRender: true,
                            processing: true,
                            initComplete: function () {
                                $('#tableLoader').hide();

                                // show table
                                // $('#coursesTable').fadeIn(200);
                                $('#coursesTable').css('visibility', 'visible');
                            }
                        });


                       

                    });
                     function confirmStatus(url) {
                        Swal.fire({
                            title: "Are you sure?",
                            text: "This course status will be updated!",
                            icon: "warning",
                            showCancelButton: true,
                            confirmButtonColor: "#3085d6",
                            cancelButtonColor: "#d33",
                            confirmButtonText: "Yes, update it!"
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = url;
                            }
                        });
                    }
                </script>