SurveyVista/Web/Areas/Admin/Views/newsletters/EmailStats.cshtml

@model IEnumerable<Model.SentNewsletterEamil>

@{
    ViewData["Title"] = "EmailStats";
  
}

<style>
    .badge-Sent{
        display: inline-block;
        padding: 0.25em 0.4em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
        color: #fff;
        background-color: #6831c5;
        ;
    }

    .badge-Deliverd{
        display: inline-block;
        padding: 0.25em 0.4em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
        color: #fff;
        background-color: #44aebd;
    }

    .badge-Opend {
        display: inline-block;
        padding: 0.25em 0.4em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
        color: #fff;
        background-color: #22a877;
    }

    .badge-Clicked {
        display: inline-block;
        padding: 0.25em 0.4em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
        color: #fff;
        background-color: #3b76cb;
    }

    .badge-Bounced {
        display: inline-block;
        padding: 0.25em 0.4em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
        color: #fff;
        background-color: #9585f4;
    }

    .badge-Spam {
        display: inline-block;
        padding: 0.25em 0.4em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
        color: #fff;
        background-color: #f06b66;
    }

    .badge-Blocked {
        display: inline-block;
        padding: 0.25em 0.4em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
        color: #fff;
        background-color: #98712d;
    }

    .badge-Unsubscribed {
        display: inline-block;
        padding: 0.25em 0.4em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
        color: #fff;
        background-color: #cb4a49;
    }
</style>
<div class="container-fluid mt-4 mb-5">
    <div class="col-10 offset-1">
        <p>
            <a asp-action="Index" class="btn btn-primary btn-sm">Back to list</a>
        </p>
        <h1>EmailStats</h1>

        <table class="table table-responsive w-100 d-block d-md-table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Recipient</th>
                    <th>Sent Date</th>
                    <th>Subject</th>
                    <th>Sent</th>
                    <th>Delivered</th>
                    <th>Opened</th>
                    <th>Clicked</th>
                    <th>Bounced</th>
                    <th>Spam</th>
                    <th>Blocked</th>
                    <th>Unsubscribed</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>@item.RecipientEmail</td>
                        <td>@item.SentDate</td>
                        <td>@item.Subject</td>
                        <td>
                            @if (item.IsSent)
                            {
                                <span class="badge-Sent">Sent</span>
                            }
                            else
                            {
                                <span class="badge badge-secondary">Pending</span>
                            }
                        </td>
                        <td>
                            @if (item.IsDelivered)
                            {
                                <span class="badge-Deliverd">Delivered</span>
                            }
                            else
                            {
                                <span class="badge badge-secondary">Pending</span>
                            }
                        </td>
                        <td>
                            @if (item.IsOpened)
                            {
                                <span class="badge-Opend">Opened</span>
                            }
                            else
                            {
                                <span class="badge badge-secondary">Pending</span>
                            }
                        </td>
                        <td>
                            @if (item.IsClicked)
                            {
                                <span class="badge-Clicked">Clicked</span>
                            }
                            else
                            {
                                <span class="badge badge-secondary">Pending</span>
                            }
                        </td>
                        <td>
                            @if (item.IsBounced)
                            {
                                <span class="badge-Bounced">Bounced</span>
                            }
                            else
                            {
                                <span class="badge badge-secondary">Normal</span>
                            }
                        </td>
                        <td>
                            @if (item.IsSpam)
                            {
                                <span class="badge-Spam">Spam</span>
                            }
                            else
                            {
                                <span class="badge badge-secondary">Normal</span>
                            }
                        </td>
                        <td>
                            @if (item.IsBlocked)
                            {
                                <span class="badge-Blocked">Blocked</span>
                            }
                            else
                            {
                                <span class="badge badge-secondary">Normal</span>
                            }
                        </td>
                        <td>
                            @if (item.IsUnsubscribed)
                            {
                                <span class="badge-Unsubscribed">Unsubscribed</span>
                            }
                            else
                            {
                                <span class="badge badge-secondary">Normal</span>
                            }
                        </td>
                    </tr>
                }
            </tbody>
        </table>

      
    
    </div>

  </div>


   
<h2>Email Statistics</h2>
<div id="piechart" style="width: 900px; height: 500px;"></div>

@section Scripts {
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            fetch('@Url.Action("GetChartData", "Newsletters")')
                .then(response => response.json())
                .then(data => {
                    var dataTable = new google.visualization.DataTable();
                    dataTable.addColumn('string', 'Type');
                    dataTable.addColumn('number', 'Count');
                    dataTable.addRows([
                        ['Sent', data.Sent],
                        ['Delivered', data.Delivered],
                        ['Opened', data.Opened],
                        ['Clicked', data.Clicked],
                        ['Bounced', data.Bounced],
                        ['Spam', data.Spam],
                        ['Blocked', data.Blocked],
                        ['Unsubscribed', data.Unsubscribed]
                    ]);

                    var options = {
                        title: 'Email Interaction Overview',
                        width: 900,
                        height: 500
                    };

                    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                    chart.draw(dataTable, options);
                })
                .catch(error => console.error('Failed to fetch email stats:', error));
        }
    </script>
}