@extends('layouts.admin')
@section('title', 'Tags')
@php
    $segmentOptions = \App\Models\AudienceSegment::orderBy('name')->get(['id','name','last_count']);
@endphp
@section('admin')
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-2xl font-bold text-white">Tags</h1>
        <p class="text-sm text-gray-400">Tags drive segmentation, automations and signup-form attribution.</p>
    </div>
    <a href="{{ route('admin.subscribers.index') }}" class="text-sm text-gray-400 hover:text-white">
        <i class="fa-solid fa-users mr-1"></i>Browse subscribers &rarr;
    </a>
</div>

@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
@if (session('error'))
    <div class="mb-4 px-4 py-2 bg-red-900/30 border border-red-800 rounded text-red-300 text-sm">{{ session('error') }}</div>
@endif
@if ($errors->any())
    <div class="mb-4 px-4 py-2 bg-red-900/30 border border-red-800 rounded text-red-300 text-sm">
        @foreach ($errors->all() as $e) <div>{{ $e }}</div> @endforeach
    </div>
@endif

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 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="text-left p-3">Tag</th>
                    <th class="text-left p-3">Slug</th>
                    <th class="text-right p-3">Active / Total</th>
                    <th class="p-3"></th>
                </tr>
            </thead>
            <tbody>
            @foreach($tags as $tag)
                <tr class="border-t border-gray-800">
                    <td class="p-3">
                        <div class="flex items-center gap-2">
                            <span class="inline-block w-3 h-3 rounded-full" style="background:{{ $tag->color ?: '#6b7280' }}"></span>
                            <span class="text-white font-medium">{{ $tag->name }}</span>
                            @if($tag->is_default)<span class="ml-1 text-[10px] uppercase tracking-wide text-emerald-400">default</span>@endif
                        </div>
                        @if($tag->description)<div class="text-xs text-gray-500 mt-1">{{ $tag->description }}</div>@endif
                    </td>
                    <td class="p-3 text-gray-400 font-mono text-xs">{{ $tag->slug }}</td>
                    <td class="p-3 text-right text-gray-300">
                        <a href="{{ route('admin.subscribers.index', ['tag_id' => $tag->id]) }}" class="text-gray-300 hover:text-white" title="View tagged subscribers">
                            {{ $tag->active_count }} / {{ $tag->subscribers_count }}
                        </a>
                    </td>
                    <td class="p-3 text-right whitespace-nowrap">
                        <button type="button" onclick="editTag({{ $tag->toJson() }})" class="text-gray-400 hover:text-white" title="Edit">
                            <i class="fa-solid fa-pen-to-square"></i>
                        </button>
                        @if($tag->slug !== \App\Models\Tag::GENERAL)
                        <form method="POST" action="{{ route('admin.tags.destroy', $tag) }}" class="inline" onsubmit="return confirm('Delete tag {{ $tag->name }}? Subscriber assignments will be removed.')">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-gray-500 hover:text-red-400 ml-2" title="Delete">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        </form>
                        @endif
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>

    <div>
        <div class="bg-gray-900/60 border border-gray-800 rounded-lg p-5">
            <h2 class="text-base font-semibold text-white mb-3" id="tagFormTitle">New tag</h2>
            <form id="tagForm" method="POST" action="{{ route('admin.tags.store') }}" class="space-y-3">
                @csrf
                <input type="hidden" name="_method" id="tagFormMethod">
                <label class="block text-sm">
                    <span class="text-gray-400">Name</span>
                    <input name="name" id="f_name" required class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white text-sm">
                </label>
                <label class="block text-sm">
                    <span class="text-gray-400">Slug (optional)</span>
                    <input name="slug" id="f_slug" class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white text-sm font-mono">
                </label>
                <label class="block text-sm">
                    <span class="text-gray-400">Description</span>
                    <input name="description" id="f_description" class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white text-sm">
                </label>
                <label class="block text-sm">
                    <span class="text-gray-400">Color</span>
                    <input type="color" name="color" id="f_color" value="#dc2626" class="mt-1 w-16 h-10 rounded border border-gray-700">
                </label>
                <div class="flex items-center gap-3 text-sm text-gray-300">
                    <label><input type="checkbox" name="is_default" id="f_is_default" value="1"> default</label>
                    <label><input type="checkbox" name="is_public" id="f_is_public" value="1"> public</label>
                </div>
                <div class="flex gap-2">
                    <button type="submit" class="px-4 py-2 bg-red-700 hover:bg-red-600 text-white rounded-md text-sm">Save tag</button>
                    <button type="button" onclick="resetTagForm()" class="px-3 py-2 text-gray-400 hover:text-white text-sm">Cancel</button>
                </div>
            </form>
        </div>

        <div class="bg-gray-900/60 border border-gray-800 rounded-lg p-5 mt-4">
            <h2 class="text-base font-semibold text-white mb-2">Bulk apply / remove</h2>
            <p class="text-xs text-gray-500 mb-3">Add or remove a tag across an audience filter or saved segment.</p>
            <form method="POST" id="bulkForm" class="space-y-2">
                @csrf
                <div class="grid grid-cols-2 gap-2">
                    <select id="bulk_tag" required class="bg-gray-950 border border-gray-700 rounded-md px-2 py-1.5 text-sm text-white col-span-2">
                        <option value="">Tag&hellip;</option>
                        @foreach($tags as $t)<option value="{{ $t->id }}">{{ $t->name }}</option>@endforeach
                    </select>
                    <select name="mode" class="bg-gray-950 border border-gray-700 rounded-md px-2 py-1.5 text-sm text-white">
                        <option value="apply">Apply</option>
                        <option value="remove">Remove</option>
                    </select>
                    <select name="status" class="bg-gray-950 border border-gray-700 rounded-md px-2 py-1.5 text-sm text-white">
                        <option value="">(use segment)</option>
                        <option value="active">active</option>
                        <option value="pending">pending</option>
                        <option value="unsubscribed">unsubscribed</option>
                        <option value="all">all</option>
                    </select>
                    <select name="segment_id" class="bg-gray-950 border border-gray-700 rounded-md px-2 py-1.5 text-sm text-white col-span-2">
                        <option value="">No saved segment</option>
                        @foreach($segmentOptions as $seg)
                            <option value="{{ $seg->id }}">{{ $seg->name }} ({{ (int)($seg->last_count ?? 0) }})</option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="w-full px-3 py-1.5 bg-red-700 hover:bg-red-600 text-white rounded-md text-sm">Run bulk</button>
            </form>
        </div>
    </div>
</div>

<script>
function editTag(t) {
    document.getElementById('tagFormTitle').textContent = 'Edit ' + t.name;
    document.getElementById('tagForm').action = '/admin/tags/' + t.id;
    document.getElementById('tagFormMethod').value = 'PUT';
    document.getElementById('f_name').value = t.name || '';
    document.getElementById('f_slug').value = t.slug || '';
    document.getElementById('f_description').value = t.description || '';
    document.getElementById('f_color').value = t.color || '#dc2626';
    document.getElementById('f_is_default').checked = !!t.is_default;
    document.getElementById('f_is_public').checked = !!t.is_public;
}
function resetTagForm() {
    document.getElementById('tagFormTitle').textContent = 'New tag';
    document.getElementById('tagForm').action = '{{ route('admin.tags.store') }}';
    document.getElementById('tagFormMethod').value = '';
    document.getElementById('tagForm').reset();
}
document.getElementById('bulkForm').addEventListener('submit', function (e) {
    var id = document.getElementById('bulk_tag').value;
    if (!id) { e.preventDefault(); return; }
    var f = e.target;
    var status = f.querySelector('[name=status]').value;
    var segment = f.querySelector('[name=segment_id]').value;
    if (!status && !segment) {
        e.preventDefault();
        alert('Pick a status filter or a saved segment.');
        return;
    }
    e.target.action = '/admin/tags/' + id + '/bulk-apply';
});
</script>
@endsection