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

<div>
    <div class="flex flex-wrap items-end justify-between gap-2">
        <div>
            <h1 class="text-xl font-semibold">Dashboard</h1>
            <p class="text-sm text-stone-500">{{ $period->label() }} so far · {{ today()->format('l j M') }}</p>
        </div>
        <a href="{{ route('reports.index') }}" wire:navigate class="tap text-sm font-medium text-teal-800">All reports &rarr;</a>
    </div>

    @if ($toApprove > 0)
        <a href="{{ route('expenses.index', ['status' => 'pending', 'month' => '']) }}" wire:navigate
           class="mt-4 flex items-center justify-between rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-950">
            <span><span class="font-semibold">{{ trans_choice(':count expense waits|:count expenses wait', $toApprove) }}</span> for your approval.</span>
            <span class="font-medium">Review &rarr;</span>
        </a>
    @endif

    {{-- The one headline number: this month's profit across the properties shown. --}}
    <section class="card mt-4 p-5">
        <div class="text-sm text-stone-600">Profit this month{{ $multiProperty ? ', all properties' : '' }}</div>
        <div @class(['mt-1 text-5xl font-semibold tracking-tight', 'text-red-700' => $totals['profit'] < 0])>{{ Money::compact($totals['profit']) }}</div>
        <div class="mt-1 text-xs text-stone-500">Net income minus approved expenses. Income counts when it is paid.</div>
    </section>

    <div class="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-3">
        <x-stat-tile label="Net income" :value="Money::compact($totals['net'])" :note="$totals['fees'] ? Money::compact($totals['fees']).' platform fees taken off' : null" />
        <x-stat-tile label="Expenses" :value="Money::compact($totals['expenses'])" :note="$totals['pending_expenses'] ? Money::compact($totals['pending_expenses']).' pending, not counted' : null" />
        <x-stat-tile label="Occupancy" :value="Percent::format($totals['rate'])" :note="$totals['booked'].' of '.$totals['available'].' nights booked'" class="col-span-2 sm:col-span-1">
            <x-meter :rate="$totals['rate']" class="mt-2" />
        </x-stat-tile>
    </div>

    @if ($multiProperty)
        <section class="mt-6">
            <h2 class="text-lg font-semibold">By property</h2>
            <div class="mt-3 grid gap-3 sm:grid-cols-2">
                @foreach ($comparison['rows'] as $row)
                    <x-property-summary-card :row="$row" :href="route('reports.property', $row['property'])" wire:key="dash-{{ $row['property']->id }}" />
                @endforeach
            </div>
        </section>
    @endif

    <section class="mt-6 grid gap-3 sm:grid-cols-2">
        @foreach (['Arriving today' => $arrivals, 'Leaving today' => $departures] as $heading => $list)
            <div class="card">
                <h2 class="border-b border-stone-100 px-4 py-3 font-semibold">{{ $heading }} <span class="font-normal text-stone-500">· {{ $list->count() }}</span></h2>
                <ul class="divide-y divide-stone-100">
                    @forelse ($list as $booking)
                        <li wire:key="{{ Str::slug($heading) }}-{{ $booking->id }}">
                            <a href="{{ route('bookings.show', $booking) }}" wire:navigate class="flex items-center justify-between gap-3 px-4 py-2.5 text-sm hover:bg-stone-50">
                                <span class="min-w-0">
                                    <span class="block truncate font-medium">{{ $booking->guest->name }}</span>
                                    <span class="text-stone-500">Room {{ $booking->room->name }}@if ($multiProperty) · {{ $booking->room->property->name }}@endif</span>
                                </span>
                                <span class="badge shrink-0 {{ $booking->status->badgeClasses() }}">{{ $booking->status->label() }}</span>
                            </a>
                        </li>
                    @empty
                        <li class="px-4 py-3 text-sm text-stone-500">Nobody.</li>
                    @endforelse
                </ul>
            </div>
        @endforeach
    </section>

    <section class="mt-6">
        <div class="flex items-center justify-between gap-2">
            <h2 class="text-lg font-semibold">Unpaid balances</h2>
            @if ($unpaidCount)
                <span class="text-sm text-stone-600">{{ Money::format($unpaidTotal) }} owed</span>
            @endif
        </div>
        <ul class="card mt-3 divide-y divide-stone-100">
            @forelse ($unpaid as $booking)
                <li wire:key="unpaid-{{ $booking->id }}">
                    <a href="{{ route('bookings.show', $booking) }}" wire:navigate class="flex items-center justify-between gap-3 px-4 py-2.5 text-sm hover:bg-stone-50">
                        <span class="min-w-0">
                            <span class="block truncate font-medium">{{ $booking->guest->name }}</span>
                            <span class="text-stone-500">{{ $booking->check_in->format('j M') }} – {{ $booking->check_out->format('j M') }} · Room {{ $booking->room->name }}@if ($multiProperty) · {{ $booking->room->property->name }}@endif</span>
                        </span>
                        <span class="shrink-0 font-medium">{{ Money::format($booking->balance()) }}</span>
                    </a>
                </li>
            @empty
                <li class="px-4 py-3 text-sm text-stone-500">Every booking is paid up.</li>
            @endforelse
        </ul>
        @if ($unpaidCount > $unpaid->count())
            <a href="{{ route('bookings.index', ['view' => 'unpaid']) }}" wire:navigate class="mt-2 block text-sm font-medium text-teal-800">See all {{ $unpaidCount }} unpaid bookings &rarr;</a>
        @endif
    </section>
</div>