<flux:main>
    <flux:heading size="xl" level="1">Haloo, {{ auth()->user()?->employee?->full_name }}</flux:heading>
    <flux:text class="mb-6 mt-2 text-base">Selamat datang di Studio Yadi Parfum.</flux:text>

    <div class="mt-6">
        <div class="mb-6 grid grid-cols-1 lg:grid-cols-2 gap-4">
            <flux:checkbox.group wire:model.live="selectedOutletIds" variant="buttons">
                @foreach ($outlets as $key => $value)
                <flux:checkbox value="{{ $key }}" label="{{ $value }}" />
                @endforeach
            </flux:checkbox.group>
        </div>

        <flux:separator class="mb-6"/>

        <flux:subheading>Data yang ditampilkan di bawah ini adalah data hari ini dan hari kemarin.</flux:subheading>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 mb-6 mt-2">
            @foreach ($stats as $stat)
                <div
                    class="@if ($stat['title'] === 'Top Parfum') md:col-span-2 xl:col-span-2 @endif rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700">
                    <flux:subheading>{{ $stat['title'] }}</flux:subheading>
                    <div class="flex items-center justify-between">
                        <flux:heading size="xl">{{ $stat['value'] }}</flux:heading>
                        <flux:subheading size="xs">{{ $stat['previous'] }}</flux:subheading>
                    </div>
                    <div
                        class="flex items-center gap-1 font-medium text-sm @if ($stat['trendUp']) text-green-600 dark:text-green-400 @else text-red-500 dark:text-red-400 @endif">
                        <flux:icon :icon="$stat['trendUp'] ? 'arrow-trending-up' : 'arrow-trending-down'"
                            variant="micro" />
                        {{ $stat['trend'] }}
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</flux:main>
