@extends('layouts.app')

@section('title', 'Newsletter Subscribers')
@section('nav_newsletter', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Newsletter Subscribers')
@section('page_subtitle', 'People who subscribed via the public website')

@section('content')

@if(session('success'))
<div class="mb-4 px-4 py-3 bg-green-50 border-[0.5px] border-green-200 rounded-xl text-sm text-green-700">
    {{ session('success') }}
</div>
@endif

{{-- Stats + actions bar --}}
<div class="flex flex-wrap items-center justify-between gap-3 mb-5">
    <div class="flex gap-2">
        <a href="{{ route('newsletter.index') }}"
           class="px-3 py-1.5 text-xs font-medium rounded-lg border-[0.5px] transition-colors
                  {{ $filter === 'all' ? 'bg-gray-800 text-white border-gray-800' : 'bg-white text-gray-500 border-gray-200 hover:bg-gray-50' }}">
            All <span class="ml-1 {{ $filter === 'all' ? 'text-gray-400' : 'text-gray-400' }}">{{ $counts['all'] }}</span>
        </a>
        <a href="{{ route('newsletter.index', ['filter' => 'active']) }}"
           class="px-3 py-1.5 text-xs font-medium rounded-lg border-[0.5px] transition-colors
                  {{ $filter === 'active' ? 'bg-green-600 text-white border-green-600' : 'bg-white text-gray-500 border-gray-200 hover:bg-gray-50' }}">
            Active <span class="ml-1 {{ $filter === 'active' ? 'text-green-200' : 'text-gray-400' }}">{{ $counts['active'] }}</span>
        </a>
        <a href="{{ route('newsletter.index', ['filter' => 'unsubscribed']) }}"
           class="px-3 py-1.5 text-xs font-medium rounded-lg border-[0.5px] transition-colors
                  {{ $filter === 'unsubscribed' ? 'bg-gray-600 text-white border-gray-600' : 'bg-white text-gray-500 border-gray-200 hover:bg-gray-50' }}">
            Unsubscribed <span class="ml-1 {{ $filter === 'unsubscribed' ? 'text-gray-300' : 'text-gray-400' }}">{{ $counts['unsubscribed'] }}</span>
        </a>
    </div>

    <div class="flex items-center gap-2">
        {{-- Search --}}
        <form method="GET" action="{{ route('newsletter.index') }}" class="flex items-center gap-2">
            @if($filter !== 'all')
            <input type="hidden" name="filter" value="{{ $filter }}">
            @endif
            <input type="text" name="search" value="{{ $search }}" placeholder="Search name or email…"
                   class="border-[0.5px] border-gray-200 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 w-52 transition-colors">
            <button type="submit"
                    class="px-3 py-1.5 text-xs font-medium bg-white border-[0.5px] border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                Search
            </button>
            @if($search)
            <a href="{{ route('newsletter.index', $filter !== 'all' ? ['filter' => $filter] : []) }}"
               class="text-xs text-gray-400 hover:text-gray-600 transition-colors">Clear</a>
            @endif
        </form>

        {{-- Export --}}
        <a href="{{ route('newsletter.export', ['filter' => $filter === 'all' ? 'all' : ($filter === 'unsubscribed' ? 'unsubscribed' : 'active')]) }}"
           class="px-3 py-1.5 text-xs font-semibold bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors flex items-center gap-1.5">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
            </svg>
            Export CSV
        </a>
    </div>
</div>

{{-- Table --}}
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
    @if($subscribers->isEmpty())
    <p class="px-5 py-12 text-center text-gray-300 text-sm">
        @if($search)
            No subscribers match "{{ $search }}".
        @else
            No subscribers yet. The subscribe form is live on the public website.
        @endif
    </p>
    @else
    <table class="w-full text-sm">
        <thead>
            <tr class="border-b border-gray-100 bg-gray-50/50">
                <th class="px-5 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Subscriber</th>
                <th class="px-4 py-2.5 text-center text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Status</th>
                <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Subscribed</th>
                <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">IP Address</th>
                <th class="px-5 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($subscribers as $sub)
            <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition-colors {{ !$sub->active ? 'opacity-60' : '' }}">
                <td class="px-5 py-3">
                    <p class="font-medium text-gray-800 text-sm">{{ $sub->email }}</p>
                    @if($sub->name)
                    <p class="text-xs text-gray-400">{{ $sub->name }}</p>
                    @endif
                </td>
                <td class="px-4 py-3 text-center">
                    @if($sub->active)
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-semibold border-[0.5px] bg-green-50 text-green-700 border-green-200">
                        <span class="w-1.5 h-1.5 rounded-full bg-green-400 inline-block"></span>Active
                    </span>
                    @else
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-semibold border-[0.5px] bg-gray-100 text-gray-500 border-gray-300">
                        <span class="w-1.5 h-1.5 rounded-full bg-gray-400 inline-block"></span>Unsubscribed
                    </span>
                    @endif
                </td>
                <td class="px-4 py-3">
                    <p class="text-xs text-gray-600">{{ $sub->subscribed_at->format('M j, Y') }}</p>
                    <p class="text-[10px] text-gray-400">{{ $sub->subscribed_at->format('g:i A') }}</p>
                </td>
                <td class="px-4 py-3">
                    <p class="text-xs text-gray-400 font-mono">{{ $sub->ip_address ?? '—' }}</p>
                </td>
                <td class="px-5 py-3 text-right">
                    <form method="POST" action="{{ route('newsletter.destroy', $sub->id) }}"
                          data-confirm="Remove {{ $sub->email }} from the subscriber list?" data-danger="true">
                        @csrf @method('DELETE')
                        <button type="submit"
                                class="text-xs font-medium text-red-500 hover:text-red-700 transition-colors">
                            Remove
                        </button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

    {{-- Pagination --}}
    @if($subscribers->hasPages())
    <div class="px-5 py-3 border-t border-gray-50 bg-gray-50/30">
        {{ $subscribers->links() }}
    </div>
    @endif
    @endif
</div>

@endsection