@model PaginationViewModel

@{
    ViewData["Title"] = "Newsletter list";
}


<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-5 mb-3">

    <partial name="_Notification" />

    <div class="card bg-default mb-3 rounded-2 shadow-lg">
        <div class="card-header">Subscribers</div>
        <div class="card-body">
            <h4 class="card-title">Subscribers list</h4>
            <div class="alert alert-info" role="alert">
                Total Subscribed Users: <strong>@ViewBag.TotalSubscribedUsers</strong>
            </div>
            <p>
                <a asp-action="UploadSubscribers" class="btn btn-info"><i class="bi bi-cloud-arrow-up"></i> Upload subscribers form file</a>
            </p>
            <p>
                <a asp-action="Create" class="btn btn-primary btn-sm @(@ViewBag.TotalSubscribedUsers <= 0 ? "disabled" : "")">compose newsletter</a>
            </p>

            <form id="deleteForm" method="post" asp-action="DeleteSelectedSubscription">
                <table class="table table-responsive w-100 d-block d-md-table">
                    <thead>
                        <tr>
                            <th scope="col">
                                <input type="checkbox" id="selectAll">
                            </th>
                            <th scope="col">Id</th>
                            <th scope="col">Name</th>
                            <th scope="col">Email</th>
                            <th scope="col">IsSubscribed</th>
                            <th scope="col" class="d-flex justify-content-end">Action</th>
                        </tr>
                    </thead>
                    <tbody class="justify-content-center">
                        @foreach (var item in Model.Subscriptions)
                        {
                            <tr class="table-secondary">
                                <td>
                                    <input type="checkbox" name="selectedIds" value="@item.Id">
                                </td>
                                <td>@item.Id</td>
                                <td>@item.Name</td>
                                <td>@item.Email</td>
                                <td>
                                    @if(item.IsSubscribed)
                                    {
                                        <span class="badge badge-success p-1">Subscribed @Html.DisplayFor(modelItem => item.IsSubscribed)</span>
                                    }
                                    else
                                    {
                                        <span class="badge badge-secondary p-1">Not subscribed @Html.DisplayFor(modelItem => item.IsSubscribed)</span>
                                    }
                                </td>
                                <td class="d-flex justify-content-end">
                                    <a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-danger btn-sm"><i class="bi bi-trash"></i> Delete</a>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
                <button type="submit" class="btn btn-danger mt-3">Delete Selected</button>
            </form>

            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center">
                    @for (int i = 1; i <= Model.TotalPages; i++)
                    {
                        <li class="page-item @(i == Model.CurrentPage ? "active" : "")">
                            <a class="page-link" asp-action="Index" asp-route-page="@i">@i</a>
                        </li>
                    }
                </ul>
            </nav>
        </div>
    </div>
</div>

<div class="container mb-5 mt-4">
  
        <div class="card rounded-2 shadow-lg p-3 mt-3">
            <h4 class="text-primary">
                <i class="bi bi-broadcast"></i> Real-Time Email Tracking
            </h4>
            <p>
                <a asp-action="EmailStats" class="btn btn-primary btn-sm">View email tracking with chart</a>
            </p>
            <table class=" table table-responsive">
                <thead>
                    <tr>
                        <th>Recipient</th>
                        <th>Activity Date</th>
                        <th>Subject</th>
                        <th>IP</th>
                        <th>Country</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 class="" id="emailStatsTableBody">
                    <!-- Rows will be dynamically inserted here -->
                </tbody>
            </table>
        </div>

</div>

@section Scripts{
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            function fetchData() {
                fetch('@Url.Action("GetEmailStatsData", "Newsletters")')
                    .then(response => response.json())
                    .then(data => {
                        updateTable(data);
                    })
                    .catch(error => console.error('Error fetching data:', error));
            }

            function updateTable(data) {
                const tableBody = document.getElementById('emailStatsTableBody');
                tableBody.innerHTML = ''; // Clear existing table rows

                data.forEach(item => {
                    const row = `
                        <tr>
                            <td>${item.recipientEmail}</td>
                            <td>${item.receivedActivity}</td>
                            <td>${item.subject}</td>
                            <td>${item.ipAddress}</td>
                            <td>${item.geo}</td>
                            <td>${item.isSent ? '<span class="badge-Sent">Sent</span>' : '<span class="badge badge-secondary">Pending</span>'}</td>
                            <td>${item.isDelivered ? '<span class="badge-Deliverd">Delivered</span>' : '<span class="badge badge-secondary">Pending</span>'}</td>
                            <td>${item.isOpened ? '<span class="badge-Opend">Opened</span>' : '<span class="badge badge-secondary">Pending</span>'}</td>
                            <td>${item.isClicked ? '<span class="badge-Clicked">Clicked</span>' : '<span class="badge badge-secondary">Pending</span>'}</td>
                            <td>${item.isBounced ? '<span class="badge-Bounced">Bounced</span>' : '<span class="badge badge-secondary">Normal</span>'}</td>
                            <td>${item.isSpam ? '<span class="badge-Spam">Spamed</span>' : '<span class="badge badge-secondary">Normal</span>'}</td>
                            <td>${item.isBlocked ? '<span class="badge-Blocked">Blocked</span>' : '<span class="badge badge-secondary">Normal</span>'}</td>
                            <td>${item.isUnsubscribed ? '<span class="badge-Unsubscribed">Unsubscribed</span>' : '<span class="badge badge-secondary">Normal</span>'}</td>
                        </tr>
                    `;
                    tableBody.innerHTML += row; // Append new row
                });
            }

            setInterval(fetchData, 5000); // Fetch data every 5 seconds

            document.getElementById('selectAll').addEventListener('click', function() {
                const checkboxes = document.querySelectorAll('input[name="selectedIds"]');
                checkboxes.forEach(checkbox => checkbox.checked = this.checked);
            });
        });
    </script>
}





@* <div class="container mt-5 mb-3">

    <partial name="_Notification" />

    <div class="card bg-default mb-3 rounded-2 shadow-lg">
        <div class="card-header">Subscribers</div>
        <div class="card-body">
            <h4 class="card-title">Subscribers list</h4>
            <div class="alert alert-info" role="alert">
              
                Total Subscribed Users: <strong>@ViewBag.TotalSubscribedUsers</strong>
            </div>
              <p>
                <a asp-action="UploadSubscribers" class="btn btn-info">Upload subscribers form file</a>
            </p>
            <p>
               
                <a asp-action="Create" class="btn btn-primary btn-sm @(@ViewBag.TotalSubscribedUsers <= 0 ? "disabled" : "")">compose newsletter</a>
            </p>
            <form id="deleteForm" method="post" asp-action="DeleteSelectedSubscription">
                 <table class="table table-responsive w-100 d-block d-md-table ">
                <thead>
                    <tr>
                         <th scope="col">
                                <input type="checkbox" id="selectAll">
                            </th>
                        <th scope="col">Id</th>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">IsSubscribed</th>
                        <th scope="col" class="d-flex justify-content-end">Action</th>
                    </tr>
                </thead>
                <tbody class="justify-content-center">
                    @foreach (var item in Model)
                    {
                        <tr class=" table-secondary">
                             <td>
                                    <input type="checkbox" name="selectedIds" value="@item.Id">
                                </td>
                            <td>@item.Id</td>
                            <td>@item.Name</td>
                            <td>@item.Email</td>
                            <td>
                                @if(item.IsSubscribed==true)
                                {
                                    <span class="badge badge-success p-1">Subscribed @Html.DisplayFor(modelItem => item.IsSubscribed)</span>
                                }
                                else
                                {
                                    <span class="badge badge-secondary p-1">Not subscribed @Html.DisplayFor(modelItem => item.IsSubscribed)</span>
                                }

                                </td>
                            <td class="d-flex justify-content-end">
                                <a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-danger btn-m"><i class="bi bi-trash"></i> Delete</a>
                              
                            </td>
                        </tr>
                    }

                </tbody>
            </table>
              <button type="submit" class="btn btn-danger mt-3">Delete Selected</button>
            </form>
           

        </div>
    </div>


</div>



<div class="container-fluid mb-5 mt-4">


    <div class="col-md-10 col-lg-10 col-sm-12 offset-1">
          <div class="card  rounded-2 shadow-lg p-3 mt-3">
         <h4 class="text-primary">
        <i class="bi bi-broadcast"></i> Real-Time Email Tracking
    </h4>
    <p>
        <a asp-action="EmailStats" class="btn btn-primary btn-sm">View email tracking with chart</a>
    </p>

    <table class="table table-responsive d-block d-md-table table-bordered table-hover mt-3">
        <thead>
            <tr>
                <th>Recipient</th>
                <th>Activity Date</th>
                <th>Subject</th>
                 <th>IP</th>
                 <th>Country</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 id="emailStatsTableBody">
            <!-- Rows will be dynamically inserted here -->
        </tbody>
    </table>
    </div>
    </div>

</div>


 @section Scripts{
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            function fetchData() {
                fetch('@Url.Action("GetEmailStatsData", "Newsletters")')
                    .then(response => response.json())
                    .then(data => {
                        updateTable(data);
                    })
                    .catch(error => console.error('Error fetching data:', error));
            }

            function updateTable(data) {
                const tableBody = document.getElementById('emailStatsTableBody');
                tableBody.innerHTML = ''; // Clear existing table rows

                data.forEach(item => {
                    const row = `
                        <tr>
                            <td>${item.recipientEmail}</td>
                             <td>${item.receivedActivity}</td>
                            <td>${item.subject}</td>
                                 <td>${item.ipAddress}</td>
                              <td>${item.geo}</td>
                            <td>${item.isSent ? '<span class="badge-Sent">Sent</span>' : '<span class="badge badge-secondary">Pending</span>'}</td>
                            <td>${item.isDelivered ? '<span class="badge-Deliverd">Delivered</span>' : '<span class="badge badge-secondary">Pending</span>'}</td>
                            <td>${item.isOpened ? '<span class="badge-Opend">Opened</span>' : '<span class="badge badge-secondary">Pending</span>'}</td>
                             <td>${item.isClicked ? '<span class="badge-Clicked">Clicked</span>' : '<span class="badge badge-secondary">Pending</span>'}</td>
                                <td>${item.isBounced ? '<span class="badge-Bounced">Bounced</span>' : '<span class="badge badge-secondary">Normal</span>'}</td>
                            <td>${item.isSpam ? '<span class="badge-Spam">Spamed</span>' : '<span class="badge badge-secondary">Normal</span>'}</td>
                            <td>${item.isBlocked ? '<span class="badge-Blocked">Blocked</span>' : '<span class="badge badge-secondary">Normal</span>'}</td>
                            <td>${item.isUnsubscribed ? '<span class="badge-Unsubscribed">Unsubscribed</span>' : '<span class="badge badge-secondary">Normal</span>'}</td>
                            <!-- Continue for each status -->
                        </tr>
                    `;
                    tableBody.innerHTML += row; // Append new row
                });
            }

            setInterval(fetchData, 5000); // Fetch data every 5 seconds
                 document.getElementById('selectAll').addEventListener('click', function() {
                    const checkboxes = document.querySelectorAll('input[name="selectedIds"]');
                    checkboxes.forEach(checkbox => checkbox.checked = this.checked);
                });
        });
    </script>

 } *@