@extends('student.layouts.app')
@section('content')
<div class="max-w-3xl mx-auto py-6">
    <!-- Back Button -->
    <div class="mb-6">
        <a href="{{ route('student.notice.list', ['slug' => session('student_school_slug')]) }}" class="text-slate-500 hover:text-indigo-600 text-sm font-medium flex items-center gap-2 transition-all">
            <i class="fa-solid fa-arrow-left"></i> Back to Notice Board
        </a>
    </div>

    <!-- Notice Card -->
    <div class="bg-white border border-slate-200 rounded-3xl shadow-sm overflow-hidden">
        <!-- Header Banner -->
        <div class="h-28 bg-gradient-to-r from-indigo-600 to-indigo-800 flex items-center justify-center relative">
            <i class="fa-solid fa-bullhorn text-white/10 text-8xl absolute right-6 bottom-0"></i>
            <div class="text-center z-10">
                <span class="px-4 py-1.5 rounded-full text-[11px] font-bold uppercase tracking-wider bg-white text-indigo-600 shadow-sm">
                    {{ $notice->category }}
                </span>
            </div>
        </div>
        
        <div class="p-6 md:p-8">
            <!-- Meta Info -->
            <div class="flex flex-wrap items-center gap-3 mb-6">
                @if($notice->is_pinned)
                <span class="bg-indigo-100 text-indigo-600 px-3 py-1 rounded-lg text-xs font-bold flex items-center gap-1.5">
                    <i class="fa-solid fa-pin text-[10px]"></i> Pinned Notice
                </span>
                @endif
                <span class="text-slate-400 text-xs font-medium flex items-center gap-1.5 bg-slate-50 px-3 py-1.5 rounded-lg">
                    <i class="fa-regular fa-calendar-days"></i> Published: {{ \Carbon\Carbon::parse($notice->published_at)->format('d M, Y') }}
                </span>
            </div>

            <!-- Title & Content -->
            <h1 class="text-2xl font-extrabold text-slate-800 mb-4 leading-tight">{{ $notice->title }}</h1>
            <div class="prose max-w-none text-slate-600 text-sm leading-relaxed whitespace-pre-line mb-8">
                {{ $notice->content }}
            </div>

            <!-- Attachment Section -->
            @if($notice->attachment)
            <div class="p-5 bg-slate-50 border border-slate-100 rounded-2xl flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center text-indigo-600 flex-shrink-0">
                        <i class="fa-solid fa-paperclip text-lg"></i>
                    </div>
                    <div>
                        <p class="text-sm font-bold text-slate-700">Attachment Available</p>
                        <p class="text-xs text-slate-400">Click the button to view or download the file</p>
                    </div>
                </div>
                <a href="{{ asset('storage/'.$notice->attachment) }}" target="_blank" 
                   class="w-full sm:w-auto px-6 py-2.5 bg-indigo-600 text-white text-xs font-bold rounded-xl hover:bg-indigo-700 transition-all text-center shadow-lg shadow-indigo-200">
                    <i class="fa-solid fa-download mr-1"></i> Download File
                </a>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection