<x-filament-panels::page>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse ($currentMonthPayrolls as $payroll)
            <div x-data="{ showAdjustments: false }"
                class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl shadow-sm overflow-hidden">
                <div class="p-5 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div>
                            <h3 class="text-sm font-bold">{{ $payroll->user->name }}</h3>
                        </div>
                    </div>
                    <div>
                        {{ $payroll->period_label }}</div>
                </div>

                <div class="p-5 space-y-4">
                    <div class="flex justify-between text-xs">
                        <span class="text-gray-500">Gaji Pokok</span>
                        <span
                            class="font-bold text-gray-900 dark:text-gray-100">{{ $payroll->base_salary_formatted }}</span>
                    </div>

                    <div class="space-y-2">
                        <button @click="showAdjustments = !showAdjustments"
                            class="w-full flex justify-between text-xs focus:outline-none hover:bg-gray-50 dark:hover:bg-gray-800 p-1 rounded">
                            <span class="text-gray-500 flex items-center gap-1">
                                <x-heroicon-m-chevron-right class="w-3 h-3 transition"
                                    x-bind:class="showAdjustments ? 'rotate-90' : ''" />
                                Penyesuaian
                            </span>
                            <div class="flex gap-2 font-bold">
                                <span class="text-emerald-600">+{{ $payroll->bonus_formatted }}</span>
                                <span class="text-rose-600">-{{ $payroll->deduction_formatted }}</span>
                            </div>
                        </button>

                        <div x-show="showAdjustments"
                            class="pl-4 space-y-1 mt-2 border-l border-gray-100 dark:border-gray-800">
                            @forelse($payroll->adjustments as $adj)
                                <div class="flex justify-between items-center text-[11px]">
                                    <span class="text-gray-600 dark:text-gray-400">
                                        {{ $adj->description }}
                                    </span>

                                    <div class="flex items-center gap-2">
                                        <span @class([
                                            'font-bold',
                                            'text-emerald-600' => $adj->type === \App\Enums\SalaryAdjustmentType::BONUS,
                                            'text-rose-600' =>
                                                $adj->type === \App\Enums\SalaryAdjustmentType::DEDUCTION,
                                        ])>
                                            {{ $adj->type === \App\Enums\SalaryAdjustmentType::BONUS ? '+' : '-' }}
                                            {{ $adj->amount_formatted }}
                                        </span>

                                        <div class="flex items-center gap-1">
                                            {{ $this->editAdjustmentAction()->arguments([
                                                'adjustment_id' => $adj->id,
                                            ]) }}

                                            {{ $this->deleteAdjustmentAction()->arguments([
                                                'adjustment_id' => $adj->id,
                                            ]) }}
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="text-[10px] text-gray-400 italic">Tidak ada rincian</div>
                            @endforelse
                        </div>

                        <div
                            class="pt-4 border-t border-gray-100 dark:border-gray-800 flex justify-between items-center">
                            <div class="flex flex-col">
                                <span class="text-[9px] font-bold text-gray-400 uppercase tracking-widest">Total
                                    Diterima</span>
                                <span class="text-lg font-black text-gray-900 dark:text-white">
                                    {{ $payroll->total_salary_formatted }}
                                </span>
                            </div>
                            <div
                                class="px-2 py-0.5 rounded text-red-500 text-[10px] font-bold border border-red-500 dark:border-red-800">
                                {{ $payroll->is_paid_label }}
                            </div>
                        </div>
                    </div>

                    <div class="px-5 pb-5">
                        {{ $this->addAdjustmentAction()->arguments([
                            'payroll_id' => $payroll->id,
                        ]) }}
                    </div>
                </div>
            </div>
        @empty
            <div
                class="col-span-full p-12 text-center border-2 border-dashed border-gray-200 dark:border-gray-800 rounded-xl">
                <p class="text-gray-500">Data gaji {{ now()->translatedFormat('F Y') }} belum tersedia.</p>
            </div>
        @endforelse
    </div>

    {{ $this->content }}

    <x-filament-actions::modals />
</x-filament-panels::page>
