@extends('layouts.staff')

@section('title', '⚙️ Manage Library News › Koha Staff')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('staff.administration') }}">Administration</a>
    <span class="sep">›</span>
    <span>Library News</span>
@endsection

@section('content')
<div style="width:100%; display:flex; flex-direction:column;">
    <div class="checkout-panel">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
            <h3>📢 Library News & OPAC Announcements Management</h3>
        </div>

        @if(session('success'))
            <div style="background:#d4edda; color:#155724; border:1px solid #c3e6cb; padding:10px; margin-bottom:12px; border-radius:3px; font-size:13px;">
                {{ session('success') }}
            </div>
        @endif

        {{-- Add News Form --}}
        <div style="background:#f8f9fa; padding:14px; border:1px solid #e9ecef; border-radius:4px; margin-bottom:20px;">
            <h4 style="margin-top:0; margin-bottom:10px; color:#004085;">+ Publish New Announcement</h4>
            <form action="{{ route('staff.admin.news.store') }}" method="POST">
                @csrf
                <div style="display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:8px;">
                    <div style="flex:2; min-width:240px;">
                        <input class="form-input" name="title" required placeholder="Announcement Title..." type="text">
                    </div>
                    <div style="width:150px;">
                        <input class="form-input" name="published_date" required type="date" value="{{ date('Y-m-d') }}">
                    </div>
                    <div>
                        <label style="font-size:12px; cursor:pointer;"><input type="checkbox" name="active" value="1" checked> Active on OPAC</label>
                    </div>
                    <div>
                        <button type="submit" class="form-btn primary">📢 Publish News</button>
                    </div>
                </div>
                <div>
                    <textarea class="form-input" name="content" required rows="3" style="font-family:inherit; font-size:inherit;" placeholder="Announcement body content..."></textarea>
                </div>
            </form>
        </div>

        {{-- News List Table --}}
        <h4 style="color:#1b4880; margin-bottom:8px;">Current Published News ({{ count($newsList) }})</h4>
        <table class="items-table">
            <thead>
                <tr>
                    <th style="width:120px;">Date</th>
                    <th style="width:220px;">Title</th>
                    <th>Announcement Content</th>
                    <th style="width:80px;">Status</th>
                    <th style="width:140px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($newsList as $item)
                    <tr>
                        <form action="{{ route('staff.admin.news.update', $item->id) }}" method="POST">
                            @csrf
                            <td><input class="form-input" name="published_date" value="{{ $item->published_date }}" required type="date" style="padding:3px;"></td>
                            <td><input class="form-input" name="title" value="{{ $item->title }}" required type="text"></td>
                            <td><textarea class="form-input" name="content" rows="2" style="font-family:inherit; font-size:12px;" required>{{ $item->content }}</textarea></td>
                            <td>
                                <label><input type="checkbox" name="active" value="1" {{ $item->active ? 'checked' : '' }}> {{ $item->active ? 'Active' : 'Hidden' }}</label>
                            </td>
                            <td>
                                <button type="submit" class="form-btn" style="padding:3px 8px; font-size:11px;">💾 Save</button>
                                <button type="button" class="form-btn" onclick="if(confirm('Delete announcement: {{ addslashes($item->title) }}?')) { document.getElementById('delete-news-{{ $item->id }}').submit(); }" style="padding:3px 8px; font-size:11px; background:#dc3545; color:white; border-color:#dc3545;">🗑️ Delete</button>
                            </td>
                        </form>
                        <form id="delete-news-{{ $item->id }}" action="{{ route('staff.admin.news.delete', $item->id) }}" method="POST" style="display:none;">
                            @csrf
                            @method('DELETE')
                        </form>
                    </tr>
                @empty
                    <tr><td colspan="5" style="text-align:center; color:#777;">No announcements found.</td></tr>
                @endforelse
            </tbody>
        </table>

    </div>
</div>
@endsection