@model IEnumerable<Model.SentNewsletterEamil>

@{
    ViewData["Title"] = "EmailStats";
  
}
 <partial name="_Notification" />

<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 mt-4 mb-5">
    <div>

        <div class="card p-4  shadow-lg rounded-2">
                   <p>
            <a asp-action="Index" class="btn btn-primary btn-sm">Back to list</a>
        </p>
        <h3 class="text-primary">Real-Time Email tracking</h3>

        <form asp-action="DeleteSelected" method="post">
                <table class="table table-responsive">
        <thead>
            <tr>
                <th><input type="checkbox" id="selectAll" /></th>
              <th>Recipient</th>
                    <th>Activity Date</th>
                    <th>IP</th>
                    <th>Country</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>
                <!-- Additional headers omitted for brevity -->
            </tr>
        </thead>
        <tbody>
                        @foreach (var item in Model)
                        {
                    <tr>
                        <td><input type="checkbox" name="selectedIds" value="@item.Id" /></td>
                        <td>@item.RecipientEmail</td>
                        <td>@item.ReceivedActivity</td>
                            <td>@item.IpAddress</td>
                            <td>@item.Geo</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>
    <button type="submit" class="btn btn-danger">Delete Selected</button>
</form>

   </div>

  </div>
        </div>

 

<div class="container mb-4">
    <div class="card shadow-lg rounded-2 p-3">
        <div class="row">

            <div class="col-6">
                <div id="chart_div_percentage" style="width: 500px; height: 300px;"></div>
            </div>
            <div class="col-6 ">
                <div id="chart_div_labels" style="width: 500px; height: 300px;"></div>
            </div>
            <div class="col-10 offset-1 m-2">
                <div id="geo_chart_div" style="width: 700px; height: 300px;"></div>
            </div>
          
        </div>

    </div>
   
</div>
   
@section Scripts {
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script>
        document.getElementById('selectAll').addEventListener('change', function (event) {
            var checkboxes = document.querySelectorAll('input[type="checkbox"][name="selectedIds"]');
            for (var checkbox of checkboxes) {
                checkbox.checked = this.checked;
            }
        });
    </script>

    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart', 'geochart'] });
        google.charts.setOnLoadCallback(drawCharts);

        function drawCharts() {
            drawEmailInteractionCharts();
            drawGeoChart();
        }

        function drawEmailInteractionCharts() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Status');
            data.addColumn('number', 'Count');
            data.addRows([
                ['Sent', @Model.Count(e => e.IsSent)],
                ['Delivered', @Model.Count(e => e.IsDelivered)],
                ['Opened', @Model.Count(e => e.IsOpened)],
                ['Clicked', @Model.Count(e => e.IsClicked)],
                ['Bounced', @Model.Count(e => e.IsBounced)],
                ['Spam', @Model.Count(e => e.IsSpam)],
                ['Blocked', @Model.Count(e => e.IsBlocked)],
                ['Unsubscribed', @Model.Count(e => e.IsUnsubscribed)]
            ]);

            var optionsPercentage = {
                title: 'Email Interactions (Percentage)',
                width: 500,
                height: 300,
                is3D: true,
                pieSliceText: 'percentage',
                titleTextStyle: { color: '#3b76cb', fontSize: 12, bold: true }
            };

            var optionsLabels = {
                title: 'Email Interactions (Labels)',
                width: 500,
                height: 300,
                is3D: true,
                pieSliceText: 'label',
                titleTextStyle: { color: '#3b76cb', fontSize: 12, bold: true }
            };

            var chartPercentage = new google.visualization.PieChart(document.getElementById('chart_div_percentage'));
            chartPercentage.draw(data, optionsPercentage);

            var chartLabels = new google.visualization.PieChart(document.getElementById('chart_div_labels'));
            chartLabels.draw(data, optionsLabels);
        }

        function drawGeoChart() {
            var geoData = new google.visualization.DataTable();
            geoData.addColumn('string', 'Country');
            geoData.addColumn('number', 'Sent');
            geoData.addColumn('number', 'Delivered');
            geoData.addColumn('number', 'Opened');
            geoData.addColumn('number', 'Clicked');
            geoData.addColumn('number', 'Bounced');
            geoData.addColumn('number', 'Spam');
            geoData.addColumn('number', 'Blocked');
            geoData.addColumn('number', 'Unsubscribed');

        @foreach (var geoGroup in Model.GroupBy(e => e.Geo))
        {
            var sent = geoGroup.Count(e => e.IsSent);
            var delivered = geoGroup.Count(e => e.IsDelivered);
            var opened = geoGroup.Count(e => e.IsOpened);
            var clicked = geoGroup.Count(e => e.IsClicked);
            var bounced = geoGroup.Count(e => e.IsBounced);
            var spam = geoGroup.Count(e => e.IsSpam);
            var blocked = geoGroup.Count(e => e.IsBlocked);
            var unsubscribed = geoGroup.Count(e => e.IsUnsubscribed);

            <text>
                    geoData.addRow([
                        '@Html.Raw(geoGroup.Key)',
                @sent, @delivered, @opened, @clicked,
                @bounced, @spam, @blocked, @unsubscribed
                    ]);
            </text>
        }

            var geoOptions = {
                title: 'Detailed Email Statistics by Geography',
                width: 700,
                height: 300,
                chartArea: { width: '50%', height: '70%' },
                vAxis: { title: 'Country', titleTextStyle: { color: '#333' } },
                hAxis: { minValue: 0 },
                bar: { groupWidth: '75%' },
                isStacked: true
            };

            var geoChart = new google.visualization.BarChart(document.getElementById('geo_chart_div'));
            geoChart.draw(geoData, geoOptions);
        }

    </script>
}


