@extends('layouts.app') {{-- Use your main layout file --}}

@section('title', 'Campaigns List')

@section('content')
    {{-- Alpine component manages view mode and selected campaigns --}}
    <div x-data="{
        viewMode: 'grid',
        selectedCampaigns: [], // Stores IDs of selected campaigns
        selectAll: false,
        // Get IDs of campaigns currently loaded on this page for 'Select All' logic
        campaignsOnPage: {{ json_encode(isset($campaigns) && $campaigns instanceof \Illuminate\Pagination\LengthAwarePaginator ? $campaigns->pluck('id') : ($campaigns ?? collect())->pluck('id')) }},
        // Toggles all checkboxes on the current page
        toggleSelectAll(event) {
            this.selectedCampaigns = event.target.checked ? [...this.campaignsOnPage] : [];
            this.updateSelectAllState(); // Update the selectAll checkbox state itself
        },
        // Updates the master 'selectAll' checkbox state based on individual selections
        updateSelectAllState() {
            this.selectAll = this.campaignsOnPage.length >
                0 && this.selectedCampaigns.length === this.campaignsOnPage.length;
        },
        // Handles the confirmation and submission for bulk deletion
        confirmBulkDelete(event) {
            if (this.selectedCampaigns.length === 0) {
                alert('Please select at least one campaign to delete.');
                return;
            }
            if (confirm(`Are you sure you want to delete ${this.selectedCampaigns.length} selected campaign(s)? This cannot be undone.`)) {
                const form = event.target.closest('form'); // Find the parent bulk action form
                // Remove any previously added hidden inputs to prevent duplicates
                form.querySelectorAll('input[name=\'campaign_ids_hidden[]\']').forEach(el => el.remove());
                // Add new hidden inputs for each selected campaign ID
                this.selectedCampaigns.forEach(id => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'campaign_ids_hidden[]'; // Use specific name for backend validation
                    input.value = id;
                    form.appendChild(input);
                });
                form.submit(); // Submit the form
            }
        }
    }" x-init="updateSelectAllState()" {{-- Initial check for select all state on page load --}}>

        {{-- Header Row: Title, Add Buttons, View Toggle --}}
        <div class="md:flex md:justify-between md:items-center mb-6 gap-4">
            <h1 class="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-white flex-shrink-0 mb-4 md:mb-0">Campaigns
            </h1>
            <div class="flex items-center justify-start md:justify-end flex-wrap gap-3">
                {{-- Create Button --}}
                <a href="{{ route('admin.campaigns.create') }}"
                    class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
                    Create New Campaign
                </a>
                {{-- View Mode Toggle Buttons --}}
                <div
                    class="flex space-x-1 border border-gray-300 dark:border-gray-600 rounded-md p-0.5 bg-gray-100 dark:bg-gray-700">
                    {{-- List View Button --}}
                    <button type="button"
                        @click="viewMode = 'list'; selectAll = false; selectedCampaigns = []; updateSelectAllState();"
                        :class="{ 'bg-white dark:bg-slate-500 shadow-sm text-indigo-700 dark:text-white': viewMode === 'list', 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300': viewMode !== 'list' }"
                        class="px-3 py-1 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-colors duration-150"
                        aria-label="List View">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-5 h-5">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
                        </svg>
                    </button>
                    {{-- Grid View Button --}}
                    <button type="button"
                        @click="viewMode = 'grid'; selectAll = false; selectedCampaigns = []; updateSelectAllState();"
                        :class="{ 'bg-white dark:bg-slate-500 shadow-sm text-indigo-700 dark:text-white': viewMode === 'grid', 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300': viewMode !== 'grid' }"
                        class="px-3 py-1 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-colors duration-150"
                        aria-label="Grid View">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-5 h-5">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25A2.25 2.25 0 0113.5 8.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        {{-- >>> START: Search Form <<< --}}
        <form method="GET" action="{{ route('admin.campaigns.index') }}"
            class="mb-8 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
            <div class="flex flex-wrap items-center gap-4">
                <div class="flex-grow sm:flex-grow-0 sm:w-1/2 md:w-1/3">
                    <label for="title" class="sr-only">Search by title</label>
                    <input type="text" name="title" id="title" placeholder="Search by title..."
                        value="{{ request('title') }}"
                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                </div>
                {{-- Add other filter inputs here if needed --}}
                <div class="flex items-center space-x-2">
                    <button type="submit"
                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">Search</button>
                    <a href="{{ route('admin.campaigns.index') }}"
                        class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-500 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">Clear</a>
                </div>
            </div>
        </form>
        {{-- >>> END: Search Form <<< --}}

        {{-- Bulk Action Form for Campaigns --}}
        {{-- Ensure controller method exists for this route --}}
        <form x-ref="bulkForm" method="POST" action="{{ route('admin.campaigns.bulk-destroy') }}">
            @csrf
            @method('DELETE')

            {{-- Bulk Action Bar --}}
            <div
                class="mb-4 bg-gray-50 dark:bg-gray-700 p-3 rounded-md border border-gray-200 dark:border-gray-600 flex items-center justify-between">
                <div class="flex items-center">
                    <input type="checkbox" id="select-all-campaigns" x-model="selectAll" @click="toggleSelectAll($event)"
                        class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 rounded focus:ring-indigo-500 mr-2">
                    <label for="select-all-campaigns" class="text-sm text-gray-600 dark:text-gray-300 select-none">Select
                        All (on page)</label>
                </div>
                <div>
                    <button type="button" x-show="selectedCampaigns.length > 0" x-cloak style="display: none;"
                        @click="confirmBulkDelete($event)" :disabled="selectedCampaigns.length === 0"
                        class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed transition ease-in-out duration-150">
                        Delete Selected (<span x-text="selectedCampaigns.length"></span>)
                    </button>
                </div>
            </div>

            {{-- Container for List View (Table) --}}
            <div x-show="viewMode === 'list'" x-cloak style="display: none;">
                <div
                    class="bg-white dark:bg-gray-800 shadow-md rounded-lg border border-gray-200 dark:border-gray-700 overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                <th scope="col" class="px-4 py-3 w-12 text-center"></th> {{-- Checkbox header --}}
                                <th scope="col"
                                    class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-16">
                                    Image</th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                    Title</th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                    Type</th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                    Status</th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                    Created</th>
                                <th scope="col" class="relative px-6 py-3"><span class="sr-only">Actions</span></th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                            @forelse ($campaigns as $campaign)
                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                    <td class="px-4 py-4 text-center">
                                        <input type="checkbox" name="campaign_ids[]" value="{{ $campaign->id }}"
                                            x-model="selectedCampaigns" @change="updateSelectAllState()"
                                            class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 rounded focus:ring-indigo-500">
                                    </td>
                                    <td class="px-4 py-3">
                                        @if ($campaign->image_path)
                                            <img src="{{ asset('storage/' . $campaign->image_path) }}"
                                                alt="{{ $campaign->title }}" class="h-10 w-10 rounded object-cover">
                                        @else
                                            <div
                                                class="h-10 w-10 rounded bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-400 dark:text-gray-500 border dark:border-gray-600">
                                                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
                                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                                </svg>
                                            </div>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                            {{ $campaign->title }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300"><span
                                            class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $campaign->type === 'abonly' ? 'bg-blue-100 text-blue-800' : ($campaign->type === 'hybrid' ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-800') }}">{{ $campaign->type }}</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @if ($campaign->enabled)
                                            <span
                                            class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Enabled</span>@else<span
                                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">Disabled</span>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
                                        {{ $campaign->created_at->format('Y-m-d') }}</td>
                                    {{-- Actions Cell - With Icons + Text --}}
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <div class="flex items-center justify-end space-x-4">
                                            <a href="{{ route('admin.campaigns.show', $campaign) }}"
                                                class="flex items-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 group"
                                                title="View"><svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                                    class="w-4 h-4 mr-1 group-hover:text-indigo-700 dark:group-hover:text-indigo-200 flex-shrink-0">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                </svg><span class="group-hover:underline">View</span></a>
                                            <a href="{{ route('admin.campaigns.edit', $campaign) }}"
                                                class="flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 group"
                                                title="Edit"><svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                                    class="w-4 h-4 mr-1 group-hover:text-blue-700 dark:group-hover:text-blue-200 flex-shrink-0">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                                                </svg><span class="group-hover:underline">Edit</span></a>
                                            <form action="{{ route('admin.campaigns.destroy', $campaign) }}"
                                                method="POST" class="inline"
                                                onsubmit="return confirm('Are you sure?');">@csrf @method('DELETE') <button
                                                    type="submit"
                                                    class="flex items-center text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 group"
                                                    title="Delete"><svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                                        class="w-4 h-4 mr-1 group-hover:text-red-700 dark:group-hover:text-red-200 flex-shrink-0">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                                    </svg><span class="group-hover:underline">Delete</span></button></form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7"
                                        class="px-6 py-12 text-center text-sm text-gray-500 dark:text-gray-400">No
                                        campaigns found. <a href="{{ route('admin.campaigns.create') }}"
                                            class="text-indigo-600 hover:underline">Create one?</a></td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Container for Grid/Card View --}}
            <div x-show="viewMode === 'grid'" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
                x-cloak>
                @forelse ($campaigns as $campaign)
                    {{-- Campaign Card --}}
                    <div
                        class="relative border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm bg-white dark:bg-gray-800 overflow-hidden flex flex-col">
                        {{-- Checkbox Overlay --}}
                        <div class="absolute top-2 left-2 z-10 bg-white/70 dark:bg-black/50 rounded-sm p-0.5">
                            <input type="checkbox" name="campaign_ids[]" value="{{ $campaign->id }}"
                                x-model="selectedCampaigns" @change="updateSelectAllState()"
                                class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 rounded focus:ring-indigo-500">
                        </div>
                        {{-- Image Link Container --}}
                        <a href="{{ route('admin.campaigns.show', $campaign) }}"
                            class="block h-40 bg-gray-100 dark:bg-gray-700 flex items-center justify-center flex-shrink-0 hover:opacity-90 transition-opacity overflow-hidden">
                            @if ($campaign->image_path)
                                <img src="{{ asset('storage/' . $campaign->image_path) }}" alt="{{ $campaign->title }}"
                                    class="w-full h-full object-cover">
                            @else
                                <div class="h-full w-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
                                    <svg class="h-16 w-16 text-gray-300 dark:text-gray-500"
                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                </div>
                            @endif
                        </a>
                        {{-- Content --}}
                        <div class="p-4 flex-grow flex flex-col">
                            <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100 mb-1"><a
                                    href="{{ route('admin.campaigns.show', $campaign) }}"
                                    class="hover:text-indigo-600 dark:hover:text-indigo-400 line-clamp-2"
                                    title="{{ $campaign->title }}">{{ $campaign->title }}</a></h3>
                            <div
                                class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mt-1 mb-3">
                                @if ($campaign->enabled)
                                    <span class="inline-flex ... bg-green-100 text-green-800">Enabled</span>
                                @else
                                    <span class="inline-flex ... bg-gray-100 text-gray-800">Disabled</span>
                                @endif <span
                                    class="px-2 inline-flex ... {{ $campaign->type === 'abonly' ? 'bg-blue-100' : ($campaign->type === 'hybrid' ? 'bg-purple-100' : 'bg-gray-100') }} ...">{{ $campaign->type }}</span>
                            </div>
                            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1 mb-3">Created
                                {{ $campaign->created_at->diffForHumans() }}</p>
                            <div
                                class="mt-auto pt-3 border-t border-gray-100 dark:border-gray-700 space-y-1.5 text-xs text-gray-600 dark:text-gray-400">
                                <div class="flex items-center space-x-1.5"><svg
                                        class="h-3.5 w-3.5 text-gray-400 flex-shrink-0" xmlns="http://www.w3.org/2000/svg"
                                        fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                                    </svg><span>{{ $campaign->products_count }} Product(s) Associated</span></div>
                                <div class="flex items-center space-x-1.5"><svg
                                        class="h-3.5 w-3.5 text-gray-400 flex-shrink-0" xmlns="http://www.w3.org/2000/svg"
                                        fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                                    </svg>
                                    @if ($campaign->shippingAddress)
                                        <span title="{{ $campaign->shippingAddress->address_line_1 }}">Ships to:
                                            {{ $campaign->shippingAddress->city }},
                                            {{ $campaign->shippingAddress->state }}</span>
                                    @else
                                        <span class="text-yellow-600 italic">No Address Set</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        {{-- Actions - With Icons + Text --}}
                        <div
                            class="mt-auto pt-3 flex items-center justify-end space-x-4 border-t border-gray-100 dark:border-gray-700 px-4 pb-3 bg-gray-50 dark:bg-gray-700/50 rounded-b-lg">
                            <a href="{{ route('admin.campaigns.show', $campaign) }}"
                                class="flex items-center text-xs text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 group"
                                title="View"><svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                    class="w-4 h-4 mr-1 group-hover:text-indigo-700 dark:group-hover:text-indigo-200 flex-shrink-0">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg><span class="group-hover:underline">View</span></a>
                            <a href="{{ route('admin.campaigns.edit', $campaign) }}"
                                class="flex items-center text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 group"
                                title="Edit"><svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                    class="w-4 h-4 mr-1 group-hover:text-blue-700 dark:group-hover:text-blue-200 flex-shrink-0">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                                </svg><span class="group-hover:underline">Edit</span></a>
                            <form action="{{ route('admin.campaigns.destroy', $campaign) }}" method="POST"
                                class="inline" onsubmit="return confirm('Are you sure?');">@csrf @method('DELETE')<button
                                    type="submit"
                                    class="flex items-center text-xs text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 group"
                                    title="Delete"><svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                        class="w-4 h-4 mr-1 group-hover:text-red-700 dark:group-hover:text-red-200 flex-shrink-0">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                    </svg><span class="group-hover:underline">Delete</span></button></form>
                        </div>
                    </div>
                @empty
                    {{-- Empty state for grid view --}}
                    <div
                        class="col-span-full bg-white dark:bg-gray-800 text-center py-10 px-4 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
                        <p class="font-medium text-gray-500 dark:text-gray-400">No campaigns found.</p> <a
                            href="{{ route('admin.campaigns.create') }}"
                            class="mt-2 inline-block text-sm text-indigo-600 hover:underline">Create one?</a>
                    </div>
                @endforelse
            </div>

        </form> {{-- End Bulk Action Form --}}

        {{-- Pagination Links --}}
        <div class="mt-8">
            @if (isset($campaigns) && $campaigns instanceof \Illuminate\Pagination\LengthAwarePaginator)
                {{ $campaigns->appends(request()->query())->links() }}
            @endif
        </div>

    </div> {{-- End Alpine Component --}}
@endsection