<div class="content-wrapper">
    <div class="page-header">
        <h3 class="page-title">
            <span class="page-title-icon bg-gradient-primary text-white me-2">
                <i class="mdi mdi-home"></i>
            </span> Dashboard
        </h3>
        <!-- <nav aria-label="breadcrumb">
            <ul class="breadcrumb">
                <li class="breadcrumb-item active" aria-current="page">
                    <span></span>Overview <i class="mdi mdi-alert-circle-outline icon-sm text-primary align-middle"></i>
                </li>
            </ul>
        </nav> -->
    </div>
    <div class="row">
        <div class="col-md-4 stretch-card grid-margin">
            <div class="card bg-gradient-danger card-img-holder text-white">
                <div class="card-body">
                    <img src="assets/theme/images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image">
                    <h4 class="font-weight-normal mb-3">Projects <i class="mdi mdi-file-tree mdi-24px float-end"></i>
                    </h4>
                    <h2 class="mb-5">
                        <%= counts.projects %>
                    </h2>
                    <h6 class="card-text"><a href="/projects" class="text-white text-decoration-none">View all</a></h6>
                </div>
            </div>
        </div>
        <div class="col-md-4 stretch-card grid-margin">
            <div class="card bg-gradient-info card-img-holder text-white">
                <div class="card-body">
                    <img src="assets/theme/images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image">
                    <h4 class="font-weight-normal mb-3">Recipients <i
                            class="mdi mdi-account-multiple mdi-24px float-end"></i>
                    </h4>
                    <h2 class="mb-5">
                        <%= counts.recipients %>
                    </h2>
                    <h6 class="card-text"><a href="/recipients" class="text-white text-decoration-none">View all</a>
                    </h6>
                </div>
            </div>
        </div>
        <div class="col-md-4 stretch-card grid-margin">
            <div class="card bg-gradient-success card-img-holder text-white">
                <div class="card-body">
                    <img src="assets/theme/images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image">
                    <h4 class="font-weight-normal mb-3">Templates <i class="mdi mdi-email-edit mdi-24px float-end"></i>
                    </h4>
                    <h2 class="mb-5">
                        <%= counts.templates %>
                    </h2>
                    <h6 class="card-text"><a href="/templates" class="text-white text-decoration-none">View all</a></h6>
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="row">
        <div class="col-md-7 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="clearfix">
                        <h4 class="card-title float-start">Visit And Sales Statistics</h4>
                        <div id="visit-sale-chart-legend"
                            class="rounded-legend legend-horizontal legend-top-right float-end">
                            <ul>
                                <li>
                                    <span style="background-color: rgba(218, 140, 255, 1)"></span>
                                    CHN
                                </li>

                                <li>
                                    <span style="background-color: rgba(54, 215, 232, 1)"></span>
                                    USA
                                </li>

                                <li>
                                    <span style="background-color: rgba(255, 191, 150, 1)"></span>
                                    UK
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <span style="background-color: rgba(218, 140, 255, 1)"></span>
                                    CHN
                                </li>

                                <li>
                                    <span style="background-color: rgba(54, 215, 232, 1)"></span>
                                    USA
                                </li>

                                <li>
                                    <span style="background-color: rgba(255, 191, 150, 1)"></span>
                                    UK
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <span style="background-color: rgba(218, 140, 255, 1)"></span>
                                    CHN
                                </li>

                                <li>
                                    <span style="background-color: rgba(54, 215, 232, 1)"></span>
                                    USA
                                </li>

                                <li>
                                    <span style="background-color: rgba(255, 191, 150, 1)"></span>
                                    UK
                                </li>
                            </ul>
                        </div>
                    </div>
                    <canvas id="visit-sale-chart" class="mt-4" width="820" height="410"
                        style="display: block; box-sizing: border-box; height: 410px; width: 820px;"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-5 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Traffic Sources</h4>
                    <div class="doughnutjs-wrapper d-flex justify-content-center">
                        <canvas id="traffic-chart" width="250" height="250"
                            style="display: block; box-sizing: border-box; height: 250px; width: 250px;"></canvas>
                    </div>
                    <div id="traffic-chart-legend" class="rounded-legend legend-vertical legend-bottom-left pt-4">
                        <ul>
                            <li>
                                <span style="background-color: rgba(54, 215, 232, 1)"></span>
                                Search Engines 30%
                            </li>

                            <li>
                                <span style="background-color: rgba(6, 185, 157, 1)"></span>
                                Direct Click 30%
                            </li>

                            <li>
                                <span style="background-color: rgba(254, 112, 150, 1)"></span>
                                Bookmarks Click 40%
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <span style="background-color: rgba(54, 215, 232, 1)"></span>
                                Search Engines 30%
                            </li>

                            <li>
                                <span style="background-color: rgba(6, 185, 157, 1)"></span>
                                Direct Click 30%
                            </li>

                            <li>
                                <span style="background-color: rgba(254, 112, 150, 1)"></span>
                                Bookmarks Click 40%
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
    <div class="row">
        <div class="col-12 grid-margin">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Recent Logs</h4>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>To</th>
                                    <th>Subject</th>
                                    <th style="width: 150px;">Status</th>
                                    <th>Created At</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <% if (logs.length===0) { %>
                                    <tr>
                                        <td colspan="8" class="text-center">No record found.</td>
                                    </tr>
                                    <% } else { %>
                                        <% logs.forEach(function(record, index) { %>
                                            <tr>
                                                <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>
                                                    </div>
                                                </td>
                                            </tr>
                                            <% }); %>
                                                <% } %>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
        $(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>