@extends('layouts.frontend')

@section('title', $notice->title . ' - ' . ($settings['site_name'] ?? 'সাংসদ পোর্টাল'))

@section('content')
    <!-- Page Header -->
    <section class="bg-bd-green-500 text-white py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <nav class="text-sm mb-4">
                <a href="{{ route('home') }}" class="text-bd-green-100 hover:text-white">হোম</a>
                <span class="mx-2">/</span>
                <a href="{{ route('notices') }}" class="text-bd-green-100 hover:text-white">নোটিশ বোর্ড</a>
                <span class="mx-2">/</span>
                <span>{{ Str::limit($notice->title, 30) }}</span>
            </nav>
        </div>
    </section>

    <!-- Notice Content -->
    <section class="py-12 bg-gray-50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <article
                class="bg-white rounded-xl shadow-lg overflow-hidden {{ $notice->isUrgent() ? 'border-t-4 border-red-500' : '' }}">
                <div class="p-8">
                    <!-- Meta -->
                    <div class="flex flex-wrap items-center gap-4 mb-6">
                        <span class="px-4 py-1.5 text-sm font-medium rounded-full {{ $notice->getTypeBadgeClass() }}">
                            {{ $notice->type_label }}
                        </span>
                        <span class="text-gray-500">
                            <svg class="w-4 h-4 inline mr-1" 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>
                            {{ $notice->published_at->format('d M, Y') }}
                        </span>
                    </div>

                    <!-- Title -->
                    <h1 class="text-3xl font-bold text-gray-900 mb-8">{{ $notice->title }}</h1>

                    <!-- Content -->
                    <div class="prose prose-lg max-w-none text-gray-700">
                        {!! $notice->content !!}
                    </div>
                </div>
            </article>

            <!-- Back Button -->
            <div class="mt-8 text-center">
                <a href="{{ route('notices') }}"
                    class="inline-flex items-center px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition font-medium">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    সকল নোটিশ
                </a>
            </div>
        </div>
    </section>
@endsection