<flux:main>
    <flux:heading size="xl" level="1" class="mb-6">{{ $pageTitle }}</flux:heading>

    <div class="mt-6">
        <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center mb-6 gap-4">
            <div class="flex flex-col sm:flex-row flex-wrap items-start sm:items-center gap-4 w-full">
                <div class="flex items-center gap-2 w-full sm:w-auto">
                    <flux:select wire:model.live="period" class="w-full sm:w-auto">
                        <option value="all">Semua</option>
                        <option value="7">7 Hari Terakhir</option>
                        <option value="30">30 Hari Terakhir</option>
                        <option value="90">90 Hari Terakhir</option>
                        <option value="365">1 Tahun Terakhir</option>
                    </flux:select>
                </div>

                <flux:separator vertical class="hidden lg:block mx-2 my-2" />

                @if (count($outlets) > 1)
                    <div class="flex flex-wrap gap-2 w-full sm:w-auto">
                        <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 vertical class="hidden lg:block mx-2 my-2" />
                @endif

                <div class="w-full sm:w-auto">
                    <flux:date-picker mode="range" wire:model.live="range">
                        <x-slot name="trigger">
                            <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 w-full">
                                <flux:date-picker.input />
                                <flux:date-picker.input />
                            </div>
                        </x-slot>
                    </flux:date-picker>
                </div>
            </div>
        </div>

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

        <flux:heading>Counting Data</flux:heading>
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-3 mb-6 mt-2">
            @foreach ($countingData as $item)
                <div class="rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700">
                    <flux:subheading>{{ $item['title'] }}</flux:subheading>
                    <flux:heading size="xl" class="mb-2">{{ $item['value'] }}</flux:heading>
                </div>
            @endforeach
        </div>

        <flux:heading>Order</flux:heading>
        <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 ($orders as $order)
                <div class="rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700">
                    <flux:subheading>{{ $order['title'] }}</flux:subheading>
                    <flux:heading size="xl" class="mb-2">{{ $order['value'] }}</flux:heading>
                </div>
            @endforeach
        </div>

        <flux:heading>Pengeluaran</flux:heading>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 mt-2">
            @foreach ($expenses as $expense)
                <div class="rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700">
                    <flux:subheading>{{ $expense['title'] }}</flux:subheading>
                    <flux:heading size="xl" class="mb-2">{{ $expense['value'] }}</flux:heading>
                </div>
            @endforeach
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 mt-2">
            <div>
                <flux:heading>Top 5 Parfum</flux:heading>
                <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
                    <flux:table>
                        <flux:table.columns>
                            <flux:table.column>No</flux:table.column>
                            <flux:table.column>Nama</flux:table.column>
                            <flux:table.column>Harga</flux:table.column>
                            <flux:table.column>Terjual</flux:table.column>
                            <flux:table.column>Total</flux:table.column>
                        </flux:table.columns>

                        <flux:table.rows>
                            @foreach ($topPerfumes as $topPerfume)
                                <flux:table.row>
                                    <flux:table.cell>{{ $loop->iteration }}</flux:table.cell>
                                    <flux:table.cell>{{ $topPerfume['name'] }}</flux:table.cell>
                                    <flux:table.cell>{{ $topPerfume['sale_price'] }}</flux:table.cell>
                                    <flux:table.cell>{{ $topPerfume['total_sold'] }}</flux:table.cell>
                                    <flux:table.cell variant="strong">{{ $topPerfume['total_sales'] }}
                                    </flux:table.cell>
                                </flux:table.row>
                            @endforeach
                        </flux:table.rows>
                    </flux:table>
                </flux:card>
            </div>

            <div>
                <flux:heading>Top 5 Produk</flux:heading>
                <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
                    <flux:table>
                        <flux:table.columns>
                            <flux:table.column>No</flux:table.column>
                            <flux:table.column>Nama</flux:table.column>
                            <flux:table.column>Harga</flux:table.column>
                            <flux:table.column>Terjual</flux:table.column>
                            <flux:table.column>Total</flux:table.column>
                        </flux:table.columns>

                        <flux:table.rows>
                            @foreach ($topProducts as $topProduct)
                                <flux:table.row>
                                    <flux:table.cell>{{ $loop->iteration }}</flux:table.cell>
                                    <flux:table.cell>{{ $topProduct['name'] }}</flux:table.cell>
                                    <flux:table.cell>{{ $topProduct['sale_price'] }}</flux:table.cell>
                                    <flux:table.cell>{{ $topProduct['total_sold'] }}</flux:table.cell>
                                    <flux:table.cell variant="strong">{{ $topProduct['total_sales'] }}
                                    </flux:table.cell>
                                </flux:table.row>
                            @endforeach
                        </flux:table.rows>
                    </flux:table>
                </flux:card>
            </div>

            <div>
                <flux:heading>Top 5 Botol</flux:heading>
                <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
                    <flux:table>
                        <flux:table.columns>
                            <flux:table.column>No</flux:table.column>
                            <flux:table.column>Nama</flux:table.column>
                            <flux:table.column>Harga</flux:table.column>
                            <flux:table.column>Terjual</flux:table.column>
                            <flux:table.column>Total</flux:table.column>
                        </flux:table.columns>

                        <flux:table.rows>
                            @foreach ($topBottles as $topBottle)
                                <flux:table.row>
                                    <flux:table.cell>{{ $loop->iteration }}</flux:table.cell>
                                    <flux:table.cell>{{ $topBottle['name'] }}</flux:table.cell>
                                    <flux:table.cell>{{ $topBottle['sale_price'] }}</flux:table.cell>
                                    <flux:table.cell>{{ $topBottle['total_sold'] }}</flux:table.cell>
                                    <flux:table.cell variant="strong">{{ $topBottle['total_sales'] }}</flux:table.cell>
                                </flux:table.row>
                            @endforeach
                        </flux:table.rows>
                    </flux:table>
                </flux:card>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 mt-2">
            <livewire:chart.outlet-revenue :outlets="$outlets" />
            <livewire:chart.outlet-expense :outlets="$outlets" />
            <livewire:chart.channel-revenue :outlets="$outlets" />
        </div>
        <livewire:chart.outlet-revenue-expense :outlets="$outlets" />
    </div>
</flux:main>
