fitness/resources/views/exercises/show.blade.php

<x-app-layout>
    <section class="relative overflow-hidden">
        <div class="absolute inset-0">
            <img src="{{ $exercise->gif_url ?: 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=1920&auto=format&fit=crop' }}" alt="{{ $exercise->name }}" class="h-full w-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-b from-indigo-900/70 via-indigo-800/60 to-transparent"></div>
        </div>
        <div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 sm:py-24">
            <a href="{{ url()->previous() ?? route('exercises.index') }}" class="inline-flex items-center text-sm font-medium text-white/90 hover:text-white">
                &#8592; Back
            </a>
            <h1 class="mt-3 text-3xl sm:text-5xl font-extrabold tracking-tight text-white drop-shadow">{{ $exercise->name }}</h1>
            <div class="mt-4 flex flex-wrap items-center gap-2">
                @foreach($exercise->bodyParts as $bp)
                    <span class="inline-flex items-center rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-gray-900 shadow">{{ $bp->name }}</span>
                @endforeach
                @foreach($exercise->targetMuscles as $m)
                    <span class="inline-flex items-center rounded-full bg-emerald-100 text-emerald-700 px-2.5 py-1 text-xs font-semibold">Target: {{ $m->name }}</span>
                @endforeach
                @foreach($exercise->secondaryMuscles as $m)
                    <span class="inline-flex items-center rounded-full bg-sky-100 text-sky-700 px-2.5 py-1 text-xs font-semibold">Secondary: {{ $m->name }}</span>
                @endforeach
                @foreach($exercise->equipments as $e)
                    <span class="inline-flex items-center rounded-full bg-amber-100 text-amber-700 px-2.5 py-1 text-xs font-semibold">{{ ucfirst($e->name) }}</span>
                @endforeach
            </div>
        </div>
    </section>

    <section class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            <div class="lg:col-span-8">
                <div class="rounded-3xl overflow-hidden ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800">
                    <div class="relative aspect-[16/9] bg-black">
                        <img src="{{ $exercise->gif_url ?: 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=1600&auto=format&fit=crop' }}" alt="{{ $exercise->name }} demo" class="h-full w-full object-cover">
                    </div>
                    <div class="p-6">
                        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">How to perform</h2>
                        <div class="prose prose-indigo dark:prose-invert max-w-none mt-3">
                            @php $instructions = trim((string) $exercise->instructions); @endphp
                            @if($instructions !== '')
                                @foreach(preg_split('/\r?\n+/', $instructions) as $line)
                                    @if(trim($line) !== '')<p>{{ $line }}</p>@endif
                                @endforeach
                            @else
                                <p>No instructions available.</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="lg:col-span-4">
                <div class="rounded-2xl p-5 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800">
                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Exercise Info</h3>
                    <dl class="mt-3 space-y-2 text-sm text-gray-700 dark:text-gray-300">
                        @if($exercise->bodyParts->count())
                            <div class="flex justify-between"><dt>Body Part</dt><dd>{{ $exercise->bodyParts->pluck('name')->join(', ') }}</dd></div>
                        @endif
                        @if($exercise->targetMuscles->count())
                            <div class="flex justify-between"><dt>Target Muscles</dt><dd>{{ $exercise->targetMuscles->pluck('name')->join(', ') }}</dd></div>
                        @endif
                        @if($exercise->secondaryMuscles->count())
                            <div class="flex justify-between"><dt>Secondary Muscles</dt><dd>{{ $exercise->secondaryMuscles->pluck('name')->join(', ') }}</dd></div>
                        @endif
                        @if($exercise->equipments->count())
                            <div class="flex justify-between"><dt>Equipment</dt><dd>{{ $exercise->equipments->pluck('name')->join(', ') }}</dd></div>
                        @endif
                    </dl>
                    <div class="mt-5">
                        <a href="{{ route('workouts.builder') }}" 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">Add to Workout</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</x-app-layout>