@extends('layouts.admin')

@section('page-title', 'Subscribers')

@section('content')
<div class="py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {{-- Page Header --}}
        <div class="flex justify-between items-start mb-6">
            <div>
                <h2 class="text-2xl font-bold text-gray-900 tracking-tight">Subscribers</h2>
                <p class="text-sm text-gray-500 mt-1">You have total <span class="font-semibold text-indigo-600">{{ $subscribers->total() }}</span> subscribers</p>
            </div>
        </div>

        {{-- Table Card --}}
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h4 class="text-base font-semibold text-gray-900">Subscribers</h4>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr>
                            <th class="text-left py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider w-12">#</th>
                            <th class="text-left py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Email</th>
                            <th class="text-left py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Subscribe At</th>
                            <th class="text-center py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Option</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse($subscribers as $subscriber)
                        <tr class="hover:bg-gray-50/50 transition-colors">
                            <td class="py-3 px-5 text-sm text-gray-500">{{ $loop->iteration + ($subscribers->currentPage() - 1) * $subscribers->perPage() }}</td>
                            <td class="py-3 px-5 text-sm font-medium text-gray-900">
                                {{ Str::mask($subscriber->email, '*', 2, 1) }}
                            </td>
                            <td class="py-3 px-5 text-sm text-gray-700">{{ $subscriber->subscribed_at?->format('M d, Y h:i A') ?? '-' }}</td>
                            <td class="py-3 px-5 text-center">
                                <form action="{{ route('admin.subscribers.destroy', $subscriber) }}" method="POST" class="inline" onsubmit="return confirm('Unsubscribe this email?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="inline-flex items-center justify-center w-8 h-8 rounded-full border border-red-300 text-red-600 hover:bg-red-50 transition-colors" title="Unsubscribe">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/></svg>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="py-16 text-center">
                                <div class="w-16 h-16 mx-auto bg-gray-50 rounded-2xl flex items-center justify-center mb-4">
                                    <svg class="w-8 h-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg>
                                </div>
                                <p class="text-gray-500 font-medium">No subscribers found</p>
                                <p class="text-sm text-gray-400 mt-1">Email subscribers will appear here</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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