<div class="page-header">
    <h3 class="page-title">Logs</h3>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Logs</li>
        </ol>
    </nav>
</div>
<div class="row">
    <div class="col-lg-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between mb-3">
                    <div>
                        <% include ../../shared/page-search.ejs %>
                    </div>
                    <div></div>
                </div>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>To</th>
                            <th>Subject</th>
                            <th style="width: 150px;">Status</th>
                            <th>Created At</th>
                            <th style="width:100px">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% if (data.length===0) { %>
                            <tr>
                                <td colspan="8" class="text-center">No record found.</td>
                            </tr>
                            <% } else { %>
                                <% const startIndex=(page - 1) * limit; %>
                                    <% data.forEach(function(record, index) { %>
                                        <tr>
                                            <td style="width: 50px;">
                                                <%= startIndex + index + 1 %>
                                            </td>
                                            <td>
                                                <%= record.to || '-' %>
                                            </td>
                                            <td>
                                                <%= record.subject || '-' %>
                                            </td>
                                            <td>
                                                <% if (record.status==EMAIL_STATUS.SENT) { %>
                                                    <span class="badge badge-success text-capitalize"
                                                        id="status-<%=record._id%>">Sent</span>
                                                    <% } else if (record.status==EMAIL_STATUS.FAILED) { %>
                                                        <span class="badge badge-danger text-capitalize"
                                                            id="status-<%=record._id%>">Failed</span>
                                                        <% } else if (record.status==EMAIL_STATUS.IN_PROGRESS) { %>
                                                            <span class="badge badge-info text-capitalize"
                                                                id="status-<%=record._id%>">In Progress<div
                                                                    class="spinner-border spinner-border-xsm ms-1"
                                                                    role="status"></div></span>

                                                            <% }else{ %>
                                                                <span class="badge badge-warning text-capitalize"
                                                                    id="status-<%=record._id%>">
                                                                    Pending
                                                                </span>
                                                                <% } %>

                                            </td>
                                            <td class="date_view" data-date="<%=record.createdAt%>"
                                                data-showtime="true"></td>
                                            <td>
                                                <div class="btn-group" role="group" aria-label="First group">
                                                    <a href="/logs/<%=record._id%>"
                                                        class="btn btn-sm btn-outline-primary">
                                                        <i class="fa fa-eye"></i>
                                                    </a>
                                                    <button type="button" class="btn btn-sm btn-outline-primary"
                                                        onclick="resend('<%=record._id%>')">
                                                        <i class="fa fa-reply"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-outline-primary"
                                                        onclick="deleteRecord('<%=record._id%>')">
                                                        <i class="fa fa-trash-o"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        <% }); %>
                                            <% } %>
                    </tbody>
                </table>
                <%- include('../../shared/pagination.ejs', { url:"/logs" }) %>
            </div>
        </div>
    </div>
</div>

<script>
    function resend(id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "Do you really want to resend this email?",
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, Resend it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/logs/${id}`,
                    method: 'POST',
                    data: {},
                    success: function (response) {
                        Swal.fire({
                            toast: true,
                            position: 'top-end',
                            icon: 'success',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 2000,
                            timerProgressBar: true
                        });
                    },
                    error: function (xhr) {
                        // Show error message
                        $('#result').html('<p style="color:red;">Error: ' + xhr.responseText + '</p>');
                    }
                });
            }
        });
    }
    function deleteRecord(id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "Do you really want to delete this record?",
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, Delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/logs/${id}`,
                    method: 'DELETE',
                    data: {},
                    success: function (response) {
                        // Show success message or do something with response
                        window.location.reload();
                    },
                    error: function (xhr) {
                        // Show error message
                        $('#result').html('<p style="color:red;">Error: ' + xhr.responseText + '</p>');
                    }
                });
            }
        });
    }

    $(document).ready(function () {
        socket.on('emailStatusUpdated', function (data) {
            if (data.status == "<%=EMAIL_STATUS.SENT%>") {
                $("#status-" + data._id).attr("class", "badge badge-success text-capitalize");
                $("#status-" + data._id).html(data.status);
            }
            else if (data.status == "<%=EMAIL_STATUS.FAILED%>") {
                $("#status-" + data._id).attr("class", "badge badge-danger text-capitalize");
                $("#status-" + data._id).html(data.status);
            }
            else if (data.status == "<%=EMAIL_STATUS.IN_PROGRESS%>") {
                $("#status-" + data._id).attr("class", "badge badge-info text-capitalize");
                $("#status-" + data._id).html(`In Progress<div class="spinner-border spinner-border-xsm ms-1" role="status"></div>`);
            }

        });
    });
</script>