<x-app-layout>
<x-module-hero
    :title="$emailSubscriber->name ?? $emailSubscriber->email"
    :description="'Subscriber details for ' . $emailSubscriber->email"
    icon="fa-user-check">
    <x-slot name="backButton">
        <a href="{{ route('email-subscribers.index') }}" class="inline-flex items-center gap-2 text-white/80 hover:text-white text-sm transition">
            <i class="fas fa-arrow-left"></i> Back to Subscribers
        </a>
    </x-slot>
    <x-slot name="tabs">
        @can('view email subscribers')
        <a href="{{ route('email-subscribers.index') }}"
           class="module-hero-tab">
            <i class="fas fa-list"></i> All Subscribers
        </a>
        @endcan
    </x-slot>
</x-module-hero>

<div class="p-6">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {{-- Subscriber Information Card --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 bg-gray-50">
                <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                    <i class="fas fa-user text-gray-400"></i> Subscriber Information
                </h3>
            </div>
            <div class="divide-y divide-gray-100">
                <div class="px-6 py-4 flex items-start gap-4">
                    <span class="w-36 flex-shrink-0 text-xs font-semibold text-gray-500 uppercase tracking-wide pt-0.5">Email</span>
                    <span class="text-sm font-medium text-gray-800 break-all">{{ $emailSubscriber->email }}</span>
                </div>
                <div class="px-6 py-4 flex items-start gap-4">
                    <span class="w-36 flex-shrink-0 text-xs font-semibold text-gray-500 uppercase tracking-wide pt-0.5">Name</span>
                    <span class="text-sm text-gray-700">{{ $emailSubscriber->name ?? '—' }}</span>
                </div>
                <div class="px-6 py-4 flex items-start gap-4">
                    <span class="w-36 flex-shrink-0 text-xs font-semibold text-gray-500 uppercase tracking-wide pt-0.5">Status</span>
                    <div>
                        @if($emailSubscriber->unsubscribed_at)
                            <span class="inline-flex items-center px-2.5 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($emailSubscriber->is_active && $emailSubscriber->confirmed_at)
                            <span class="inline-flex items-center px-2.5 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.5 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
                    </div>
                </div>
                <div class="px-6 py-4 flex items-start gap-4">
                    <span class="w-36 flex-shrink-0 text-xs font-semibold text-gray-500 uppercase tracking-wide pt-0.5">IP Address</span>
                    <span class="text-sm text-gray-700 font-mono">{{ $emailSubscriber->ip_address ?? '—' }}</span>
                </div>
            </div>
        </div>

        {{-- Subscription Timeline Card --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 bg-gray-50">
                <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                    <i class="fas fa-clock text-gray-400"></i> Subscription Timeline
                </h3>
            </div>
            <div class="divide-y divide-gray-100">
                <div class="px-6 py-4 flex items-start gap-4">
                    <span class="w-36 flex-shrink-0 text-xs font-semibold text-gray-500 uppercase tracking-wide pt-0.5">Subscribed At</span>
                    <div>
                        <span class="text-sm text-gray-700">{{ $emailSubscriber->subscribed_at->format('d M Y, H:i:s') }}</span>
                        <span class="text-xs text-gray-400 ml-2">({{ $emailSubscriber->subscribed_at->diffForHumans() }})</span>
                    </div>
                </div>
                <div class="px-6 py-4 flex items-start gap-4">
                    <span class="w-36 flex-shrink-0 text-xs font-semibold text-gray-500 uppercase tracking-wide pt-0.5">Confirmed At</span>
                    <div>
                        @if($emailSubscriber->confirmed_at)
                            <span class="text-sm text-green-600 font-medium">{{ $emailSubscriber->confirmed_at->format('d M Y, H:i:s') }}</span>
                            <span class="text-xs text-gray-400 ml-2">({{ $emailSubscriber->confirmed_at->diffForHumans() }})</span>
                        @else
                            <span class="text-sm text-yellow-600 italic">Not yet confirmed</span>
                        @endif
                    </div>
                </div>
                @if($emailSubscriber->unsubscribed_at)
                    <div class="px-6 py-4 flex items-start gap-4">
                        <span class="w-36 flex-shrink-0 text-xs font-semibold text-gray-500 uppercase tracking-wide pt-0.5">Unsubscribed At</span>
                        <div>
                            <span class="text-sm text-red-600 font-medium">{{ $emailSubscriber->unsubscribed_at->format('d M Y, H:i:s') }}</span>
                            <span class="text-xs text-gray-400 ml-2">({{ $emailSubscriber->unsubscribed_at->diffForHumans() }})</span>
                        </div>
                    </div>
                @endif
                <div class="px-6 py-4 flex items-start gap-4">
                    <span class="w-36 flex-shrink-0 text-xs font-semibold text-gray-500 uppercase tracking-wide pt-0.5">Created</span>
                    <span class="text-sm text-gray-700">{{ $emailSubscriber->created_at->format('d M Y, H:i:s') }}</span>
                </div>
                <div class="px-6 py-4 flex items-start gap-4">
                    <span class="w-36 flex-shrink-0 text-xs font-semibold text-gray-500 uppercase tracking-wide pt-0.5">Token</span>
                    <span class="text-xs text-gray-400 font-mono break-all">{{ $emailSubscriber->confirmation_token }}</span>
                </div>
            </div>
        </div>
    </div>
</div>
</x-app-layout>
