{{-- resources/views/rooms/status-board.blade.php --}}
@extends('layouts.app')
@section('title', 'Room Board')
@section('page_title', 'Room Status Board')
@section('page_subtitle', 'Live overview of all rooms')

@section('content')

{{-- Summary strip --}}
<div class="d-flex gap-2 flex-wrap mb-3">
    @php
        $statusConfig = [
            'available'    => ['label' => 'Available',    'bg' => '#d1fae5', 'color' => '#065f46'],
            'occupied'     => ['label' => 'Occupied',     'bg' => '#fdf1eb', 'color' => '#C4622D'],
            'dirty'        => ['label' => 'Dirty',        'bg' => '#fef3c7', 'color' => '#92400e'],
            'clean'        => ['label' => 'Clean',        'bg' => '#dbeafe', 'color' => '#1e40af'],
            'maintenance'  => ['label' => 'Maintenance',  'bg' => '#f1f5f9', 'color' => '#475569'],
            'out_of_order' => ['label' => 'Out of Order', 'bg' => '#fee2e2', 'color' => '#991b1b'],
        ];
    @endphp

    @foreach($statusConfig as $status => $config)
        @if(isset($statusCounts[$status]))
            <div style="background:{{ $config['bg'] }};color:{{ $config['color'] }};
                         padding:6px 14px;border-radius:20px;
                         font-size:.75rem;font-weight:600;
                         display:flex;align-items:center;gap:6px;">
                <span style="font-size:1rem;font-weight:800;">
                    {{ $statusCounts[$status] }}
                </span>
                {{ $config['label'] }}
            </div>
        @endif
    @endforeach

    <div class="ms-auto d-flex gap-2">
        <a href="{{ tenant_route('rooms.index') }}"
           class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-list me-1"></i>List View
        </a>
        <a href="{{ tenant_route('rooms.create') }}"
           class="btn btn-primary btn-sm">
            <i class="bi bi-plus-lg me-1"></i>Add Room
        </a>
    </div>
</div>

{{-- Board by category --}}
@forelse($categories as $category)
    <div class="card mb-3">
        <div class="card-header">
            <span class="card-title">
                {{ $category->name }}
                <span style="font-size:.72rem;font-weight:400;
                             color:var(--muted);margin-left:6px;">
                    {{ $category->rooms->count() }}
                    {{ Str::plural('room', $category->rooms->count()) }}
                </span>
            </span>
        </div>
        <div class="card-body">

            @if($category->rooms->isEmpty())
                <p class="text-muted mb-0" style="font-size:.8rem;">
                    No rooms in this category.
                    <a href="{{ tenant_route('rooms.create') }}"
                       style="color:var(--clay);">Add room →</a>
                </p>
            @else
                <div style="display:grid;
                            grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
                            gap:10px;">
                    @foreach($category->rooms as $room)
                        @php
                            $sc = $statusConfig[$room->status] ?? $statusConfig['available'];
                            $guest = $occupiedRooms[$room->id] ?? null;
                        @endphp
                        <div style="border:1.5px solid {{ $sc['bg'] }};
                                    border-radius:10px;padding:12px;
                                    background:{{ $sc['bg'] }}22;
                                    cursor:pointer;transition:box-shadow .15s;"
                             onclick="window.location='{{ tenant_route('rooms.show', ['room' => $room->id]) }}'"
                             title="Room {{ $room->number }}">

                            <div style="display:flex;justify-content:space-between;
                                        align-items:flex-start;margin-bottom:6px;">
                                <span style="font-size:1.1rem;font-weight:800;
                                             color:var(--text);">
                                    {{ $room->number }}
                                </span>
                                <span style="width:8px;height:8px;border-radius:50%;
                                             background:{{ $sc['color'] }};
                                             display:inline-block;
                                             margin-top:4px;flex-shrink:0;">
                                </span>
                            </div>

                            @if($room->name)
                                <div style="font-size:.65rem;color:var(--muted);
                                            margin-bottom:4px;
                                            white-space:nowrap;overflow:hidden;
                                            text-overflow:ellipsis;">
                                    {{ $room->name }}
                                </div>
                            @endif

                            @if($guest)
                                <div style="font-size:.68rem;font-weight:600;
                                             color:{{ $sc['color'] }};
                                             white-space:nowrap;overflow:hidden;
                                             text-overflow:ellipsis;">
                                    {{ $guest->reservation?->guest?->first_name }}
                                    {{ Str::limit($guest->reservation?->guest?->last_name ?? '', 8) }}
                                </div>
                                <div style="font-size:.62rem;color:var(--muted);">
                                    out:
                                    {{ $guest->reservation?->check_out_date?->format('d M') }}
                                </div>
                            @else
                                <div style="font-size:.68rem;
                                             color:{{ $sc['color'] }};
                                             font-weight:600;">
                                    {{ $sc['label'] }}
                                </div>
                            @endif

                            {{-- Quick status buttons (shown on hover via JS) --}}
                            @if($room->status !== 'occupied')
                                <div class="room-actions"
                                     style="display:none;margin-top:8px;
                                            display:flex;flex-direction:column;
                                            gap:3px;">
                                    @foreach(['available','dirty','clean','maintenance'] as $s)
                                        @if($s !== $room->status)
                                            <form method="POST"
                                                  action="{{ tenant_route('rooms.status', ['room' => $room->id]) }}"
                                                  onclick="event.stopPropagation()">
                                                @csrf @method('PUT')
                                                <input type="hidden" name="status" value="{{ $s }}">
                                                <button class="btn btn-xs w-100"
                                                        style="font-size:.6rem;padding:2px 4px;
                                                               background:{{ $sc['color'] }}22;
                                                               color:{{ $sc['color'] }};
                                                               border:1px solid {{ $sc['color'] }}44;">
                                                    → {{ ucfirst($s) }}
                                                </button>
                                            </form>
                                        @endif
                                    @endforeach
                                </div>
                            @endif

                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
@empty
    <div class="card">
        <div class="card-body text-center py-5">
            <i class="bi bi-grid-3x3-gap"
               style="font-size:2.5rem;color:var(--muted)"></i>
            <p class="fw-semibold mt-3 mb-1">No rooms configured yet</p>
            <p class="text-muted" style="font-size:.82rem;">
                Start by creating room categories, then add rooms.
            </p>
            <a href="{{ tenant_route('rooms.categories.create') }}"
               class="btn btn-primary btn-sm mt-2">
                Create Room Category
            </a>
        </div>
    </div>
@endforelse

@endsection