@php
    $preview = $preview ?? null;
    $showActions = $showActions ?? true;
@endphp

@if($preview)
    @php
        $company = $preview['company'] ?? [];
        $employee = $preview['employee'] ?? [];
        $totals = $preview['totals'] ?? [];
        $earnings = collect($preview['earnings'] ?? []);
        $deductions = collect($preview['deductions'] ?? []);
        $lopValue = (float) ($employee['lop_days'] ?? 0);
    @endphp

    <x-card>
        @if($showActions)
            <div class="mb-4 flex flex-wrap items-center justify-end gap-2">
                @if(class_exists(\Barryvdh\DomPDF\Facade\Pdf::class))
                    <a href="{{ $preview['pdf_url'] ?? '#' }}" target="_blank" class="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50">Download PDF</a>
                @endif
                <a href="{{ $preview['view_url'] ?? '#' }}" class="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50">Open Full Payslip</a>
            </div>
        @endif

        <div class="mx-auto max-w-5xl rounded-lg border border-slate-300 bg-white p-4 text-slate-800">
            <div class="mb-3 flex items-start justify-between gap-6">
                <div>
                    @if(! empty($company['logo_url']))
                        <img src="{{ $company['logo_url'] }}" alt="{{ $company['name'] ?? config('app.name') }}" class="h-12 w-auto object-contain">
                    @else
                        <div class="text-base font-bold tracking-tight text-cyan-700">{{ $company['name'] ?? config('app.name') }}</div>
                    @endif
                </div>
                <div class="text-right">
                    <div class="text-xl font-bold text-slate-800">{{ $company['name'] ?? config('app.name') }}</div>
                    <div class="text-sm text-slate-600">{{ $company['address'] ?? 'N/A' }}</div>
                    <div class="text-sm text-slate-600">{{ $company['email'] ?? 'N/A' }}</div>
                    <div class="text-sm text-slate-600">{{ $company['phone'] ?? 'N/A' }}</div>
                </div>
            </div>

            <div class="my-3 border-t-2 border-slate-500"></div>
            <h2 class="text-center text-2xl font-semibold text-slate-800">Pay Slip For Duration {{ $preview['period'] ?? 'N/A' }}</h2>
            <div class="my-3 border-t-2 border-slate-500"></div>

            <div class="border border-slate-300 p-3">
                <div class="grid grid-cols-1 gap-y-2 text-sm md:grid-cols-2 md:gap-x-8">
                    <div class="grid grid-cols-[150px_1fr]"><div class="font-semibold">Name:</div><div>{{ $employee['name'] ?? 'N/A' }}</div></div>
                    <div class="grid grid-cols-[150px_1fr]"><div class="font-semibold">Employee ID:</div><div>{{ $employee['employee_id'] ?? 'N/A' }}</div></div>
                    <div class="grid grid-cols-[150px_1fr]"><div class="font-semibold">Designation:</div><div>{{ $employee['designation'] ?? 'N/A' }}</div></div>
                    <div class="grid grid-cols-[150px_1fr]"><div class="font-semibold">Bank Name:</div><div>{{ $employee['bank_name'] ?? 'N/A' }}</div></div>
                    <div class="grid grid-cols-[150px_1fr]"><div class="font-semibold">Department:</div><div>{{ $employee['department'] ?? 'N/A' }}</div></div>
                    <div class="grid grid-cols-[150px_1fr]"><div class="font-semibold">Bank Account No:</div><div>{{ $employee['bank_account_no'] ?? 'N/A' }}</div></div>
                    <div class="grid grid-cols-[150px_1fr]"><div class="font-semibold">Location:</div><div>{{ $employee['location'] ?? 'N/A' }}</div></div>
                    <div class="grid grid-cols-[150px_1fr]"><div class="font-semibold">IFSC Code:</div><div>{{ $employee['ifsc_code'] ?? 'N/A' }}</div></div>
                    <div class="grid grid-cols-[150px_1fr]"><div class="font-semibold">Effective Work Days:</div><div>{{ (int) ($employee['work_days'] ?? 0) }}</div></div>
                    <div class="grid grid-cols-[150px_1fr]"><div class="font-semibold">PAN No:</div><div>{{ strtoupper($employee['pan_no'] ?? 'N/A') }}</div></div>
                    <div class="grid grid-cols-[150px_1fr]"><div class="font-semibold">LOP:</div><div>{{ rtrim(rtrim(number_format($lopValue, 2, '.', ''), '0'), '.') }}</div></div>
                </div>
            </div>

            <div class="mt-4 overflow-hidden border border-slate-300">
                <div class="grid grid-cols-1 md:grid-cols-2">
                    <div class="md:border-r md:border-slate-300">
                        <table class="w-full">
                            <thead>
                                <tr class="border-b border-slate-300">
                                    <th class="px-4 py-2 text-left text-sm font-semibold">Earnings</th>
                                    <th class="px-4 py-2 text-right text-sm font-semibold">Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($earnings as $line)
                                    <tr>
                                        <td class="px-4 py-1.5 text-sm">{{ $line['name'] ?? 'Earning' }}</td>
                                        <td class="px-4 py-1.5 text-right text-sm">₹{{ number_format((float) ($line['amount'] ?? 0), 2) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="2" class="px-4 py-2 text-sm text-slate-500">No earnings lines available.</td>
                                    </tr>
                                @endforelse
                                <tr class="font-semibold">
                                    <td class="px-4 py-2 text-sm">Total Earnings (Rs)</td>
                                    <td class="px-4 py-2 text-right text-sm">₹{{ number_format((float) ($totals['earnings'] ?? 0), 2) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div>
                        <table class="w-full">
                            <thead>
                                <tr class="border-b border-slate-300">
                                    <th class="px-4 py-2 text-left text-sm font-semibold">Deductions</th>
                                    <th class="px-4 py-2 text-right text-sm font-semibold">Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($deductions as $line)
                                    <tr>
                                        <td class="px-4 py-1.5 text-sm">{{ $line['name'] ?? 'Deduction' }}</td>
                                        <td class="px-4 py-1.5 text-right text-sm">₹{{ number_format(abs((float) ($line['amount'] ?? 0)), 2) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="2" class="px-4 py-2 text-sm text-slate-500">No deductions lines available.</td>
                                    </tr>
                                @endforelse
                                <tr class="font-semibold">
                                    <td class="px-4 py-2 text-sm">Total Deductions (Rs)</td>
                                    <td class="px-4 py-2 text-right text-sm">₹{{ number_format((float) ($totals['deductions'] ?? 0), 2) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="mt-4 text-lg font-semibold">Net Pay For The Month: ₹{{ number_format((float) ($totals['net'] ?? 0), 2) }}</div>
            <div class="mt-2 text-sm text-slate-700">{{ $totals['net_in_words'] ?? '' }}</div>
            <div class="mt-4 border-t border-slate-300"></div>
            <div class="mt-2 text-center text-xs text-slate-500">This is a system generated payslip and does not require signature.</div>
        </div>
    </x-card>
@else
    <x-card>
        <div class="py-16 text-center">
            <h3 class="text-base font-semibold text-slate-800">No payslip selected</h3>
            <p class="mt-1 text-sm text-slate-500">Select a payslip from the left panel to preview it here.</p>
        </div>
    </x-card>
@endif