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

@section('content')
<div class="page-header">
    <h1><i class="fas fa-bullhorn" style="color:#0097c4"></i> Notice Board</h1>
    <a href="{{ route('notices.create') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i> Post Notice
    </a>
</div>

<!-- Search -->
<form method="GET">
    <div style="background:white;border:1px solid #e2e8f0;border-radius:10px;padding:16px;margin-bottom:20px;display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;">
        <div style="flex:2;min-width:200px;">
            <label style="font-size:0.8rem;font-weight:500;display:block;margin-bottom:5px;">Search</label>
            <input type="text" name="search" class="form-control" value="{{ request('search') }}" placeholder="Title or content...">
        </div>
        <div style="flex:1;min-width:120px;">
            <label style="font-size:0.8rem;font-weight:500;display:block;margin-bottom:5px;">Status</label>
            <select name="status" class="form-control">
                <option value="">All</option>
                <option value="active"   {{ request('status') === 'active'   ? 'selected':'' }}>Active</option>
                <option value="inactive" {{ request('status') === 'inactive' ? 'selected':'' }}>Inactive</option>
            </select>
        </div>
        <div class="flex gap-2" style="flex-shrink:0;">
            <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> Search</button>
            <a href="{{ route('notices.index') }}" class="btn btn-secondary"><i class="fas fa-times"></i></a>
        </div>
    </div>
</form>

<!-- Notice Cards -->
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;">
    @forelse($notices as $notice)
    <div style="background:white;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;
                border-top: 4px solid {{ $notice->is_active ? '#0097c4' : '#94a3b8' }};">
        <div style="padding:16px 18px;">
            <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;">
                <h3 style="font-size:0.95rem;font-weight:700;color:#1e293b;flex:1;margin-right:8px;">{{ $notice->title }}</h3>
                <span class="badge {{ $notice->is_active ? 'badge-success' : 'badge-secondary' }}">
                    {{ $notice->is_active ? 'Active' : 'Inactive' }}
                </span>
            </div>
            <p style="font-size:0.85rem;color:#475569;line-height:1.5;margin-bottom:12px;">
                {{ \Str::limit($notice->content, 120) }}
            </p>
            <div style="display:flex;justify-content:space-between;align-items:center;">
                <span style="font-size:0.75rem;color:#94a3b8;">
                    <i class="fas fa-calendar"></i> {{ $notice->published_date->format('d M Y') }}
                </span>
                <div class="flex gap-2">
                    <a href="{{ route('notices.edit', $notice) }}" class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></a>
                    <form method="POST" action="{{ route('notices.destroy', $notice) }}" onsubmit="return confirm('Delete notice?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @empty
    <div style="grid-column:1/-1;text-align:center;padding:40px;color:#94a3b8;background:white;border-radius:10px;border:1px solid #e2e8f0;">
        <i class="fas fa-bullhorn" style="font-size:2rem;display:block;margin-bottom:8px;"></i>
        No notices found.
    </div>
    @endforelse
</div>

@if($notices->hasPages())
    <div style="margin-top:20px;">{{ $notices->links() }}</div>
@endif
@endsection