@extends('layouts.app')

@section('title', __('campaigns.index_title'))

@section('content')
    <div x-data="{
        viewMode: 'grid',
        selectedCampaigns: [],
        selectAll: false,
        campaignsOnPage: {{ json_encode(isset($campaigns) && $campaigns instanceof \Illuminate\Pagination\LengthAwarePaginator ? $campaigns->pluck('id') : ($campaigns ?? collect())->pluck('id')) }},
        showUpgradeModal: false, // For the modal
        toggleSelectAll(event) {
            this.selectedCampaigns = event.target.checked ? [...this.campaignsOnPage] : [];
            this.updateSelectAllState();
        },
        updateSelectAllState() {
            this.selectAll = this.campaignsOnPage.length > 0 && this.selectedCampaigns.length === this.campaignsOnPage.length;
        },
        confirmBulkDelete(event) {
            if (this.selectedCampaigns.length === 0) {
                alert('{{ __('campaigns.alert_select_campaign') }}');
                return;
            }
            if (confirm(`{{ __('campaigns.confirm_bulk_delete', ['count' => '']) }}${this.selectedCampaigns.length}`)) {
                const form = event.target.closest('form');
                form.querySelectorAll('input[name=\'campaign_ids_hidden[]\']').forEach(el => el.remove());
                this.selectedCampaigns.forEach(id => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'campaign_ids_hidden[]';
                    input.value = id;
                    form.appendChild(input);
                });
                form.submit();
            }
        }
    }" x-init="updateSelectAllState()">

        {{-- Header Row: Title, Add Buttons, View Toggle --}}
        <div class="md:flex md:justify-between md:items-start mb-6 gap-4">
            <div class="flex-shrink-0 mb-4 md:mb-0">
                <h1 class="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-white">
                    {{ __('campaigns.header') }}
                </h1>
                {{-- Package Limit Message --}}
                @if (isset($packageLimits) && Auth::user()->role !== 'campaign_manager')
                    <div class="flex items-center space-x-4 mt-1">
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            You are using <span
                                class="font-bold text-gray-700 dark:text-gray-300">{{ $campaignCount }}</span> of <span
                                class="font-bold text-gray-700 dark:text-gray-300">{{ $packageLimits['campaigns'] }}</span>
                            campaigns.
                        </p>
                        {{-- Upgrade button appears when at or over the limit --}}
                        @if (!$canCreateCampaign)
                            <a href="mailto:support@oneeach.com?subject=Package Upgrade Request for {{ urlencode(config('app.name')) }}"
                                class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 whitespace-nowrap">
                                <svg class="w-4 h-4 mr-1.5 -ml-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                    fill="currentColor">
                                    <path
                                        d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
                                </svg>
                                Upgrade your Mindful Giving Package
                            </a>
                        @endif
                    </div>
                @endif
            </div>

            <div class="flex items-center justify-start md:justify-end flex-wrap gap-3">
                @if ($canCreateCampaign)
                    <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">
                        {{ __('campaigns.create_new') }}
                    </a>
                @else
                    {{-- Disabled button that opens the modal --}}
                    <button type="button" @click="showUpgradeModal = true"
                        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-500 dark:text-gray-400 bg-gray-200 dark:bg-gray-700 cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-600">
                        <svg class="w-4 h-4 mr-2 text-yellow-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                            fill="currentColor">
                            <path fill-rule="evenodd"
                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 00-1.5 0v4.59L7.28 9.53a.75.75 0 00-1.06 1.06l2.5 2.5a.75.75 0 001.06 0l2.5-2.5a.75.75 0 10-1.06-1.06L10.75 11.34V6.75z"
                                clip-rule="evenodd" />
                        </svg>
                        {{ __('campaigns.create_new') }}
                    </button>
                @endif
                <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">
                    <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="{{ __('campaigns.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>
                    <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="{{ __('campaigns.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>

        <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">{{ __('campaigns.search_by_title') }}</label>
                    <input type="text" name="title" id="title" placeholder="{{ __('campaigns.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>
                <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">{{ __('campaigns.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">{{ __('campaigns.clear') }}</a>
                </div>
            </div>
        </form>

        <form x-ref="bulkForm" method="POST" action="{{ route('admin.campaigns.bulk-destroy') }}">
            @csrf
            @method('DELETE')

            <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">{{ __('campaigns.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">
                        {{ __('campaigns.delete_selected', ['count' => '']) }}(<span
                            x-text="selectedCampaigns.length"></span>)
                    </button>
                </div>
            </div>

            <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>
                                <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">
                                    {{ __('campaigns.table_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">
                                    {{ __('campaigns.table_title_template') }}</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">
                                    {{ __('campaigns.table_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">
                                    {{ __('campaigns.table_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">
                                    {{ __('campaigns.table_created') }}</th>
                                <th scope="col" class="relative px-6 py-3"><span
                                        class="sr-only">{{ __('campaigns.table_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>
                                        @if ($campaign->po_number)
                                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                {{ __('campaigns.po_number_prefix') }} {{ $campaign->po_number }}</div>
                                        @endif
                                        @if ($campaign->selectedEmailTemplate)
                                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                <span class="font-semibold">{{ __('campaigns.email_prefix') }}</span>
                                                {{ $campaign->selectedEmailTemplate->name }}
                                            </div>
                                        @else
                                            <div class="text-xs text-gray-400 dark:text-gray-500 mt-1 italic">
                                                {{ __('campaigns.default_email') }}</div>
                                        @endif
                                        {{-- Quantity Limits Quick Info --}}
                                        @if ($campaign->products->isNotEmpty())
                                            @php
                                                $productsWithLimits = $campaign->products
                                                    ->filter(fn($p) => $p->pivot->quantity_limit !== null)
                                                    ->count();
                                                $limitedOutProducts = $campaign->products
                                                    ->filter(
                                                        fn($p) => $p->pivot->quantity_limit !== null &&
                                                            $p->pivot->quantity_donated >= $p->pivot->quantity_limit,
                                                    )
                                                    ->count();
                                            @endphp
                                            @if ($productsWithLimits > 0)
                                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                    <span class="font-semibold">Limits:</span>
                                                    {{ $productsWithLimits }} products
                                                    @if ($limitedOutProducts > 0)
                                                        <span
                                                            class="text-red-600 dark:text-red-400">({{ $limitedOutProducts }}
                                                            reached)</span>
                                                    @endif
                                                </div>
                                            @endif
                                        @endif
                                    </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">{{ __('campaigns.status_enabled') }}</span>
                                        @else
                                            <span
                                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{{ __('campaigns.status_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>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <div class="flex items-center justify-end space-x-3">
                                            <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="{{ __('campaigns.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">{{ __('campaigns.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="{{ __('campaigns.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">{{ __('campaigns.edit') }}</span></a>
                                            <a href="{{ route('admin.campaigns.products.edit', $campaign) }}"
                                                class="flex items-center text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300 group"
                                                title="{{ __('campaigns.manage_products_long') }}"><svg
                                                    class="w-4 h-4 mr-1 group-hover:text-green-700 dark:group-hover:text-green-200 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="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
                                                </svg><span
                                                    class="group-hover:underline">{{ __('campaigns.manage_products_short') }}</span></a>
                                            <form action="{{ route('admin.campaigns.destroy', $campaign) }}"
                                                method="POST" class="inline"
                                                onsubmit="return confirm('{{ __('campaigns.confirm_delete') }}');">@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="{{ __('campaigns.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">{{ __('campaigns.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">
                                        {{ __('campaigns.no_campaigns_found') }} <a
                                            href="{{ route('admin.campaigns.create') }}"
                                            class="text-indigo-600 hover:underline">{{ __('campaigns.create_one') }}</a>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <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)
                    <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">
                        <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>
                        <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>
                        <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 items-center rounded-full bg-green-100 px-2 py-0.5 font-medium text-green-800">{{ __('campaigns.status_enabled') }}</span>
                                @else
                                    <span
                                        class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 font-medium text-gray-800">{{ __('campaigns.status_disabled') }}</span>
                                @endif
                                <span
                                    class="px-2 inline-flex 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>
                            </div>
                            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1 mb-3">
                                {{ __('campaigns.created_at', ['time' => $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">
                                @if ($campaign->po_number)
                                    <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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                                        </svg><span
                                            title="{{ __('campaigns.po_number_prefix') }} {{ $campaign->po_number }}">{{ __('campaigns.po_number_prefix') }}
                                            {{ Str::limit($campaign->po_number, 20) }}</span></div>
                                @endif
                                <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>{{ __('campaigns.products_associated', ['count' => $campaign->products_count]) }}</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 }}">{{ __('campaigns.ships_to', ['location' => $campaign->shippingAddress->city . ', ' . $campaign->shippingAddress->state]) }}</span>
                                    @else
                                        <span class="text-yellow-600 italic">{{ __('campaigns.no_address_set') }}</span>
                                    @endif
                                </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="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                                    </svg>
                                    @if ($campaign->selectedEmailTemplate)
                                        <span
                                            title="{{ $campaign->selectedEmailTemplate->subject_template }}">{{ __('campaigns.email_template_subject', ['subject' => '']) }}{{ Str::limit($campaign->selectedEmailTemplate->name, 20) }}</span>
                                    @else
                                        <span
                                            class="text-gray-400 italic">{{ __('campaigns.email_template_default') }}</span>
                                    @endif
                                </div>
                                {{-- Quantity Limits Info for Grid View --}}
                                @if ($campaign->products->isNotEmpty())
                                    @php
                                        $productsWithLimits = $campaign->products
                                            ->filter(fn($p) => $p->pivot->quantity_limit !== null)
                                            ->count();
                                        $limitedOutProducts = $campaign->products
                                            ->filter(
                                                fn($p) => $p->pivot->quantity_limit !== null &&
                                                    $p->pivot->quantity_donated >= $p->pivot->quantity_limit,
                                            )
                                            ->count();
                                        $totalDonated = $campaign->products->sum('pivot.quantity_donated');
                                    @endphp
                                    @if ($productsWithLimits > 0)
                                        <div class="flex items-center space-x-1.5 mt-1">
                                            <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="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
                                            </svg>
                                            <span title="Products with quantity limits">
                                                {{ $productsWithLimits }} with limits
                                                @if ($limitedOutProducts > 0)
                                                    <span class="text-red-600 font-medium">({{ $limitedOutProducts }}
                                                        complete)</span>
                                                @endif
                                            </span>
                                        </div>
                                    @endif
                                    @if ($totalDonated > 0)
                                        <div class="flex items-center space-x-1.5 mt-1">
                                            <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="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
                                            </svg>
                                            <span title="Total items donated">{{ $totalDonated }} donated</span>
                                        </div>
                                    @endif
                                @endif
                            </div>
                        </div>
                        <div
                            class="mt-auto pt-3 flex items-center justify-end space-x-3 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="{{ __('campaigns.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">{{ __('campaigns.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="{{ __('campaigns.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">{{ __('campaigns.edit') }}</span></a>
                            <a href="{{ route('admin.campaigns.products.edit', $campaign) }}"
                                class="flex items-center text-xs text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300 group"
                                title="{{ __('campaigns.manage_products_long') }}"><svg
                                    class="w-4 h-4 mr-1 group-hover:text-green-700 dark:group-hover:text-green-200 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="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
                                </svg><span
                                    class="group-hover:underline">{{ __('campaigns.manage_products_short') }}</span></a>
                            <form action="{{ route('admin.campaigns.destroy', $campaign) }}" method="POST"
                                class="inline" onsubmit="return confirm('{{ __('campaigns.confirm_delete') }}');">@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="{{ __('campaigns.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">{{ __('campaigns.delete') }}</span></button>
                            </form>
                        </div>
                    </div>
                @empty
                    <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">{{ __('campaigns.no_campaigns_found') }}
                        </p>
                        <a href="{{ route('admin.campaigns.create') }}"
                            class="mt-2 inline-block text-sm text-indigo-600 hover:underline">{{ __('campaigns.create_one') }}</a>
                    </div>
                @endforelse
            </div>
        </form>

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

        <!-- Upgrade Modal -->
        <div x-show="showUpgradeModal" x-cloak style="display: none;" x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
            x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60"
            aria-labelledby="modal-title" role="dialog" aria-modal="true">
            <div @click.away="showUpgradeModal = false"
                class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-md mx-4 text-left overflow-hidden transform transition-all sm:my-8">
                <div class="sm:flex sm:items-start">
                    <div
                        class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-yellow-100 dark:bg-yellow-900/50 sm:mx-0 sm:h-10 sm:w-10">
                        <svg class="h-6 w-6 text-yellow-600 dark:text-yellow-400" 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="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                        </svg>
                    </div>
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                        <h3 class="text-lg font-bold leading-6 text-gray-900 dark:text-white" id="modal-title">
                            Campaign Limit Reached
                        </h3>
                        <div class="mt-2">
                            <p class="text-sm text-gray-600 dark:text-gray-400">
                                You have reached the maximum number of campaigns for your current package. To create
                                more campaigns, please upgrade your subscription.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                    <a href="mailto:support@oneeach.com?subject=Package Upgrade Request for {{ urlencode(config('app.name')) }}"
                        class="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm">
                        Upgrade Package
                    </a>
                    <button @click="showUpgradeModal = false" type="button"
                        class="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 dark:border-gray-500 bg-white dark:bg-gray-700 px-4 py-2 text-base font-medium text-gray-700 dark:text-gray-200 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection