@extends('layouts.app')
@section('title', 'Announcements')
@section('page-title', 'Announcements')

@section('content')
<div class="space-y-6">
    @if(auth()->user()->isAdmin() || auth()->user()->isTeacher())
    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100" x-data="{ open: false }">
        <button @click="open = !open" class="flex items-center text-blue-600 hover:text-blue-700 font-medium">
            <i class="fas fa-plus mr-2"></i>Create Announcement
        </button>
        <form method="POST" action="{{ route('communication.announcements.store') }}" x-show="open" x-transition class="mt-4 space-y-4">
            @csrf
            <input type="text" name="title" placeholder="Title" required class="w-full border border-gray-300 rounded-lg px-4 py-2">
            <textarea name="content" rows="3" placeholder="Content..." required class="w-full border border-gray-300 rounded-lg px-4 py-2"></textarea>
            <div class="flex gap-4">
                <select name="type" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
                    <option value="general">General</option>
                    <option value="class">Class</option>
                    <option value="emergency">Emergency</option>
                </select>
                <select name="audience" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
                    <option value="all">Everyone</option>
                    <option value="teachers">Teachers</option>
                    <option value="students">Students</option>
                    <option value="parents">Parents</option>
                </select>
            </div>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Publish</button>
        </form>
    </div>
    @endif

    @foreach($announcements as $a)
    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 {{ $a->type === 'emergency' ? 'border-l-4 border-l-red-500' : '' }}">
        <div class="flex items-start justify-between">
            <div>
                <h3 class="text-lg font-semibold text-gray-800">{{ $a->title }}</h3>
                <p class="text-sm text-gray-500">{{ $a->creator->name }} • {{ $a->created_at->diffForHumans() }}</p>
            </div>
            <span class="px-2 py-1 text-xs rounded-full {{ $a->type === 'emergency' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700' }}">
                {{ ucfirst($a->type) }}
            </span>
        </div>
        <p class="mt-3 text-gray-700 leading-relaxed">{{ $a->content }}</p>
    </div>
    @endforeach

    {{ $announcements->links() }}
</div>
@endsection