@extends('public.layouts.guest')

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

@section('content')

{{-- Page header --}}
<div class="bg-gradient-to-br from-teal-700 to-teal-900 py-16">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 text-center">
        <p class="text-teal-300 text-xs font-semibold tracking-[0.2em] uppercase mb-2">Accommodations</p>
        <h1 class="text-4xl font-bold text-white">Rooms & Rates</h1>
        <p class="text-teal-200 mt-3 text-sm max-w-lg mx-auto">Choose from our selection of comfortable rooms designed for every type of traveler.</p>
    </div>
</div>

<div class="py-16 bg-gray-50">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">

        @if($bookingEnabled)
        {{-- Quick search bar --}}
        <div class="bg-white rounded-2xl border-[0.5px] border-gray-200 p-5 mb-10 shadow-sm">
            <form action="{{ route('public.book') }}" method="GET" class="flex flex-col sm:flex-row gap-3 items-end">
                <div class="flex-1">
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5 uppercase tracking-wide">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 class="flex-1">
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5 uppercase tracking-wide">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 class="flex-none">
                    <label class="block text-xs font-semibold text-gray-500 mb-1.5 uppercase tracking-wide">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 <= 8; $i++)
                        <option value="{{ $i }}" {{ request('guests',1) == $i ? 'selected' : '' }}>{{ $i }} {{ $i===1?'Guest':'Guests' }}</option>
                        @endfor
                    </select>
                </div>
                <button type="submit" class="flex-none bg-teal-600 hover:bg-teal-700 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm whitespace-nowrap">
                    Check Availability
                </button>
            </form>
        </div>
        @endif

        {{-- Room type grid --}}
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
            @foreach($roomTypes as $room)
            <div class="bg-white rounded-2xl border-[0.5px] border-gray-200 overflow-hidden hover:shadow-lg transition-shadow group">

                {{-- Photo --}}
                <div class="aspect-video bg-gradient-to-br from-teal-50 to-teal-100 relative overflow-hidden">
                    @if($room->photo)
                        <img src="{{ \Illuminate\Support\Facades\Storage::url($room->photo) }}"
                             alt="{{ $room->type }}"
                             class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    @else
                        <div class="w-full h-full flex items-center justify-center">
                            <svg class="w-12 h-12 text-teal-200" 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>
                        </div>
                    @endif
                </div>

                <div class="p-5">
                    <div class="flex items-start justify-between mb-2">
                        <h3 class="font-bold text-gray-900 text-base">{{ $room->type }}</h3>
                        <span class="text-teal-600 font-bold text-sm ml-2 whitespace-nowrap">₱{{ number_format($room->rate) }}<span class="text-gray-400 font-normal text-xs">/night</span></span>
                    </div>
                    <div class="flex items-center gap-3 text-xs text-gray-400 mb-4">
                        <span class="flex items-center gap-1">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            Up to {{ $room->max_pax }} guests
                        </span>
                        <span>&middot;</span>
                        <span>{{ $room->beds }}</span>
                        <span>&middot;</span>
                        <span>{{ $room->room_count }} room{{ $room->room_count > 1 ? 's' : '' }}</span>
                    </div>
                    <div class="flex gap-2">
                        <a href="{{ route('public.room-detail', urlencode($room->type)) }}"
                           class="flex-1 text-center py-2.5 border-[0.5px] border-gray-200 hover:border-teal-300 hover:bg-teal-50 text-gray-600 hover:text-teal-700 text-xs font-semibold rounded-xl transition-colors">
                            Details
                        </a>
                        @if($bookingEnabled)
                        <a href="{{ route('public.book.room', urlencode($room->type)) . '?' . http_build_query(request()->only('check_in','check_out','guests')) }}"
                           class="flex-1 text-center py-2.5 bg-teal-600 hover:bg-teal-700 text-white text-xs font-semibold rounded-xl transition-colors">
                            Book Now
                        </a>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>

@endsection