@extends('layouts.app')

@section('title', 'Search Results | Kevron Suites and Apartments')

@section('content')
<section class="section-soft-blue py-12">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Header -->
        <div class="text-center mb-12">
            <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block mb-2">Search results</span>
            <h2>Search Results for: "{{ $query }}"</h2>
            <p class="text-xs text-slate-500 dark:text-slate-400 max-w-md mx-auto pt-2">
                Showing results found across our luxury en-suite apartments and Lagos travel city guides.
            </p>
        </div>

        <!-- Search results list -->
        <div class="space-y-6">
            @if($apartments->count() == 0 && $posts->count() == 0)
            <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-12 text-center shadow-sm">
                <div class="text-slate-300 w-12 h-12 mx-auto mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
                </div>
                <h3 class="text-sm font-bold text-slate-400 mb-2">No results matched your query</h3>
                <p class="text-[11px] text-slate-400 max-w-xs mx-auto leading-relaxed font-medium">
                    Try searching for keywords like "1 Bedroom", "Luxury", "Airport", or explore our listing.
                </p>
                <div class="pt-6">
                    <a href="{{ url('/apartments') }}" class="btn-pill btn-primary text-xs">Explore Residences</a>
                </div>
            </div>
            @else
                <!-- Apartments -->
                @if($apartments->count() > 0)
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-6 shadow-sm">
                    <h3 class="text-xs font-bold text-amber-500 uppercase tracking-widest mb-4 border-b border-slate-100 dark:border-slate-800 pb-2">Matching Suites</h3>
                    <div class="space-y-4">
                        @foreach($apartments as $apartment)
                        <div class="flex items-center justify-between border-b border-slate-50 dark:border-slate-800/40 pb-3 last:border-b-0 last:pb-0">
                            <div>
                                <a href="{{ url('/apartments/' . $apartment->slug) }}" class="text-xs font-bold text-slate-900 dark:text-white hover:text-blue-900 dark:hover:text-cyan-400 block">{{ $apartment->name }}</a>
                                <span class="text-[10px] text-slate-400 font-medium">₦{{ number_format($apartment->base_price_nightly) }} / Night • {{ $apartment->bedrooms_count }} Bed • {{ $apartment->capacity_adults }} Guests</span>
                            </div>
                            <a href="{{ url('/booking?type=' . $apartment->slug) }}" class="btn-pill btn-primary text-[9px] px-3.5 py-1.5 font-bold uppercase tracking-wider">Book stay</a>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Blog Posts -->
                @if($posts->count() > 0)
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-6 shadow-sm mt-6">
                    <h3 class="text-xs font-bold text-blue-900 dark:text-cyan-400 uppercase tracking-widest mb-4 border-b border-slate-100 dark:border-slate-800 pb-2">Matching Blog Articles</h3>
                    <div class="space-y-4">
                        @foreach($posts as $post)
                        <div class="flex items-center justify-between border-b border-slate-50 dark:border-slate-800/40 pb-3 last:border-b-0 last:pb-0">
                            <div>
                                <a href="{{ url('/blog/' . $post->slug) }}" class="text-xs font-bold text-slate-900 dark:text-white hover:text-blue-900 dark:hover:text-cyan-400 block">{{ $post->title }}</a>
                                <span class="text-[10px] text-slate-400 font-medium">{{ $post->summary }}</span>
                            </div>
                            <a href="{{ url('/blog/' . $post->slug) }}" class="btn-pill btn-outline-gold text-[9px] px-3.5 py-1.5 font-bold uppercase tracking-wider">Read post</a>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif
            @endif
        </div>

    </div>
</section>
@endsection