@extends('layouts.admin')

@section('title', 'Messages')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Messages <span class="page-title-count">({{ $messages->total() ?? 0 }})</span></h1>
    </div>
    <div class="page-actions">
        <a href="{{ route('admin.messages.compose') }}" class="btn btn-primary">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
            Compose Message
        </a>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <form method="GET" action="{{ route('admin.messages') }}" class="filter-bar">
            <div class="filter-search">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="M12 12l4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search messages..." class="filter-search-input">
            </div>
            <div class="filter-group">
                <select name="type" class="filter-select">
                    <option value="">All Types</option>
                    <option value="system" {{ request('type') === 'system' ? 'selected' : '' }}>System</option>
                    <option value="announcement" {{ request('type') === 'announcement' ? 'selected' : '' }}>Announcement</option>
                    <option value="alert" {{ request('type') === 'alert' ? 'selected' : '' }}>Alert</option>
                    <option value="notification" {{ request('type') === 'notification' ? 'selected' : '' }}>Notification</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary btn-sm">Filter</button>
        </form>
    </div>

    <x-data-table :emptyMessage="'No messages found.'" :paginator="$messages ?? null">
        <x-slot:thead>
            <th>Subject</th>
            <th>Type / Channel</th>
            <th>To</th>
            <th>From</th>
            <th>Date</th>
            <th>Actions</th>
        </x-slot:thead>
        <x-slot:tbody>
            @forelse($messages ?? [] as $message)
            <tr>
                <td class="text-semibold">{{ Str::limit($message->subject, 40) }}</td>
                <td>
                    <span class="badge badge-{{ $message->type === 'announcement' ? 'blue' : ($message->type === 'alert' ? 'red' : 'green') }}">{{ ucfirst($message->type) }}</span>
                    @if(($message->channel ?? 'internal') === 'email')
                    <span class="badge badge-purple">Email</span>
                    @else
                    <span class="badge badge-gray">In-App</span>
                    @endif
                </td>
                <td>{{ $message->recipient_name ?? 'System' }}</td>
                <td>{{ $message->sender_email ?? $message->sender_name ?? 'System' }}</td>
                <td>{{ $message->created_at->format('M d, Y H:i') }}</td>
                <td>
                    <a href="{{ route('admin.messages.show', $message->id) }}" class="btn btn-sm btn-outline">View</a>
                    <form action="{{ route('admin.messages.destroy', $message->id) }}" method="POST" class="inline-block" onsubmit="return confirm('Delete this message?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="6">
                    <div class="data-table-empty-content">
                        <svg width="48" height="48" viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="24" fill="#F1F5F9"/><path d="M12 16h24a2 2 0 012 2v12a2 2 0 01-2 2H18l-6 4V18a2 2 0 012-2z" stroke="#94A3B8" stroke-width="1.5"/></svg>
                        <p>No messages found.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </x-slot:tbody>
    </x-data-table>
</div>
@endsection