@extends('layouts.admin')

@section('title', 'Announcements')

@section('content')
<div class="admin-page-header">
    <h1>Announcement Bar</h1>
    <div>
        @can('announcements.create')
        <a href="{{ route('admin.announcements.create') }}" class="admin-btn-primary">
            <i class="bi bi-plus"></i> Add Announcement
        </a>
        @endcan
    </div>
</div>

<div class="admin-card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="admin-table table table-hover">
                <thead>
                    <tr>
                        <th>Text</th>
                        <th>Sort Order</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($announcements as $announcement)
                        <tr>
                            <td>
                                <div style="max-width: 500px;">
                                    {{ \Illuminate\Support\Str::limit($announcement->text, 100) }}
                                </div>
                            </td>
                            <td>{{ $announcement->sort_order }}</td>
                            <td>
                                <span class="badge-modern {{ $announcement->is_active ? 'badge-modern-success' : 'badge-modern-danger' }}">
                                    {{ $announcement->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td>
                                <div class="d-flex gap-2">
                                    @can('announcements.update')
                                    <a href="{{ route('admin.announcements.edit', $announcement->id) }}" class="admin-action-btn admin-action-btn-sm admin-btn-primary">
                                        <i class="bi bi-pencil"></i> Edit
                                    </a>
                                    @endcan
                                    @can('announcements.delete')
                                    <form action="{{ route('admin.announcements.destroy', $announcement->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this announcement?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="admin-action-btn admin-action-btn-sm" style="background: #ef4444; height: -webkit-fill-available; color: white;">
                                            <i class="bi bi-trash"></i> Delete
                                        </button>
                                    </form>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center py-5">
                                <div class="admin-empty-state">
                                    <i class="bi bi-megaphone"></i>
                                    <h3>No Announcements Found</h3>
                                    @can('announcements.create')
                                    <p>Get started by creating your first announcement.</p>
                                    <a href="{{ route('admin.announcements.create') }}" class="admin-btn-primary">
                                        <i class="bi bi-plus"></i> Add Announcement
                                    </a>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($announcements->hasPages())
        <div class="pagination-wrapper mt-4">
            <div class="d-flex justify-content-end align-items-center gap-3 flex-wrap">
                <div class="pagination-info-text">
                    Showing <strong>{{ $announcements->firstItem() ?? 0 }}</strong>–<strong>{{ $announcements->lastItem() ?? 0 }}</strong> 
                    of <strong>{{ $announcements->total() }}</strong> announcements
                </div>
                <div class="pagination-controls">
                    {{ $announcements->links('vendor.pagination.admin-categories') }}
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection