<x-app-layout>
<x-module-hero title="Email Subscribers" description="Manage newsletter subscribers and export mailing lists" icon="fa-envelope-open">
    <x-slot name="tabs">
        @can('view email subscribers')
        <a href="{{ route('email-subscribers.index') }}"
           class="module-hero-tab active-tab">
            <i class="fas fa-list"></i> All Subscribers
        </a>
        @endcan
    </x-slot>
    @can('export email subscribers')
    <x-slot name="actions">
        @can('manage email subscribers')
        <a href="{{ route('email-subscribers.compose') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-white text-[#1a4731] text-sm font-semibold rounded-lg hover:bg-green-50 transition mr-2">
            <i class="fas fa-paper-plane"></i> Compose
        </a>
        @endcan
        <a href="{{ route('email-subscribers.export') }}"
           class="inline-flex items-center gap-2 px-4 py-2 bg-white text-[#1a4731] text-sm font-semibold rounded-lg hover:bg-green-50 transition">
            <i class="fas fa-file-csv"></i> Export CSV
        </a>
    </x-slot>
    @endcan
</x-module-hero>

<div class="w-full">
    {{-- Search/Filter bar --}}
    <div class="p-4 bg-white border-b">
        <form method="GET" class="flex flex-wrap gap-3 items-end">
            <div class="flex-1 min-w-[200px]">
                <label class="block text-xs font-medium text-gray-600 mb-1">Search</label>
                <input type="text" name="search" value="{{ request('search') }}"
                    placeholder="Search by email or name..."
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">Status</label>
                <select name="status" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                    <option value="">All</option>
                    <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                    <option value="unconfirmed" {{ request('status') == 'unconfirmed' ? 'selected' : '' }}>Unconfirmed</option>
                    <option value="unsubscribed" {{ request('status') == 'unsubscribed' ? 'selected' : '' }}>Unsubscribed</option>
                </select>
            </div>
            <div class="flex gap-2">
                <button type="submit" class="px-4 py-2 bg-[#1a4731] text-white text-sm rounded-lg hover:bg-[#276749] transition">
                    <i class="fas fa-search mr-1"></i> Filter
                </button>
                @if(request()->hasAny(['search', 'status']))
                    <a href="{{ route('email-subscribers.index') }}" class="px-4 py-2 border border-gray-300 text-gray-600 text-sm rounded-lg hover:bg-gray-50 transition">
                        Clear
                    </a>
                @endif
            </div>
        </form>
    </div>

    @if(session('success'))
        <div class="mx-4 mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="mx-4 mt-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
        </div>
    @endif

    @if($subscribers->isEmpty())
        <div class="p-12 text-center text-gray-500">
            <i class="fas fa-inbox text-6xl mb-4 block opacity-30"></i>
            <h3 class="text-xl font-semibold text-gray-700 mb-2">No subscribers found</h3>
            <p class="text-gray-500">
                @if(request()->hasAny(['search', 'status']))
                    No subscribers match your current filters.
                    <a href="{{ route('email-subscribers.index') }}" class="text-green-700 underline">Clear filters</a>
                @else
                    Subscribers will appear here once visitors sign up via the newsletter form.
                @endif
            </p>
        </div>
    @else
        <div class="overflow-x-auto">
            <table class="w-full table-zebra">
                <thead>
                    <tr>
                        <th class="px-4 py-3 text-left th-col-1">Email</th>
                        <th class="px-4 py-3 text-left th-col-2">Name</th>
                        <th class="px-4 py-3 text-left th-col-3">Subscribed At</th>
                        <th class="px-4 py-3 text-left th-col-4">Confirmed At</th>
                        <th class="px-4 py-3 text-left th-col-5">Status</th>
                        <th class="px-4 py-3 text-center th-col-6">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($subscribers as $subscriber)
                        <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                            <td class="px-4 py-3 text-sm font-medium text-gray-800">{{ $subscriber->email }}</td>
                            <td class="px-4 py-3 text-sm text-gray-600">{{ $subscriber->name ?? '—' }}</td>
                            <td class="px-4 py-3 text-sm text-gray-600">
                                {{ $subscriber->subscribed_at->format('d M Y, H:i') }}
                            </td>
                            <td class="px-4 py-3 text-sm">
                                @if($subscriber->confirmed_at)
                                    <span class="text-green-600 font-medium">{{ $subscriber->confirmed_at->format('d M Y, H:i') }}</span>
                                @else
                                    <span class="text-yellow-600 italic">Pending</span>
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                @if($subscriber->unsubscribed_at)
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-gray-100 text-gray-600">
                                        <i class="fas fa-circle text-gray-400 mr-1" style="font-size:6px"></i> Unsubscribed
                                    </span>
                                @elseif($subscriber->is_active && $subscriber->confirmed_at)
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800">
                                        <i class="fas fa-circle text-green-500 mr-1" style="font-size:6px"></i> Active
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">
                                        <i class="fas fa-circle text-yellow-500 mr-1" style="font-size:6px"></i> Unconfirmed
                                    </span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-center">
                                <a href="{{ route('email-subscribers.show', $subscriber) }}"
                                   class="btn-action-view">
                                    <i class="fas fa-eye"></i> View
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

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