<x-admin-layout title="Leaderboard" subtitle="Peringkat karyawan dan cabang berdasarkan periode bulanan atau tahunan.">
    @php
        $money = fn ($value) => 'Rp '.number_format((float) $value, 0, ',', '.');
        $periodTitle = $period === 'yearly'
            ? 'Tahun '.$year
            : \Carbon\Carbon::create($year, $month, 1)->translatedFormat('F Y');
    @endphp

    <form class="mb-5 grid gap-3 rounded-lg bg-white p-4 shadow-sm md:grid-cols-[1fr_1fr_1fr_1fr_auto]">
        <select name="period" class="rounded-md border px-3 py-2">
            <option value="monthly" @selected($period === 'monthly')>Bulanan</option>
            <option value="yearly" @selected($period === 'yearly')>Tahunan</option>
        </select>
        <select name="month" class="rounded-md border px-3 py-2">
            @foreach (range(1, 12) as $m)
                <option value="{{ $m }}" @selected((int) $month === $m)>{{ \Carbon\Carbon::create($year, $m, 1)->translatedFormat('F') }}</option>
            @endforeach
        </select>
        <input name="year" type="number" min="2000" max="2100" value="{{ $year }}" class="rounded-md border px-3 py-2">
        <select name="branch_id" class="rounded-md border px-3 py-2" @disabled(! auth()->user()->isOwner())>
            <option value="">Semua cabang</option>
            @foreach ($branches as $branch)
                <option value="{{ $branch->id }}" @selected((int) $branchId === $branch->id)>{{ $branch->name }}</option>
            @endforeach
        </select>
        <button class="rounded-md bg-slate-900 px-4 py-2 text-white">Terapkan</button>
    </form>

    <div class="mb-5 rounded-lg bg-white p-5 shadow-sm">
        <div class="text-sm text-slate-500">Periode</div>
        <h2 class="mt-1 text-xl font-semibold">{{ $periodTitle }}</h2>
        <div class="mt-1 text-sm text-slate-500">{{ $start->format('d/m/Y') }} - {{ $end->format('d/m/Y') }}</div>
    </div>

    <div class="grid gap-5 xl:grid-cols-2">
        <section class="rounded-lg bg-white p-5 shadow-sm">
            <h2 class="font-semibold">Leaderboard Karyawan</h2>
            <div class="mt-4 space-y-4">
                @forelse ($staffLeaderboard as $index => $row)
                    @php $width = ((float) $row->total_sales / $maxStaffSales) * 100; @endphp
                    <div>
                        <div class="flex items-start justify-between gap-3 text-sm">
                            <div>
                                <div class="font-medium">#{{ $index + 1 }} {{ $row->staff_name }}</div>
                                <div class="text-slate-500">{{ $row->total_orders }} nota, {{ $row->total_items }} item, bonus {{ $money($row->total_bonus) }}</div>
                            </div>
                            <strong>{{ $money($row->total_sales) }}</strong>
                        </div>
                        <div class="mt-2 h-2 overflow-hidden rounded-full bg-slate-100"><div class="h-full rounded-full bg-slate-900" style="width: {{ $width }}%"></div></div>
                    </div>
                @empty
                    <div class="py-4 text-sm text-slate-500">Belum ada data karyawan.</div>
                @endforelse
            </div>
        </section>

        <section class="rounded-lg bg-white p-5 shadow-sm">
            <h2 class="font-semibold">Leaderboard Cabang</h2>
            <div class="mt-4 space-y-4">
                @forelse ($branchLeaderboard as $index => $row)
                    @php $width = ((float) $row->total_sales / $maxBranchSales) * 100; @endphp
                    <div>
                        <div class="flex items-start justify-between gap-3 text-sm">
                            <div>
                                <div class="font-medium">#{{ $index + 1 }} {{ $row->name }}</div>
                                <div class="text-slate-500">{{ $row->total_orders }} nota, lunas {{ $money($row->total_paid) }}, avg {{ $money($row->average_order) }}</div>
                            </div>
                            <strong>{{ $money($row->total_sales) }}</strong>
                        </div>
                        <div class="mt-2 h-2 overflow-hidden rounded-full bg-emerald-100"><div class="h-full rounded-full bg-emerald-600" style="width: {{ $width }}%"></div></div>
                    </div>
                @empty
                    <div class="py-4 text-sm text-slate-500">Belum ada data cabang.</div>
                @endforelse
            </div>
        </section>
    </div>
</x-admin-layout>
