@php
    use App\Support\Money;
    use App\Support\Percent;
    $totals = $comparison['totals'];
@endphp

<div>
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
            <h1 class="text-xl font-semibold">Reports</h1>
            <p class="text-sm text-stone-500">All properties side by side · {{ $period->label() }}</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('reports.export', ['format' => 'xlsx', 'month' => $period->key()]) }}" class="btn-secondary">Excel</a>
            <a href="{{ route('reports.export', ['format' => 'pdf', 'month' => $period->key()]) }}" class="btn-secondary">PDF</a>
        </div>
    </div>

    <x-month-picker :period="$period" class="mt-4" />

    {{-- Phones: one card per property, then the total. --}}
    <div class="mt-4 space-y-3 sm:hidden" wire:loading.class="opacity-60">
        @foreach ($comparison['rows'] as $row)
            <x-property-summary-card :row="$row" :href="route('reports.property', ['property' => $row['property'], 'month' => $period->key()])" wire:key="cmp-card-{{ $row['property']->id }}" />
        @endforeach
        @if (count($comparison['rows']) > 1)
            <div class="card flex items-center justify-between p-4 text-sm">
                <span class="font-semibold">Total profit</span>
                <span @class(['text-lg font-semibold', 'text-red-700' => $totals['profit'] < 0])>{{ Money::format($totals['profit']) }}</span>
            </div>
        @endif
    </div>

    <div class="card mt-4 hidden overflow-x-auto sm:block" wire:loading.class="opacity-60">
        <table class="w-full min-w-[40rem] text-right text-sm" style="font-variant-numeric: tabular-nums">
            <thead class="border-b border-stone-200 text-xs text-stone-500">
                <tr>
                    <th class="sticky left-0 bg-white px-4 py-3 text-left font-medium">Property</th>
                    <th class="px-3 font-medium">Net income</th>
                    <th class="px-3 font-medium">Expenses</th>
                    <th class="px-3 font-medium">Profit</th>
                    <th class="w-40 px-4 text-left font-medium">Occupancy</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-stone-100">
                @forelse ($comparison['rows'] as $row)
                    <tr wire:key="cmp-{{ $row['property']->id }}" class="hover:bg-stone-50">
                        <td class="sticky left-0 bg-white px-4 py-3 text-left">
                            <a href="{{ route('reports.property', ['property' => $row['property'], 'month' => $period->key()]) }}" wire:navigate class="font-medium text-teal-800">{{ $row['property']->name }}</a>
                            @if ($row['property']->status !== App\Enums\Status::Active)
                                <span class="block text-xs text-stone-500">Inactive</span>
                            @endif
                        </td>
                        <td class="px-3">
                            {{ Money::format($row['income']['net']) }}
                            @if ($row['income']['fees'])
                                <span class="block text-xs text-stone-500">after {{ Money::compact($row['income']['fees']) }} fees</span>
                            @endif
                        </td>
                        <td class="px-3">
                            {{ Money::format($row['expenses']) }}
                            @if ($row['pending_expenses'])
                                <span class="block text-xs text-amber-800">+{{ Money::compact($row['pending_expenses']) }} pending</span>
                            @endif
                        </td>
                        <td @class(['px-3 font-semibold', 'text-red-700' => $row['profit'] < 0])>{{ Money::format($row['profit']) }}</td>
                        <td class="px-4 text-left">
                            <div class="flex items-center gap-2">
                                <x-meter :rate="$row['occupancy']['rate']" class="flex-1" :label="$row['property']->name.' occupancy'" />
                                <span class="w-10 text-right text-xs">{{ Percent::format($row['occupancy']['rate']) }}</span>
                            </div>
                            <span class="text-xs text-stone-500">{{ $row['occupancy']['booked'] }} / {{ $row['occupancy']['available'] }} nights</span>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="px-4 py-8 text-center text-stone-500">No properties to report on.</td></tr>
                @endforelse
            </tbody>
            @if (count($comparison['rows']) > 1)
                <tfoot class="border-t border-stone-200 font-semibold">
                    <tr>
                        <td class="sticky left-0 bg-white px-4 py-3 text-left">Total</td>
                        <td class="px-3">{{ Money::format($totals['net']) }}</td>
                        <td class="px-3">{{ Money::format($totals['expenses']) }}</td>
                        <td @class(['px-3', 'text-red-700' => $totals['profit'] < 0])>{{ Money::format($totals['profit']) }}</td>
                        <td class="px-4 text-left text-xs font-normal">{{ Percent::format($totals['rate']) }} · {{ $totals['booked'] }} / {{ $totals['available'] }} nights</td>
                    </tr>
                </tfoot>
            @endif
        </table>
    </div>

    <p class="mt-3 text-xs text-stone-500">
        Net income is payments received in {{ $period->label() }}, less refunds and platform fees. Expenses are approved expenses dated in the month; pending ones are shown but not counted.
        Occupancy is nights booked out of nights available; blocked nights are not available.
    </p>
</div>