@include('frontend.header')



    <main class="main">
        <!-- breadcrumb -->
        <div class="site-breadcrumb" style="background: url(assets/img/breadcrumb/01.png)">
            <div class="container">
                <h2 class="breadcrumb-title">News & Events</h2>
                <ul class="breadcrumb-menu">
                    <li><a href="#">Home</a></li>
                    <li class="active">News & Events</li>
                </ul>
            </div>
        </div>
        <!-- breadcrumb end -->

        <main class="main py-4">
            <!-- Header + Tabs -->
            <div class="container mb-4">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-center mb-3 m-5">
                    <h2 class="fw-bold mb-3 mb-md-0">
                        <i class="bi bi-calendar-event me-2"></i>News & Events
                    </h2>
                    <div>
                        <button id="list-view" class="btn btn-outline-primary active-view">
                            List
                        </button>
                        <button id="timeline-view" class="btn btn-outline-primary">
                            Timeline
                        </button>
                        <button id="calendar-btn" class="btn btn-outline-primary">
                            <i class="bi bi-calendar3 me-1"></i> Calendar
                        </button>
                    </div>
                </div>

                <!-- Categories -->
                <div class="mb-4 d-flex flex-wrap gap-2 m-5" id="category-buttons">
                    <button data-category="All" class="btn btn-outline-secondary active-category">
                        All
                    </button>
                    <button data-category="Software Engineering" class="btn btn-outline-secondary">
                        Software Engineering
                    </button>
                    <button data-category="Academic" class="btn btn-outline-secondary">
                        Academic
                    </button>
                    <button data-category="Sports" class="btn btn-outline-secondary">
                        Sports
                    </button>
                    <button data-category="Cultural" class="btn btn-outline-secondary">
                        Cultural
                    </button>
                    <button data-category="Student" class="btn btn-outline-secondary">
                        Student
                    </button>
                </div>
            </div>

            <div class="m-5">
                <!-- Notice List / Timeline -->
                <div id="notice-container" class="row"></div>
            </div>
        </main>

        <!-- notice board end-->
    </main>

    @include('frontend.footer')

    <script>
const notices = [{
        title: "Project Thesis Workshop On Technical Writing Notice for 29 And 30 Batch",
        category: "Software Engineering",
        department: "Academic",
        date: "2024-06-19",
        views: "25k",
    },
    {
        title: "AI Seminar Notice for Students",
        category: "Academic",
        department: "Computer Science",
        date: "2024-07-10",
        views: "15k",
    },
    {
        title: "Sports Meet Announcement",
        category: "Sports",
        department: "Physical Education",
        date: "2024-08-05",
        views: "18k",
    },
    {
        title: "Cultural Fest Invitation",
        category: "Cultural",
        department: "Arts",
        date: "2024-09-12",
        views: "20k",
    },
    {
        title: "Internship Drive Notice",
        category: "Student",
        department: "Career Cell",
        date: "2024-10-01",
        views: "22k",
    },
    {
        title: "New Lab Equipment Notice",
        category: "Software Engineering",
        department: "Academic",
        date: "2024-11-15",
        views: "12k",
    },
];

const noticeContainer = document.getElementById("notice-container");
const categoryButtons = document.getElementById("category-buttons");
const listBtn = document.getElementById("list-view");
const timelineBtn = document.getElementById("timeline-view");

let selectedCategory = "All";
let currentView = "list";

function renderNotices() {
    const filtered =
        selectedCategory === "All" ?
        notices :
        notices.filter((n) => n.category === selectedCategory);
    noticeContainer.innerHTML = "";

    filtered.forEach((n) => {
        const div = document.createElement("div");
        div.className =
            currentView === "list" ? "col-12" : "col-md-6 col-lg-4";

        div.innerHTML = `
      <div class="notice-item">
        <h5>${n.title}</h5>
        <div class="notice-meta">
          <span><i class="bi bi-building"></i> ${n.category}</span>
          <span><i class="bi bi-journal-text"></i> ${n.department}</span>
          <span><i class="bi bi-calendar"></i> ${new Date(
            n.date
          ).toLocaleDateString()}</span>
          <span><i class="bi bi-eye"></i> ${n.views} Views</span>
        </div>
      </div>
    `;
        noticeContainer.appendChild(div);
    });
}

// Category filter
categoryButtons.querySelectorAll("button").forEach((btn) => {
    btn.addEventListener("click", function() {
        categoryButtons
            .querySelectorAll("button")
            .forEach((b) => b.classList.remove("active-category"));
        this.classList.add("active-category");
        selectedCategory = this.getAttribute("data-category");
        renderNotices();
    });
});

// View toggle
if (listBtn && timelineBtn) {
    listBtn.addEventListener("click", () => {
        currentView = "list";
        listBtn.classList.add("active-view");
        timelineBtn.classList.remove("active-view");
        renderNotices();
    });

    timelineBtn.addEventListener("click", () => {
        currentView = "timeline";
        timelineBtn.classList.add("active-view");
        listBtn.classList.remove("active-view");
        renderNotices();
    });
}

// Initial render
renderNotices();
    </script>
    </body>

    <!-- Mirrored from live.themewild.com/eduka/notice-board.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 21 Jul 2025 12:37:04 GMT -->

    </html>