@extends('layouts.admin.app')

@section('title', 'Dashboard')

@section('content')
<x-layouts.admin.page-container
    title="Dashboard"
    subtitle="Welcome back, {{ auth()->user()?->name ?? 'Admin' }}!"
    :breadcrumbs="[['label'=>'Dashboard']]"
>
    {{-- Stats Grid --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5 mb-6">
        <x-widgets.stats-card
            title="Total Users"
            value="12,489"
            change="+8.1%"
            period="vs last month"
            color="primary"
            :icon="'<svg class=\'w-6 h-6\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z\'/></svg>'"
        />
        <x-widgets.stats-card
            title="Monthly Revenue"
            value="$48,295"
            change="+14.3%"
            period="vs last month"
            color="green"
            :icon="'<svg class=\'w-6 h-6\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\'/></svg>'"
        />
        <x-widgets.stats-card
            title="Active Sessions"
            value="3,842"
            change="-2.4%"
            period="vs last hour"
            color="amber"
            :icon="'<svg class=\'w-6 h-6\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\'/></svg>'"
        />
        <x-widgets.stats-card
            title="Pending Tickets"
            value="127"
            change="+3"
            period="new today"
            color="red"
            :icon="'<svg class=\'w-6 h-6\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z\'/></svg>'"
        />
    </div>

    {{-- Charts + Recent Users row --}}
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-5 mb-6">
        {{-- Chart (spans 2 cols) --}}
        <div class="xl:col-span-2">
            <x-widgets.chart-card
                title="Revenue Overview"
                subtitle="Monthly revenue for the current year"
                chartId="revenue-overview"
                height="h-72"
            >
                <x-slot:actions>
                    <x-forms.select
                        name="chart_period"
                        :options="['12m'=>'Last 12 months','6m'=>'Last 6 months','3m'=>'Last 3 months']"
                        class="text-xs py-1.5 pr-8"
                    />
                </x-slot:actions>
                {{-- Chart placeholder (replace with Chart.js / ApexCharts call in @push('scripts')) --}}
                <div class="h-72 flex items-center justify-center">
                    <div class="text-center">
                        <div class="inline-flex items-end gap-1 h-40">
                            @foreach([40,65,50,80,70,90,75,95,85,100,88,110] as $h)
                                <div class="w-6 rounded-t bg-primary-500/20 dark:bg-primary-500/30 relative group"
                                     style="height: {{ $h }}%">
                                    <div class="absolute bottom-0 left-0 right-0 bg-primary-600 rounded-t transition-all duration-300 group-hover:bg-primary-500"
                                         style="height:{{ $h }}%"></div>
                                </div>
                            @endforeach
                        </div>
                        <p class="text-xs text-surface-400 mt-2">Integrate Chart.js or ApexCharts for live data</p>
                    </div>
                </div>
            </x-widgets.chart-card>
        </div>

        {{-- Recent Users --}}
        <x-widgets.recent-users :users="collect([])" />
    </div>
</x-layouts.admin.page-container>
@endsection