@extends('layouts.app')
@section('title', 'Speaking Notes')
@section('page-title', 'Speaking Notes')

@section('content')
<div class="mt-4 space-y-4">

    {{-- Filters + actions bar --}}
    <form method="GET" class="bg-white rounded-xl border border-gray-200 p-4 flex flex-wrap gap-3 items-center">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search title or message…"
               class="flex-1 min-w-48 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">

        <select name="status" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">All Statuses</option>
            @foreach(['draft'=>'Draft','in_review'=>'In Review','approved'=>'Approved','distributed'=>'Distributed','archived'=>'Archived'] as $val => $label)
                <option value="{{ $val }}" {{ request('status') === $val ? 'selected' : '' }}>{{ $label }}</option>
            @endforeach
        </select>

        <select name="urgency" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">All Urgency</option>
            <option value="urgent"   {{ request('urgency') === 'urgent'   ? 'selected' : '' }}>Urgent</option>
            <option value="priority" {{ request('urgency') === 'priority' ? 'selected' : '' }}>Priority</option>
            <option value="routine"  {{ request('urgency') === 'routine'  ? 'selected' : '' }}>Routine</option>
        </select>

        <button type="submit" class="px-4 py-2 bg-npp-blue text-white text-sm rounded-lg hover:bg-blue-800">Filter</button>
        <a href="{{ route('speaking-notes.index') }}" class="px-4 py-2 text-sm text-gray-600 rounded-lg border border-gray-300 hover:bg-gray-50">Clear</a>
        <a href="{{ route('speaking-notes.create') }}"
           class="ml-auto px-4 py-2 bg-npp-red text-white text-sm rounded-lg hover:bg-red-700 font-medium">
            + New Note
        </a>
    </form>

    {{-- Table --}}
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="text-left px-5 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Title</th>
                        <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Urgency</th>
                        <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                        <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Scheduled</th>
                        <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Author</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($notes as $note)
                    <tr class="hover:bg-gray-50">
                        <td class="px-5 py-3">
                            <div class="font-medium text-gray-900">{{ $note->title }}</div>
                            <div class="text-xs text-gray-400 mt-0.5 truncate max-w-xs">{{ Str::limit($note->headline_message, 80) }}</div>
                        </td>
                        <td class="px-4 py-3">
                            <span class="text-xs px-2 py-0.5 rounded-full font-medium {{ $note->urgency_badge }}">
                                {{ $note->urgency_label }}
                            </span>
                        </td>
                        <td class="px-4 py-3">
                            <span class="text-xs px-2 py-0.5 rounded-full font-medium {{ $note->status_badge }}">
                                {{ $note->status_label }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-gray-500 text-xs">
                            {{ $note->scheduled_for ? $note->scheduled_for->format('d M Y') : '—' }}
                        </td>
                        <td class="px-4 py-3 text-gray-600">{{ $note->author?->name ?? '—' }}</td>
                        <td class="px-4 py-3 text-right">
                            <a href="{{ route('speaking-notes.show', $note) }}"
                               class="text-xs text-blue-600 hover:underline">View</a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-5 py-12 text-center text-sm text-gray-400">
                            No speaking notes found.
                            <a href="{{ route('speaking-notes.create') }}" class="text-blue-600 hover:underline ml-1">Create one →</a>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($notes->hasPages())
        <div class="px-5 py-3 border-t border-gray-100">{{ $notes->links() }}</div>
        @endif
    </div>
</div>
@endsection