@extends('admin.layouts.app')
@section('title', 'Rooms')
@section('page-title', 'Room Management')

@section('content')
<div class="flex justify-between items-center mb-6">
    <div class="flex gap-4">
        <a href="{{ route('admin.rooms.index') }}" class="px-4 py-2 rounded-lg {{ !request()->has('status') ? 'bg-navy text-white' : 'bg-white text-gray-700 border' }}">
            All Rooms
        </a>
        <a href="{{ route('admin.rooms.index', ['status' => 'available']) }}" class="px-4 py-2 rounded-lg {{ request('status') == 'available' ? 'bg-green-600 text-white' : 'bg-white text-gray-700 border' }}">
            Available
        </a>
        <a href="{{ route('admin.rooms.index', ['status' => 'occupied']) }}" class="px-4 py-2 rounded-lg {{ request('status') == 'occupied' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 border' }}">
            Occupied
        </a>
        <a href="{{ route('admin.rooms.index', ['status' => 'maintenance']) }}" class="px-4 py-2 rounded-lg {{ request('status') == 'maintenance' ? 'bg-yellow-600 text-white' : 'bg-white text-gray-700 border' }}">
            Maintenance
        </a>
    </div>
    <div class="flex gap-4">
        <a href="{{ route('admin.room-types.index') }}" class="px-4 py-2 bg-gold text-white rounded-lg hover:bg-gold-dark">
            <i class="fas fa-th-large mr-2"></i>Room Types
        </a>
        @can('rooms.create')
        <a href="{{ route('admin.rooms.create') }}" class="px-4 py-2 bg-navy text-white rounded-lg hover:bg-navy-light">
            <i class="fas fa-plus mr-2"></i>Add Room
        </a>
        @endcan
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    @forelse($rooms as $room)
    <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition">
        <div class="relative h-40">
            @if($room->image_url)
                <img src="{{ $room->image_url }}" class="w-full h-full object-cover">
            @else
                <div class="w-full h-full bg-gradient-to-br from-navy to-navy-light flex items-center justify-center">
                    <i class="fas fa-door-open text-4xl text-gold"></i>
                </div>
            @endif
            <div class="absolute top-3 right-3">
                @php
                    $statusClass = match($room->status) {
                        'available' => 'bg-green-500',
                        'occupied' => 'bg-blue-500',
                        'maintenance' => 'bg-yellow-500',
                        'dirty' => 'bg-red-500',
                        default => 'bg-gray-500',
                    };
                @endphp
                <span class="px-3 py-1 rounded-full text-xs text-white {{ $statusClass }}">
                    {{ ucfirst($room->status) }}
                </span>
            </div>
        </div>
        <div class="p-4">
            <div class="flex justify-between items-start mb-2">
                <div>
                    <h3 class="font-bold text-lg text-navy">{{ $room->room_number }}</h3>
                    <p class="text-sm text-gray-500">{{ $room->roomType?->name }}</p>
                </div>
                <span class="text-sm text-gray-400">Floor {{ $room->floor }}</span>
            </div>
            
            @if($room->currentBooking())
            <div class="mt-3 p-2 bg-blue-50 rounded-lg">
                <p class="text-xs text-blue-600">
                    <i class="fas fa-user mr-1"></i>
                    {{ $room->currentBooking()->guest_name }}
                </p>
            </div>
            @endif

            <div class="mt-4 flex gap-2">
                @can('rooms.edit')
                <a href="{{ route('admin.rooms.edit', $room) }}" class="flex-1 px-3 py-2 bg-gray-100 text-gray-700 rounded-lg text-center hover:bg-gray-200 text-sm">
                    <i class="fas fa-edit"></i>
                </a>
                @endcan
                <a href="{{ route('admin.rooms.show', $room) }}" class="flex-1 px-3 py-2 bg-navy text-white rounded-lg text-center hover:bg-navy-light text-sm">
                    <i class="fas fa-eye"></i>
                </a>
            </div>
        </div>
    </div>
    @empty
    <div class="col-span-4 text-center py-12">
        <i class="fas fa-door-open text-6xl text-gray-300 mb-4"></i>
        <p class="text-gray-500">No rooms found</p>
        @can('rooms.create')
        <a href="{{ route('admin.rooms.create') }}" class="inline-block mt-4 px-6 py-2 bg-navy text-white rounded-lg">
            Add First Room
        </a>
        @endcan
    </div>
    @endforelse
</div>
@endsection