@extends('layouts.member')

@section('title', 'Dashboard - ElevateWell Worldwide')

@section('content')
<div class="space-y-6">

    <!-- Top Row: Welcome Banner & Hero Promo -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <!-- User Welcome Card -->
        <div class="lg:col-span-6 bg-gradient-to-br from-sky-900 via-blue-900 to-slate-950 text-white rounded-2xl p-6 shadow-md relative overflow-hidden flex flex-col justify-between">
            <div class="absolute -right-6 -bottom-6 w-36 h-36 bg-cyan-400/10 rounded-full blur-2xl pointer-events-none"></div>
            
            <div>
                <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight mb-2">
                    Hi, {{ $user->first_name }}!
                </h1>
                <div class="space-y-1 text-xs text-sky-100 font-medium">
                    <p class="flex items-center gap-2">
                        <i data-lucide="mail" class="w-3.5 h-3.5 opacity-80"></i>
                        <span>{{ $user->email }}</span>
                    </p>
                    <p class="flex items-center gap-2">
                        <i data-lucide="award" class="w-3.5 h-3.5 opacity-80"></i>
                        <span>Sponsored by {{ $user->sponsor ? $user->sponsor->full_name : ($appName ?? 'ElevateWell') }}</span>
                    </p>
                    <p class="flex items-center gap-2">
                        <i data-lucide="user" class="w-3.5 h-3.5 opacity-80"></i>
                        <span class="font-mono">{{ $user->account_id }}</span>
                    </p>
                </div>
            </div>

            <!-- Badges: Dealer & Package Tier -->
            <div class="flex items-center gap-2.5 mt-5">
                <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-amber-100 text-amber-900 rounded-lg text-xs font-bold shadow-sm">
                    <i data-lucide="ribbon" class="w-3.5 h-3.5 text-amber-700"></i>
                    <span>{{ $user->dealer_status }}</span>
                </span>
                <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-sky-100 text-sky-900 rounded-lg text-xs font-bold shadow-sm">
                    <i data-lucide="check-circle-2" class="w-3.5 h-3.5 text-sky-600"></i>
                    <span>{{ $user->rank }}</span>
                </span>
            </div>
        </div>

        <!-- Hero Slider Carousel (Exact Live ElevateWell match) -->
        <div class="lg:col-span-6 rounded-2xl shadow-md overflow-hidden relative group min-h-[220px]"
             x-data="{
                currentSlide: 0,
                totalSlides: 4,
                timer: null,
                init() {
                    this.timer = setInterval(() => {
                        this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
                    }, 4500);
                }
             }">
            
            <!-- Slide 0: Powerwell Green Barley Banner -->
            <div x-show="currentSlide === 0" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-98" x-transition:enter-end="opacity-100 transform scale-100" class="h-full">
                <a href="{{ route('store.products') }}" class="block h-full relative">
                    <img src="{{ asset('images/banners/banner-green-barley.png') }}" alt="Powerwell Green Barley" class="w-full h-full object-cover min-h-[220px] max-h-[260px] rounded-2xl">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent rounded-2xl pointer-events-none"></div>
                </a>
            </div>

            <!-- Slide 1: Powerwell White Beauty Banner -->
            <div x-show="currentSlide === 1" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-98" x-transition:enter-end="opacity-100 transform scale-100" class="h-full">
                <a href="{{ route('store.products') }}" class="block h-full relative">
                    <img src="{{ asset('images/banners/banner-white-beauty.png') }}" alt="Powerwell White Beauty Glutathione" class="w-full h-full object-cover min-h-[220px] max-h-[260px] rounded-2xl">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent rounded-2xl pointer-events-none"></div>
                </a>
            </div>

            <!-- Slide 2: Powerwell Latte Banner -->
            <div x-show="currentSlide === 2" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-98" x-transition:enter-end="opacity-100 transform scale-100" class="h-full">
                <a href="{{ route('store.products') }}" class="block h-full relative">
                    <img src="{{ asset('images/banners/banner-latte.png') }}" alt="Powerwell Latte with Ganoderma" class="w-full h-full object-cover min-h-[220px] max-h-[260px] rounded-2xl">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent rounded-2xl pointer-events-none"></div>
                </a>
            </div>

            <!-- Slide 3: Powerwell Pure Strong Brew Banner -->
            <div x-show="currentSlide === 3" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-98" x-transition:enter-end="opacity-100 transform scale-100" class="h-full">
                <a href="{{ route('store.products') }}" class="block h-full relative">
                    <img src="{{ asset('images/banners/banner-strongbrew.png') }}" alt="Powerwell Pure Strong Brew" class="w-full h-full object-cover min-h-[220px] max-h-[260px] rounded-2xl">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent rounded-2xl pointer-events-none"></div>
                </a>
            </div>

            <!-- Slider Dots Pagination (matching live screenshot dots) -->
            <div class="absolute bottom-3 left-1/2 -translate-x-1/2 flex items-center gap-2 z-20">
                <button @click="currentSlide = 0" class="w-2.5 h-2.5 rounded-full transition-all"
                    :class="currentSlide === 0 ? 'bg-white w-6' : 'bg-white/50 hover:bg-white/80'"></button>
                <button @click="currentSlide = 1" class="w-2.5 h-2.5 rounded-full transition-all"
                    :class="currentSlide === 1 ? 'bg-white w-6' : 'bg-white/50 hover:bg-white/80'"></button>
                <button @click="currentSlide = 2" class="w-2.5 h-2.5 rounded-full transition-all"
                    :class="currentSlide === 2 ? 'bg-white w-6' : 'bg-white/50 hover:bg-white/80'"></button>
                <button @click="currentSlide = 3" class="w-2.5 h-2.5 rounded-full transition-all"
                    :class="currentSlide === 3 ? 'bg-white w-6' : 'bg-white/50 hover:bg-white/80'"></button>
            </div>
        </div>
    </div>

    <!-- Middle KPI Row -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        
        <!-- Maintenance Status Card -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 border border-slate-200 dark:border-slate-700 shadow-sm flex flex-col justify-between">
            <div class="flex items-center gap-2 text-xs font-bold text-slate-700 dark:text-slate-300 mb-3">
                <i data-lucide="calendar" class="w-4 h-4 text-slate-400"></i>
                <span>Maintenance Status</span>
            </div>
            <div class="space-y-2 text-xs">
                <div class="flex items-center justify-between">
                    <span class="text-slate-500">September 2026</span>
                    <span class="inline-flex items-center gap-1 font-semibold text-rose-600 bg-rose-50 dark:bg-rose-950/40 px-2 py-0.5 rounded">
                        <i data-lucide="x-circle" class="w-3 h-3"></i> Not Maintained
                    </span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-slate-500">October 2026</span>
                    <span class="inline-flex items-center gap-1 font-semibold text-amber-600 bg-amber-50 dark:bg-amber-950/40 px-2 py-0.5 rounded">
                        <i data-lucide="clock" class="w-3 h-3"></i> Not Yet
                    </span>
                </div>
            </div>
            <a href="{{ route('account.maintenance') }}" class="mt-4 text-[11px] font-semibold text-sky-700 hover:underline">
                View Maintenance details &rarr;
            </a>
        </div>

        <!-- Starter / Package Earnings Card -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 border border-slate-200 dark:border-slate-700 shadow-sm flex flex-col justify-between">
            <div class="text-xs font-bold text-slate-700 dark:text-slate-300">Starter</div>
            <div class="my-2">
                <span class="text-3xl font-extrabold text-slate-900 dark:text-white">₱{{ number_format($starterEarnings, 2) }}</span>
                <p class="text-[11px] text-slate-500 mt-1">Total starter account earnings</p>
            </div>
            <div class="h-1 bg-slate-100 rounded-full overflow-hidden">
                <div class="h-full bg-sky-500 w-1/4"></div>
            </div>
        </div>

        <!-- Rank Advancement Card -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 border-2 border-dashed border-sky-500/40 dark:border-sky-500/20 shadow-sm flex flex-col justify-between text-center">
            <div>
                <h3 class="text-lg font-bold text-sky-800 dark:text-sky-400">Bronze</h3>
                <p class="text-[11px] text-slate-500">Unlock additional income streams</p>
            </div>
            <a href="{{ route('account.upgrade') }}" class="inline-flex items-center justify-center gap-1.5 px-4 py-2 bg-sky-700 hover:bg-sky-800 text-white rounded-xl text-xs font-bold shadow transition mt-3">
                <i data-lucide="arrow-up-circle" class="w-4 h-4"></i>
                <span>Upgrade Now</span>
            </a>
        </div>

        <!-- Replicated Personal Store Link Card -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 border border-slate-200 dark:border-slate-700 shadow-sm flex flex-col justify-between"
             x-data="{ copied: false, showQrModal: false }">
            <div class="flex items-center gap-2 text-sm font-bold text-slate-800 dark:text-white mb-2.5">
                <i data-lucide="link" class="w-4 h-4 text-slate-400"></i>
                <span>Store Link</span>
            </div>
            
            <div class="flex items-center gap-2">
                <div class="flex-1 min-w-0 bg-slate-50 dark:bg-slate-900/60 border border-dashed border-slate-300 dark:border-slate-600 rounded-xl px-3 py-2 flex items-center">
                    <input type="text" readonly value="{{ url('/store/' . $user->account_id) }}"
                        @click="$el.select()"
                        class="w-full bg-transparent text-xs sm:text-sm text-slate-700 dark:text-slate-200 outline-none truncate font-medium cursor-pointer">
                </div>
                <button @click="navigator.clipboard.writeText('{{ url('/store/' . $user->account_id) }}'); copied = true; setTimeout(() => copied = false, 2000)"
                    class="w-9 h-9 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-700 hover:bg-slate-50 dark:hover:bg-slate-600 text-slate-600 dark:text-slate-200 flex items-center justify-center shrink-0 shadow-xs transition" 
                    title="Copy Store Link">
                    <i x-show="!copied" data-lucide="copy" class="w-4 h-4"></i>
                    <i x-show="copied" data-lucide="check" class="w-4 h-4 text-emerald-500"></i>
                </button>
                <button @click="showQrModal = true; $nextTick(() => { if (window.lucide) lucide.createIcons(); })"
                    class="w-9 h-9 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-700 hover:bg-slate-50 dark:hover:bg-slate-600 text-slate-600 dark:text-slate-200 flex items-center justify-center shrink-0 shadow-xs transition" 
                    title="View QR Code">
                    <i data-lucide="qr-code" class="w-4 h-4"></i>
                </button>
            </div>

            <div class="flex items-center justify-between mt-3 text-[11px] text-slate-500 dark:text-slate-400">
                <span x-text="copied ? 'Copied to clipboard!' : 'Personal affiliate shop'"></span>
                <div class="flex items-center gap-2.5">
                    <a href="{{ route('public.store', $user->account_id) }}" target="_blank" class="hover:text-sky-600 dark:hover:text-sky-400 flex items-center gap-1">Visit <i data-lucide="external-link" class="w-3 h-3"></i></a>
                    <a href="{{ route('affiliate.setup') }}" class="font-semibold text-sky-600 dark:text-sky-400 hover:underline">Setup &rarr;</a>
                </div>
            </div>

            <!-- QR Code Modal -->
            <div x-show="showQrModal"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition ease-in duration-150"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4"
                 style="display: none;">
                <div class="bg-white dark:bg-slate-900 rounded-3xl max-w-sm w-full p-6 shadow-2xl border border-slate-200 dark:border-slate-800 text-center space-y-4"
                     @click.outside="showQrModal = false">
                    <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
                        <div class="flex items-center gap-2 text-left">
                            <div class="w-8 h-8 rounded-lg bg-sky-50 dark:bg-sky-950/40 text-sky-600 dark:text-sky-400 flex items-center justify-center">
                                <i data-lucide="qr-code" class="w-4 h-4"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-bold text-slate-900 dark:text-white">Store QR Code</h3>
                                <p class="text-[10px] text-slate-400">Scan to visit official distributor store</p>
                            </div>
                        </div>
                        <button @click="showQrModal = false" class="p-1 rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800">
                            <i data-lucide="x" class="w-4 h-4"></i>
                        </button>
                    </div>

                    <!-- QR Code Frame -->
                    <div class="p-4 bg-white rounded-2xl border border-slate-100 shadow-inner inline-block mx-auto">
                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data={{ urlencode(url('/store/' . $user->account_id)) }}" 
                             alt="Store QR Code" 
                             class="w-48 h-48 mx-auto object-contain">
                    </div>

                    <div class="space-y-1">
                        <p class="text-xs font-bold text-slate-800 dark:text-white">{{ $user->full_name }}</p>
                        <p class="text-[10px] font-mono text-slate-400 truncate px-2">{{ url('/store/' . $user->account_id) }}</p>
                    </div>

                    <div class="pt-2 flex items-center gap-2">
                        <button @click="navigator.clipboard.writeText('{{ url('/store/' . $user->account_id) }}'); copied = true; setTimeout(() => copied = false, 2000)" 
                                class="flex-1 py-2 px-3 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 rounded-xl text-xs font-semibold flex items-center justify-center gap-1.5 transition">
                            <i :data-lucide="copied ? 'check' : 'copy'" class="w-3.5 h-3.5"></i>
                            <span x-text="copied ? 'Copied!' : 'Copy Link'"></span>
                        </button>
                        <a href="https://api.qrserver.com/v1/create-qr-code/?size=500x500&data={{ urlencode(url('/store/' . $user->account_id)) }}" 
                           download="store-qr-{{ $user->account_id }}.png" 
                           target="_blank"
                           class="flex-1 py-2 px-3 bg-sky-600 hover:bg-sky-500 text-white rounded-xl text-xs font-semibold flex items-center justify-center gap-1.5 transition shadow-xs">
                            <i data-lucide="download" class="w-3.5 h-3.5"></i>
                            <span>Download</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Income Metrics Cards: Accumulated, Withdrawal, Ecom Sales -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Accumulated Income -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 border border-slate-200 dark:border-slate-700 shadow-sm flex items-center justify-between">
            <div>
                <p class="text-xs font-semibold text-slate-500">Accumulated Income</p>
                <h3 class="text-2xl font-extrabold text-slate-900 dark:text-white mt-1">₱{{ number_format($user->total_earned, 2) }}</h3>
                <p class="text-[11px] text-slate-400 mt-0.5">Gross total earnings</p>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-sky-50 dark:bg-sky-950/40 text-sky-700 dark:text-sky-400 flex items-center justify-center">
                <i data-lucide="wallet" class="w-6 h-6"></i>
            </div>
        </div>

        <!-- Total Withdrawal -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 border border-slate-200 dark:border-slate-700 shadow-sm flex items-center justify-between">
            <div>
                <p class="text-xs font-semibold text-slate-500">Total Withdrawal</p>
                <h3 class="text-2xl font-extrabold text-rose-600 mt-1">₱{{ number_format($user->total_withdrawn, 2) }}</h3>
                <p class="text-[11px] text-slate-400 mt-0.5">Total payout received</p>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-rose-50 dark:bg-rose-950/40 text-rose-600 flex items-center justify-center">
                <i data-lucide="arrow-down-circle" class="w-6 h-6"></i>
            </div>
        </div>

        <!-- Ecom Sales -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 border border-slate-200 dark:border-slate-700 shadow-sm flex items-center justify-between">
            <div>
                <p class="text-xs font-semibold text-slate-500">Ecom Sales</p>
                <h3 class="text-2xl font-extrabold text-blue-600 mt-1">
                    ₱{{ number_format($ecomSales, 2) }} <span class="text-xs font-medium text-slate-500">{{ $ecomPv }} PV</span>
                </h3>
                <p class="text-[11px] text-slate-400 mt-0.5">Total Personal Sales</p>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-blue-50 dark:bg-blue-950/40 text-blue-600 flex items-center justify-center">
                <i data-lucide="shopping-cart" class="w-6 h-6"></i>
            </div>
        </div>
    </div>

    <!-- Bottom Row: Network Summary & Advisories -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <!-- Network Summary -->
        <div class="lg:col-span-6 bg-white dark:bg-slate-800 rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm flex flex-col justify-between">
            <div>
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-base font-bold text-slate-800 dark:text-white">Network Summary</h2>
                    <a href="{{ route('network.genealogy') }}" class="p-2 rounded-lg bg-slate-50 dark:bg-slate-700 hover:bg-slate-100 text-sky-700 dark:text-sky-400" title="View Genealogy">
                        <i data-lucide="network" class="w-4 h-4"></i>
                    </a>
                </div>

                <div class="flex items-center justify-between py-2 border-b border-slate-100 dark:border-slate-700">
                    <span class="text-xs text-slate-500">Total Network Size</span>
                    <span class="text-lg font-bold text-slate-800 dark:text-white">{{ $totalNetwork }}</span>
                </div>

                <div class="mt-4">
                    <span class="text-[11px] font-bold uppercase tracking-wider text-slate-400">STARTER</span>
                    <div class="grid grid-cols-2 gap-3 mt-2">
                        <div class="bg-slate-50 dark:bg-slate-700/40 p-3 rounded-xl">
                            <span class="text-[11px] text-slate-500">Left Leg</span>
                            <p class="text-lg font-bold text-slate-800 dark:text-white">{{ $leftCount }}</p>
                        </div>
                        <div class="bg-slate-50 dark:bg-slate-700/40 p-3 rounded-xl">
                            <span class="text-[11px] text-slate-500">Left PV</span>
                            <p class="text-lg font-bold text-slate-800 dark:text-white">{{ $leftPv }}</p>
                        </div>
                        <div class="bg-slate-50 dark:bg-slate-700/40 p-3 rounded-xl">
                            <span class="text-[11px] text-slate-500">Right Leg</span>
                            <p class="text-lg font-bold text-slate-800 dark:text-white">{{ $rightCount }}</p>
                        </div>
                        <div class="bg-slate-50 dark:bg-slate-700/40 p-3 rounded-xl">
                            <span class="text-[11px] text-slate-500">Right PV</span>
                            <p class="text-lg font-bold text-slate-800 dark:text-white">{{ $rightPv }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pt-4 mt-4 border-t border-slate-100 dark:border-slate-700 flex items-center justify-between text-xs">
                <a href="{{ route('network.add') }}" class="font-semibold text-sky-700 hover:underline inline-flex items-center gap-1">
                    <i data-lucide="user-plus" class="w-3.5 h-3.5"></i>
                    <span>Add to Network</span>
                </a>
                <a href="{{ route('network.genealogy') }}" class="font-semibold text-sky-700 hover:underline inline-flex items-center gap-1">
                    <span>View Genealogy Tree &rarr;</span>
                </a>
            </div>
        </div>

        <!-- Advisories Feed -->
        <div class="lg:col-span-6 bg-white dark:bg-slate-800 rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm flex flex-col justify-between">
            <div>
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-2">
                        <i data-lucide="message-square" class="w-4 h-4 text-sky-600"></i>
                        <h2 class="text-base font-bold text-slate-800 dark:text-white">Advisory</h2>
                    </div>
                    <a href="{{ route('advisories') }}" class="text-xs font-semibold text-sky-700 hover:underline">
                        View All &rarr;
                    </a>
                </div>

                <div class="space-y-3">
                    @forelse($advisories as $advisory)
                        <div class="p-3.5 rounded-xl bg-slate-50 dark:bg-slate-700/40 border border-slate-100 dark:border-slate-600 flex items-start gap-3">
                            <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-950/60 text-blue-600 flex items-center justify-center shrink-0 mt-0.5">
                                <i data-lucide="info" class="w-4 h-4"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h4 class="text-xs font-bold text-slate-800 dark:text-white truncate">{{ $advisory->title }}</h4>
                                <p class="text-[11px] text-slate-500 dark:text-slate-400 mt-0.5 uppercase tracking-wide">{{ $advisory->category }} &bull; {{ $advisory->series_number }}</p>
                                <p class="text-xs text-slate-600 dark:text-slate-300 mt-1 line-clamp-2">{{ $advisory->content }}</p>
                            </div>
                        </div>
                    @empty
                        <p class="text-xs text-slate-500 py-4 text-center">No active advisories at this time.</p>
                    @endforelse
                </div>
            </div>

            <div class="pt-3 mt-3 border-t border-slate-100 dark:border-slate-700 text-center">
                <span class="text-[11px] text-slate-400">Keep updated with the latest company news and compliance notices.</span>
            </div>
        </div>
    </div>
</div>
@endsection