@extends('public.layouts.guest')

@section('title', $type . ' — ' . \App\Models\Setting::get('property_name','Parkview Hotel CDO'))
@section('nav_rooms', 'text-teal-700 font-semibold')

@section('content')

<div class="bg-gradient-to-br from-teal-700 to-teal-900 py-12">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">
        <a href="{{ route('public.rooms') }}" class="inline-flex items-center gap-1.5 text-teal-300 hover:text-white text-sm mb-4 transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            All Rooms
        </a>
        <h1 class="text-3xl font-bold text-white">{{ $type }}</h1>
        <p class="text-teal-200 mt-1 text-sm">Starting from ₱{{ number_format($minRate) }} per night</p>
    </div>
</div>

<div class="py-12 bg-gray-50">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

            {{-- Left: photos + details --}}
            <div class="lg:col-span-2 space-y-6">

                {{-- Photo gallery --}}
                @if($photos->count())
                <div x-data="{ active: 0 }" class="space-y-3">
                    <div class="aspect-video rounded-2xl overflow-hidden bg-gray-100">
                        @foreach($photos as $i => $photo)
                        <img x-show="active === {{ $i }}"
                             src="{{ \Illuminate\Support\Facades\Storage::url($photo->path) }}"
                             alt="{{ $photo->caption ?? $type }}"
                             class="w-full h-full object-cover">
                        @endforeach
                    </div>
                    @if($photos->count() > 1)
                    <div class="flex gap-2 overflow-x-auto pb-1">
                        @foreach($photos as $i => $photo)
                        <button @click="active = {{ $i }}"
                                :class="active === {{ $i }} ? 'ring-2 ring-teal-500' : 'opacity-60 hover:opacity-100'"
                                class="flex-shrink-0 w-16 h-12 rounded-lg overflow-hidden transition-all">
                            <img src="{{ \Illuminate\Support\Facades\Storage::url($photo->path) }}" alt="" class="w-full h-full object-cover">
                        </button>
                        @endforeach
                    </div>
                    @endif
                </div>
                @else
                <div class="aspect-video rounded-2xl bg-gradient-to-br from-teal-50 to-teal-100 flex items-center justify-center">
                    <div class="text-center">
                        <svg class="w-16 h-16 text-teal-200 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
                        </svg>
                        <p class="text-gray-400 text-sm">Photos coming soon</p>
                    </div>
                </div>
                @endif

                {{-- Room info card --}}
                <div class="bg-white rounded-2xl border-[0.5px] border-gray-200 p-6">
                    <h2 class="font-bold text-gray-900 text-lg mb-4">Room Details</h2>
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
                        <div class="text-center p-3 bg-gray-50 rounded-xl">
                            <p class="text-xl font-bold text-teal-600">{{ $sample->max_pax }}</p>
                            <p class="text-xs text-gray-400 mt-0.5">Max Guests</p>
                        </div>
                        <div class="text-center p-3 bg-gray-50 rounded-xl">
                            <p class="text-sm font-bold text-gray-700 leading-tight">{{ $sample->beds }}</p>
                            <p class="text-xs text-gray-400 mt-0.5">Bed Type</p>
                        </div>
                        <div class="text-center p-3 bg-gray-50 rounded-xl">
                            <p class="text-xl font-bold text-teal-600">{{ $sample->sqm }}</p>
                            <p class="text-xs text-gray-400 mt-0.5">Sq. Meters</p>
                        </div>
                        <div class="text-center p-3 bg-gray-50 rounded-xl">
                            <p class="text-xl font-bold text-teal-600">{{ $sample->floor }}</p>
                            <p class="text-xs text-gray-400 mt-0.5">Floor</p>
                        </div>
                    </div>

                    @if(!empty($amenities))
                    <h3 class="font-semibold text-gray-800 text-sm mb-3">Amenities</h3>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                        @foreach($amenities as $amenity)
                        <div class="flex items-center gap-2 text-sm text-gray-600">
                            <svg class="w-4 h-4 text-teal-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            {{ $amenity }}
                        </div>
                        @endforeach
                    </div>
                    @endif

                    @if($sample->notes)
                    <div class="mt-5 p-4 bg-teal-50 rounded-xl">
                        <p class="text-sm text-teal-700">{{ $sample->notes }}</p>
                    </div>
                    @endif
                </div>
            </div>

            {{-- Right: booking card --}}
            <div class="space-y-5">
                <div class="bg-white rounded-2xl border-[0.5px] border-gray-200 p-6 sticky top-20">
                    <div class="text-center mb-5">
                        <p class="text-3xl font-bold text-teal-600">₱{{ number_format($minRate) }}</p>
                        <p class="text-gray-400 text-sm">per night</p>
                    </div>

                    @if($bookingEnabled)
                    <form action="{{ route('public.book.room', urlencode($type)) }}" method="GET" class="space-y-3">
                        <div>
                            <label class="block text-xs font-semibold text-gray-500 mb-1">Check-in</label>
                            <input type="date" name="check_in" value="{{ request('check_in') }}" min="{{ date('Y-m-d') }}" required
                                   class="w-full border-[0.5px] border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-500 mb-1">Check-out</label>
                            <input type="date" name="check_out" value="{{ request('check_out') }}" min="{{ date('Y-m-d', strtotime('+1 day')) }}" required
                                   class="w-full border-[0.5px] border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-500 mb-1">Guests</label>
                            <select name="guests" class="w-full border-[0.5px] border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                                @for($i = 1; $i <= $sample->max_pax; $i++)
                                <option value="{{ $i }}">{{ $i }} {{ $i===1?'Guest':'Guests' }}</option>
                                @endfor
                            </select>
                        </div>
                        <button type="submit" class="w-full bg-teal-600 hover:bg-teal-700 text-white font-bold py-3 rounded-xl transition-colors text-sm">
                            Book This Room
                        </button>
                    </form>
                    @else
                    <a href="{{ route('public.contact') }}" class="block text-center bg-teal-600 hover:bg-teal-700 text-white font-bold py-3 rounded-xl transition-colors text-sm">
                        Contact to Book
                    </a>
                    @endif

                    <div class="mt-4 pt-4 border-t border-gray-100 space-y-2">
                        <div class="flex items-center gap-2 text-xs text-gray-500">
                            <svg class="w-3.5 h-3.5 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            Best rate when booking direct
                        </div>
                        <div class="flex items-center gap-2 text-xs text-gray-500">
                            <svg class="w-3.5 h-3.5 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            Free cancellation enquiries welcome
                        </div>
                    </div>
                </div>

                {{-- Other rooms --}}
                @if($otherTypes->count())
                <div class="bg-white rounded-2xl border-[0.5px] border-gray-200 p-5">
                    <h3 class="font-semibold text-gray-800 text-sm mb-3">Other Room Types</h3>
                    <div class="space-y-2">
                        @foreach($otherTypes as $other)
                        <a href="{{ route('public.room-detail', urlencode($other->type)) }}"
                           class="flex items-center justify-between p-3 rounded-xl hover:bg-gray-50 transition-colors group">
                            <span class="text-sm font-medium text-gray-700 group-hover:text-teal-700">{{ $other->type }}</span>
                            <span class="text-sm font-bold text-teal-600">₱{{ number_format($other->rate) }}</span>
                        </a>
                        @endforeach
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection