@extends('layouts.frontend.master')

@section('title', 'Notices - BAU 2001–2002 Alumni Association')

@push('css')
    <style>
        /* Event image styling for consistent aspect ratio */

        .gradient-bg {
            background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
        }

        /* Text truncation utilities */
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Filter buttons - compact design */
        .filter-btn {
            transition: all 0.3s ease;
            font-size: 0.75rem;
            padding: 0.125rem 0.25rem;
            border-radius: 0.25rem;
            border: 1px solid #d1d5db;
            background-color: white;
            color: #374151;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.125rem;
            font-weight: 500;
            text-decoration: none;
            line-height: 1;
            height: 1.5rem;
        }

        .filter-btn.active {
            background-color: #10b981;
            color: white;
            border-color: #10b981;
        }

        .filter-btn:hover:not(.active) {
            background-color: #f3f4f6;
            border-color: #9ca3af;
        }

        .filter-btn .count-badge {
            background-color: #e5e7eb;
            color: #6b7280;
            font-size: 0.625rem;
            padding: 0.125rem 0.25rem;
            border-radius: 9999px;
            font-weight: 600;
            min-width: 1.25rem;
            text-align: center;
        }

        .filter-btn.active .count-badge {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
        }
    </style>
@endpush

@section('content')
    <!-- Notices Section -->
    <section class="bg-white py-8">
        <div class="container mx-auto px-6">
            <!-- Header -->
            <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
                <div class="mb-4 md:mb-0">
                    <h2 class="text-3xl font-bold text-blue-900" style="color: rgb(30 64 175);">
                        Notice Board
                        <span class="text-lg font-medium text-gray-600">({{ $notices->count() }})</span>
                    </h2>
                    <p class="text-gray-500 mt-1">Stay updated with our latest notices.</p>
                </div>
            </div>

            @if($notices->count() > 0)
                <!-- Notices Grid -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                    @foreach($notices as $notice)
                        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 flex flex-col h-full transition-shadow duration-300 hover:shadow-xl">
                            <!-- Notice Content -->
                            <h3 class="font-bold text-xl mb-3 text-blue-900 line-clamp-2" style="color: rgb(30 64 175);">
                                {{ $notice->title }}
                            </h3>
                            @if(isset($notice->description))
                            <p class="text-gray-600 text-sm mb-4 line-clamp-4">
                                {{ Str::limit(strip_tags($notice->description), 150, '...') }}
                            </p>
                            @endif

                            <!-- Expiry Date -->
                            <div class="flex items-center text-sm text-gray-500 mb-4">
                                <svg class="w-4 h-4 mr-2 text-green-600" fill="none" stroke="currentColor"
                                     viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                </svg>
                                Expires on:
                                <span class="ml-1 font-medium text-gray-700">
                                {{ \Carbon\Carbon::parse($notice->expiry_date)->format('M d, Y') }}
                            </span>
                            </div>

                            <!-- Action Button -->
                            <div class="mt-auto pt-4 border-t border-gray-100">
                                <a href="{{ route('notices.show', encrypt($notice->id)) }}"
                                   class="block w-full text-center px-4 py-2 rounded-lg font-semibold text-sm transition-colors duration-300 bg-white text-blue-800 border border-blue-200 hover:bg-blue-50" style="color: rgb(30 64 175);">
                                    View Details
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <!-- Empty State -->
                <div class="text-center py-16">
                    <i class="fas fa-bell-slash text-6xl text-gray-300 mb-6"></i>
                    <h3 class="text-2xl font-semibold text-blue-900 mb-4" style="color: rgb(30 64 175);">No Notices Available</h3>
                    <p class="text-gray-500 mb-8 max-w-md mx-auto">
                        There are currently no active notices. Please check back later.
                    </p>
                    <a href="{{ route('home') }}"
                       class="inline-flex items-center px-6 py-3 bg-blue-800 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200" style="background-color: rgb(30 64 175);">
                        <i class="fas fa-home mr-2"></i>
                        Back to Home
                    </a>
                </div>
            @endif
        </div>
    </section>

    <div class="mt-8">
        {{ $notices->links() }}
    </div>

@endsection