@extends('layouts.admin')

@section('title', 'Newsletter subscribers')

@section('content')
    <div class="mb-5 flex flex-wrap items-center justify-between gap-4">
        <form method="GET" class="flex items-center gap-3">
            <div class="relative">
                <x-icon name="search" class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-text-muted" />
                <input type="search" name="q" value="{{ request('q') }}" placeholder="Search email…"
                       class="form-input w-64 pl-9" aria-label="Search subscribers">
            </div>

            <select name="status" onchange="this.form.submit()" class="form-input w-44" aria-label="Filter by status">
                <option value="">All</option>
                <option value="active" @selected(request('status') === 'active')>Subscribed</option>
                <option value="inactive" @selected(request('status') === 'inactive')>Unsubscribed</option>
            </select>

            <span class="pill bg-primary-50 text-primary">{{ $total }} active</span>
        </form>

        <a href="{{ route('admin.subscribers.export') }}" class="btn-outline">
            <x-icon name="download" class="size-4" /> Export CSV
        </a>
    </div>

    <div class="admin-card overflow-hidden">
        @if ($subscribers->isEmpty())
            <p class="px-6 py-16 text-center text-sm text-text-muted">No subscribers yet.</p>
        @else
            <div class="overflow-x-auto">
                <table class="table-admin">
                    <thead>
                        <tr>
                            <th scope="col">Email</th>
                            <th scope="col">Name</th>
                            <th scope="col">Status</th>
                            <th scope="col">Subscribed</th>
                            <th scope="col"><span class="sr-only">Actions</span></th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($subscribers as $subscriber)
                            <tr>
                                <td class="font-medium text-text">{{ $subscriber->email }}</td>
                                <td class="text-sm">{{ $subscriber->name ?: '—' }}</td>
                                <td>
                                    <span @class([
                                        'pill',
                                        'bg-primary-50 text-primary' => $subscriber->is_active,
                                        'bg-surface-muted text-text-muted' => ! $subscriber->is_active,
                                    ])>{{ $subscriber->is_active ? 'Subscribed' : 'Unsubscribed' }}</span>
                                </td>
                                <td class="text-sm text-text-muted">{{ $subscriber->subscribed_at?->format('d M Y') }}</td>
                                <td class="text-right">
                                    @can('subscribers.delete')
                                        <form action="{{ route('admin.subscribers.destroy', $subscriber) }}" method="POST"
                                              onsubmit="return confirm('Remove {{ $subscriber->email }}?')">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="rounded p-1.5 text-text-muted hover:bg-error/5 hover:text-error" title="Remove">
                                                <x-icon name="trash" class="size-4" />
                                            </button>
                                        </form>
                                    @endcan
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if ($subscribers->hasPages())
                <div class="border-t border-border px-5 py-4">{{ $subscribers->links() }}</div>
            @endif
        @endif
    </div>
@endsection