112 lines
7.6 KiB
PHP
112 lines
7.6 KiB
PHP
<div class="flex items-center relative">
|
|
<form method="POST" action="{{ route('hentai.searchredirect') }}" class="w-full">
|
|
@csrf
|
|
<div class="relative group">
|
|
<label for="live-search" class="sr-only">Search</label>
|
|
<div class="relative w-full sm:min-w-[200px] md:min-w-[300px] lg:min-w-[400px] xl:min-w-[500px]">
|
|
{{-- Search Icon --}}
|
|
<div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
|
|
<svg class="w-4 h-4 text-gray-400 dark:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
|
|
</svg>
|
|
</div>
|
|
|
|
{{-- Search Input --}}
|
|
<input
|
|
wire:model.live.debounce.600ms="navSearch"
|
|
type="search"
|
|
id="live-search"
|
|
name="live-search"
|
|
class="block w-full pl-10 pr-28 py-3 text-sm rounded-2xl border border-gray-200 bg-white/80 dark:bg-neutral-900/50 dark:border-neutral-700 placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-rose-600 focus:border-rose-700 transition"
|
|
placeholder="@if(request()->path() !== 'search'){{ __('search.search-hentai') }}@endif"
|
|
required
|
|
@if(request()->path() == 'search') disabled @endif
|
|
aria-autocomplete="list"
|
|
aria-label="Search"
|
|
>
|
|
|
|
{{-- Submit button to redirect to advanced search --}}
|
|
<button
|
|
type="submit"
|
|
class="absolute right-1 top-1/2 -translate-y-1/2 px-4 py-2 text-sm font-medium rounded-xl bg-rose-700 text-white hover:bg-rose-800 focus:outline-none focus:ring-2 focus:ring-rose-300 disabled:bg-gray-300 disabled:hover:bg-gray-300 disabled:dark:bg-gray-500 disabled:dark:hover:bg-gray-500"
|
|
@if(request()->path() == 'search') disabled @endif
|
|
>{{ __('search.search') }}</button>
|
|
</div>
|
|
|
|
@if((! $hide) && request()->path() != 'search' && request()->path() != 'download-search')
|
|
<div
|
|
class="pointer-events-auto absolute left-0 right-0 mt-3 z-50 flex justify-center"
|
|
aria-live="polite"
|
|
>
|
|
<div
|
|
class="max-h-[70vh] overflow-auto rounded-2xl bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700 shadow-lg transition-all transform hidden group-focus-within:block group-focus-within:translate-y-0">
|
|
<div class="flex items-center justify-between p-3 border-b border-gray-100 dark:border-neutral-800">
|
|
<div class="text-sm text-gray-700 dark:text-gray-200 font-medium">
|
|
@if($episodes->count())
|
|
{{ __('Search result for ') }} “{{ $query ?: $navSearch }}”
|
|
@else
|
|
{{ __('No results') }}
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Loading indicator using Livewire --}}
|
|
<div class="flex items-center gap-2">
|
|
<div wire:loading.class.remove="hidden" class="hidden">
|
|
<svg class="w-5 h-5 animate-spin text-rose-600" viewBox="0 0 24 24" fill="none">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-opacity="0.2" stroke-width="4"></circle>
|
|
<path d="M22 12a10 10 0 0 1-10 10" stroke="currentColor" stroke-width="4" stroke-linecap="round"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- content area: responsive grid --}}
|
|
<div class="p-4">
|
|
@if($episodes->count())
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-1 lg:grid-cols-2">
|
|
@foreach($episodes as $episode)
|
|
<a href="{{ route('hentai.index', ['title' => $episode->slug ]) }}" class="group block rounded-xl overflow-hidden bg-neutral-50 dark:bg-neutral-950 border border-transparent hover:border-gray-200 dark:hover:border-neutral-700 shadow-sm hover:shadow-md transition">
|
|
<div class="relative aspect-video">
|
|
<img
|
|
alt="{{ $episode->title }} - {{ $episode->episode }}"
|
|
loading="lazy"
|
|
class="object-cover w-full h-full"
|
|
src="{{ $episode->gallery->first()->thumbnail_url }}"
|
|
>
|
|
<span class="absolute right-0 top-0 bg-white/90 dark:bg-neutral-800/80 dark:text-white text-xs font-semibold rounded-tr rounded-bl-xl px-2 py-1">{{ $episode->getResolution() }}</span>
|
|
<div class="absolute left-0 bottom-0 bg-white/90 dark:bg-neutral-800/80 dark:text-white text-xs rounded-tr-xl px-2 py-1 font-medium">
|
|
<i class="fa-regular fa-eye mr-1"></i> {{ $episode->viewCountFormatted() }}
|
|
<i class="fa-regular fa-heart ml-2"></i> {{ $episode->likeCount() }}
|
|
</div>
|
|
</div>
|
|
<div class="p-3">
|
|
<h3 class="text-sm font-semibold truncate text-gray-900 dark:text-white">{{ $episode->title }} - {{ $episode->episode }}</h3>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate"> {{ \Illuminate\Support\Str::limit($episode->description ?? '', 80) }}</p>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
|
|
{{-- Advanced Search card --}}
|
|
<a href="{{ route('hentai.search', ['search' => $query]) }}" class="flex items-center justify-center rounded-xl border border-dashed border-gray-200 dark:border-neutral-700 p-6 hover:bg-gray-50 dark:hover:bg-neutral-900 transition">
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-rose-600 mb-1">🔎</div>
|
|
<div class="font-semibold text-sm dark:text-white">Advanced Search</div>
|
|
<div class="text-xs text-gray-500 dark:text-gray-400 mt-1">View more results</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
@else
|
|
{{-- Empty state --}}
|
|
<div class="py-12 text-center text-sm text-gray-600 dark:text-gray-300">
|
|
<div class="mb-3">No results found for “{{ $query ?: $navSearch }}”</div>
|
|
<a href="{{ route('hentai.search', ['search' => $navSearch ?: $query]) }}" class="inline-block px-4 py-2 rounded-lg bg-rose-700 text-white text-sm hover:bg-rose-800">Try advanced search</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</form>
|
|
</div>
|