<x-admin-layout title="Bonus Karyawan" subtitle="Pantau bonus berjalan, cairkan bonus, dan buka bukti pencairan.">
    @php
        $total = (float) $details->sum('bonus_amount');
        $canManage = auth()->user()->hasRole('owner', 'admin_cabang', 'manager');
    @endphp

    <form class="mb-5 grid gap-3 rounded-lg bg-white p-4 shadow-sm md:grid-cols-[1fr_1fr_1fr_1fr_auto]">
        <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" @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>
        <select name="staff_id" class="rounded-md border px-3 py-2" @disabled(! $canManage)>
            <option value="">Semua staf</option>
            @foreach ($staff as $employee)
                <option value="{{ $employee->id }}" @selected((int) $staffId === $employee->id)>{{ $employee->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-3">
        <div class="rounded-lg bg-white p-5 shadow-sm"><div class="text-sm text-slate-500">Bonus Belum Cair</div><strong class="mt-2 block text-2xl">Rp {{ number_format($total, 0, ',', '.') }}</strong></div>
        <div class="rounded-lg bg-white p-5 shadow-sm"><div class="text-sm text-slate-500">Item Bonus</div><strong class="mt-2 block text-2xl">{{ $details->count() }}</strong></div>
        <div class="rounded-lg bg-white p-5 shadow-sm"><div class="text-sm text-slate-500">Nota Menghasilkan Bonus</div><strong class="mt-2 block text-2xl">{{ $details->pluck('order_id')->unique()->count() }}</strong></div>
    </div>

    <div class="mt-5 grid gap-5 xl:grid-cols-2">
        <section class="rounded-lg bg-white p-5 shadow-sm">
            <div class="flex items-center justify-between gap-3">
                <h2 class="font-semibold">Ringkasan per Staf</h2>
                @if ($canManage)
                    <a href="{{ route('bonuses.settings') }}" class="rounded-md border px-3 py-2 text-sm">Pengaturan Bonus</a>
                @endif
            </div>
            <div class="mt-3 divide-y text-sm">
                @forelse ($summary as $row)
                    <div class="flex justify-between gap-3 py-3"><span>{{ $row['staff_name'] }} - {{ $row['orders'] }} nota</span><strong>Rp {{ number_format($row['bonus_total'], 0, ',', '.') }}</strong></div>
                @empty
                    <div class="py-4 text-slate-500">Belum ada bonus.</div>
                @endforelse
            </div>
        </section>

        @if (auth()->user()->hasRole('owner', 'admin_cabang') && $branchId)
            <section class="rounded-lg bg-white p-5 shadow-sm">
                <h2 class="font-semibold">Pencairan Bonus</h2>
                <form method="post" action="{{ route('bonuses.disburse') }}" class="mt-4 space-y-3" onsubmit="return confirm('Cairkan bonus sesuai filter 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 }}">
                    <label class="block text-sm">Staf
                        <select name="staff_id" class="mt-1 w-full rounded-md border px-3 py-2">
                            <option value="">Semua staf</option>
                            @foreach ($staff as $employee)
                                <option value="{{ $employee->id }}" @selected((int) $staffId === $employee->id)>{{ $employee->name }}</option>
                            @endforeach
                        </select>
                    </label>
                    <textarea name="note" placeholder="Catatan pencairan" class="w-full rounded-md border px-3 py-2 text-sm"></textarea>
                    <button class="w-full rounded-md bg-slate-900 px-4 py-3 font-medium text-white">Cairkan & Buat Bukti</button>
                </form>
            </section>
        @endif
    </div>

    <section class="mt-5 rounded-lg bg-white p-5 shadow-sm">
        <h2 class="font-semibold">Detail Bonus Belum Cair</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">Nota</th><th>Staf</th><th>Produk</th><th>Tipe</th><th>Qty</th><th class="text-right">Bonus</th></tr></thead>
                <tbody class="divide-y">
                @forelse ($details as $detail)
                    <tr><td class="p-3 font-medium">{{ $detail->order?->invoice_no }}</td><td>{{ $detail->staff?->name ?? '-' }}</td><td>{{ $detail->product_name }}</td><td>{{ $detail->product_type }}</td><td>{{ number_format((float) $detail->quantity, 3, ',', '.') }}</td><td class="text-right">Rp {{ number_format($detail->bonus_amount, 0, ',', '.') }}</td></tr>
                @empty
                    <tr><td colspan="6" class="p-6 text-center text-slate-500">Tidak ada bonus belum cair.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </section>

    <section class="mt-5 rounded-lg bg-white p-5 shadow-sm">
        <h2 class="font-semibold">Histori Pencairan</h2>
        <div class="mt-3 divide-y text-sm">
            @forelse ($disbursements as $disbursement)
                <div class="flex items-center justify-between gap-3 py-3">
                    <div><div class="font-medium">{{ $disbursement->disbursement_no }}</div><div class="text-slate-500">{{ $disbursement->staff?->name ?? 'Semua staf' }} - {{ $disbursement->period_start->format('d/m/Y') }} s/d {{ $disbursement->period_end->format('d/m/Y') }}</div></div>
                    <a href="{{ route('bonuses.disbursements.show', $disbursement) }}" class="rounded-md border px-3 py-2">Bukti</a>
                </div>
            @empty
                <div class="py-4 text-slate-500">Belum ada pencairan.</div>
            @endforelse
        </div>
    </section>
</x-admin-layout>
