@extends('dashboard.base')

@section('content')
    <style>
        .notice-shell {
            max-width: 1180px;
            margin: 0 auto;
        }

        .notice-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1.25rem;
        }

        .notice-title {
            margin: 0;
            font-weight: 700;
            color: #1f2933;
        }

        .notice-summary {
            margin: .25rem 0 0;
            color: #6b7280;
        }

        .notice-panel {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
            overflow: hidden;
        }

        .notice-table {
            margin-bottom: 0;
        }

        .notice-table thead th {
            border-top: 0;
            border-bottom: 1px solid #e5e7eb;
            color: #6b7280;
            font-size: .76rem;
            letter-spacing: .04em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .notice-thumb {
            width: 72px;
            height: 48px;
            border-radius: 6px;
            object-fit: cover;
            background: #f3f4f6;
            border: 1px solid #e5e7eb;
        }

        .notice-thumb-empty {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 72px;
            height: 48px;
            border-radius: 6px;
            color: #9ca3af;
            background: #f3f4f6;
            border: 1px dashed #d1d5db;
            font-size: .76rem;
        }

        .notice-heading {
            max-width: 360px;
            font-weight: 600;
            color: #111827;
        }

        .notice-meta {
            color: #6b7280;
            font-size: .82rem;
        }

        .notice-badge {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            padding: .28rem .62rem;
            font-size: .78rem;
            font-weight: 700;
            text-transform: capitalize;
        }

        .notice-badge-draft {
            color: #92400e;
            background: #fef3c7;
        }

        .notice-badge-published {
            color: #065f46;
            background: #d1fae5;
        }

        .notice-badge-archived {
            color: #4b5563;
            background: #e5e7eb;
        }

        .notice-actions {
            display: flex;
            gap: .4rem;
            justify-content: flex-end;
            white-space: nowrap;
        }

        .notice-empty {
            padding: 3rem 1.5rem;
            text-align: center;
            color: #6b7280;
        }

        @media (max-width: 767.98px) {
            .notice-toolbar {
                align-items: flex-start;
                flex-direction: column;
            }

            .notice-actions {
                justify-content: flex-start;
            }
        }
    </style>

    <div class="container-fluid">
        <div class="notice-shell">
            <div class="notice-toolbar">
                <div>
                    <h3 class="notice-title">Public Notices</h3>
                    <p class="notice-summary">{{ $notices->count() }} notice{{ $notices->count() === 1 ? '' : 's' }} available for management</p>
                </div>
                <a href="{{ url('/public_notices/create') }}" class="btn btn-primary">
                    Create Notice
                </a>
            </div>

            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            <div class="notice-panel">
                @if($notices->isEmpty())
                    <div class="notice-empty">
                        <h5>No public notices yet</h5>
                        <p class="mb-3">Create the first notice to make it available for publishing.</p>
                        <a href="{{ url('/public_notices/create') }}" class="btn btn-primary">Create Notice</a>
                    </div>
                @else
                    <div class="table-responsive">
                        <table class="table notice-table">
                            <thead>
                                <tr>
                                    <th>Image</th>
                                    <th>Notice</th>
                                    <th>Type</th>
                                    <th>Status</th>
                                    <th>Published</th>
                                    <th>Expires</th>
                                    <th class="text-right">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($notices as $notice)
                                    <tr>
                                        <td>
                                            @if($notice->image_url)
                                                <img class="notice-thumb" src="{{ $notice->image_url }}" alt="{{ $notice->title }}">
                                            @else
                                                <span class="notice-thumb-empty">No image</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="notice-heading">{{ $notice->title }}</div>
                                            <div class="notice-meta">#{{ $notice->id }}</div>
                                        </td>
                                        <td>{{ $notice->notice_type ?: 'General' }}</td>
                                        <td>
                                            <span class="notice-badge notice-badge-{{ $notice->status }}">
                                                {{ $notice->status }}
                                            </span>
                                        </td>
                                        <td>{{ $notice->published_date ? $notice->published_date->format('Y-m-d') : 'Not set' }}</td>
                                        <td>{{ $notice->expiry_date ? $notice->expiry_date->format('Y-m-d') : 'No expiry' }}</td>
                                        <td>
                                            <div class="notice-actions">
                                                <a href="{{ url('/public_notices/' . $notice->id . '/edit') }}" class="btn btn-sm btn-outline-secondary">Edit</a>
                                                <form action="{{ url('/public_notices/' . $notice->id) }}" method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button class="btn btn-sm btn-outline-danger" onclick="return confirm('Delete this notice?')">Delete</button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection