@php(
    $title = 'Customer Dashboard'
)
@php(
    $heading = 'Welcome back'
)
@php(
    $sidebar = view()->make('dashboard.partials.customer-sidebar')->render()
)

@extends('layouts.dashboard', compact('title','heading','sidebar'))

@section('content')
    <div class="mb-4">
{{-- Notice bar will be rendered by the dashboard layout to avoid duplication --}}
    </div>

    <!-- Welcome hero -->
    <section class="relative mb-6">
        @php($u = auth()->user())
        @php($avatarUrl = !empty($u->avatar_path)
            ? \Illuminate\Support\Facades\Storage::disk('public')->url($u->avatar_path)
            : ( ($u->gender ?? 'male') === 'female'
                ? 'https://api.dicebear.com/7.x/adventurer/svg?seed='.urlencode($u->name).'&gender=female'
                : 'https://api.dicebear.com/7.x/adventurer/svg?seed='.urlencode($u->name).'&gender=male'
            )
        )
        <div class="rounded-2xl bg-gradient-to-r from-violet-600 via-fuchsia-600 to-pink-600 text-white p-6 shadow">
            <div class="flex items-center gap-3">
                <img src="{{ $avatarUrl }}" alt="Avatar" class="w-10 h-10 rounded-full object-cover ring-2 ring-white/30" referrerpolicy="no-referrer" />
                <h2 class="text-2xl md:text-3xl font-extrabold tracking-tight">Welcome back, {{ $u->name }} <span class="opacity-90">👋</span></h2>
                <span class="ml-auto inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/20 text-sm">Plan: <strong>{{ $activePlan->name ?? 'Free' }}</strong></span>
            </div>
            <p class="mt-2 text-white/90">Your personalized dashboard overview</p>
        </div>
    </section>

    <!-- Stat cards -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div class="p-4 rounded-2xl shadow bg-gradient-to-br from-violet-50 to-white border border-violet-100">
            <div class="flex items-center gap-2 mb-1">
                <span class="inline-grid place-items-center w-8 h-8 rounded-full bg-violet-100 text-violet-700">
                    <svg class="menu-icon icon-modern w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
                </span>
                <div class="text-xs text-slate-600">Daily Download</div>
            </div>
            <div id="stat-daily" class="text-3xl font-extrabold text-slate-900">{{ number_format($dailyDownloads ?? 0) }}</div>
        </div>
        <div class="p-4 rounded-2xl shadow bg-gradient-to-br from-fuchsia-50 to-white border border-fuchsia-100">
            <div class="flex items-center gap-2 mb-1">
                <span class="inline-grid place-items-center w-8 h-8 rounded-full bg-fuchsia-100 text-fuchsia-700">
                    <svg class="menu-icon icon-modern w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v16H4z"/><path d="M8 12h8"/></svg>
                </span>
                <div class="text-xs text-slate-600">Total Download</div>
            </div>
            <div id="stat-total" class="text-3xl font-extrabold text-slate-900">{{ number_format($totalDownloads ?? 0) }}</div>
        </div>
        <div class="p-4 rounded-2xl shadow bg-gradient-to-br from-emerald-50 to-white border border-emerald-100">
            <div class="flex items-center gap-2 mb-1">
                <span class="inline-grid place-items-center w-8 h-8 rounded-full bg-emerald-100 text-emerald-700">
                    <svg class="menu-icon icon-modern w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 18L18 6M6 6l12 12"/></svg>
                </span>
                <div class="text-xs text-slate-600">Total Activation</div>
            </div>
            <div id="stat-activations" class="text-3xl font-extrabold text-slate-900">{{ number_format($totalActivations ?? 0) }}</div>
        </div>
        <div class="p-4 rounded-2xl shadow bg-gradient-to-br from-sky-50 to-white border border-sky-100">
            <div class="flex items-center gap-2 mb-1">
                <span class="inline-grid place-items-center w-8 h-8 rounded-full bg-sky-100 text-sky-700">
                    <svg class="menu-icon icon-modern w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7h18M5 12h14M7 17h10"/></svg>
                </span>
                <div class="text-xs text-slate-600">Total Tickets</div>
            </div>
            <div id="stat-tickets" class="text-3xl font-extrabold text-slate-900">{{ number_format($totalTickets ?? 0) }}</div>
        </div>
    </div>

    <!-- Membership summary -->
    <section class="mb-6">
        <div class="rounded-2xl bg-slate-900 text-white p-6 shadow">
            <div class="flex items-center gap-3">
                <h3 class="text-xl md:text-2xl font-extrabold">Your Membership</h3>
                <span class="ml-auto inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/20 text-sm">Current Plan: <strong>{{ $activePlan->name ?? 'Free' }}</strong></span>
            </div>
            <p class="mt-2 text-white/80 text-sm">Manage or upgrade your plan for more benefits.</p>
            <div class="mt-4">
                <a href="{{ route('customer.membership') }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-violet-600 hover:bg-violet-500">
                    <svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12h16M12 4v16"/></svg>
                    Manage Plan
                </a>
                <a href="{{ route('membership.index') }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-white text-slate-800 hover:bg-slate-100 ml-2">View All Plans</a>
            </div>
        </div>
    </section>

    @include('partials.category-card-section')

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="rounded-2xl shadow bg-gradient-to-br from-violet-50 to-white border border-violet-100 p-4">
            <div class="flex items-center gap-2 mb-2">
                <span class="inline-grid place-items-center w-8 h-8 rounded-full bg-violet-100 text-violet-700">
                    <svg class="menu-icon icon-modern w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7h18M5 12h14M7 17h10"/></svg>
                </span>
                <h3 class="font-semibold"><a href="{{ route('customer.support_tickets') }}" class="hover:text-violet-700">Latest Tickets</a></h3>
            </div>
            <ul class="text-sm space-y-1">
                @forelse(($latestTickets ?? collect()) as $ticket)
                    <li class="flex items-center justify-between px-2 py-1 rounded hover:bg-violet-50">
                        <a href="{{ route('customer.support_tickets.show', $ticket) }}" class="text-slate-700 hover:text-violet-600">
                            Ticket #{{ $ticket->ticket_code ?? $ticket->id }}: {{ \Illuminate\Support\Str::limit($ticket->subject ?? '—', 40) }}
                        </a>
                        <span class="text-xs {{ ($ticket->status ?? '') === 'open' ? 'text-emerald-600' : 'text-slate-500' }}">{{ ucfirst($ticket->status ?? 'open') }}</span>
                    </li>
                @empty
                    <li class="text-sm text-slate-500">No tickets yet. <a class="text-violet-600" href="{{ route('customer.support_tickets') }}">Create one</a></li>
                @endforelse
            </ul>
        </div>
        <div class="rounded-2xl shadow bg-gradient-to-br from-emerald-50 to-white border border-emerald-100 p-4">
            <div class="flex items-center gap-2 mb-2">
                <span class="inline-grid place-items-center w-8 h-8 rounded-full bg-emerald-100 text-emerald-700">
                    <svg class="menu-icon icon-modern w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 18L18 6M6 6l12 12"/></svg>
                </span>
                <h3 class="font-semibold"><a href="{{ route('customer.activation_center') }}" class="hover:text-emerald-700">Latest Activation History</a></h3>
            </div>
            <ul class="text-sm space-y-1">
                @forelse(($latestActivationEvents ?? collect()) as $item)
                    @php($ok = in_array(strtolower($item['status'] ?? ''), ['approved','activated','active']))
                    <li class="flex items-center justify-between px-2 py-1 rounded hover:bg-emerald-50">
                        <a href="{{ $item['url'] ?? '#' }}" class="text-slate-700 hover:text-emerald-700">
                            {{ $item['title'] ?? 'Product' }}
                        </a>
                        <span class="text-xs {{ $ok ? 'text-emerald-600' : 'text-slate-500' }}">{{ ucfirst($item['status'] ?? 'unknown') }}</span>
                    </li>
                @empty
                    <li class="text-sm text-slate-500">No activations yet.</li>
                @endforelse
            </ul>
        </div>
        <div class="rounded-2xl shadow bg-gradient-to-br from-sky-50 to-white border border-sky-100 p-4">
            <div class="flex items-center gap-2 mb-2">
                <span class="inline-grid place-items-center w-8 h-8 rounded-full bg-sky-100 text-sky-700">
                    <svg class="menu-icon icon-modern w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
                </span>
                <h3 class="font-semibold"><a href="{{ route('customer.last_viewed') }}" class="hover:text-sky-700">Last Viewed</a></h3>
            </div>
            <ul class="text-sm space-y-1">
                @forelse(($lastViewedProducts ?? collect()) as $p)
                    <li class="px-2 py-1 rounded hover:bg-sky-50">
                        <a href="{{ route('products.show', $p) }}" class="hover:text-sky-700">{{ $p->name }}</a>
                    </li>
                @empty
                    <li class="text-sm text-slate-500">No recent views.</li>
                @endforelse
            </ul>
        </div>
    </div>

    {{-- Recently added section removed by request --}}
@endsection

@section('footer_scripts')
    <div id="stats-endpoint" data-stats-endpoint="{{ route('api.stats') }}" class="hidden"></div>
    <script>
        (function(){
            const holder = document.getElementById('stats-endpoint');
            const endpoint = holder ? holder.dataset.statsEndpoint : undefined;
            if (!endpoint) return;
            async function fetchStats(){
                try {
                    const res = await fetch(endpoint, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                    if (!res.ok) return;
                    const data = await res.json();
                    const setText = (id, val) => {
                        const el = document.getElementById(id);
                        if (el) el.textContent = Number(val || 0).toLocaleString();
                    };
                    setText('stat-daily', data.dailyDownloads);
                    setText('stat-total', data.totalDownloads);
                    setText('stat-activations', data.totalActivations);
                    setText('stat-tickets', data.totalTickets);
                } catch (e) {}
            }
            fetchStats();
            setInterval(fetchStats, 10000);
        })();
    </script>
@endsection