fitness/resources/views/exercises/index.blade.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">Browse Exercises</h1>
                    <p class="mt-2 text-gray-600 dark:text-gray-300">Explore the full FitAtlas library. Filter by body part, muscle, or equipment.</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">
            <!-- Filters -->
            <aside class="lg:col-span-12">
                <form action="{{ route('exercises.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">Search</label>
                        <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Search by name or instruction" 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">Body Part</label>
                        <select name="bodypart" 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="">Any</option>
                            @foreach($bodyParts as $bp)
                                <option value="{{ $bp->slug }}" @selected(($filters['bodypart'] ?? '') === $bp->slug)>{{ $bp->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="w-full lg:w-56">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Muscle</label>
                        <select name="muscle" 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="">Any</option>
                            @foreach($muscles as $m)
                                <option value="{{ $m->slug }}" @selected(($filters['muscle'] ?? '') === $m->slug)>{{ $m->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="w-full lg:w-56">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Equipment</label>
                        <select name="equipment" 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="">Any</option>
                            @foreach($equipments as $e)
                                <option value="{{ $e->slug }}" @selected(($filters['equipment'] ?? '') === $e->slug)>{{ $e->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="w-full lg:w-auto flex items-center justify-between lg:justify-end gap-2 lg:ml-auto">
                        <a href="{{ route('exercises.index') }}" class="text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">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">Apply Filters</button>
                    </div>
                </form>
            </aside>

            <!-- Results -->
            <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">Showing <span class="font-medium">{{ $exercises->total() }}</span> exercises</p>
                    <div class="flex items-center gap-2">
                        <label class="text-sm text-gray-600 dark:text-gray-300">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('exercises.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($exercises->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">No exercises found. Try adjusting your filters.</div>
                @else
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                        @php $badgePalette = ['bg-rose-100 text-rose-700','bg-amber-100 text-amber-700','bg-emerald-100 text-emerald-700','bg-sky-100 text-sky-700','bg-violet-100 text-violet-700']; @endphp
                        @foreach($exercises as $exercise)
                            <a href="{{ route('exercises.show', $exercise->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">
                                    <img src="{{ $exercise->poster_url ?: ($exercise->gif_url ?: 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=1200&auto=format&fit=crop') }}" alt="{{ $exercise->display_name }}" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105">
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 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">{{ $exercise->display_name }}</div>
                                </div>
                                <div class="p-4">
                                    <div class="mt-1 flex flex-wrap gap-2">
                                        @foreach($exercise->targetMuscles->take(2) as $i => $m)
                                            <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium {{ $badgePalette[$i % count($badgePalette)] }}">{{ $m->name }}</span>
                                        @endforeach
                                        @if($exercise->bodyParts->count())
                                            <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200">{{ $exercise->bodyParts->first()->name }}</span>
                                        @endif
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>

                    <div class="mt-6">{{ $exercises->links() }}</div>
                @endif
            </div>
        </div>
    </section>
</x-app-layout>