@php
    use App\Support\Money;
    use App\Support\Percent;
    $income = $report['income'];
    $occupancy = $report['occupancy'];
@endphp

<div>
    <a href="{{ route('reports.index', ['month' => $period->key()]) }}" wire:navigate class="tap text-sm text-stone-500 hover:text-stone-800">&larr; All properties</a>

    <div class="mt-2 flex flex-wrap items-start justify-between gap-3">
        <div>
            <h1 class="text-xl font-semibold">{{ $property->name }}</h1>
            <p class="text-sm text-stone-500">{{ $period->label() }}{{ $period->isCurrent() ? ' so far' : '' }}</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('reports.property.export', ['property' => $property, 'format' => 'xlsx', 'month' => $period->key()]) }}" class="btn-secondary">Excel</a>
            <a href="{{ route('reports.property.export', ['property' => $property, 'format' => 'pdf', 'month' => $period->key()]) }}" class="btn-secondary">PDF</a>
        </div>
    </div>

    <div class="mt-4 flex flex-wrap items-center gap-2">
        <x-month-picker :period="$period" />
        @if ($others->count() > 1)
            <select x-data x-on:change="Livewire.navigate($event.target.value)" class="input w-auto" aria-label="Property">
                @foreach ($others as $other)
                    <option value="{{ route('reports.property', ['property' => $other, 'month' => $period->key()]) }}" @selected($other->id === $property->id)>{{ $other->name }}</option>
                @endforeach
            </select>
        @endif
    </div>

    <div class="mt-4 grid grid-cols-2 gap-3 lg:grid-cols-4" wire:loading.class="opacity-60">
        <x-stat-tile label="Profit" :value="Money::format($report['profit'])" :tone="$report['profit'] < 0 ? 'loss' : null" class="col-span-2 lg:col-span-1" note="Net income minus expenses" />
        <x-stat-tile label="Net income" :value="Money::format($income['net'])">
            <dl class="mt-2 space-y-0.5 text-xs text-stone-600">
                <div class="flex justify-between gap-2"><dt>Payments</dt><dd class="whitespace-nowrap">{{ Money::format($income['gross']) }}</dd></div>
                @if ($income['refunds'])<div class="flex justify-between gap-2"><dt>Refunds</dt><dd class="whitespace-nowrap">{{ Money::format(-$income['refunds']) }}</dd></div>@endif
                @if ($income['fees'])<div class="flex justify-between gap-2"><dt>Fees</dt><dd class="whitespace-nowrap">{{ Money::format(-$income['fees']) }}</dd></div>@endif
            </dl>
        </x-stat-tile>
        <x-stat-tile label="Expenses" :value="Money::format($report['expenses'])" :note="$report['pending_expenses'] ? Money::format($report['pending_expenses']).' pending approval, not counted' : 'Approved only'" />
        <x-stat-tile label="Occupancy" class="col-span-2 lg:col-span-1" :value="Percent::format($occupancy['rate'])" :note="$occupancy['booked'].' of '.$occupancy['available'].' nights'.($occupancy['blocked'] ? ' · '.$occupancy['blocked'].' blocked' : '')">
            <x-meter :rate="$occupancy['rate']" class="mt-2" />
        </x-stat-tile>
    </div>

    <div class="mt-4 grid gap-3 lg:grid-cols-5">
        <x-charts.trend :trend="$trend" class="lg:col-span-3" />
        <x-charts.category-bars :categories="$report['categories']" :total="$report['expenses']" class="lg:col-span-2" />
    </div>

    <section class="card mt-4 p-4">
        <h2 class="text-sm font-semibold">Occupancy by room</h2>
        <ul class="mt-3 space-y-3">
            @forelse ($occupancy['rooms'] as $row)
                <li class="text-sm" wire:key="occ-{{ $row['room']->id }}">
                    <div class="flex justify-between gap-3">
                        <span>Room {{ $row['room']->name }}@if ($row['room']->status !== App\Enums\Status::Active) <span class="text-xs text-stone-500">(inactive)</span>@endif</span>
                        <span class="text-stone-600"><span class="font-medium text-stone-900">{{ Percent::format($row['rate']) }}</span> · {{ $row['booked'] }} / {{ $row['available'] }} nights{{ $row['blocked'] ? ' · '.$row['blocked'].' blocked' : '' }}</span>
                    </div>
                    <x-meter :rate="$row['rate']" class="mt-1" :label="'Room '.$row['room']->name.' occupancy'" />
                </li>
            @empty
                <li class="text-sm text-stone-500">No rooms.</li>
            @endforelse
        </ul>
    </section>

    <div class="mt-4 grid gap-3 lg:grid-cols-2">
        <details class="card" open>
            <summary class="cursor-pointer px-4 py-3 text-sm font-semibold">Payments received · {{ $report['payments']->count() }}</summary>
            <ul class="divide-y divide-stone-100 border-t border-stone-100 text-sm">
                @forelse ($report['payments'] as $payment)
                    <li class="flex justify-between gap-3 px-4 py-2" wire:key="rp-{{ $payment->id }}">
                        <a href="{{ route('bookings.show', $payment->booking_id) }}" wire:navigate class="min-w-0">
                            <span class="block truncate">{{ $payment->booking->guest->name }} · Room {{ $payment->booking->room->name }}</span>
                            <span class="text-xs text-stone-500">{{ $payment->paid_on->format('j M') }} · {{ $payment->isRefund() ? 'Refund' : $payment->method->label() }}{{ $payment->platform_fee ? ' · fee '.Money::format($payment->platform_fee) : '' }}</span>
                        </a>
                        <span class="shrink-0 font-medium">{{ Money::format($payment->netAmount()) }}</span>
                    </li>
                @empty
                    <li class="px-4 py-3 text-stone-500">No payments this month.</li>
                @endforelse
            </ul>
        </details>
        <details class="card" open>
            <summary class="cursor-pointer px-4 py-3 text-sm font-semibold">Expenses counted · {{ $report['expense_list']->count() }}</summary>
            <ul class="divide-y divide-stone-100 border-t border-stone-100 text-sm">
                @forelse ($report['expense_list'] as $expense)
                    <li class="flex justify-between gap-3 px-4 py-2" wire:key="re-{{ $expense->id }}">
                        <a href="{{ route('expenses.show', $expense) }}" wire:navigate class="min-w-0">
                            <span class="block truncate">{{ $expense->description ?: $expense->category->name }}</span>
                            <span class="text-xs text-stone-500">{{ $expense->spent_on->format('j M') }} · {{ $expense->category->name }}{{ $expense->room ? ' · Room '.$expense->room->name : '' }}</span>
                        </a>
                        <span class="shrink-0 font-medium">{{ Money::format($expense->amount) }}</span>
                    </li>
                @empty
                    <li class="px-4 py-3 text-stone-500">No approved expenses this month.</li>
                @endforelse
            </ul>
        </details>
    </div>
</div>