📄 cookie-consent.blade.php

@if($show)
<div
    wire:ignore.self
    x-data="{}"
    @cookie-consent-saved.window="
        const e = $event.detail;
        document.cookie = 'cookie_consent=' + encodeURIComponent(JSON.stringify(e.consent)) + '; max-age=31536000; path=/; SameSite=Lax';
        if (e.consent.analytics && typeof gtag !== 'undefined') {
            gtag('consent', 'update', { analytics_storage: 'granted' });
        }
    "
    class="fixed bottom-0 inset-x-0 z-50 p-4 bg-white border-t border-gray-200 shadow-lg sm:p-6"
    role="dialog"
    aria-label="{{ __('Cookie Consent') }}"
>
    <div class="max-w-screen-xl mx-auto">

        {{-- Main row --}}
        <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
            <div class="flex-1 min-w-0">
                <p class="text-sm font-semibold text-gray-900">🍪 {{ __('We use cookies') }}</p>
                <p class="text-xs text-gray-500 mt-1">
                    {{ __('We use cookies to improve your experience, analyze traffic, and for marketing. By continuing, you agree to our') }}
                    <a href="/privacy-policy" class="underline hover:text-primary-600" target="_blank">{{ __('Privacy Policy') }}</a>.
                </p>
            </div>

            <div class="flex flex-wrap gap-2 shrink-0">
                <button
                    wire:click="toggleDetails"
                    class="px-4 py-2 text-xs border border-gray-300 rounded-lg hover:bg-gray-50"
                >
                    {{ $showDetails ? __('Hide details') : __('Customize') }}
                </button>
                <button
                    wire:click="rejectAll"
                    class="px-4 py-2 text-xs border border-gray-300 rounded-lg hover:bg-gray-50"
                >
                    {{ __('Reject all') }}
                </button>
                <button
                    wire:click="acceptAll"
                    class="px-4 py-2 text-xs bg-primary-600 text-white rounded-lg hover:bg-primary-700"
                >
                    {{ __('Accept all') }}
                </button>
            </div>
        </div>

        {{-- Expandable details --}}
        @if($showDetails)
        <div class="mt-4 border-t border-gray-100 pt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">

            {{-- Necessary (always on) --}}
            <div class="bg-gray-50 rounded-lg p-3">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs font-semibold text-gray-800">{{ __('Necessary') }}</span>
                    <span class="text-xs text-gray-400 bg-gray-200 rounded-full px-2 py-0.5">{{ __('Always on') }}</span>
                </div>
                <p class="text-xs text-gray-500">{{ __('Required for the site to function: login, cart, security.') }}</p>
            </div>

            {{-- Analytics --}}
            <div class="bg-gray-50 rounded-lg p-3">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs font-semibold text-gray-800">{{ __('Analytics') }}</span>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" wire:model.live="analytics" class="sr-only peer">
                        <div class="w-9 h-5 bg-gray-300 peer-checked:bg-primary-500 rounded-full peer-focus:ring-2 peer-focus:ring-primary-300 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-4"></div>
                    </label>
                </div>
                <p class="text-xs text-gray-500">{{ __('Helps us understand how you use the site (Google Analytics).') }}</p>
            </div>

            {{-- Marketing --}}
            <div class="bg-gray-50 rounded-lg p-3">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs font-semibold text-gray-800">{{ __('Marketing') }}</span>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" wire:model.live="marketing" class="sr-only peer">
                        <div class="w-9 h-5 bg-gray-300 peer-checked:bg-primary-500 rounded-full peer-focus:ring-2 peer-focus:ring-primary-300 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-4"></div>
                    </label>
                </div>
                <p class="text-xs text-gray-500">{{ __('Personalized ads based on your activity.') }}</p>
            </div>

            {{-- Preferences --}}
            <div class="bg-gray-50 rounded-lg p-3">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs font-semibold text-gray-800">{{ __('Preferences') }}</span>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" wire:model.live="preferences" class="sr-only peer">
                        <div class="w-9 h-5 bg-gray-300 peer-checked:bg-primary-500 rounded-full peer-focus:ring-2 peer-focus:ring-primary-300 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-4"></div>
                    </label>
                </div>
                <p class="text-xs text-gray-500">{{ __('Remember your language and currency settings.') }}</p>
            </div>

        </div>

        <div class="mt-3 flex justify-end">
            <button
                wire:click="savePreferences"
                class="px-5 py-2 text-xs bg-primary-600 text-white rounded-lg hover:bg-primary-700"
            >
                {{ __('Save my preferences') }}
            </button>
        </div>
        @endif

    </div>
</div>
@endif