@php
$marketingSetting = \App\Models\MarketingSetting::first();
// Force enabled for now to satisfy user request, falling back to setting if it exists
$enabled = $marketingSetting->global_fake_sales_enabled ?? true; 

$recentProducts = \App\Modules\Product\Models\Product::where('status', 'published')
    ->inRandomOrder()
    ->take(10)
    ->select('id', 'title', 'thumbnail')
    ->get();
@endphp

@if($enabled && $recentProducts->count() > 0)
<div id="live-sales-notifications" x-data="liveNotifications" class="fixed bottom-20 sm:bottom-6 left-6 z-40 flex flex-col gap-3 pointer-events-none" x-cloak>
    <template x-for="note in activeNotifications" :key="note.id">
        <div
            x-show="note.show"
            x-transition:enter="transition ease-out duration-500"
            x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:translate-x-[-20px]"
            x-transition:enter-end="opacity-100 translate-y-0 sm:translate-x-0"
            x-transition:leave="transition ease-in duration-300"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0 translate-y-2"
            class="bg-[#0B0F19]/95 backdrop-blur-xl border border-white/10 shadow-2xl rounded-xl p-2 flex items-center gap-3 w-64 pointer-events-auto overflow-hidden relative group">
            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-brand-500 to-indigo-600"></div>

            <div class="w-14 h-14 rounded-xl bg-white/5 flex-shrink-0 overflow-hidden border border-white/10 shadow-inner">
                <template x-if="note.image">
                    <img :src="'/storage/' + note.image" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" :alt="note.name + ' notification'">
                </template>
                <template x-if="!note.image">
                    <div class="w-full h-full flex items-center justify-center text-xl bg-gradient-to-br from-brand-500/10 to-transparent">📦</div>
                </template>
            </div>

            <div class="flex-1 min-w-0 text-left">
                <p class="text-[10px] font-bold text-white/50 uppercase tracking-widest mb-1"><span class="text-indigo-400" x-text="note.name"></span> FROM <span class="text-white/80" x-text="note.location"></span></p>
                <p class="text-xs font-bold text-white leading-tight truncate" x-text="'Verified Purchase of ' + note.product"></p>
                <div class="flex items-center gap-2 mt-1.5">
                    <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse shadow-[0_0_8px_rgba(16,185,129,0.6)]"></div>
                    <p class="text-[9px] font-black text-emerald-400 uppercase tracking-wider" x-text="note.time + ' ago'"></p>
                </div>
            </div>
        </div>
    </template>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('liveNotifications', () => ({
            products: {!! json_encode($recentProducts) !!},
            firstNames: ['Alex', 'Jordan', 'Taylor', 'Morgan', 'Casey', 'Sam', 'Riley', 'Jamie', 'Charlie', 'Drew', 'Avery', 'Parker'],
            locations: ['United States', 'Germany', 'Spain', 'Canada', 'United Kingdom', 'Brazil', 'Australia', 'France', 'Italy', 'Japan', 'Mexico'],
            times: ['Just now', '1 min', '2 mins', '5 mins', '10 mins', '15 mins'],
            activeNotifications: [],
            nextId: 1,

            init() {
                setTimeout(() => {
                    this.showRandomNotification();
                }, 1000);
            },

            showRandomNotification() {
                if (!this.products.length) return;

                const product = this.products[Math.floor(Math.random() * this.products.length)];
                const name = this.firstNames[Math.floor(Math.random() * this.firstNames.length)];
                const loc = this.locations[Math.floor(Math.random() * this.locations.length)];
                const time = this.times[Math.floor(Math.random() * this.times.length)];

                const notification = {
                    id: this.nextId++,
                    product: product.title,
                    image: product.thumbnail,
                    name: name,
                    location: loc,
                    time: time,
                    show: false
                };

                this.activeNotifications.push(notification);

                setTimeout(() => {
                    const idx = this.activeNotifications.findIndex(n => n.id === notification.id);
                    if (idx !== -1) this.activeNotifications[idx].show = true;
                }, 50);

                setTimeout(() => {
                    const idx = this.activeNotifications.findIndex(n => n.id === notification.id);
                    if (idx !== -1) {
                        this.activeNotifications[idx].show = false;
                        setTimeout(() => {
                            this.activeNotifications = this.activeNotifications.filter(n => n.id !== notification.id);
                        }, 500);
                    }
                }, 5000);

                const nextDelay = Math.floor(Math.random() * (15000 - 8000 + 1)) + 8000;
                setTimeout(() => {
                    this.showRandomNotification();
                }, nextDelay);
            }
        }));
    });
</script>
@endif