{{-- resources/views/rooms/show.blade.php --}}
@extends('layouts.app')
@section('title', 'Room ' . $room->number)
@section('page_title', 'Room ' . $room->number)
@section('page_subtitle', $room->category?->name . ($room->name ? ' — ' . $room->name : ''))

@section('content')

<div class="d-flex gap-2 mb-3">
    <a href="{{ tenant_route('rooms.index') }}"
       class="btn btn-sm btn-outline-secondary">← Rooms</a>
    <a href="{{ tenant_route('rooms.edit', ['room' => $room->id]) }}"
       class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-pencil me-1"></i>Edit
    </a>
</div>

<div class="row g-3">

    <div class="col-md-4">
        <div class="card">
            <div class="card-body text-center py-4">

                @php
                    $statusColors = [
                        'available'   => ['bg' => '#d1fae5', 'color' => '#065f46', 'icon' => 'bi-check-circle'],
                        'occupied'    => ['bg' => '#fdf1eb', 'color' => '#C4622D', 'icon' => 'bi-person-fill'],
                        'dirty'       => ['bg' => '#fef3c7', 'color' => '#92400e', 'icon' => 'bi-exclamation-circle'],
                        'clean'       => ['bg' => '#dbeafe', 'color' => '#1e40af', 'icon' => 'bi-stars'],
                        'maintenance' => ['bg' => '#f1f5f9', 'color' => '#475569', 'icon' => 'bi-tools'],
                        'out_of_order'=> ['bg' => '#fee2e2', 'color' => '#991b1b', 'icon' => 'bi-x-circle'],
                    ];
                    $sc = $statusColors[$room->status] ?? $statusColors['available'];
                @endphp

                <div style="width:72px;height:72px;border-radius:16px;
                             background:{{ $sc['bg'] }};margin:0 auto 12px;
                             display:flex;align-items:center;justify-content:center;">
                    <i class="bi {{ $sc['icon'] }}"
                       style="font-size:2rem;color:{{ $sc['color'] }}"></i>
                </div>

                <div style="font-size:1.8rem;font-weight:800;line-height:1;">
                    {{ $room->number }}
                </div>
                @if($room->name)
                    <div style="font-size:.82rem;color:var(--muted);margin-top:3px;">
                        {{ $room->name }}
                    </div>
                @endif

                <div style="margin-top:12px;">
                    <span style="font-size:.78rem;font-weight:600;
                                 padding:4px 12px;border-radius:20px;
                                 background:{{ $sc['bg'] }};
                                 color:{{ $sc['color'] }};">
                        {{ ucfirst(str_replace('_', ' ', $room->status)) }}
                    </span>
                </div>

                <div style="margin-top:16px;text-align:left;
                             background:var(--bg);border-radius:8px;
                             padding:12px;">
                    <div class="d-flex justify-content-between mb-2"
                         style="font-size:.78rem;">
                        <span style="color:var(--muted);">Category</span>
                        <span class="fw-semibold">{{ $room->category?->name }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2"
                         style="font-size:.78rem;">
                        <span style="color:var(--muted);">Floor</span>
                        <span>{{ $room->floor ?? '—' }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2"
                         style="font-size:.78rem;">
                        <span style="color:var(--muted);">Max Occupancy</span>
                        <span>{{ $room->category?->max_occupancy ?? '—' }}</span>
                    </div>
                    <div class="d-flex justify-content-between"
                         style="font-size:.78rem;">
                        <span style="color:var(--muted);">Active</span>
                        <span>{{ $room->is_active ? 'Yes' : 'No' }}</span>
                    </div>
                </div>

                {{-- Quick status buttons --}}
                @if($room->status !== 'occupied')
                    <div style="margin-top:14px;">
                        <div style="font-size:.7rem;color:var(--muted);
                                    margin-bottom:8px;">
                            Update Status
                        </div>
                        <div class="d-flex flex-wrap gap-1 justify-content-center">
                            @foreach(['available','dirty','clean','maintenance'] as $s)
                                @if($s !== $room->status)
                                    <form method="POST"
                                          action="{{ tenant_route('rooms.status', ['room' => $room->id]) }}">
                                        @csrf @method('PUT')
                                        <input type="hidden" name="status" value="{{ $s }}">
                                        <button class="btn btn-xs btn-outline-secondary"
                                                type="submit">
                                            {{ ucfirst($s) }}
                                        </button>
                                    </form>
                                @endif
                            @endforeach
                        </div>
                    </div>
                @endif

            </div>
        </div>
    </div>

    <div class="col-md-8">

        {{-- Current Guest --}}
        @if($currentReservation)
            <div class="card mb-3"
                 style="border-left:3px solid var(--clay);">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <div style="font-size:.7rem;font-weight:700;
                                        text-transform:uppercase;
                                        letter-spacing:.08em;
                                        color:var(--clay);
                                        margin-bottom:4px;">
                                Currently Occupied
                            </div>
                            <div class="fw-bold"
                                 style="font-size:.95rem;">
                                {{ $currentReservation->reservation?->guest?->first_name }}
                                {{ $currentReservation->reservation?->guest?->last_name }}
                            </div>
                            <div style="font-size:.78rem;color:var(--muted);">
                                {{ $currentReservation->reservation?->reference }}
                                ·
                                Check out:
                                {{ $currentReservation->reservation?->check_out_date?->format('d M Y') }}
                            </div>
                        </div>
                        <a href="{{ tenant_route('reservations.show', ['reservation' => $currentReservation->reservation_id]) }}"
                           class="btn btn-sm btn-outline-secondary">
                            View Reservation
                        </a>
                    </div>
                </div>
            </div>
        @endif

        {{-- Notes --}}
        @if($room->notes)
            <div class="card mb-3">
                <div class="card-header">
                    <span class="card-title">Notes</span>
                </div>
                <div class="card-body">
                    <p style="font-size:.82rem;color:var(--muted);
                               margin:0;line-height:1.6;">
                        {{ $room->notes }}
                    </p>
                </div>
            </div>
        @endif

        {{-- Status History --}}
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-clock-history me-2"
                       style="color:var(--clay)"></i>
                    Status History
                </span>
            </div>

            @if($room->statusLogs->isEmpty())
                <div class="card-body text-center py-4">
                    <p class="text-muted mb-0" style="font-size:.8rem;">
                        No status changes recorded yet
                    </p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Change</th>
                                <th>By</th>
                                <th>Notes</th>
                                <th>When</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($room->statusLogs as $log)
                                <tr>
                                    <td style="font-size:.8rem;">
                                        <span style="color:var(--muted);">
                                            {{ $log->from_status ?? '—' }}
                                        </span>
                                        →
                                        <span class="fw-semibold">
                                            {{ ucfirst(str_replace('_', ' ', $log->to_status)) }}
                                        </span>
                                    </td>
                                    <td style="font-size:.75rem;color:var(--muted);">
                                        {{ $log->user?->name ?? 'System' }}
                                    </td>
                                    <td style="font-size:.75rem;color:var(--muted);">
                                        {{ $log->notes ?? '—' }}
                                    </td>
                                    <td style="font-size:.73rem;color:var(--muted);
                                               white-space:nowrap;">
                                        {{ $log->changed_at->format('d M Y H:i') }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>

    </div>
</div>

@endsection