@extends('school.layouts.app')

@section('content')
<div class="max-w-4xl mx-auto py-6">
    <div class="mb-6">
        <a href="{{ route('school.communication.broadcasts') }}" 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 History
        </a>
    </div>

    <div class="bg-white border border-slate-200 rounded-3xl shadow-sm overflow-hidden">
        <div class="h-32 bg-indigo-600 flex items-center justify-center relative">
            <i class="fa-solid fa-paper-plane text-white/20 text-7xl absolute right-10 bottom-0"></i>
            <div class="text-center">
                <span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-white text-indigo-600 shadow-sm">
                    {{ $broadcast->category }}
                </span>
            </div>
        </div>

        <div class="p-8">
            <div class="flex justify-between items-start mb-6">
                <div>
                    <div class="flex items-center gap-2 mb-2">
                        <span class="text-[10px] font-bold px-2 py-0.5 rounded border {{ $broadcast->priority == 'Critical' ? 'border-red-300 text-red-500 bg-red-50' : 'border-slate-200 text-slate-500 bg-slate-50' }}">
                            {{ $broadcast->priority }} Priority
                        </span>
                    </div>
                    <div class="flex items-center gap-4 text-slate-400 text-xs">
                        <span class="flex items-center gap-1"><i class="fa-regular fa-calendar"></i> {{ \Carbon\Carbon::parse($broadcast->created_at)->format('d M, Y H:i') }}</span>
                    </div>
                </div>
                <div class="flex gap-2">
                    @php $channels = json_decode($broadcast->channels, true) ?? []; @endphp
                    @if(in_array('app', $channels)) <span class="bg-slate-100 text-slate-600 px-2 py-1 rounded text-[10px] font-bold uppercase"><i class="fa-solid fa-bell mr-1"></i> App</span> @endif
                    @if(in_array('email', $channels)) <span class="bg-slate-100 text-slate-600 px-2 py-1 rounded text-[10px] font-bold uppercase"><i class="fa-solid fa-envelope mr-1"></i> Email</span> @endif
                </div>
            </div>

            <div class="prose max-w-none text-slate-600 text-sm leading-relaxed mb-8 whitespace-pre-line">
                {{ $broadcast->message }}
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="flex items-center gap-3 p-3 bg-slate-50 rounded-2xl border border-slate-100">
                    <div class="w-10 h-10 bg-indigo-100 text-indigo-600 rounded-xl flex items-center justify-center"><i class="fa-solid fa-users"></i></div>
                    <div>
                        <p class="text-[10px] font-bold text-slate-400 uppercase">Target Audience</p>
                        <p class="text-sm font-semibold text-slate-700">{{ $broadcast->target_audience }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-3 p-3 bg-slate-50 rounded-2xl border border-slate-100">
                    <div class="w-10 h-10 bg-emerald-100 text-emerald-600 rounded-xl flex items-center justify-center"><i class="fa-solid fa-graduation-cap"></i></div>
                    <div class="flex-1">
                        <p class="text-[10px] font-bold text-slate-400 uppercase">Targeted Groups</p>
                        <p class="text-sm font-semibold text-slate-700">
                            @if($targets->isEmpty()) All Classes & Sections @else
                                @foreach($targets as $className => $group)
                                    {{ $className ?: 'General' }} ({{ $group->pluck('section_name')->filter()->implode(', ') ?: 'All Sections' }}){{ !$loop->last ? ', ' : '' }}
                                @endforeach
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection