@use('Illuminate\Support\Number')
<x-app-layout>
    <x-slot name="header">
        <div class="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div class="min-w-0">
                <h2 class="text-2xl font-bold tracking-tight text-slate-900">Dashboard</h2>
                <p class="text-sm text-slate-500">{{ config('app.name', 'Asset Management') }} - Overview</p>
            </div>
            <div class="flex items-center gap-4">
                <!-- Theme Toggles Mockup -->
                <div class="bg-white border border-slate-200 rounded-lg p-1 flex gap-1">
                    <button class="p-1.5 rounded-md hover:bg-slate-50 text-slate-400">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z">
                            </path>
                        </svg>
                    </button>
                    <button class="p-1.5 rounded-md bg-slate-100 text-slate-900 shadow-xs">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z">
                            </path>
                        </svg>
                    </button>
                    <button class="p-1.5 rounded-md hover:bg-slate-50 text-slate-400">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                            </path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </x-slot>

    <div class="space-y-6 ">

        <!-- Metrics Cards -->
        <div class="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
            <!-- Total Assets -->
            <div class="bg-white rounded-xl p-6 shadow-xs border border-gray-100 flex flex-col justify-between h-32">
                <div class="h-10 w-10 text-slate-400 mb-2">
                    <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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                        </path>
                    </svg>
                </div>
                <div>
                    <h3 class="text-3xl font-bold text-slate-900">{{ number_format($stats['total_assets']) }}</h3>
                    <p class="text-xs text-slate-500 font-medium uppercase tracking-wide mt-1">Total Assets</p>
                </div>
            </div>

            <!-- MDAs -->
            <div class="bg-white rounded-xl p-6 shadow-xs border border-gray-100 flex flex-col justify-between h-32">
                <div class="h-10 w-10 text-slate-400 mb-2">
                    <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.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
                        </path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                </div>
                <div>
                    <h3 class="text-3xl font-bold text-slate-900">{{ number_format($stats['ministries_count']) }}</h3>
                    <p class="text-xs text-slate-500 font-medium uppercase tracking-wide mt-1">MDAs</p>
                </div>
            </div>

            <!-- Total Asset Value -->
            <div class="bg-white rounded-xl p-6 shadow-xs border border-gray-100 flex flex-col justify-between h-32">
                <div class="h-10 w-10 text-slate-400 mb-2">
                    <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">
                        </path>
                    </svg>
                </div>
                <div>
                    <h3 class="text-3xl font-bold text-slate-900">
                        ₦{{ Number::abbreviate($stats['total_asset_value']) }}</h3>
                    <p class="text-xs text-slate-500 font-medium uppercase tracking-wide mt-1">Total Asset Value</p>
                </div>
            </div>

            <!-- Total Requests -->
            <div class="bg-white rounded-xl p-6 shadow-xs border border-gray-100 flex flex-col justify-between h-32">
                <div class="h-10 w-10 text-slate-400 mb-2">
                    <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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                        </path>
                    </svg>
                </div>
                <div>
                    <h3 class="text-3xl font-bold text-slate-900">{{ number_format($stats['total_requests']) }}</h3>
                    <p class="text-xs text-slate-500 font-medium uppercase tracking-wide mt-1">Total Requests</p>
                </div>
            </div>
        </div>

        <!-- Total Requests Chart -->
        <div class="bg-white rounded-xl p-4 sm:p-6 shadow-xs border border-gray-100" x-data="requestsChartComponent()">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
                <div>
                    <p class="text-sm font-medium text-slate-500 mb-1">Total Requests</p>
                    <h3 class="text-3xl font-bold text-slate-900" x-text="totals[activeTab]">
                        {{ number_format(array_sum($chartDataYear)) }}</h3>
                </div>

                <!-- Time Filters -->
                <div class="flex bg-slate-100 rounded-lg p-1 w-full sm:w-auto overflow-x-auto">
                    <button @click="activeTab = 'year'"
                        :class="activeTab === 'year' ? 'bg-green-600 text-white shadow-xs' :
                            'text-slate-500 hover:text-slate-900'"
                        class="flex-1 sm:flex-none px-3 py-1 text-xs font-medium rounded-md transition-all">Year</button>
                    <button @click="activeTab = 'month'"
                        :class="activeTab === 'month' ? 'bg-green-600 text-white shadow-xs' :
                            'text-slate-500 hover:text-slate-900'"
                        class="flex-1 sm:flex-none px-3 py-1 text-xs font-medium rounded-md transition-all">Month</button>
                    <button @click="activeTab = 'week'"
                        :class="activeTab === 'week' ? 'bg-green-600 text-white shadow-xs' :
                            'text-slate-500 hover:text-slate-900'"
                        class="flex-1 sm:flex-none px-3 py-1 text-xs font-medium rounded-md transition-all">Week</button>
                </div>
            </div>

            <div class="relative h-72 w-full">
                <div x-show="isLoading" class="absolute inset-0 flex items-center justify-center bg-white/80 z-10">
                    <svg class="animate-spin h-8 w-8 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                            stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                        </path>
                    </svg>
                </div>
                <div x-show="!isLoading && isDataEmpty" class="absolute inset-0 flex items-center justify-center">
                    <x-ui.empty-state icon="chart-bar" title="No request data"
                        description="There is no request data available for this period." class="py-0" />
                </div>
                <div id="requestsChart" x-show="!isLoading && !isDataEmpty" class="w-full h-full"></div>
            </div>
        </div>

        <!-- Recently Added Assets Table -->
        <div class="md:bg-white md:rounded-xl md:shadow-xs md:border md:border-gray-50 overflow-hidden">
              <div
                class="p-4 rounded-xl md:rounded-none shadow-xs md:shadow-none sm:p-6 bg-white border border-gray-50 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <h3 class="font-bold text-slate-900">Recently Added Assets</h3>
                <div class="flex flex-wrap gap-2 w-full sm:w-auto">
                    <div class="grid grid-cols-2 gap-2 w-full sm:w-auto sm:flex">
                        <x-ui.button class="justify-center w-full sm:w-auto" variant="faint" size="sm"
                            href="{{ route('admin.assets.create') }}">+ Add Asset</x-ui.button>
                        <x-ui.button class="justify-center w-full sm:w-auto" variant="secondary" size="sm"
                            href="{{ route('admin.assets.index') }}">View All</x-ui.button>
                    </div>
                </div>
            </div>
            <div class="mt-4 md:mt-0">
                <div class="grid grid-cols-1 gap-4 md:hidden">
                    @forelse($recentAssets as $asset)
                        <div
                            class="bg-white p-5 rounded-xl shadow-xs border border-gray-100 active:bg-slate-50 transition-colors">
                            <div class="flex justify-between items-start mb-3">
                                <div>
                                    <span
                                        class="text-[10px] font-bold uppercase tracking-widest text-slate-400 block">Asset
                                        ID</span>
                                    <span
                                        class="font-mono text-sm font-semibold text-slate-900">#{{ $asset->asset_tag }}</span>
                                </div>
                                <x-ui.button variant="faint" size="sm"
                                    href="{{ route('admin.assets.show', $asset) }}">
                                    View
                                </x-ui.button>
                            </div>

                            <div class="mb-4">
                                <h4 class="text-base font-bold text-slate-900">{{ $asset->name }}</h4>
                                <p class="text-sm text-slate-500">{{ $asset->category->name }}</p>
                            </div>

                            <div class="grid grid-cols-2 gap-4 pt-4 border-t border-slate-50">
                                <div>
                                    <span
                                        class="text-[10px] font-bold uppercase tracking-widest text-slate-400 block">Location</span>
                                    <span
                                        class="text-sm text-slate-700">{{ $asset->ministry->name ?? 'Unassigned' }}</span>
                                </div>
                                <div>
                                    <span
                                        class="text-[10px] font-bold uppercase tracking-widest text-slate-400 block">Allocated</span>
                                    <span
                                        class="text-sm text-slate-700">{{ $asset->created_at->format('d M Y') }}</span>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="bg-white p-8 text-center rounded-xl border border-dashed border-slate-200">
                            <x-ui.empty-state icon="shopping-cart" title="No recent assets"
                                description="No assets have been added recently." />
                        </div>
                    @endforelse
                </div>

                <div class="hidden md:block">
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm text-left">
                            <thead
                                class="text-xs text-slate-400 uppercase tracking-wider bg-slate-50/50 border-b border-slate-50">
                                <tr>
                                    <th class="px-6 py-4 font-medium text-center w-22">S/N</th>
                                    <th class="px-6 py-4 font-medium">ID</th>
                                    <th class="px-6 py-4 font-medium">Asset Type</th>
                                    <th class="px-6 py-4 font-medium">Category</th>
                                    <th class="px-6 py-4 font-medium">Date Allocated</th>
                                    <th class="px-6 py-4 font-medium">Location</th>
                                    <th class="px-6 py-4 font-medium">Purchase Date</th>
                                    <th class="px-6 py-4 font-medium text-right">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-50">
                                @forelse($recentAssets as $asset)
                                    <tr class="hover:bg-slate-50/50 transition-colors">
                                        <td class="px-6 py-4 font-medium text-slate-400 text-center">
                                            {{ $loop->iteration }}</td>
                                        <td class="px-6 py-4 font-mono font-medium text-slate-900">
                                            #{{ $asset->asset_tag }}</td>
                                        <td class="px-6 py-4 text-slate-900 font-semibold">{{ $asset->name }}</td>
                                        <td class="px-6 py-4 text-slate-600">{{ $asset->category->name }}</td>
                                        <td class="px-6 py-4 text-slate-500">{{ $asset->created_at->format('d M Y') }}
                                        </td>
                                        <td class="px-6 py-4 text-slate-700">
                                            <span class="px-2 py-1 bg-slate-100 rounded text-xs">
                                                {{ $asset->ministry->name ?? 'Unassigned' }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 text-slate-500">
                                            {{ $asset->purchase_date?->format('d M Y') ?? '—' }}
                                        </td>
                                        <td class="px-6 py-4 text-right">
                                            <x-ui.button variant="faint" size="sm"
                                                href="{{ route('admin.assets.show', $asset) }}">View</x-ui.button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="py-12">
                                            <x-ui.empty-state icon="shopping-cart" title="No recent assets"
                                                description="No assets have been added recently." />
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts Section -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Assets By Suppliers -->
            <div class="bg-white rounded-xl p-6 shadow-xs border border-gray-100">
                <h3 class="font-bold text-slate-900 mb-6">Assets By Suppliers</h3>
                <div class="relative h-64 w-full flex flex-col justify-center">
                    @if ($ministryStats->sum('count') > 0)
                        <div id="suppliersChart" class="w-full h-full"></div>
                    @else
                        <x-ui.empty-state icon="chart-pie" title="No assets by supplier"
                            description="No assets have been assigned yet." class="py-0" />
                    @endif
                </div>
            </div>

            <!-- Assets By MDAs -->
            <div class="bg-white rounded-xl p-4 sm:p-6 shadow-xs border border-gray-100">
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
                    <h3 class="font-bold text-slate-900">Assets By MDAs</h3>

                    <x-ui.button class="w-full sm:w-auto justify-center" variant="faint" size="sm"
                        href="{{ route('admin.ministries.index') }}">View
                        All
                        MDAs</x-ui.button>
                </div>

                <div class="space-y-5">
                    @foreach ($ministryStats as $stat)
                        <div class="group">
                            <div class="flex justify-between text-sm mb-1.5 ">
                                <span
                                    class="font-medium text-slate-700 group-hover:text-slate-900 transition-colors">{{ $stat['name'] }}</span>
                                <span
                                    class="text-slate-400 group-hover:text-slate-600 transition-colors bg-slate-50 px-1.5 rounded text-xs">{{ $stat['count'] }}</span>
                            </div>
                            <div class="w-full bg-slate-100 rounded-full h-1.5 overflow-hidden">
                                @php
                                    $max = $ministryStats->max('count');
                                    $width = $max > 0 ? ($stat['count'] / $max) * 100 : 0;
                                    $colors = [
                                        'bg-blue-500',
                                        'bg-yellow-400',
                                        'bg-blue-600',
                                        'bg-indigo-500',
                                        'bg-red-400',
                                    ];
                                    $color = $colors[$loop->index % count($colors)];
                                @endphp
                                <div class="{{ $color }} h-1.5 rounded-full"
                                    style="width: {{ $width }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Recent Requests Table -->
        <div class="md:bg-white md:rounded-xl md:shadow-xs md:border md:border-gray-50 overflow-hidden">
            <div
                class="p-4 rounded-xl md:rounded-none shadow-xs md:shadow-none sm:p-6 bg-white border border-gray-50 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <div>
                    <h3 class="font-bold text-slate-900">Recent Asset Requests</h3>
                    <p class="text-xs text-slate-400 mt-0.5">Track new requests, approvals, and fulfillment</p>
                </div>
                <x-ui.button class="w-full sm:w-auto justify-center" variant="faint" size="sm"
                    href="{{ route('admin.requests.index') }}">View All Requests</x-ui.button>
            </div>

            {{-- Content Area --}}
            <div class="mt-4 md:mt-0">
                <div class="grid grid-cols-1 gap-6 md:hidden">
                    @forelse($recentRequests as $request)
                        <div class="bg-white p-6 rounded-2xl shadow-xs border border-gray-100">
                            <div class="flex justify-between items-start mb-4">
                                <div>
                                    <span
                                        class="text-[10px] font-bold uppercase tracking-widest text-slate-400 block mb-1">Request
                                        ID</span>
                                    <span
                                        class="font-mono text-sm font-semibold text-slate-900">#{{ $request->request_code }}</span>
                                </div>
                                <x-ui.badge :variant="$request->status->badgeVariant()">
                                    {{ $request->status->label() }}
                                </x-ui.badge>
                            </div>

                            <div class="mb-5">
                                <h4 class="text-base font-bold text-slate-900 leading-tight">
                                    {{ $request->category->name }}</h4>
                                <p class="text-sm text-slate-500 mt-1">Requested by:
                                    <span
                                        class="text-slate-700 font-medium">{{ $request->creator->name ?? '—' }}</span>
                                </p>
                            </div>

                            <div class="flex items-center justify-between pt-4 border-t border-slate-50">
                                <div>
                                    <span
                                        class="text-[10px] font-bold uppercase tracking-widest text-slate-400 block mb-1">Date</span>
                                    <span
                                        class="text-sm font-medium text-slate-700">{{ $request->created_at->format('d M Y') }}</span>
                                </div>
                                <x-ui.button variant="faint" size="sm"
                                    href="{{ route('admin.requests.show', $request) }}" class="rounded-lg">
                                    View Details
                                </x-ui.button>
                            </div>
                        </div>
                    @empty
                        <div class="bg-white p-8 text-center rounded-xl border border-dashed border-slate-200">
                            <x-ui.empty-state icon="clipboard-list" title="No recent requests"
                                description="There are no recent asset requests to display." />
                        </div>
                    @endforelse
                </div>

                <div class="hidden md:block">
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm text-left">
                            <thead
                                class="text-xs text-slate-400 uppercase tracking-wider bg-slate-50/50 border-b border-slate-50">
                                <tr>
                                    <th class="px-6 py-4 font-medium w-22 text-center">S/N</th>
                                    <th class="px-6 py-4 font-medium">Request ID</th>
                                    <th class="px-6 py-4 font-medium">Requested Asset</th>
                                    <th class="px-6 py-4 font-medium">Requested By</th>
                                    <th class="px-6 py-4 font-medium">Date Requested</th>
                                    <th class="px-6 py-4 font-medium">Status</th>
                                    <th class="px-6 py-4 font-medium text-right">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-50">
                                @foreach ($recentRequests as $request)
                                    <tr class="hover:bg-slate-50/50 transition-colors">
                                        <td class="px-6 py-4 text-center text-slate-400">{{ $loop->iteration }}</td>
                                        <td class="px-6 py-4 font-mono font-medium text-slate-500">
                                            #{{ $request->request_code }}</td>
                                        <td class="px-6 py-4 text-slate-900 font-semibold">
                                            {{ $request->category->name }}</td>
                                        <td class="px-6 py-4 text-slate-700">{{ $request->creator->name ?? '—' }}</td>
                                        <td class="px-6 py-4 text-slate-500">
                                            {{ $request->created_at->format('d M Y') }}</td>
                                        <td class="px-6 py-4">
                                            <x-ui.badge :variant="$request->status->badgeVariant()">
                                                {{ $request->status->label() }}
                                            </x-ui.badge>
                                        </td>
                                        <td class="px-6 py-4 text-right">
                                            <x-ui.button variant="faint" size="sm"
                                                href="{{ route('admin.requests.show', $request) }}">View</x-ui.button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('requestsChartComponent', () => ({
                activeTab: 'year',
                root: null,
                series: null,
                xAxis: null,
                isLoading: true,
                labels: {
                    year: 'Total Requests (Year)',
                    month: 'Total Requests (Month)',
                    week: 'Total Requests (Week)'
                },
                totals: {
                    year: '{{ number_format(array_sum($chartDataYear)) }}',
                    month: '{{ number_format(array_sum($chartDataMonth)) }}',
                    week: '{{ number_format(array_sum($chartDataWeek)) }}'
                },
                rawTotals: {
                    year: {{ array_sum($chartDataYear) }},
                    month: {{ array_sum($chartDataMonth) }},
                    week: {{ array_sum($chartDataWeek) }}
                },
                get isDataEmpty() {
                    return this.rawTotals[this.activeTab] === 0;
                },
                chartData: {
                    year: {
                        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
                            'Nov', 'Dec'
                        ],
                        data: @json($chartDataYear)
                    },
                    month: {
                        labels: @json($labelsMonth),
                        data: @json($chartDataMonth)
                    },
                    week: {
                        labels: @json($labelsWeek),
                        data: @json($chartDataWeek)
                    }
                },
                init() {
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.isLoading = false;
                            this.$nextTick(() => this.updateChart());
                        }, 500);
                    });
                    this.$watch('activeTab', () => {
                        this.$nextTick(() => this.updateChart());
                    });
                },
                updateChart() {
                    if (this.isDataEmpty) return;

                    if (!this.root) {
                        this.createChart();
                    } else {
                        this.updateData();
                    }
                },
                createChart() {
                    let chartDiv = document.getElementById("requestsChart");
                    if (!chartDiv) return;

                    // Safety Disposure
                    am5.array.each(am5.registry.rootElements, function(root) {
                        if (root.dom.id == "requestsChart") {
                            root.dispose();
                        }
                    });

                    let root = am5.Root.new("requestsChart");
                    this.root = root;

                    root.setThemes([am5themes_Animated.new(root)]);

                    let chart = root.container.children.push(am5xy.XYChart.new(root, {
                        panX: true,
                        panY: true,
                        wheelX: "panX",
                        wheelY: "zoomX",
                        pinchZoomX: true
                    }));

                    let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
                        behavior: "none"
                    }));
                    cursor.lineY.set("visible", false);

                    let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
                        categoryField: "category",
                        renderer: am5xy.AxisRendererX.new(root, {}),
                        tooltip: am5.Tooltip.new(root, {})
                    }));
                    this.xAxis = xAxis;

                    let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
                        renderer: am5xy.AxisRendererY.new(root, {})
                    }));

                    let series = chart.series.push(am5xy.LineSeries.new(root, {
                        name: "Requests",
                        xAxis: xAxis,
                        yAxis: yAxis,
                        valueYField: "value",
                        categoryXField: "category",
                        tooltip: am5.Tooltip.new(root, {
                            labelText: "{valueY}"
                        })
                    }));
                    this.series = series;

                    // Blue Theme Colors
                    series.set("stroke", am5.color(0x2563eb)); // blue-600
                    series.set("fill", am5.color(0x2563eb));

                    series.strokes.template.setAll({
                        strokeWidth: 3
                    });
                    series.fills.template.setAll({
                        fillOpacity: 0.1,
                        visible: true
                    });

                    this.updateData();
                    chart.appear(1000, 100);
                },
                updateData() {
                    if (!this.xAxis || !this.series) return;
                    let data = [];
                    let currentLabels = this.chartData[this.activeTab].labels;
                    let currentValues = this.chartData[this.activeTab].data;

                    for (let i = 0; i < currentLabels.length; i++) {
                        data.push({
                            category: currentLabels[i],
                            value: currentValues[i] || 0
                        });
                    }
                    this.xAxis.data.setAll(data);
                    this.series.data.setAll(data);
                }
            }));
        });

        document.addEventListener('DOMContentLoaded', function() {
            // Suppliers Chart (Bar) - AmCharts 5
            if (document.getElementById('suppliersChart')) {
                let root = am5.Root.new("suppliersChart");
                root.setThemes([am5themes_Animated.new(root)]);

                let chart = root.container.children.push(am5xy.XYChart.new(root, {
                    panX: false,
                    panY: false,
                    wheelX: "panX",
                    wheelY: "zoomX",
                    layout: root.verticalLayout
                }));

                let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
                cursor.lineY.set("visible", false);

                let supplierData = @json($supplierStats);
                let data = supplierData.map(d => ({
                    supplier: d.name,
                    value: d.count
                }));

                let xRenderer = am5xy.AxisRendererX.new(root, {
                    minGridDistance: 30
                });

                xRenderer.labels.template.setAll({
                    rotation: -45,
                    centerY: am5.p50,
                    centerX: am5.p100
                });

                // Truncate Labels
                xRenderer.labels.template.adapters.add("text", function(text) {
                    return text && text.length > 15 ? text.substring(0, 15) + "..." : text;
                });

                let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
                    maxDeviation: 0.3,
                    categoryField: "supplier",
                    renderer: xRenderer,
                    tooltip: am5.Tooltip.new(root, {})
                }));
                xAxis.data.setAll(data);

                let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
                    maxDeviation: 0.3,
                    renderer: am5xy.AxisRendererY.new(root, {})
                }));

                let series = chart.series.push(am5xy.ColumnSeries.new(root, {
                    name: "Series 1",
                    xAxis: xAxis,
                    yAxis: yAxis,
                    valueYField: "value",
                    sequencedInterpolation: true,
                    categoryXField: "supplier",
                    tooltip: am5.Tooltip.new(root, {
                        labelText: "[bold]{categoryX}[/]\n{valueY}"
                    })
                }));

                series.columns.template.setAll({
                    fill: am5.color(0x1d4ed8), // blue-700
                    stroke: am5.color(0x1d4ed8),
                    cornerRadiusTL: 4,
                    cornerRadiusTR: 4
                });

                series.data.setAll(data);
                series.appear(1000);
                chart.appear(1000, 100);
            }
        });
    </script>
</x-app-layout>