101 lines
7.8 KiB
PHP
101 lines
7.8 KiB
PHP
<x-app-layout>
|
|
<section class="bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800">
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
|
|
<div class="flex items-start justify-between flex-col lg:flex-row gap-6">
|
|
<div>
|
|
<h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">{{ __('app.yoga.browse') }}</h1>
|
|
<p class="mt-2 text-gray-600 dark:text-gray-300">{{ __('app.yoga.browse_desc') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6">
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
|
<aside class="lg:col-span-12">
|
|
<form action="{{ route('yoga.index') }}" method="GET" class="space-y-4 lg:space-y-0 lg:flex lg:flex-wrap lg:items-end lg:gap-4 bg-white dark:bg-gray-800 rounded-2xl p-4 ring-1 ring-gray-200 dark:ring-gray-700">
|
|
<div class="w-full lg:w-72">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('app.yoga.search') }}</label>
|
|
<input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="{{ __('app.yoga.search_placeholder') }}" class="mt-1 w-full rounded-xl border-gray-300 dark:border-gray-700 bg-white/80 dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2">
|
|
</div>
|
|
<div class="w-full lg:w-56">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('app.yoga.category') }}</label>
|
|
<select name="category" class="mt-1 w-full rounded-xl border-gray-300 dark:border-gray-700 bg-white/80 dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2">
|
|
<option value="0">{{ __('app.yoga.any') }}</option>
|
|
@foreach($categories as $c)
|
|
<option value="{{ $c->id }}" @selected(($filters['category'] ?? 0) == $c->id)>{{ $c->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="w-full lg:w-72">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('app.yoga.benefit') }}</label>
|
|
<input type="text" name="benefit" value="{{ $filters['benefit'] ?? '' }}" placeholder="{{ __('app.yoga.benefit_placeholder') }}" class="mt-1 w-full rounded-xl border-gray-300 dark:border-gray-700 bg-white/80 dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2">
|
|
</div>
|
|
<div class="w-full lg:w-auto flex items-center justify-between lg:justify-end gap-2 lg:ml-auto">
|
|
<a href="{{ route('yoga.index') }}" class="text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">{{ __('app.yoga.reset') }}</a>
|
|
<button type="submit" class="inline-flex items-center rounded-xl bg-gradient-to-r from-fuchsia-600 to-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow hover:from-fuchsia-500 hover:to-indigo-500">{{ __('app.yoga.apply_filters') }}</button>
|
|
</div>
|
|
</form>
|
|
</aside>
|
|
|
|
<div class="lg:col-span-12">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">{{ __('app.yoga.showing') }} <span class="font-medium">{{ $poses->total() }}</span> {{ __('app.yoga.poses_noun') }}</p>
|
|
<div class="flex items-center gap-2">
|
|
<label class="text-sm text-gray-600 dark:text-gray-300">{{ __('app.exercises.per_page') }}</label>
|
|
<select name="per_page" form="per-page-form" class="rounded-lg border-gray-300 dark:border-gray-700 bg-white/80 dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:border-indigo-500 focus:ring-indigo-500 px-2 py-1">
|
|
@foreach([12, 24, 36] as $n)
|
|
<option value="{{ $n }}" @selected(($filters['per_page'] ?? 12) == $n)>{{ $n }}</option>
|
|
@endforeach
|
|
</select>
|
|
<form id="per-page-form" action="{{ route('yoga.index') }}" method="GET" class="hidden">
|
|
@foreach(request()->except('per_page') as $k => $v)
|
|
<input type="hidden" name="{{ $k }}" value="{{ $v }}">
|
|
@endforeach
|
|
<input type="hidden" name="per_page" value="{{ $filters['per_page'] ?? 12 }}">
|
|
</form>
|
|
<script>
|
|
document.addEventListener('change', (e) => {
|
|
if (e.target && e.target.name === 'per_page') {
|
|
const form = document.getElementById('per-page-form');
|
|
form.querySelector('input[name="per_page"]').value = e.target.value;
|
|
form.submit();
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
@if($poses->count() === 0)
|
|
<div class="rounded-2xl border border-dashed border-gray-300 dark:border-gray-700 p-8 text-center text-gray-600 dark:text-gray-300">{{ __('app.yoga.none_found') }}</div>
|
|
@else
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach($poses as $pose)
|
|
<a href="{{ route('yoga.show', $pose->slug) }}" class="group rounded-3xl overflow-hidden bg-white dark:bg-gray-800 ring-1 ring-gray-200 dark:ring-gray-700 shadow-sm hover:shadow-xl transition">
|
|
<div class="relative aspect-[16/9] overflow-hidden bg-white">
|
|
@php $img = $pose->url_png ?: $pose->url_svg ?: $pose->url_svg_alt; @endphp
|
|
@if($img)
|
|
<img src="{{ $img }}" alt="{{ $pose->english_name }}" class="h-full w-full object-contain p-4 transition-transform duration-500 group-hover:scale-105">
|
|
@else
|
|
<div class="h-full w-full flex items-center justify-center text-gray-400">{{ __('app.yoga.no_image') }}</div>
|
|
@endif
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent"></div>
|
|
<div class="absolute bottom-3 left-3 inline-flex items-center rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-gray-900 shadow">{{ $pose->english_name }}</div>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="text-sm text-gray-600 dark:text-gray-300">{{ optional($pose->category)->name }}</div>
|
|
@if($pose->sanskrit_name)
|
|
<div class="mt-1 text-xs text-gray-500 italic">{{ $pose->sanskrit_name }}</div>
|
|
@endif
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="mt-6">{{ $poses->links() }}</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</x-app-layout>
|