@extends('layouts.admin')
@section('title', 'Daftar Subscriber')
@section('page-title', 'Subscriber Newsletter')
@section('breadcrumb')
<span class="current">Subscriber</span>
@endsection

@section('content')
<div class="admin-card">
    <div class="p-6 border-b border-gray-100 flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-gray-50/50">
        <div>
            <h2 class="text-lg font-bold text-gray-800">Daftar Langganan Email</h2>
            <p class="text-sm text-gray-500 mt-1">Daftar pengunjung yang berlangganan newsletter.</p>
        </div>
        <div class="text-sm font-semibold text-gray-600 bg-white px-4 py-2 rounded-xl border border-gray-200">
            Total: <span class="text-accent">{{ $subscribers->total() }}</span> Email
        </div>
    </div>

    @if($subscribers->count() > 0)
    <div class="overflow-x-auto">
        <table class="admin-table">
            <thead>
                <tr>
                    <th class="w-16 text-center">No</th>
                    <th>Email Subscriber</th>
                    <th>Status</th>
                    <th>Tanggal Daftar</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($subscribers as $index => $subscriber)
                <tr class="hover:bg-gray-50/50 transition-colors">
                    <td class="text-center text-gray-400 text-sm">
                        {{ $subscribers->firstItem() + $index }}
                    </td>
                    <td>
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full bg-accent/10 flex items-center justify-center text-accent">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                            </div>
                            <span class="font-semibold text-gray-800">{{ $subscriber->email }}</span>
                        </div>
                    </td>
                    <td>
                        @if($subscriber->is_active)
                        <span class="admin-badge admin-badge-success flex w-fit items-center gap-1.5">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Aktif
                        </span>
                        @else
                        <span class="admin-badge admin-badge-gray flex w-fit items-center gap-1.5">
                            <span class="w-1.5 h-1.5 rounded-full bg-gray-400"></span> Nonaktif
                        </span>
                        @endif
                    </td>
                    <td class="text-gray-500 text-sm">
                        {{ $subscriber->created_at->format('d M Y, H:i') }}
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    @if($subscribers->hasPages())
    <div class="p-6 border-t border-gray-100">
        {{ $subscribers->links() }}
    </div>
    @endif
    @else
    <div class="admin-empty">
        <div class="admin-empty-icon">
            <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
        </div>
        <h3 class="admin-empty-title">Belum ada subscriber</h3>
        <p class="admin-empty-text">Daftar email yang berlangganan newsletter akan muncul di sini.</p>
    </div>
    @endif
</div>
@endsection