@php
    $colorFor = function ($status) {
        return match ($status) {
            'success' => 'green',
            'partial' => 'yellow',
            'expired' => '#888',
            'skipped_past' => '#888',
            'none' => '#666',
            default => 'red',
        };
    };

    $detailColor = function ($status) {
        return match ($status) {
            'success' => 'green',
            'failed' => 'red',
            'expired', 'skipped_past' => '#888',
            default => 'orange',
        };
    };

    $scienerStatus = $booking['status'] ?? 'failed';
    $scienerColor = $colorFor($scienerStatus);
    $scienerDetails = $booking['status_details'] ?? [];

    $unifiStatus = $booking['unifi_status'] ?? 'none';
    $unifiColor = $colorFor($unifiStatus);
    $unifiDetails = $booking['unifi_status_details'] ?? [];
@endphp

<div class="status-cell">
    <div class="status-wrapper">
        <span class="material-icons status-icon" style="color: {{ $scienerColor }};">circle</span>
        <div class="status-popup">
            <strong>Status</strong>
            @forelse($scienerDetails as $detail)
                <div class="status-line">
                    <span class="material-icons" style="color: {{ $detailColor($detail['status']) }};">circle</span>
                    <span>{{ $detail['lock'] }}: {{ $detail['status'] }}</span>
                </div>
            @empty
                <div class="status-line">No data</div>
            @endforelse
        </div>
    </div>

    @if($unifiStatus !== 'none')
        <div class="status-wrapper" title="Unifi Access">
            <span class="status-label">U</span>
            <span class="material-icons status-icon" style="color: {{ $unifiColor }};">circle</span>
            <div class="status-popup">
                <strong>Unifi Access</strong>
                @forelse($unifiDetails as $detail)
                    <div class="status-line">
                        <span class="material-icons" style="color: {{ $detailColor($detail['status']) }};">circle</span>
                        <span>{{ $detail['lock'] }}: {{ $detail['status'] }}</span>
                    </div>
                    @if(!empty($detail['note']))
                        <div class="status-line" style="margin-left: 16px; font-size: 0.7rem; color: #b03030;">
                            {{ $detail['note'] }}
                        </div>
                    @endif
                @empty
                    <div class="status-line">No data</div>
                @endforelse
            </div>
        </div>
    @endif
</div>