<x-admin-layout title="Laporan & Bonus" subtitle="Ringkasan penjualan, laba rugi, leaderboard, bonus karyawan, dan pencairan bonus.">
    <form class="mb-5 grid gap-3 rounded-lg bg-white p-4 shadow-sm md:grid-cols-[1fr_1fr_1fr_auto] print:hidden">
        <input type="date" name="start_date" value="{{ $start }}" class="rounded-md border px-3 py-2">
        <input type="date" name="end_date" value="{{ $end }}" class="rounded-md border px-3 py-2">
        <select name="branch_id" class="rounded-md border px-3 py-2">
            <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">Filter</button>
    </form>

    <div class="grid gap-4 md:grid-cols-4">
        <div class="rounded-lg bg-white p-5 shadow-sm"><div class="text-sm text-slate-500">Omzet</div><strong class="mt-2 block text-xl">Rp {{ number_format($sales, 0, ',', '.') }}</strong></div>
        <div class="rounded-lg bg-white p-5 shadow-sm"><div class="text-sm text-slate-500">Penjualan Lunas</div><strong class="mt-2 block text-xl">Rp {{ number_format($paidSales, 0, ',', '.') }}</strong></div>
        <div class="rounded-lg bg-white p-5 shadow-sm"><div class="text-sm text-slate-500">Piutang</div><strong class="mt-2 block text-xl">Rp {{ number_format($receivables, 0, ',', '.') }}</strong></div>
        <div class="rounded-lg bg-white p-5 shadow-sm"><div class="text-sm text-slate-500">Laba Rugi</div><strong class="mt-2 block text-xl">Rp {{ number_format($profit, 0, ',', '.') }}</strong></div>
    </div>

    <div class="mt-5 grid gap-5 xl:grid-cols-2">
        <section class="rounded-lg bg-white p-5 shadow-sm">
            <h2 class="font-semibold">Rekap Status Order</h2>
            <div class="mt-4 divide-y text-sm">
                @forelse ($orderSummary as $row)
                    <div class="flex justify-between py-3"><span>{{ $row->status }} - {{ $row->total_orders }} order</span><strong>Rp {{ number_format($row->total_sales, 0, ',', '.') }}</strong></div>
                @empty
                    <div class="py-3 text-slate-500">Tidak ada data.</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 divide-y text-sm">
                @forelse ($branchLeaderboard as $row)
                    <div class="flex justify-between py-3"><span>{{ $row->name }} - {{ $row->total_orders }} order</span><strong>Rp {{ number_format($row->total_sales, 0, ',', '.') }}</strong></div>
                @empty
                    <div class="py-3 text-slate-500">Tidak ada data.</div>
                @endforelse
            </div>
        </section>
    </div>

    <section class="mt-5 rounded-lg bg-white p-5 shadow-sm">
        <h2 class="font-semibold">Leaderboard Staf</h2>
        <div class="mt-4 overflow-x-auto">
            <table class="w-full text-left text-sm">
                <thead class="bg-slate-100 text-slate-600"><tr><th class="p-3">Staf</th><th>Item</th><th>Penjualan Item</th><th>Bonus</th></tr></thead>
                <tbody class="divide-y">
                @forelse ($staffLeaderboard as $row)
                    <tr><td class="p-3 font-medium">{{ $row->staff_name }}</td><td>{{ $row->total_items }}</td><td>Rp {{ number_format($row->total_sales, 0, ',', '.') }}</td><td>Rp {{ number_format($row->total_bonus, 0, ',', '.') }}</td></tr>
                @empty
                    <tr><td colspan="4" class="p-6 text-center text-slate-500">Tidak ada data.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </section>

    <section class="mt-5 rounded-lg bg-white p-5 shadow-sm">
        <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
            <div>
                <h2 class="font-semibold">Bonus Karyawan Belum Dicairkan</h2>
                <p class="text-sm text-slate-500">{{ $bonuses->count() }} detail order, total Rp {{ number_format($bonusTotal, 0, ',', '.') }}</p>
            </div>
            @if (auth()->user()->hasRole('owner') && $branchId)
                <form method="post" action="{{ route('reports.bonus.disburse') }}" onsubmit="return confirm('Cairkan bonus periode ini?')">
                    @csrf
                    <input type="hidden" name="branch_id" value="{{ $branchId }}">
                    <input type="hidden" name="start_date" value="{{ $start }}">
                    <input type="hidden" name="end_date" value="{{ $end }}">
                    <button class="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white">Cairkan Bonus</button>
                </form>
            @endif
        </div>

        <div class="mt-5 grid gap-5 xl:grid-cols-2">
            <div>
                <h3 class="text-sm font-semibold text-slate-600">Ringkasan per staf</h3>
                <div class="mt-3 divide-y text-sm">
                    @forelse ($bonusSummary as $summary)
                        <div class="flex justify-between py-3"><span>{{ $summary['staff_name'] }} - {{ $summary['orders'] }} nota</span><strong>Rp {{ number_format($summary['bonus_total'], 0, ',', '.') }}</strong></div>
                    @empty
                        <div class="py-3 text-slate-500">Tidak ada bonus.</div>
                    @endforelse
                </div>
            </div>
            <div>
                <h3 class="text-sm font-semibold text-slate-600">Detail per nota</h3>
                <div class="mt-3 max-h-96 divide-y overflow-y-auto text-sm">
                    @forelse ($bonuses as $detail)
                        <div class="grid gap-2 py-3 md:grid-cols-[1fr_auto]">
                            <div>
                                <div class="font-medium">{{ $detail->order?->invoice_no }} - {{ $detail->product_name }}</div>
                                <div class="text-slate-500">{{ $detail->staff?->name ?? 'Tanpa staff' }} | {{ $detail->quantity }} x Rp {{ number_format($detail->unit_price, 0, ',', '.') }}</div>
                            </div>
                            <strong>Rp {{ number_format($detail->bonus_amount, 0, ',', '.') }}</strong>
                        </div>
                    @empty
                        <div class="py-3 text-slate-500">Tidak ada detail bonus.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>
</x-admin-layout>
