@extends('layouts.frontend')

@section('title', 'News & Announcements - Kidscholl Academy')

@section('styles')
<style>
    /* Hero Section */
    .news-hero {
        background: linear-gradient(135deg, #F3E8FF 0%, #E8F0FE 100%);
        padding: 90px 0 100px;
        position: relative;
        overflow: hidden;
        border-bottom-left-radius: 60px;
        border-bottom-right-radius: 60px;
    }

    .news-hero::before {
        content: '';
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(155,93,229,0.1) 0%, rgba(255,255,255,0) 70%);
        top: -100px;
        right: -50px;
        animation: float-slow 9s ease-in-out infinite alternate;
    }

    @keyframes float-slow {
        0% { transform: translateY(0px) rotate(0deg); }
        100% { transform: translateY(-20px) rotate(10deg); }
    }

    .hero-floater {
        position: absolute;
        font-size: 2.5rem;
        opacity: 0.15;
        animation: floating 4s ease-in-out infinite;
    }

    @keyframes floating {
        0% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-12px) rotate(6deg); }
        100% { transform: translateY(0px) rotate(0deg); }
    }

    /* Filters and Search Bar */
    .filter-pills-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 30px;
    }

    .filter-pill {
        padding: 10px 22px;
        border-radius: 30px;
        font-weight: 700;
        font-size: 0.9rem;
        background-color: #f1f5f9;
        color: #475569;
        border: none;
        transition: all 0.3s ease;
        font-family: 'Fredoka', sans-serif;
    }

    .filter-pill:hover, .filter-pill.active {
        background-color: var(--primary-color);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(255, 107, 107, 0.25);
    }

    .filter-pill.active[data-filter="general"] { background-color: #3b82f6; box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25); }
    .filter-pill.active[data-filter="ptm"] { background-color: #9b5de5; box-shadow: 0 8px 20px rgba(155, 93, 229, 0.25); }
    .filter-pill.active[data-filter="exam"] { background-color: #f59e0b; box-shadow: 0 8px 20px rgba(245, 158, 11, 0.25); }
    .filter-pill.active[data-filter="results"] { background-color: #10b981; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.25); }
    .filter-pill.active[data-filter="emergency"] { background-color: #ef4444; box-shadow: 0 8px 20px rgba(239, 68, 68, 0.25); }

    .search-input-wrap {
        position: relative;
        margin-bottom: 30px;
    }

    .search-control {
        border-radius: 30px;
        padding: 14px 24px 14px 50px;
        border: 2px solid #e2e8f0;
        background-color: #ffffff;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .search-control:focus {
        border-color: var(--secondary-color);
        box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.15);
    }

    .search-icon-inside {
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translateY(-50%);
        color: #94a3b8;
        font-size: 1.2rem;
    }

    /* Redesigned Notice Cards */
    .notice-card-premium {
        background: #ffffff;
        border-radius: 24px;
        border: 2px solid #f1f5f9;
        padding: 35px;
        margin-bottom: 25px;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        position: relative;
        overflow: hidden;
        display: flex;
        gap: 25px;
    }

    .notice-card-premium:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    }

    /* Left accent borders */
    .notice-card-premium.category-general { border-left: 6px solid #3b82f6; }
    .notice-card-premium.category-ptm { border-left: 6px solid #9b5de5; }
    .notice-card-premium.category-exam { border-left: 6px solid #f59e0b; }
    .notice-card-premium.category-results { border-left: 6px solid #10b981; }
    .notice-card-premium.category-emergency { border-left: 6px solid #ef4444; }

    /* Calendar Block Date */
    .date-calendar-badge {
        flex-shrink: 0;
        width: 70px;
        height: 85px;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 10px rgba(0,0,0,0.02);
        text-align: center;
    }

    .date-calendar-badge .month-header {
        background-color: var(--primary-color);
        color: white;
        font-size: 0.75rem;
        font-weight: 800;
        padding: 4px 0;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .date-calendar-badge.category-general .month-header { background-color: #3b82f6; }
    .date-calendar-badge.category-ptm .month-header { background-color: #9b5de5; }
    .date-calendar-badge.category-exam .month-header { background-color: #f59e0b; }
    .date-calendar-badge.category-results .month-header { background-color: #10b981; }
    .date-calendar-badge.category-emergency .month-header { background-color: #ef4444; }

    .date-calendar-badge .day-body {
        background-color: #ffffff;
        color: var(--dark-color);
        font-family: 'Fredoka', sans-serif;
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.2;
        padding-top: 6px;
        flex-grow: 1;
    }

    .notice-content {
        flex-grow: 1;
    }

    .notice-badge-pill {
        font-size: 0.75rem;
        font-weight: 700;
        padding: 5px 14px;
        border-radius: 20px;
        margin-bottom: 15px;
        display: inline-block;
        text-transform: uppercase;
    }

    /* Custom Category Colors */
    .badge-general { background-color: #eff6ff; color: #1e40af; }
    .badge-ptm { background-color: #f3e8ff; color: #6b21a8; }
    .badge-exam { background-color: #fffbeb; color: #92400e; }
    .badge-results { background-color: #ecfdf5; color: #065f46; }
    .badge-emergency { background-color: #fef2f2; color: #991b1b; }

    /* Sidebars */
    .sidebar-widget {
        border-radius: 24px;
        padding: 30px;
        background-color: #ffffff;
        border: 2px solid #f1f5f9;
        margin-bottom: 25px;
        transition: all 0.3s ease;
    }

    .sidebar-widget:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    }

    .guidelines-card {
        background: linear-gradient(135deg, rgba(239,246,255,0.8) 0%, rgba(243,232,255,0.8) 100%);
        border: 2px solid #e0f2fe;
    }

    .hotline-card {
        background: linear-gradient(135deg, rgba(236,253,245,0.8) 0%, rgba(232,240,254,0.8) 100%);
        border: 2px solid #d1fae5;
    }

    .btn-download-attachment {
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 700;
        padding: 8px 18px;
        transition: all 0.3s ease;
    }
</style>
@endsection

@section('content')
    <!-- Floating visual icons for hero decoration -->
    <div class="position-absolute d-none d-lg-block hero-floater" style="top: 180px; left: 6%; animation-delay: 0s;">
        <i class="bi bi-megaphone-fill text-primary opacity-25"></i>
    </div>
    <div class="position-absolute d-none d-lg-block hero-floater" style="top: 250px; right: 8%; animation-delay: 1.2s;">
        <i class="bi bi-bell-fill text-danger opacity-25"></i>
    </div>

    <!-- Page Header (News Hero) -->
    <section class="news-hero text-center mb-5">
        <div class="container">
            <span class="badge bg-primary kids-badge mb-3 px-3 py-2">ANNOUNCEMENTS</span>
            <h1 class="page-header-title mb-3 fs-1 text-primary">News, Notices & Circulars</h1>
            <p class="lead text-muted mx-auto" style="max-width: 650px;">
                Stay closely connected with our campus. Read active announcements, circular PDFs, exam schedules, and holiday timetables below.
            </p>
        </div>
    </section>

    <!-- News and Search Grid -->
    <section class="section-padding pt-0 bg-white">
        <div class="container">
            <div class="row">
                <!-- Left Main Content Column -->
                <div class="col-lg-8">
                    
                    <!-- Search and Filtering Section -->
                    <div class="row align-items-center mb-4">
                        <div class="col-md-6">
                            <div class="search-input-wrap">
                                <i class="bi bi-search search-icon-inside"></i>
                                <input type="text" id="newsSearchInput" class="form-control search-control" placeholder="Search notices by keyword...">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="filter-pills-wrap justify-content-md-end">
                                <button class="filter-pill active" data-filter="all">All</button>
                                <button class="filter-pill" data-filter="general">General</button>
                                <button class="filter-pill" data-filter="ptm">PTM</button>
                                <button class="filter-pill" data-filter="exam">Exams</button>
                                <button class="filter-pill" data-filter="results">Results</button>
                                <button class="filter-pill" data-filter="emergency">Emergency</button>
                            </div>
                        </div>
                    </div>

                    <!-- Notices Container List -->
                    <div id="noticesListContainer">
                        @forelse($announcements as $ann)
                            @php
                                $date = \Carbon\Carbon::parse($ann->created_at);
                                $categoryLower = strtolower($ann->category);
                            @endphp
                            <div class="notice-card-premium category-{{ $categoryLower }}" data-category="{{ $categoryLower }}">
                                <!-- Calendar Badge -->
                                <div class="date-calendar-badge category-{{ $categoryLower }}">
                                    <div class="month-header">{{ $date->format('M') }}</div>
                                    <div class="day-body">{{ $date->format('d') }}</div>
                                </div>

                                <!-- Notice Content -->
                                <div class="notice-content">
                                    <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                                        <span class="notice-badge-pill badge-{{ $categoryLower }}">
                                            {{ $ann->category }}
                                        </span>
                                        <small class="text-muted"><i class="bi bi-clock me-1"></i> Posted: {{ $date->format('h:i A') }}</small>
                                    </div>
                                    <h3 class="text-dark fw-bold h4 mb-2 notice-title">{{ $ann->title }}</h3>
                                    <p class="text-secondary notice-description mb-3" style="line-height: 1.7;">{{ $ann->description }}</p>
                                    
                                    @if($ann->attachment_path)
                                        <div class="mt-2">
                                            <a href="{{ asset('storage/' . $ann->attachment_path) }}" class="btn btn-sm btn-outline-danger btn-download-attachment" download>
                                                <i class="bi bi-file-earmark-pdf-fill me-1"></i> Download Circular (PDF)
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-5 border rounded-4 bg-light">
                                <i class="bi bi-megaphone text-muted fs-1 d-block mb-3"></i>
                                <h4 class="text-dark fw-bold">No Announcements Found</h4>
                                <p class="text-muted">There are no active notices or bulletins published at this time.</p>
                            </div>
                        @endforelse

                        <!-- Dynamic JavaScript Empty State (Hidden by default) -->
                        <div id="noResultsState" class="text-center py-5 border rounded-4 bg-light d-none">
                            <i class="bi bi-search text-muted fs-1 d-block mb-3"></i>
                            <h4 class="text-dark fw-bold">No Match Found</h4>
                            <p class="text-muted">Try adjusting your keyword search or selecting another category.</p>
                        </div>
                    </div>
                </div>

                <!-- Right Sidebar Column -->
                <div class="col-lg-4">
                    <!-- Important Guidelines -->
                    <div class="sidebar-widget guidelines-card">
                        <h5 class="text-dark fw-bold mb-3"><i class="bi bi-info-circle-fill text-primary me-2"></i> Important Guidelines</h5>
                        <p class="text-muted small mb-3" style="line-height: 1.6;">
                            All critical updates about emergency closures, school policies, schedule worksheets, and parent teacher conferences are posted here first.
                        </p>
                        <p class="text-muted small mb-0" style="line-height: 1.6;">
                            Registered school parents can access the <strong>Parent Portal Dashboard</strong> to reply to satisfaction surveys, view attendance, review marks worksheets, and clear quarterly fees.
                        </p>
                        <a href="{{ route('parent.login') }}" class="btn btn-kids-primary btn-sm w-100 mt-4 py-2">
                            <i class="bi bi-shield-lock-fill me-1"></i> Access Parent Portal
                        </a>
                    </div>

                    <!-- Support hotline -->
                    <div class="sidebar-widget hotline-card text-center">
                        <div class="rounded-circle bg-white text-success d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 70px; height: 70px; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.1);">
                            <i class="bi bi-telephone-inbound-fill fs-2"></i>
                        </div>
                        <h5 class="text-dark fw-bold mb-2">Portal Support</h5>
                        <p class="text-muted small mb-3">
                            Need help mapping student details, registering your mobile number, or setting up OTP verification logs?
                        </p>
                        <p class="text-muted small mb-1">Call Campus Desk:</p>
                        <a href="tel:+12345678900" class="h4 text-success fw-bold text-decoration-none d-block">+1 234 567 8900</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const searchInput = document.getElementById("newsSearchInput");
        const filterButtons = document.querySelectorAll(".filter-pill");
        const noticeCards = document.querySelectorAll(".notice-card-premium");
        const noResultsState = document.getElementById("noResultsState");
        
        let currentFilter = "all";
        let currentSearchQuery = "";

        // Function to filter and search notices simultaneously
        function applyFilterAndSearch() {
            let visibleCount = 0;

            noticeCards.forEach(card => {
                const cardCategory = card.getAttribute("data-category");
                const cardTitle = card.querySelector(".notice-title").textContent.toLowerCase();
                const cardDesc = card.querySelector(".notice-description").textContent.toLowerCase();
                
                const matchesCategory = (currentFilter === "all" || cardCategory === currentFilter);
                const matchesSearch = (cardTitle.includes(currentSearchQuery) || cardDesc.includes(currentSearchQuery));

                if (matchesCategory && matchesSearch) {
                    card.classList.remove("d-none");
                    visibleCount++;
                } else {
                    card.classList.add("d-none");
                }
            });

            // Display empty state if no notices match the filters
            if (visibleCount === 0 && noticeCards.length > 0) {
                noResultsState.classList.remove("d-none");
            } else {
                noResultsState.classList.add("d-none");
            }
        }

        // Handle search keyups
        if (searchInput) {
            searchInput.addEventListener("input", function (e) {
                currentSearchQuery = e.target.value.toLowerCase().trim();
                applyFilterAndSearch();
            });
        }

        // Handle category pill clicks
        filterButtons.forEach(button => {
            button.addEventListener("click", function () {
                // Remove active classes
                filterButtons.forEach(btn => btn.classList.remove("active"));
                
                // Add active class to clicked button
                this.classList.add("active");
                currentFilter = this.getAttribute("data-filter");
                
                applyFilterAndSearch();
            });
        });
    });
</script>
@endsection