<x-app-layout title="Newsletter-Anmeldungen" subtitle="Store-Newsletter · Datenbasis für Kampagnen">

    {{-- Kennzahlen (kompakte Leiste) --}}
    <div class="card mb-4" style="padding:14px 18px;">
        <div style="display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;">
            <div style="min-width:96px;">
                <p style="font-size:11px;color:#6b7280;line-height:1.2;">Gesamt</p>
                <p style="font-size:20px;font-weight:700;color:#111827;line-height:1.2;">{{ $stats['total'] }}</p>
            </div>
            <div style="min-width:96px;">
                <p style="font-size:11px;color:#6b7280;line-height:1.2;">Bestätigt</p>
                <p style="font-size:20px;font-weight:700;color:#15803d;line-height:1.2;">{{ $stats['confirmed'] }}</p>
            </div>
            <div style="min-width:96px;">
                <p style="font-size:11px;color:#6b7280;line-height:1.2;">Offen (DOI)</p>
                <p style="font-size:20px;font-weight:700;color:#d97706;line-height:1.2;">{{ $stats['pending'] }}</p>
            </div>
            <div style="min-width:96px;">
                <p style="font-size:11px;color:#6b7280;line-height:1.2;">Abgemeldet</p>
                <p style="font-size:20px;font-weight:700;color:#6b7280;line-height:1.2;">{{ $stats['unsubscribed'] }}</p>
            </div>
            <div style="min-width:96px;">
                <p style="font-size:11px;color:#6b7280;line-height:1.2;">WhatsApp</p>
                <p style="font-size:20px;font-weight:700;color:#b91c1c;line-height:1.2;">{{ $stats['whatsapp'] }}</p>
            </div>
            <div style="min-width:96px;">
                <p style="font-size:11px;color:#6b7280;line-height:1.2;">Tasting-Team</p>
                <p style="font-size:20px;font-weight:700;color:#b91c1c;line-height:1.2;">{{ $stats['tasting'] }}</p>
            </div>
        </div>
    </div>

    {{-- Filter + Export --}}
    <div class="card p-4 mb-4">
        <form method="GET" class="flex flex-wrap gap-3 items-end" style="display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;">
            <div>
                <label class="form-label">Suche</label>
                <input type="text" name="q" value="{{ request('q') }}" placeholder="E-Mail, Name, Mobil…" class="form-input">
            </div>
            <div>
                <label class="form-label">Status</label>
                <select name="status" class="form-input">
                    <option value="">Alle</option>
                    <option value="confirmed"    {{ request('status') === 'confirmed' ? 'selected' : '' }}>Bestätigt</option>
                    <option value="pending"      {{ request('status') === 'pending' ? 'selected' : '' }}>Offen (DOI)</option>
                    <option value="unsubscribed" {{ request('status') === 'unsubscribed' ? 'selected' : '' }}>Abgemeldet</option>
                </select>
            </div>
            <div>
                <label class="form-label">Filiale</label>
                <select name="store" class="form-input">
                    <option value="">Alle</option>
                    @foreach($stores as $s)
                        <option value="{{ $s }}" {{ request('store') === $s ? 'selected' : '' }}>{{ $s }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="form-label">Von</label>
                <input type="date" name="from" value="{{ request('from') }}" class="form-input">
            </div>
            <div>
                <label class="form-label">Bis</label>
                <input type="date" name="to" value="{{ request('to') }}" class="form-input">
            </div>
            <label class="flex items-center gap-2 text-sm text-gray-600 pb-2">
                <input type="checkbox" name="whatsapp" value="1" {{ request()->boolean('whatsapp') ? 'checked' : '' }}> WhatsApp
            </label>
            <label class="flex items-center gap-2 text-sm text-gray-600 pb-2">
                <input type="checkbox" name="tasting" value="1" {{ request()->boolean('tasting') ? 'checked' : '' }}> Tasting
            </label>
            <button type="submit" class="btn-secondary">Filtern</button>
            <a href="{{ route('admin.newsletter.index') }}" class="btn-secondary">Reset</a>
            <a href="{{ route('admin.newsletter.export', request()->query()) }}" class="btn-primary">CSV exportieren</a>
        </form>
        <p class="text-xs text-gray-400 mt-2">Der Export enthält genau die aktuell gefilterte Auswahl (Semikolon-getrennt, UTF-8 mit BOM – direkt Excel-/Brevo-tauglich).</p>
    </div>

    {{-- Tabelle --}}
    <div class="card overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Kontakt</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Filiale</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Status</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Opt-ins</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Code</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Angemeldet</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Herkunft</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-100">
                @forelse($signups as $s)
                    <tr class="hover:bg-gray-50">
                        <td class="px-5 py-3">
                            <p class="text-sm font-medium text-gray-900">{{ $s->email }}</p>
                            <p class="text-xs text-gray-500">
                                {{ trim(($s->anrede ? $s->anrede.' ' : '').$s->vorname.' '.$s->nachname) ?: '—' }}
                                @if($s->geburtsdatum)<span class="text-gray-400"> · {{ $s->geburtsdatum->format('d.m.Y') }}</span>@endif
                            </p>
                        </td>
                        <td class="px-5 py-3 text-sm text-gray-600">{{ $s->store ?: '—' }}</td>
                        <td class="px-5 py-3">
                            @if($s->status === 'confirmed')
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-green-100 text-green-700">Bestätigt</span>
                            @elseif($s->status === 'pending')
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-amber-100 text-amber-700">Offen</span>
                            @else
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-gray-100 text-gray-500">Abgemeldet</span>
                            @endif
                        </td>
                        <td class="px-5 py-3">
                            <div class="flex flex-wrap gap-1">
                                @if($s->whatsapp_optin)
                                    <span class="inline-flex items-center rounded px-1.5 py-0.5 text-xs font-medium bg-green-50 text-green-700 ring-1 ring-green-200">WA</span>
                                @endif
                                @if($s->tasting_optin)
                                    <span class="inline-flex items-center rounded px-1.5 py-0.5 text-xs font-medium bg-blue-50 text-blue-700 ring-1 ring-blue-200">Tasting</span>
                                @endif
                                @if(! $s->whatsapp_optin && ! $s->tasting_optin)
                                    <span class="text-xs text-gray-400">—</span>
                                @endif
                            </div>
                            @if($s->whatsapp_optin && $s->mobile)
                                <p class="text-xs text-gray-400 mt-0.5">{{ $s->mobile }}</p>
                            @endif
                        </td>
                        <td class="px-5 py-3 text-sm font-mono text-gray-700">{{ $s->voucher_code ?: '—' }}</td>
                        <td class="px-5 py-3 text-sm text-gray-500">
                            {{ $s->created_at?->format('d.m.Y H:i') }}
                            @if($s->confirmed_at)<span class="block text-xs text-green-600">bestätigt {{ $s->confirmed_at->format('d.m.Y') }}</span>@endif
                        </td>
                        <td class="px-5 py-3 text-xs text-gray-500">
                            {{ $s->utm_source ?: '—' }}
                            @if($s->utm_campaign)<span class="block text-gray-400">{{ $s->utm_campaign }}</span>@endif
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="px-5 py-12 text-center text-sm text-gray-400">Keine Anmeldungen gefunden.</td></tr>
                @endforelse
            </tbody>
        </table>
        @if($signups->hasPages())<div class="px-5 py-4 border-t border-gray-100">{{ $signups->links() }}</div>@endif
    </div>

</x-app-layout>