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


<style>
    .table-card {
        background: #fff;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .action-btn {
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 13px;
        text-decoration: none;
        color: #fff;
        margin-right: 5px;
    }

    .btn-edit {
        background: #3b82f6;
    }

    .btn-delete {
        background: #ef4444;
    }

    .btn-edit:hover {
        background: #2563eb;
    }

    .btn-delete:hover {
        background: #dc2626;
    }

    .action-column {
        width: 140px;
        white-space: nowrap;
        text-align: center;
    }
</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_BATCHES_ADD %>'"
                            style="padding:8px 12px; background:#0f172a; color:#fff; border:none; border-radius:6px;">
                            Add Batch
                        </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="batchesTable" class="display datatable" style="width:100%; visibility:hidden;">

                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Title</th>
                                <th>Status</th>
                                <th class="action-column">Actions</th>

                            </tr>
                        </thead>
                        <tbody>

                            <% batches.forEach((batch, index)=> { %>
                                <tr>
                                    <td>
                                        <%= index + 1 %>
                                    </td>
                                    <td>
                                        <%= batch.title || '-' %>
                                    </td>
                                    <td>
                                        <%= batch.status || '-' %>
                                    </td>
                                    <td class="action-column">

                                        <!-- EDIT -->


                                        <a href="<%= ROUTES.ADMIN_BATCHES_EDIT.replace(':id', batch._id) %>"
                                            class="action-btn btn-edit">
                                            ✏ Edit
                                        </a>


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

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

                                    </td>


                                </tr>
                                <% }) %>


                        </tbody>


                    </table>

                </div>






                <script>

                    $(document).ready(function () {

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

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




                    });
                    function confirmStatus(url) {
                        Swal.fire({
                            title: "Are you sure?",
                            text: "This batch 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>