@extends('frontend.layouts.app')
@section('title')
    Notice -
@endsection

@push('style')
    <style>
        .notice-date-box {
            width: 80px;
            height: 80px;
            text-align: center;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #fff;
            flex-shrink: 0;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .month {
            font-size: 13px;
            font-weight: 500;
            text-transform: uppercase;
            margin-bottom: 2px;
        }

        .date {
            font-size: 24px;
            font-weight: 700;
            line-height: 1;
        }

        .bgc1 {
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        }

        .bgc2 {
            background: linear-gradient(135deg, #8b5cf6, #6d28d9);
        }

        .bgc3 {
            background: linear-gradient(135deg, #ec4899, #be185d);
        }

        .notice-item {
            border: 1px solid #f0f0f0;
            border-radius: 12px;
            padding: 16px;
            background: #fff;
            transition: all 0.3s ease;
        }

        @media (min-width: 768px) {
            .notice-item {
                padding: 24px;
                align-items: center !important;
            }
        }

        .notice-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }
    </style>
@endpush

@section('content')
    @include('frontend.layouts.include.breadcrumb', [
        'items' => [['name' => 'Notice', 'url' => '#'], ['name' => $notice_type, 'url' => null]],
    ])

    <div class="main-content py-5 bg-light">
        <div class="container-fluid">

            @php $bgClasses = ['bgc1', 'bgc2', 'bgc3']; @endphp

            @forelse ($notices as $notice)
                @php $bgClass = $bgClasses[$loop->index % 3]; @endphp

                <div class="notice-item mb-3 d-flex flex-column flex-md-row justify-content-between align-items-start">

                    <div class="d-flex align-items-start w-100">

                        <div class="notice-date-box {{ $bgClass }}">
                            <span class="month">{{ $notice->created_at->format('M') }}</span>
                            <span class="date">{{ $notice->created_at->format('d') }}</span>
                        </div>

                        <div class="ml-3 ml-md-4 w-100">
                            <small class="text-uppercase text-success fw-bold mb-2 d-block"
                                style="font-size: 11px; letter-spacing: 0.5px;">
                                NOTICE BOARD
                            </small>

                            <h5 class="mb-2">
                                <a href="{{ route('noticeDetailsPage', ['slug' => $notice->slug, 'id' => $notice->id, 'notice_type' => $notice_type]) }}"
                                    class="text-dark text-decoration-none"
                                    style="word-break: break-word; line-height: 1.5; font-weight: 600;">
                                    {{ $notice->title }}
                                </a>
                            </h5>

                            <div class="text-muted small d-flex align-items-center flex-wrap">

                                <span class="me-3">
                                    By <strong>{{ $notice->user->name ?? 'Admin' }}</strong>
                                </span>

                                <span class="d-flex d-md-none align-items-center text-secondary bg-light px-2 py-1 rounded">
                                    <i class="ri-eye-line me-1"></i> {{ number_format($notice->seenBy) }}
                                </span>

                            </div>
                        </div>
                    </div>

                    <div class="d-none d-md-flex align-items-center text-muted ml-4 flex-shrink-0">
                        <i class="ri-eye-fill me-2 text-primary" style="font-size: 20px;"></i>
                        <span class="fw-bold" style="font-size: 16px;">{{ number_format($notice->seenBy) }}</span>
                    </div>

                </div>

            @empty
                <div class="text-center pt-4">
                    <h5 class="text-muted">No notices found.</h5>
                </div>
            @endforelse

            <div class="mt-4 d-flex justify-content-center">
                {{ $notices->links('vendor.pagination.frontend') }}
            </div>

        </div>
    </div>
@endsection