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

@section('content')
<div class="flex justify-between items-center mb-6">
    <h2 class="text-lg font-semibold">Manage Room Types</h2>
    @can('room-types.create')
    <a href="{{ route('admin.room-types.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 Type
    </a>
    @endcan
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    @forelse($roomTypes as $type)
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="relative h-48">
            @if($type->image)
                <img src="{{ $type->image }}" 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-bed text-5xl text-gold"></i>
                </div>
            @endif
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-navy to-transparent p-4">
                <p class="text-gold font-bold text-2xl">₦ {{ number_format($type->base_price, 0) }}</p>
                <p class="text-white/70 text-sm">per night</p>
            </div>
        </div>
        <div class="p-4">
            <h3 class="font-bold text-lg text-navy">{{ $type->name }}</h3>
            <div class="flex items-center gap-4 mt-2 text-sm text-gray-500">
                <span><i class="fas fa-user-friends mr-1"></i>{{ $type->adults_capacity }} Adults</span>
                <span><i class="fas fa-bed mr-1"></i>{{ $type->total_beds }} Beds</span>
                <span><i class="fas fa-expand mr-1"></i>{{ $type->room_size ?? 'N/A' }}</span>
            </div>
            <p class="text-sm text-gray-600 mt-3 line-clamp-2">{{ $type->description }}</p>
            
            <div class="mt-4 flex flex-wrap gap-2">
                @foreach($type->amenities->take(3) as $amenity)
                    <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">{{ $amenity->name }}</span>
                @endforeach
            </div>

            <div class="mt-4 flex justify-between items-center pt-4 border-t">
                <span class="text-sm text-gray-500">{{ $type->rooms->count() }} Rooms</span>
                <div class="flex gap-2">
                    @can('room-types.edit')
                    <a href="{{ route('admin.room-types.edit', $type) }}" class="px-3 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
                        <i class="fas fa-edit text-sm"></i>
                    </a>
                    @endcan
                </div>
            </div>
        </div>
    </div>
    @empty
    <div class="col-span-3 text-center py-12 bg-white rounded-xl">
        <i class="fas fa-bed text-6xl text-gray-300 mb-4"></i>
        <p class="text-gray-500">No room types found</p>
    </div>
    @endforelse
</div>
@endsection