@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
    <div class="mb-6 flex items-center justify-between">
        <h1 class="text-2xl font-bold sm:text-3xl">Dashboard Overview</h1>
        <span class="rounded-full bg-cyan-50 px-3 py-1 text-xs font-medium text-cyan-700">Last 7 Days Stats</span>
    </div>

    <div class="mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
        <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
            <div class="mb-3 inline-flex rounded-xl bg-cyan-50 p-2 text-cyan-700">
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 18V5l12-2v13M9 18a3 3 0 11-6 0 3 3 0 016 0zm12-2a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
            </div>
            <p class="text-sm text-slate-500">Contents</p>
            <p class="text-2xl font-semibold">{{ number_format($ringtoneCount) }}</p>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
            <div class="mb-3 inline-flex rounded-xl bg-violet-50 p-2 text-violet-700">
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 7h18M3 12h18M3 17h12"/>
                </svg>
            </div>
            <p class="text-sm text-slate-500">Categories</p>
            <p class="text-2xl font-semibold">{{ number_format($categoryCount) }}</p>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
            <div class="mb-3 inline-flex rounded-xl bg-emerald-50 p-2 text-emerald-700">
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 8v8m-4-4h8"/>
                </svg>
            </div>
            <p class="text-sm text-slate-500">Total Downloads</p>
            <p class="text-2xl font-semibold">{{ number_format($downloadsCount) }}</p>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
            <div class="mb-3 inline-flex rounded-xl bg-indigo-50 p-2 text-indigo-700">
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4.4 0-8 2-8 4.5V20h16v-1.5c0-2.5-3.6-4.5-8-4.5z"/>
                </svg>
            </div>
            <p class="text-sm text-slate-500">Today Visitors</p>
            <p class="text-2xl font-semibold">{{ number_format($trafficStats['today_unique_visitors'] ?? 0) }}</p>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
            <div class="mb-3 inline-flex rounded-xl bg-amber-50 p-2 text-amber-700">
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 12h18M12 3v18"/>
                </svg>
            </div>
            <p class="text-sm text-slate-500">Today Hits</p>
            <p class="text-2xl font-semibold">{{ number_format($trafficStats['today_hits'] ?? 0) }}</p>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
            <div class="mb-3 inline-flex rounded-xl bg-rose-50 p-2 text-rose-700">
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 5h18v14H3zM8 9h8M8 13h6"/>
                </svg>
            </div>
            <p class="text-sm text-slate-500">Total Visitors</p>
            <p class="text-2xl font-semibold">{{ number_format($trafficStats['total_unique_visitors'] ?? 0) }}</p>
        </div>
    </div>

    <section class="mb-6 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-5">
        <h2 class="mb-4 text-lg font-semibold sm:text-xl">Traffic (Last 7 Days)</h2>
        <div class="mb-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            <div class="rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
                <p class="text-xs text-slate-500">7 Days Visitors</p>
                <p class="text-lg font-semibold">{{ number_format($trafficStats['last_7_days_unique_visitors'] ?? 0) }}</p>
            </div>
            <div class="rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
                <p class="text-xs text-slate-500">7 Days Hits</p>
                <p class="text-lg font-semibold">{{ number_format($trafficStats['last_7_days_hits'] ?? 0) }}</p>
            </div>
            <div class="rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
                <p class="text-xs text-slate-500">All Time Hits</p>
                <p class="text-lg font-semibold">{{ number_format($trafficStats['total_hits'] ?? 0) }}</p>
            </div>
        </div>
        <ul class="space-y-2">
            @forelse (($trafficStats['last_7_days'] ?? []) as $row)
                <li class="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 px-3 py-2 text-sm">
                    <span>{{ \Illuminate\Support\Carbon::parse($row['date'])->format('d M Y') }}</span>
                    <span class="text-slate-600">Visitors: {{ number_format($row['unique']) }} | Hits: {{ number_format($row['hits']) }}</span>
                </li>
            @empty
                <li>No traffic data yet.</li>
            @endforelse
        </ul>
    </section>

    <section class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-5">
        <h2 class="mb-4 text-lg font-semibold sm:text-xl">Trending Content</h2>
        <ul class="space-y-2">
            @forelse ($trending as $item)
                <li class="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
                    <span>{{ $item->ringtone?->title ?? 'Unknown ringtone' }}</span>
                    <strong class="rounded-full bg-slate-900 px-2.5 py-1 text-xs text-white">{{ $item->score }}</strong>
                </li>
            @empty
                <li>No trending data yet.</li>
            @endforelse
        </ul>
    </section>
@endsection