@csrf
<div class="space-y-4">
    <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
        <input type="text" name="name" value="{{ old('name', $exercise->name ?? '') }}" required 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">
        <x-input-error :messages="$errors->get('name')" class="mt-1" />
    </div>
    <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Slug (optional)</label>
        <input type="text" name="slug" value="{{ old('slug', $exercise->slug ?? '') }}" 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">
        <p class="mt-1 text-xs text-gray-500">Leave empty to auto-generate from the name.</p>
        <x-input-error :messages="$errors->get('slug')" class="mt-1" />
    </div>
    <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">GIF URL</label>
        <input type="url" name="gif_url" value="{{ old('gif_url', $exercise->gif_url ?? '') }}" 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">
        <x-input-error :messages="$errors->get('gif_url')" class="mt-1" />
    </div>
    <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Poster image</label>
        <div class="mt-1 grid grid-cols-1 gap-3 sm:grid-cols-2">
            <div>
                <input type="file" name="poster_image_file" accept="image/*" class="block w-full text-sm text-gray-900 dark:text-gray-100 file:mr-4 file:rounded-md file:border-0 file:bg-indigo-50 file:px-3 file:py-2 file:text-sm file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100 dark:file:bg-indigo-900/30 dark:file:text-indigo-200" />
                <p class="mt-1 text-xs text-gray-500">Upload a new image (JPG, PNG, WebP, up to 8MB). If provided, it will override the URL below.</p>
                <x-input-error :messages="$errors->get('poster_image_file')" class="mt-1" />
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400">Or use an external URL</label>
                <input type="url" name="poster_image" value="{{ old('poster_image', $exercise->poster_image ?? '') }}" 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" placeholder="https://...">
                <x-input-error :messages="$errors->get('poster_image')" class="mt-1" />
            </div>
        </div>
        @php
            $poster = old('poster_image', $exercise->poster_image ?? '');
            $isHttp = is_string($poster) && preg_match('/^https?:\/\//i', $poster);
            $src = $isHttp ? $poster : ($poster ? \Illuminate\Support\Facades\Storage::url($poster) : '');
        @endphp
        @if(!empty($src))
            <div class="mt-2">
                <img src="{{ $src }}" alt="Poster preview" class="h-32 w-auto rounded-lg border border-gray-200 dark:border-gray-700 object-cover">
            </div>
        @endif
    </div>
    <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Instructions</label>
        <textarea name="instructions" rows="6" 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">{{ old('instructions', $exercise->instructions ?? '') }}</textarea>
        <x-input-error :messages="$errors->get('instructions')" class="mt-1" />
    </div>
</div>
<div class="mt-6 flex items-center gap-3">
    <a href="{{ route('admin.exercises.index') }}" class="text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Cancel</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">Save</button>
</div>