@props([
'room'
])

<div class="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-white border border-gray-200">
    <div class="relative">
        <img
            src="{{ asset(Storage::url($room->media->first()->path)) }}"
            alt="image of room {{ $room->number }}"
            class="w-full h-80 object-cover transition-transform duration-300" />
    </div>

    <div class="p-2">
        <div class="flex justify-between items-start mb-4">
            <div>
                <h3 class="text-xl font-bold text-hotel-navy mb-2 pt-2 pl-3 pr-3">{{ $room->category->translations->first()->name }}</h3>
            </div>
        </div>

        <div class="flex flex-col items-center gap-4 mb-4 text-sm text-hotel-gray pl-4 pr-4">
            <div class="w-full flex items-center gap-2 justify-between">
                <div class="flex items-center gap-2">
                    <x-lucide-bed-double class="max-auto text-luxury-gold" style="width: 1rem; height: 1rem;" />
                    <span>{{ $room->bed_count }} @if ($room->bed_count > 1) {{ __('messages.beds') }} @else {{ __('messages.bed') }} @endif</span>
                </div>
                <div class="flex items-center gap-2">
                    <x-lucide-person-standing class="max-auto text-luxury-gold" style="width: 1rem; height: 1rem;" />
                    @if ($room->capacity > 1)
                    <span>Up to {{ $room->capacity }} guests</span>
                    @else
                    <span>{{ $room->capacity }} guest</span>
                    @endif
                </div>
            </div>
            <div class="flex items-center w-full gap-2">
                <x-lucide-ruler class="max-auto text-luxury-gold" style="width: 1rem; height: 1rem;" />
                <span>{{ $room->size }} m2</span>
            </div>
        </div>

        <div class="mb-4 border-t pt-4 pl-4 pr-4">
            <h5 class="font-semibold text-hotel-navy mb-2">Room Amenities</h5>
            <div class="grid grid-rows-3 grid-flow-col auto-cols-fr gap-2">
                @foreach($room->amenities()->get() as $amenity)
                <div class="flex items-center gap-1">
                    <x-lucide-hand-heart class="text-luxury-gold flex-shrink-0" style="width: 1rem; height: 1rem;" />
                    <span class="text-sm truncate" title="{{ $amenity->translations->first()->name }}">
                        {{ $amenity->translations->first()->name }}
                    </span>
                </div>
                @endforeach
            </div>
        </div>


        <div class="border-t pt-4 mb-4 flex justify-content-end items-center">
            <div>
                <div class="flex items-center gap-2 text-end pl-4 pr-4">
                    <span class="text-2xl font-bold text-hotel-navy">
                        ${{ number_format($room->price_per_night, 2) }}
                    </span>
                    <span class="text-sm text-hotel-gray">per night</span>
                </div>
            </div>

        </div>
        <button
            wire:click="book({{$room->id}})"
            type="button"
            class="w-full px-6 py-2 rounded-full text-center transition-colors duration-200 whitespace-nowrap font-inter font-semibold mb-4 border border-luxury-navy text-luxury-navy hover:bg-luxury-navy hover:text-white">
            {{ __("messages.Select Room") }}
        </button>
        <a href="room-details/{{ $room->id }}">
            <Button class="w-full bg-luxury-action text-center text-luxury-action-secondary  px-6 py-2 rounded-full hover:bg-luxury-action-secondary hover:text-luxury-action transition-colors duration-200 whitespace-nowrap font-inter font-semibold mb-1">
                {{ __("messages.View Room") }}
            </Button>
        </a>
    </div>
</div>