@extends('layouts.admin')
@section('title', 'Subscribers')
@section('admin')
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-2xl font-bold text-white">Subscribers</h1>
        <p class="text-sm text-gray-400">{{ number_format($stats['total']) }} total · {{ number_format($stats['active']) }} active</p>
    </div>
    <div class="flex gap-2">
        <a href="{{ route('admin.subscribers.import') }}" class="px-4 py-2 border border-gray-700 hover:border-red-600 text-gray-200 rounded-md text-sm">
            <i class="fa-solid fa-file-import mr-1"></i>Import CSV
        </a>
        <button type="button" onclick="document.getElementById('newModal').classList.remove('hidden')" class="px-4 py-2 bg-red-700 hover:bg-red-600 text-white rounded-md text-sm">
            <i class="fa-solid fa-plus mr-1"></i>Add subscriber
        </button>
    </div>
</div>

<div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-5">
    @foreach (['total' => 'Total', 'active' => 'Active', 'pending' => 'Pending', 'unsubscribed' => 'Unsubscribed', 'bounced' => 'Bounced'] as $k => $label)
        <div class="stat-card">
            <div class="text-xs text-gray-400">{{ $label }}</div>
            <div class="text-2xl font-bold text-white mt-1">{{ number_format($stats[$k]) }}</div>
        </div>
    @endforeach
</div>

<form method="GET" class="bg-gray-900/60 border border-gray-800 rounded-lg p-3 mb-4 flex flex-wrap gap-2">
    <input type="search" name="q" value="{{ request('q') }}" placeholder="Search email or name…"
           class="flex-1 min-w-[200px] bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white text-sm">
    <select name="status" class="bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white text-sm">
        <option value="">Any status</option>
        @foreach (['active', 'pending', 'unsubscribed', 'bounced', 'complained'] as $s)
            <option value="{{ $s }}" @selected(request('status') === $s)>{{ ucfirst($s) }}</option>
        @endforeach
    </select>
    <select name="tag_id" class="bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white text-sm">
        <option value="">Any tag</option>
        @foreach($tags as $t)<option value="{{ $t->id }}" @selected((int)request('tag_id') === $t->id)>{{ $t->name }}</option>@endforeach
    </select>
    <button type="submit" class="px-4 py-2 bg-red-700 hover:bg-red-600 text-white rounded-md text-sm">Filter</button>
    @if(request()->hasAny(['q', 'status', 'tag_id']))
        <a href="{{ route('admin.subscribers.index') }}" class="px-3 py-2 text-gray-400 hover:text-white text-sm">Clear</a>
    @endif
</form>

@if (session('success'))
    <div class="mb-4 px-4 py-2 bg-emerald-900/30 border border-emerald-800 rounded text-emerald-300 text-sm">{{ session('success') }}</div>
@endif

<div x-data="bulkTagger()" class="mb-3">
    <div class="bg-gray-900/60 border border-gray-800 rounded-lg p-3 flex flex-wrap items-center gap-2"
         x-show="selected.length > 0" x-cloak>
        <span class="text-sm text-gray-300"><span x-text="selected.length"></span> selected</span>
        <select x-model="tagId" class="bg-gray-950 border border-gray-700 rounded-md px-2 py-1.5 text-sm text-white">
            <option value="">Tag&hellip;</option>
            @foreach($tags as $t)<option value="{{ $t->id }}">{{ $t->name }}</option>@endforeach
        </select>
        <select x-model="mode" class="bg-gray-950 border border-gray-700 rounded-md px-2 py-1.5 text-sm text-white">
            <option value="apply">Apply tag</option>
            <option value="remove">Remove tag</option>
        </select>
        <button type="button" @click="run()" :disabled="!tagId || busy"
                class="px-3 py-1.5 bg-red-700 hover:bg-red-600 disabled:opacity-50 text-white rounded-md text-sm">
            <span x-text="busy ? 'Working…' : 'Go'"></span>
        </button>
        <button type="button" @click="clearSel()" class="text-xs text-gray-400 hover:text-white">Clear selection</button>
        <span x-show="result" x-text="result" class="text-xs text-emerald-300 ml-2"></span>
    </div>
</div>

<div class="bg-gray-900/60 border border-gray-800 rounded-lg overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-gray-950/80 text-gray-400 text-xs uppercase tracking-wide">
            <tr>
                <th class="p-3 w-8"><input type="checkbox" id="bulkSelectAll" @click="toggleAll($event.target.checked)"></th>
                <th class="text-left p-3">Email</th>
                <th class="text-left p-3">Name</th>
                <th class="text-left p-3">Tags</th>
                <th class="text-left p-3">Status</th>
                <th class="text-right p-3">Subscribed</th>
                <th class="p-3"></th>
            </tr>
        </thead>
        <tbody>
        @forelse($subs as $s)
            <tr class="border-t border-gray-800 hover:bg-gray-950/50">
                <td class="p-3"><input type="checkbox" class="bulk-row" data-id="{{ $s->id }}" @change="sync()"></td>
                <td class="p-3"><a href="{{ route('admin.subscribers.show', $s) }}" class="text-red-300 hover:text-red-200">{{ $s->email }}</a></td>
                <td class="p-3 text-gray-200">{{ trim($s->first_name.' '.$s->last_name) ?: '—' }}</td>
                <td class="p-3">
                    @foreach($s->tags->take(4) as $tag)
                        <span class="inline-block text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded mr-1" style="background:{{ ($tag->color ?: '#374151') }}33;color:{{ $tag->color ?: '#9ca3af' }}">{{ $tag->name }}</span>
                    @endforeach
                </td>
                <td class="p-3">
                    @php $color = ['active' => 'emerald', 'pending' => 'amber', 'unsubscribed' => 'gray', 'bounced' => 'red', 'complained' => 'red'][$s->status] ?? 'gray'; @endphp
                    <span class="text-xs px-2 py-0.5 rounded-full bg-{{ $color }}-900/40 text-{{ $color }}-300">{{ $s->status }}</span>
                </td>
                <td class="p-3 text-right text-gray-500 text-xs">{{ optional($s->created_at)->diffForHumans() }}</td>
                <td class="p-3 text-right">
                    <a href="{{ route('admin.subscribers.show', $s) }}" class="text-gray-400 hover:text-white"><i class="fa-solid fa-pen-to-square"></i></a>
                </td>
            </tr>
        @empty
            <tr><td colspan="7" class="p-8 text-center text-gray-500">No subscribers match your filters.</td></tr>
        @endforelse
        </tbody>
    </table>
</div>

<div class="mt-4">{{ $subs->links() }}</div>

{{-- Add modal --}}
<div id="newModal" class="hidden fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4">
    <form method="POST" action="{{ route('admin.subscribers.store') }}" class="bg-gray-900 border border-gray-700 rounded-xl max-w-md w-full p-6 space-y-4">
        @csrf
        <h3 class="text-lg font-semibold text-white">Add subscriber</h3>
        <input name="email" type="email" required placeholder="email@example.com"
               class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white text-sm">
        <div class="grid grid-cols-2 gap-2">
            <input name="first_name" placeholder="First" class="bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white text-sm">
            <input name="last_name" placeholder="Last" class="bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white text-sm">
        </div>
        <select name="status" class="w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white text-sm">
            <option value="active">Active (skip double opt-in)</option>
            <option value="pending">Pending (send confirmation)</option>
        </select>
        <div>
            <div class="text-xs text-gray-400 mb-1">Tags</div>
            <div class="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
                @foreach($tags as $t)
                    <label class="text-xs text-gray-300 inline-flex items-center gap-1">
                        <input type="checkbox" name="tag_ids[]" value="{{ $t->id }}"> {{ $t->name }}
                    </label>
                @endforeach
            </div>
        </div>
        <div class="flex justify-end gap-2">
            <button type="button" onclick="document.getElementById('newModal').classList.add('hidden')" class="px-3 py-2 text-gray-400 text-sm">Cancel</button>
            <button type="submit" class="px-4 py-2 bg-red-700 hover:bg-red-600 text-white rounded-md text-sm">Add</button>
        </div>
    </form>
</div>

<script>
function bulkTagger() {
    return {
        selected: [],
        tagId: '',
        mode: 'apply',
        busy: false,
        result: '',
        sync() {
            this.selected = Array.from(document.querySelectorAll('.bulk-row:checked'))
                .map(el => parseInt(el.dataset.id, 10));
            this.result = '';
        },
        toggleAll(checked) {
            document.querySelectorAll('.bulk-row').forEach(el => { el.checked = checked; });
            this.sync();
        },
        clearSel() {
            this.toggleAll(false);
            const all = document.getElementById('bulkSelectAll'); if (all) all.checked = false;
        },
        async run() {
            if (!this.tagId || this.selected.length === 0) return;
            this.busy = true; this.result = '';
            const fd = new FormData();
            fd.append('mode', this.mode);
            this.selected.forEach(id => fd.append('subscriber_ids[]', id));
            try {
                const r = await fetch('/admin/tags/' + this.tagId + '/bulk-apply', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content || '',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: fd,
                });
                const j = await r.json().catch(() => ({}));
                if (!r.ok) throw new Error(j.message || ('HTTP ' + r.status));
                this.result = (this.mode === 'remove' ? 'Removed from ' : 'Applied to ') + (j.count ?? 0) + ' subscriber(s).';
                setTimeout(() => window.location.reload(), 700);
            } catch (e) {
                this.result = 'Error: ' + (e.message || e);
            } finally {
                this.busy = false;
            }
        },
    };
}
</script>
@endsection