@extends('layouts.app')

@section('title', __('admin.dashboard_title'))

@section('content')
    <div x-data="{ viewMode: 'grid', showPackageModal: false }">
        {{-- Header Row --}}
        <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 mb-4 md:mb-0">
                {{ __('admin.dashboard_title') }}</h1>
            <div class="flex items-center justify-start md:justify-end flex-wrap gap-3">
                {{-- Package Comparison Button (Admin Only) --}}
                @can('access-admin-settings')
                    <button type="button" @click="showPackageModal = true"
                        class="inline-flex items-center px-3 py-1.5 border border-indigo-300 dark:border-indigo-600 shadow-sm text-xs font-medium rounded-md text-indigo-700 dark:text-indigo-300 bg-indigo-100 dark:bg-indigo-900/50 hover:bg-indigo-200 dark:hover:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 whitespace-nowrap">
                        <svg class="w-4 h-4 mr-2 -ml-1" 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="M3.75 3v11.25A2.25 2.25 0 006 16.5h12M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-12a2.25 2.25 0 01-2.25-2.25V3M3.75 3v1.5M20.25 3v1.5m0 9.75v-9.75M3.75 14.25v-9.75" />
                        </svg>
                        Compare Packages
                    </button>
                @endcan

                {{-- Add Campaign Button (Campaign Managers and Above) --}}
                @can('manage-campaigns')
                    @if ($canAddCampaign)
                        <a href="{{ route('admin.campaigns.create') }}"
                            class="inline-flex items-center px-3 py-1.5 border border-transparent shadow-sm text-xs 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 whitespace-nowrap">{{ __('admin.add_campaign') }}</a>
                    @else
                        <span class="inline-block" tabindex="0"
                            @if ($campaignLimit < PHP_INT_MAX) title="You have reached the maximum of {{ $campaignLimit }} campaigns for your plan. Please upgrade to add more." @endif>
                            <button type="button" style="pointer-events: none;"
                                class="inline-flex items-center px-3 py-1.5 border border-transparent shadow-sm text-xs font-medium rounded-md text-white bg-gray-400 dark:bg-gray-500 cursor-not-allowed whitespace-nowrap">
                                {{ __('admin.add_campaign') }}
                            </button>
                        </span>
                    @endif
                @endcan

                {{-- View Mode Toggle Buttons (Only show if user can see campaigns or products) --}}
                @if (Gate::allows('manage-campaigns') || Gate::allows('manage-products'))
                    <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'"
                            :class="{ 'bg-white dark:bg-gray-800 shadow-sm text-indigo-600 dark:text-indigo-400': viewMode === 'list', 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200': 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 dark:focus:ring-offset-gray-800 transition-colors duration-150"
                            aria-label="{{ __('admin.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'"
                            :class="{ 'bg-white dark:bg-gray-800 shadow-sm text-indigo-600 dark:text-indigo-400': viewMode === 'grid', 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200': 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 dark:focus:ring-offset-gray-800 transition-colors duration-150"
                            aria-label="{{ __('admin.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>
                @endif
            </div>
        </div>

        {{-- Welcome Block --}}
        <div
            class="mb-6 p-4 bg-gradient-to-r from-blue-50 to-indigo-100 dark:from-blue-900/50 dark:to-indigo-900/50 border border-blue-200 dark:border-blue-800 rounded-lg shadow-sm">
            <div class="flex flex-wrap items-center justify-between gap-y-2">
                <div>
                    <h2 class="text-xl font-semibold text-gray-800 dark:text-white">
                        {{ Auth::check() ? __('admin.welcome_message', ['name' => e(Auth::user()->name)]) : '' }}</h2>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ __('admin.welcome_submessage') }}</p>
                </div>
                <div class="text-sm text-center sm:text-right">
                    <p class="text-gray-600 dark:text-gray-400">{{ __('admin.current_package') }}: <span
                            class="font-bold text-indigo-600 dark:text-indigo-400">{{ $currentPackageName }}</span></p>
                    @can('access-admin-settings')
                        <a href="mailto:support@oneeach.com?subject=Package%20Upgrade%20Request%20for%20{{ urlencode(config('app.name')) }}"
                            class="inline-block mt-2 text-xs font-semibold text-white bg-green-600 hover:bg-green-700 px-3 py-1 rounded-full shadow-sm transition">{{ __('admin.upgrade_plan') }}</a>
                    @endcan
                </div>
            </div>
        </div>

        {{-- Quick Links & Status --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
            {{-- Quick Links --}}
            @php
                $userRole = Auth::check() ? Auth::user()->role : null;
                $links = [];

                if (Gate::allows('manage-campaigns')) {
                    $links[__('admin.nav_campaigns')] = 'admin.campaigns.index';
                }
                if (Gate::allows('manage-products')) {
                    $links[__('admin.nav_inventory')] = 'admin.products.index';
                }
                if (Gate::allows('manage-users')) {
                    $links[__('admin.nav_users')] = 'admin.users.index';
                }
                if (Gate::allows('manage-addresses')) {
                    $links[__('admin.nav_addresses')] = 'admin.addresses.index';
                }
                if (Gate::allows('manage-orders')) {
                    $links[__('admin.nav_orders')] = 'admin.orders.index';
                }
            @endphp

            @if (!empty($links))
                <div
                    class="md:col-span-2 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
                    <h3 class="text-base font-medium text-gray-700 dark:text-gray-300 mb-3">{{ __('admin.quick_links') }}
                    </h3>
                    <div class="flex flex-wrap items-center gap-3">
                        @foreach ($links as $label => $route)
                            <a href="{{ route($route) }}"
                                class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-full border border-gray-300 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-600 transition shadow-sm">{{ $label }}</a>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- System Status --}}
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
                <h3 class="text-base font-medium text-gray-700 dark:text-gray-300 mb-3">{{ __('admin.system_status') }}
                </h3>
                <div class="space-y-4">
                    {{-- Payment Gateway Status (Only for payment managers) --}}
                    @can('manage-payments')
                        <div class="flex items-start space-x-3">
                            <span
                                class="flex-shrink-0 inline-flex items-center justify-center h-8 w-8 rounded-full bg-gray-100 dark:bg-gray-700 pt-1">
                                <svg class="h-5 w-5 text-gray-500 dark:text-gray-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="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 21z" />
                                </svg>
                            </span>
                            <div>
                                <h4 class="text-sm font-medium text-gray-900 dark:text-white">
                                    {{ __('admin.payment_gateways') }}</h4>
                                <div class="text-xs flex items-center flex-wrap gap-x-3 gap-y-1 mt-1">
                                    <span
                                        class="flex items-center gap-1 {{ $stripeConfigured ? 'text-green-700 dark:text-green-400' : 'text-gray-500 dark:text-gray-400' }}">{{ __('admin.stripe_status') }}:
                                        {{ $stripeConfigured ? __('admin.status_on') : __('admin.status_off') }}</span>
                                    <span
                                        class="flex items-center gap-1 {{ $tillConfigured ? 'text-green-700 dark:text-green-400' : 'text-gray-500 dark:text-gray-400' }}">{{ __('admin.till_status') }}:
                                        {{ $tillConfigured ? __('admin.status_on') : __('admin.status_off') }}</span>
                                    <a href="{{ route('admin.payments.index') }}"
                                        class="text-blue-600 dark:text-blue-400 hover:underline">{{ __('admin.settings_link') }}</a>
                                </div>
                            </div>
                        </div>
                    @endcan

                    {{-- Amazon API Status (Only for product managers) --}}
                    @can('manage-products')
                        <div class="flex items-start space-x-3">
                            <span
                                class="flex-shrink-0 inline-flex items-center justify-center h-8 w-8 rounded-full pt-1 {{ $amazonApiStatus === 'Connected' ? 'bg-green-100 dark:bg-green-900/50' : 'bg-red-100 dark:bg-red-900/50' }}">
                                <svg class="h-5 w-5 {{ $amazonApiStatus === 'Connected' ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                    stroke="currentColor">
                                    @if ($amazonApiStatus === 'Connected')
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                                    @else
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                    @endif
                                </svg>
                            </span>
                            <div>
                                <h4 class="text-sm font-medium text-gray-900 dark:text-white">
                                    {{ __('admin.amazon_business_api') }}</h4>
                                <p
                                    class="text-xs mt-1 {{ $amazonApiStatus === 'Connected' ? 'text-green-700 dark:text-green-400' : 'text-red-700 dark:text-red-400' }}">
                                    {{ $amazonApiStatus === 'Connected' ? __('admin.api_status_connected') : __('admin.api_status_error') }}
                                </p>
                            </div>
                        </div>
                    @endcan

                    {{-- Show simple welcome message if user has no management permissions --}}
                    @if (!Gate::allows('manage-payments') && !Gate::allows('manage-products'))
                        <div class="text-center py-4">
                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                Welcome to your dashboard! Contact your administrator if you need access to additional
                                features.
                            </p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Stats Block --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            {{-- Total Campaigns Stat --}}
            @if ($totalCampaigns > 0 || Gate::allows('manage-campaigns'))
                <div
                    class="bg-white dark:bg-gray-800 shadow rounded-lg p-4 border border-gray-200 dark:border-gray-700 flex items-center space-x-4">
                    <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
                        <svg class="h-6 w-6 text-white" 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="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.372l2.508-1.447a1.875 1.875 0 00-.372-3.494l-2.508 1.447c-.827.499-1.908.326-2.607-.372L5.25 9.568a2.25 2.25 0 00-.659-1.591V5.25A2.25 2.25 0 016.841 3h2.727z" />
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M12 6.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
                        </svg>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
                            {{ __('admin.total_campaigns') }}</dt>
                        <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
                            {{ $totalCampaigns }}</dd>
                    </div>
                </div>
            @endif

            {{-- Total Products Stat --}}
            @if ($totalProducts > 0 || Gate::allows('manage-products'))
                <div
                    class="bg-white dark:bg-gray-800 shadow rounded-lg p-4 border border-gray-200 dark:border-gray-700 flex items-center space-x-4">
                    <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
                        <svg class="h-6 w-6 text-white" 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.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
                        </svg>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
                            {{ __('admin.total_products') }}</dt>
                        <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
                            {{ $totalProducts }}</dd>
                    </div>
                </div>
            @endif

            {{-- Total Users Stat --}}
            @if ($totalUsers > 0)
                <div
                    class="bg-white dark:bg-gray-800 shadow rounded-lg p-4 border border-gray-200 dark:border-gray-700 flex items-center space-x-4">
                    <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
                        <svg class="h-6 w-6 text-white" 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 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-4.67c.12-.318.239-.636.354-.963l.001-.006s0-.001 0-.001M6.375 12.5A2.625 2.625 0 1111.5 12.5a2.625 2.625 0 01-5.125 0z" />
                        </svg>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
                            {{ __('admin.total_users') }}</dt>
                        <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
                            {{ $totalUsers }}</dd>
                    </div>
                </div>
            @endif

            {{-- Total Addresses Stat --}}
            @if ($totalAddresses > 0)
                <div
                    class="bg-white dark:bg-gray-800 shadow rounded-lg p-4 border border-gray-200 dark:border-gray-700 flex items-center space-x-4">
                    <div class="flex-shrink-0 bg-red-500 rounded-md p-3">
                        <svg class="h-6 w-6 text-white" 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="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h7.5" />
                        </svg>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
                            {{ __('admin.total_addresses') }}</dt>
                        <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
                            {{ $totalAddresses }}</dd>
                    </div>
                </div>
            @endif
        </div>

        {{-- Main Content Grid (Campaigns & Products) - Only show if user has permissions --}}
        @if (Gate::allows('manage-campaigns') || Gate::allows('manage-products'))
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

                {{-- Latest Campaigns Section --}}
                @can('manage-campaigns')
                    <div
                        class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 border border-gray-200 dark:border-gray-700 flex flex-col">
                        {{-- Header --}}
                        <div class="flex justify-between items-center mb-4 flex-shrink-0">
                            <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200">
                                {{ __('admin.latest_campaigns') }}
                            </h2>
                            <a href="{{ route('admin.campaigns.index') }}"
                                class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">{{ __('admin.view_all') }}</a>
                        </div>

                        {{-- List View Container --}}
                        <div x-show="viewMode === 'list'" class="flex-grow space-y-3" x-cloak>
                            @forelse ($latestCampaigns as $campaign)
                                <div
                                    class="flex items-center justify-between py-3 border-b border-gray-100 dark:border-gray-700 last:border-b-0">
                                    <div class="flex items-center space-x-3 min-w-0">
                                        @if ($campaign->image_path)
                                            <img src="{{ asset('storage/' . $campaign->image_path) }}" alt=""
                                                class="h-10 w-10 rounded-md object-cover flex-shrink-0">
                                        @else
                                            <div
                                                class="h-10 w-10 rounded-md bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-400 flex-shrink-0">
                                                <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
                                        <div class="flex-1 min-w-0">
                                            <a href="{{ route('admin.campaigns.show', $campaign) }}"
                                                class="text-sm font-medium text-gray-900 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 block truncate">{{ $campaign->title }}</a>
                                            <span class="text-xs text-gray-500 dark:text-gray-400">
                                                @if ($campaign->enabled)
                                                    <span
                                                        class="text-green-600 dark:text-green-400">{{ __('admin.campaign_enabled') }}</span>
                                                @else
                                                    <span
                                                        class="text-gray-400 dark:text-gray-500">{{ __('admin.campaign_disabled') }}</span>
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                    <a href="{{ route('admin.campaigns.edit', $campaign) }}"
                                        class="text-xs text-blue-600 dark:text-blue-400 hover:underline ml-2 flex-shrink-0">{{ __('admin.edit') }}</a>
                                </div>
                            @empty
                                <div class="text-center py-8">
                                    <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('admin.no_campaigns_found') }}
                                    </p>
                                    <a href="{{ route('admin.campaigns.create') }}"
                                        class="mt-2 inline-block text-sm text-indigo-600 dark:text-indigo-400 hover:underline">{{ __('admin.create_one') }}</a>
                                </div>
                            @endforelse
                        </div>

                        {{-- Grid View Container --}}
                        <div x-show="viewMode === 'grid'" class="grid grid-cols-1 md:grid-cols-2 gap-4 flex-grow" x-cloak>
                            @forelse ($latestCampaigns as $campaign)
                                <div
                                    class="border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm bg-white dark:bg-gray-800/50 overflow-hidden flex flex-col">
                                    <a href="{{ route('admin.campaigns.show', $campaign) }}"
                                        class="block h-32 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-3 flex-grow flex flex-col">
                                        <h3 class="text-sm font-semibold text-gray-800 dark:text-white mb-1 flex-grow">
                                            <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">
                                            @if ($campaign->enabled)
                                                <span
                                                    class="inline-flex items-center rounded-full bg-green-100 dark:bg-green-500/10 px-2 py-0.5 font-medium text-green-800 dark:text-green-400">{{ __('admin.campaign_enabled') }}</span>
                                            @else
                                                <span
                                                    class="inline-flex items-center rounded-full bg-gray-100 dark:bg-gray-500/10 px-2 py-0.5 font-medium text-gray-800 dark:text-gray-400">{{ __('admin.campaign_disabled') }}</span>
                                            @endif
                                        </div>
                                        <div class="mt-auto pt-2 text-right">
                                            <a href="{{ route('admin.campaigns.edit', $campaign) }}"
                                                class="text-xs text-blue-600 dark:text-blue-400 hover:underline">{{ __('admin.edit') }}</a>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="md:col-span-2 text-center py-8">
                                    <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('admin.no_campaigns_found') }}
                                    </p>
                                    <a href="{{ route('admin.campaigns.create') }}"
                                        class="mt-2 inline-block text-sm text-indigo-600 dark:text-indigo-400 hover:underline">{{ __('admin.create_one') }}</a>
                                </div>
                            @endforelse
                        </div>
                    </div>
                @endcan

                {{-- Latest Products Section --}}
                @can('manage-products')
                    <div
                        class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 border border-gray-200 dark:border-gray-700 flex flex-col">
                        <div class="flex justify-between items-center mb-4 flex-shrink-0">
                            <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200">
                                {{ __('admin.latest_products') }}
                            </h2>
                            <a href="{{ route('admin.products.index') }}"
                                class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">{{ __('admin.view_all') }}</a>
                        </div>
                        {{-- List View Container --}}
                        <div x-show="viewMode === 'list'" class="flex-grow space-y-3" x-cloak>
                            @forelse ($latestProducts as $product)
                                <div
                                    class="flex items-center justify-between py-3 border-b border-gray-100 dark:border-gray-700 last:border-b-0">
                                    <div class="flex items-center space-x-3 min-w-0">
                                        @if ($product->image_url)
                                            <img src="{{ $product->image_url }}" alt="{{ $product->name }}"
                                                class="h-10 w-10 rounded object-cover flex-shrink-0 border dark:border-gray-600">
                                        @else
                                            <div
                                                class="h-10 w-10 rounded bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-400 flex-shrink-0">
                                                <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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                                                </svg>
                                            </div>
                                        @endif
                                        <div class="flex-1 min-w-0">
                                            <span
                                                class="text-sm font-medium text-gray-900 dark:text-white block truncate">{{ $product->name }}</span>
                                            <span class="text-xs text-gray-500 dark:text-gray-400 block">
                                                {{ __('admin.product_asin', ['asin' => $product->asin]) }}
                                            </span>
                                        </div>
                                    </div>
                                    @if ($product->campaigns->count() > 0)
                                        <a href="{{ route('admin.campaigns.show', $product->campaigns->first()) }}"
                                            class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline truncate ml-2"
                                            title="{{ $product->campaigns->first()->title }}">{{ $product->campaigns->first()->title }}</a>
                                    @endif
                                </div>
                            @empty
                                <div class="text-center py-8">
                                    <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('admin.no_products_found') }}
                                    </p>
                                    <a href="{{ route('admin.product-search.form') }}"
                                        class="mt-2 inline-block text-sm text-indigo-600 dark:text-indigo-400 hover:underline">{{ __('admin.search_and_add') }}</a>
                                </div>
                            @endforelse
                        </div>
                        {{-- Grid View Container --}}
                        <div x-show="viewMode === 'grid'" class="grid grid-cols-1 md:grid-cols-2 gap-4 flex-grow" x-cloak>
                            @forelse ($latestProducts as $product)
                                <div
                                    class="border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm bg-white dark:bg-gray-800/50 overflow-hidden flex flex-col">
                                    <div
                                        class="h-32 flex items-center justify-center bg-gray-50 dark:bg-gray-700/50 flex-shrink-0">
                                        @if ($product->image_url)
                                            <img src="{{ $product->image_url }}" alt="{{ $product->name }}"
                                                class="max-h-full max-w-full object-contain">
                                        @else
                                            <div class="h-full w-full flex items-center justify-center"><svg
                                                    class="h-10 w-10 text-gray-300 dark:text-gray-500"
                                                    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></div>
                                        @endif
                                    </div>
                                    <div class="p-3 flex-grow flex flex-col">
                                        <h3 class="text-sm font-semibold text-gray-800 dark:text-white mb-1 flex-grow"><span
                                                class="line-clamp-2"
                                                title="{{ $product->name }}">{{ $product->name }}</span>
                                        </h3>
                                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                            {{ __('admin.product_asin', ['asin' => $product->asin]) }}
                                            @if ($product->campaigns->count() > 0)
                                                <span class="block">Campaign: <a
                                                        href="{{ route('admin.campaigns.show', $product->campaigns->first()) }}"
                                                        class="hover:underline text-indigo-600 dark:text-indigo-400">{{ $product->campaigns->first()->title }}</a></span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="md:col-span-2 text-center py-8">
                                    <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('admin.no_products_found') }}
                                    </p>
                                    <a href="{{ route('admin.product-search.form') }}"
                                        class="mt-2 inline-block text-sm text-indigo-600 dark:text-indigo-400 hover:underline">{{ __('admin.search_and_add') }}</a>
                                </div>
                            @endforelse
                        </div>
                    </div>
                @endcan

            </div> {{-- End Main Content Grid --}}
        @endif

        {{-- Welcome message for users with no management permissions --}}
        @if (
            !Gate::allows('manage-campaigns') &&
                !Gate::allows('manage-products') &&
                !Gate::allows('manage-users') &&
                !Gate::allows('manage-orders'))
            <div
                class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 border border-gray-200 dark:border-gray-700 text-center">
                <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Welcome to the Dashboard</h2>
                <p class="text-gray-600 dark:text-gray-400 mb-4">
                    You currently have view-only access to the system. Contact your administrator if you need access to
                    manage campaigns, products, or other features.
                </p>
                <div class="flex justify-center space-x-4">
                    <a href="{{ route('landing') }}"
                        class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition ease-in-out duration-150">
                        View Public Site
                    </a>
                </div>
            </div>
        @endif

        {{-- Include the Modal Component (Admin Only) --}}
        @can('access-admin-settings')
            <x-package-comparison-modal x-bind:show="showPackageModal" :packages="$packageComparison ?? []" :features="$packageFeatures ?? []"
                @close="showPackageModal = false" />
        @endcan
    </div> {{-- End Alpine Component --}}
@endsection