<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="news-gallery-assets/img/favicon treasure.png" type="image/x-icon">
    <title>All News</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
    <style>
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }

        .news-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 20px;
        }

        .news-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
            position: relative;
            display: flex;
            flex-direction: column;
            transition: transform 0.2s ease;
        }

        .news-card:hover {
            transform: translateY(-5px);
        }

        .news-card h2 {
            font-size: 1.3rem;
            margin-bottom: 10px;
            color: #333;
        }

        .news-card p {
            font-size: 0.95rem;
            color: #555;
            margin-bottom: 10px;
        }

        .images-container {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin: 10px 0;
        }

        .images-container img {
            height: 100px;
            border-radius: 8px;
            object-fit: cover;
            border: 1px solid #ddd;
        }

        small {
            font-size: 0.85rem;
            color: #888;
            margin-top: auto;
        }

        .action-buttons {
            margin-top: 15px;
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: space-between;
        }

        .action-buttons a,
        .action-buttons button {
            padding: 6px 12px;
            font-size: 0.85rem;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            text-decoration: none;
        }

        .edit-btn {
            background-color: #007bff;
            color: white;
        }

        .delete-btn {
            background-color: #dc3545;
            color: white;
        }

        .status-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85rem;
        }

        .status-toggle input[type="checkbox"] {
            display: none;
        }

        .status-toggle label {
            position: relative;
            display: inline-block;
            width: 42px;
            height: 22px;
            background-color: #ccc;
            border-radius: 22px;
            cursor: pointer;
        }

        .status-toggle label::before {
            content: '';
            position: absolute;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-color: white;
            top: 2px;
            left: 2px;
            transition: transform 0.3s ease;
        }

        .status-toggle input[type="checkbox"]:checked+label {
            background-color: #28a745;
        }

        .status-toggle input[type="checkbox"]:checked+label::before {
            transform: translateX(20px);
        }

        .no-news {
            text-align: center;
            font-size: 1.1rem;
            color: #666;
            padding: 30px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
        }


        .pagination .page-item.active .page-link {
            background-color: #0d6efd;
            border-color: #0d6efd;
            color: #fff;
        }
    </style>
</head>

<body>

    <!-- Header -->
    <%- include('header') %>


        <div class="container">
            <h1>All News</h1>

            <% if (newsList.length===0) { %>
                <div class="no-news">
                    <p>No news available yet. Start adding news to populate this list.</p>
                </div>
                <% } else { %>
                    <div class="news-grid">
                        <% newsList.forEach(news=> { %>
                            <div class="news-card">
                                <h2>
                                    <%= news.title %>
                                </h2>
                                <p>
                                    <%= news.content.length> 150 ? news.content.substring(0, 150) + '...' : news.content
                                        %>
                                </p>

                                <div class="images-container">
                                    <% news.images.forEach(img=> { %>
                                        <img src="<%= img.url %>" alt="<%= img.originalName %>" />
                                        <% }) %>
                                </div>

                                <small>Posted on <%= news.createdAt.toDateString() %></small>

                                <div class="action-buttons">
                                    <a href="/news/<%= news._id %>/edit" class="edit-btn">Edit</a>

                                    <form action="/news/<%= news._id %>/delete" method="POST"
                                        onsubmit="return confirm('Are you sure you want to delete this news item?')">
                                        <button type="submit" class="delete-btn">Delete</button>
                                    </form>
                                </div>

                                <div class="status-toggle mt-2">
                                    <span>Status:</span>
                                    <input type="checkbox" id="toggle-<%= news._id %>" <%=news.isActive ? "checked" : ""
                                        %>
                                    onchange="toggleStatus('<%= news._id %>', this.checked)">
                                        <label for="toggle-<%= news._id %>"></label>
                                        <span>
                                            <%= news.isActive ? 'Active' : 'Inactive' %>
                                        </span>
                                </div>
                            </div>
                            <% }) %>
                    </div>
                    <% } %>




                        <div class="my-4">
                            <!-- Page Count -->
                            <p class="text-center text-muted mb-2">
                                Page <%= currentPage %> of <%= totalPages %>
                            </p>

                            <!-- Smart Pagination -->
                            <% if (totalPages> 1) { %>
                                <nav aria-label="News pagination">
                                    <ul class="pagination justify-content-center">

                                        <!-- Prev Button -->
                                        <% if (currentPage> 1) { %>
                                            <li class="page-item">
                                                <a class="page-link" href="/news?page=<%= currentPage - 1 %>">&laquo;
                                                    Prev</a>
                                            </li>
                                            <% } else { %>
                                                <li class="page-item disabled">
                                                    <span class="page-link">&laquo; Prev</span>
                                                </li>
                                                <% } %>

                                                    <!-- First Page & Left Dots -->
                                                    <% if (currentPage> 3) { %>
                                                        <li class="page-item">
                                                            <a class="page-link" href="/news?page=1">1</a>
                                                        </li>
                                                        <% if (currentPage> 4) { %>
                                                            <li class="page-item disabled">
                                                                <span class="page-link">...</span>
                                                            </li>
                                                            <% } %>
                                                                <% } %>

                                                                    <!-- Pages Around Current -->
                                                                    <% for (let i=currentPage - 2; i <=currentPage + 2;
                                                                        i++) { if (i> 0 && i <= totalPages) { %>
                                                                            <li
                                                                                class="page-item <%= currentPage === i ? 'active' : '' %>">
                                                                                <a class="page-link"
                                                                                    href="/news?page=<%= i %>">
                                                                                    <%= i %>
                                                                                </a>
                                                                            </li>
                                                                            <% } } %>

                                                                                <!-- Right Dots & Last Page -->
                                                                                <% if (currentPage < totalPages - 2) {
                                                                                    %>
                                                                                    <% if (currentPage < totalPages - 3)
                                                                                        { %>
                                                                                        <li class="page-item disabled">
                                                                                            <span
                                                                                                class="page-link">...</span>
                                                                                        </li>
                                                                                        <% } %>
                                                                                            <li class="page-item">
                                                                                                <a class="page-link"
                                                                                                    href="/news?page=<%= totalPages %>">
                                                                                                    <%= totalPages %>
                                                                                                </a>
                                                                                            </li>
                                                                                            <% } %>

                                                                                                <!-- Next Button -->
                                                                                                <% if (currentPage <
                                                                                                    totalPages) { %>
                                                                                                    <li
                                                                                                        class="page-item">
                                                                                                        <a class="page-link"
                                                                                                            href="/news?page=<%= currentPage + 1 %>">Next
                                                                                                            &raquo;</a>
                                                                                                    </li>
                                                                                                    <% } else { %>
                                                                                                        <li
                                                                                                            class="page-item disabled">
                                                                                                            <span
                                                                                                                class="page-link">Next
                                                                                                                &raquo;</span>
                                                                                                        </li>
                                                                                                        <% } %>

                                    </ul>
                                </nav>
                                <% } %>
                        </div>


        </div>

        <script>
            async function toggleStatus(id, isActive) {
                try {
                    const res = await fetch(`/api/news/${id}/status`, {
                        method: 'PATCH',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ isActive })
                    });
                    if (res.ok) {
                        showAlert(`News marked as ${isActive ? 'Active' : 'Inactive'}`);
                        // location.reload();
                    } else {
                        showAlert('Failed to update status.', "danger");
                    }
                } catch (error) {
                    console.error('Error updating status:', error);
                    shorAlert('Server error.');
                }
            }
        </script>
</body>

</html>