{{-- resources/views/workspace/announcements/index.blade.php --}}
@extends('workspace.layouts.workspace')
@section('title', 'Announcements')
@section('page-title', 'Announcements')

@section('ws-content')

{{-- Admin: post announcement --}}
@if(auth()->user()->isAdmin())
<div class="ws-card" style="margin-bottom:1.25rem;">
    <h3 style="font-family:'Fraunces',serif;font-size:0.9rem;font-weight:700;margin-bottom:0.85rem;">📢 Post Announcement</h3>
    <form action="{{ route('admin.announcements.store') }}" method="POST">
        @csrf
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.65rem;">
            <div style="grid-column:1/-1;">
                <label class="form-label">Title *</label>
                <input type="text" name="title" placeholder="Announcement title…" class="form-field" required>
            </div>
            <div style="grid-column:1/-1;">
                <label class="form-label">Message *</label>
                <textarea name="body" rows="3" class="form-field" placeholder="Write your announcement here…" required></textarea>
            </div>
            <div>
                <label class="form-label">Type</label>
                <select name="type" class="form-field">
                    <option value="info">ℹ️ Info</option>
                    <option value="success">✅ Success</option>
                    <option value="warning">⚠️ Warning</option>
                    <option value="urgent">🚨 Urgent</option>
                </select>
            </div>
            <div>
                <label class="form-label">Expires At (optional)</label>
                <input type="datetime-local" name="expires_at" class="form-field" min="{{ now()->format('Y-m-d\TH:i') }}">
            </div>
            <div style="grid-column:1/-1;">
                <button type="submit" class="btn btn-primary">Post to All Team Members</button>
            </div>
        </div>
    </form>
</div>
@endif

{{-- Announcement list --}}
@if($announcements->count())
<div style="display:flex;flex-direction:column;gap:0.75rem;">
    @foreach($announcements as $ann)
    @php $isRead = $ann->isReadBy($user); @endphp
    <div class="ann-{{ $ann->type }}" style="padding:1rem 1.25rem;border-radius:10px;{{ $isRead ? 'opacity:0.55;' : '' }}">
        <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;">
            <div style="flex:1;">
                <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem;flex-wrap:wrap;">
                    <span style="font-size:0.8rem;font-weight:700;color:#0f0f14;">{{ $ann->title }}</span>
                    @if(!$isRead)
                    <span style="background:#2d3aff;color:#fff;font-size:0.58rem;font-weight:700;padding:0.1rem 0.45rem;border-radius:999px;letter-spacing:0.06em;">NEW</span>
                    @endif
                    <span style="font-size:0.65rem;color:#9ca3af;">{{ $ann->created_at->diffForHumans() }}</span>
                    @if($ann->author)
                    <span style="font-size:0.65rem;color:#9ca3af;">by {{ $ann->author->name }}</span>
                    @endif
                </div>
                <p style="font-size:0.82rem;color:#374151;line-height:1.65;">{{ $ann->body }}</p>
                @if($ann->expires_at)
                <p style="font-size:0.68rem;color:#9ca3af;margin-top:0.4rem;">Expires {{ $ann->expires_at->format('d M Y, H:i') }}</p>
                @endif
            </div>
            <div style="display:flex;gap:0.4rem;flex-shrink:0;">
                @if(!$isRead)
                <form action="{{ route('workspace.announcements.read', $ann) }}" method="POST">
                    @csrf
                    <button type="submit" class="btn btn-xs btn-outline">Mark read</button>
                </form>
                @else
                <span style="font-size:0.68rem;color:#10b981;font-weight:600;display:flex;align-items:center;gap:0.2rem;">✓ Read</span>
                @endif

                @if(auth()->user()->isAdmin())
                <form action="{{ route('admin.announcements.destroy', $ann) }}" method="POST"
                      onsubmit="return confirm('Delete this announcement?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn btn-xs btn-danger">Delete</button>
                </form>
                @endif
            </div>
        </div>
    </div>
    @endforeach
</div>
@else
<div style="text-align:center;padding:4rem 1rem;border:1.5px dashed #e5e7eb;border-radius:12px;">
    <p style="font-family:'Fraunces',serif;font-size:1rem;font-weight:700;color:#0f0f14;margin-bottom:0.4rem;">No announcements</p>
    <p style="font-size:0.8rem;color:#9ca3af;">You're all caught up. Check back later for updates from leadership.</p>
</div>
@endif

@endsection