@extends('layouts.app')

@section('title')
    {{ $roomType->getTranslation('name') }} - LuvaOtel & Spa
@endsection

@section('content')
    <!-- Room Detail Hero / Gallery -->
    <div class="py-12 px-[8%] grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Sol taraf: Büyük Görseller -->
        <div class="lg:col-span-2 space-y-6">
            <div class="h-[50vh] md:h-[60vh] rounded-2xl overflow-hidden bg-gray-900 border border-gray-800">
                <img 
                    src="https://images.unsplash.com/photo-1618773928121-c32242e63f39?auto=format&fit=crop&w=1200&q=80" 
                    alt="{{ $roomType->getTranslation('name') }}" 
                    class="w-full h-full object-cover"
                />
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                <div class="h-28 rounded-xl overflow-hidden bg-gray-900 border border-gray-800">
                    <img src="https://images.unsplash.com/photo-1590490360182-c33d57733427?auto=format&fit=crop&w=400&q=80" alt="Detail 1" class="w-full h-full object-cover"/>
                </div>
                <div class="h-28 rounded-xl overflow-hidden bg-gray-900 border border-gray-800">
                    <img src="https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&w=400&q=80" alt="Detail 2" class="w-full h-full object-cover"/>
                </div>
                <div class="h-28 rounded-xl overflow-hidden bg-gray-900 border border-gray-800 hidden md:block">
                    <img src="https://images.unsplash.com/photo-1505691938895-1758d7feb511?auto=format&fit=crop&w=400&q=80" alt="Detail 3" class="w-full h-full object-cover"/>
                </div>
            </div>
        </div>

        <!-- Sağ taraf: Satın Alma & Özellik Kartı -->
        <div class="glass-panel p-8 bg-gray-950/60 rounded-2xl h-fit sticky top-24 space-y-6">
            <div class="space-y-2">
                <h1 class="text-2xl md:text-3xl font-bold font-luxury text-white">
                    {{ $roomType->getTranslation('name') }}
                </h1>
                <div class="text-2xl font-bold text-amber-400">
                    €{{ $roomType->base_price }} <span class="text-xs text-gray-500 font-normal">/ @if(App::getLocale() === 'tr') Gece @else Night @endif</span>
                </div>
            </div>

            <p class="text-xs text-gray-400 leading-relaxed font-light">
                {{ $roomType->getTranslation('description') }}
            </p>

            <div class="space-y-3 pt-4 border-t border-gray-900 text-xs">
                <h4 class="font-bold text-white uppercase tracking-wider">@if(App::getLocale() === 'tr') Kapasite @else Capacity @endif</h4>
                <div class="flex items-center space-x-6 text-gray-400">
                    <span><i class="fa-solid fa-user text-amber-500 mr-1.5"></i> {{ $roomType->max_adults }} @if(App::getLocale() === 'tr') Yetişkin @else Adults @endif</span>
                    <span><i class="fa-solid fa-child text-amber-500 mr-1.5"></i> {{ $roomType->max_children }} @if(App::getLocale() === 'tr') Çocuk @else Children @endif</span>
                </div>
            </div>

            <div class="space-y-3 pt-4 border-t border-gray-900">
                <h4 class="text-xs font-bold text-white uppercase tracking-wider">@if(App::getLocale() === 'tr') Öne Çıkan Olanaklar @else Featured Amenities @endif</h4>
                <div class="grid grid-cols-2 gap-3 text-xs text-gray-400">
                    @foreach($roomType->getTranslation('amenities') ?? [] as $amenity)
                        <div class="flex items-center space-x-1.5">
                            <i class="fa-solid fa-circle text-[5px] text-amber-500 mr-1"></i>
                            <span>{{ $amenity }}</span>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="pt-6 border-t border-gray-900">
                <a href="/{{ App::getLocale() }}/booking?room_type_id={{ $roomType->id }}" class="btn-gold w-full text-center py-4 rounded-xl text-xs font-bold tracking-widest uppercase">
                    @if(App::getLocale() === 'tr') BU ODAYI REZERVE ET @else BOOK THIS ROOM @endif
                </a>
            </div>
        </div>
    </div>

    <!-- Recommendations of other rooms -->
    <section class="py-24 px-[8%] space-y-12 border-t border-gray-900 mt-12">
        <h2 class="text-2xl md:text-3xl font-bold font-luxury text-center">
            @if(App::getLocale() === 'tr') Diğer Konaklama Seçenekleri @else Other Accommodation Options @endif
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            @foreach($otherRooms as $room)
                <div class="glass-panel overflow-hidden bg-gray-950/40 rounded-2xl flex flex-col justify-between p-6 space-y-4">
                    <h3 class="text-lg font-bold font-luxury text-white">{{ $room->getTranslation('name') }}</h3>
                    <p class="text-xs text-gray-500 font-light line-clamp-2">{{ $room->getTranslation('description') }}</p>
                    <div class="flex justify-between items-center pt-4 border-t border-gray-900">
                        <span class="text-sm font-bold text-amber-400">€{{ $room->base_price }} / @if(App::getLocale() === 'tr') Gece @else Night @endif</span>
                        <a href="/{{ App::getLocale() }}/rooms/{{ $room->slug }}" class="text-xs font-semibold hover:text-white transition-colors">
                            @if(App::getLocale() === 'tr') İNCELE @else VIEW @endif <i class="fa-solid fa-arrow-right text-[10px] ml-0.5"></i>
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    </section>
@endsection