@php
    $selectedSecondary = collect(old('secondary_muscle_groups', $exercise?->secondaryMuscleGroups?->pluck('id')->all() ?? []))->map(fn ($id) => (string) $id);
@endphp

<div class="row g-4">
    <div class="col-12 col-xl-8">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body row g-3">
                <div class="col-12 col-md-8">
                    <label for="name" class="form-label">Nome *</label>
                    <input id="name" name="name" value="{{ old('name', $exercise?->name) }}" class="form-control @error('name') is-invalid @enderror" required maxlength="150">
                    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-12 col-md-4">
                    <label for="slug" class="form-label">Slug</label>
                    <input id="slug" name="slug" value="{{ old('slug', $exercise?->slug) }}" class="form-control @error('slug') is-invalid @enderror" maxlength="170">
                    @error('slug') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-12">
                    <label for="short_description" class="form-label">Descrizione breve</label>
                    <textarea id="short_description" name="short_description" class="form-control" rows="2" maxlength="500">{{ old('short_description', $exercise?->short_description) }}</textarea>
                </div>
                <div class="col-12">
                    <label for="full_description" class="form-label">Descrizione completa</label>
                    <textarea id="full_description" name="full_description" class="form-control" rows="4">{{ old('full_description', $exercise?->full_description) }}</textarea>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white"><h2 class="h5 mb-0">Istruzioni tecniche</h2></div>
            <div class="card-body row g-3">
                @foreach ([
                    'initial_position' => ['Posizione iniziale', 3],
                    'execution' => ['Esecuzione', 5],
                    'breathing' => ['Respirazione', 3],
                    'common_errors' => ['Errori comuni', 4],
                    'technical_notes' => ['Note tecniche', 4],
                    'coach_notes' => ['Note private coach', 4],
                ] as $field => [$label, $rows])
                    <div class="col-12">
                        <label for="{{ $field }}" class="form-label">{{ $label }}</label>
                        <textarea id="{{ $field }}" name="{{ $field }}" class="form-control" rows="{{ $rows }}">{{ old($field, $exercise?->{$field}) }}</textarea>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4" data-video-preview-form data-preview-url="{{ route('coach.exercises.video.resolve') }}">
            <div class="card-header bg-white"><h2 class="h5 mb-0">Video</h2></div>
            <div class="card-body">
                <label for="video_url" class="form-label">URL video HTTPS</label>
                <div class="input-group">
                    <input id="video_url" name="video_url" type="url" value="{{ old('video_url', $exercise?->video_url) }}" class="form-control @error('video_url') is-invalid @enderror" maxlength="4096" placeholder="https://…">
                    <button type="button" class="btn btn-outline-primary" data-video-verify>Verifica video</button>
                </div>
                @error('video_url') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                <div class="form-text">YouTube, Vimeo, Instagram, TikTok, MP4, WebM, OGG o collegamento esterno. Per i post Instagram viene ricavato automaticamente l’URL della risorsa video.</div>
                <div class="mt-3 d-none" data-video-result aria-live="polite">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <span class="badge text-bg-dark" data-video-provider></span>
                        <span class="small text-body-secondary" data-video-message></span>
                    </div>
                    <div data-video-preview></div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-xl-4">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white"><h2 class="h5 mb-0">Classificazione</h2></div>
            <div class="card-body row g-3">
                <div class="col-12">
                    <label for="exercise_category_id" class="form-label">Categoria</label>
                    <select id="exercise_category_id" name="exercise_category_id" class="form-select">
                        <option value="">Nessuna</option>
                        @foreach ($categories as $category)
                            <option value="{{ $category->id }}" @selected((string) old('exercise_category_id', $exercise?->exercise_category_id) === (string) $category->id)>{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12">
                    <label for="primary_muscle_group_id" class="form-label">Gruppo muscolare primario</label>
                    <select id="primary_muscle_group_id" name="primary_muscle_group_id" class="form-select">
                        <option value="">Nessuno</option>
                        @foreach ($muscleGroups as $muscle)
                            <option value="{{ $muscle->id }}" @selected((string) old('primary_muscle_group_id', $exercise?->primary_muscle_group_id) === (string) $muscle->id)>{{ $muscle->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12">
                    <label for="secondary_muscle_groups" class="form-label">Gruppi secondari</label>
                    <select id="secondary_muscle_groups" name="secondary_muscle_groups[]" class="form-select" multiple size="5">
                        @foreach ($muscleGroups as $muscle)
                            <option value="{{ $muscle->id }}" @selected($selectedSecondary->contains((string) $muscle->id))>{{ $muscle->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12">
                    <label for="equipment_id" class="form-label">Attrezzatura</label>
                    <select id="equipment_id" name="equipment_id" class="form-select">
                        <option value="">Corpo libero / nessuna</option>
                        @foreach ($equipment as $item)
                            <option value="{{ $item->id }}" @selected((string) old('equipment_id', $exercise?->equipment_id) === (string) $item->id)>{{ $item->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6">
                    <label for="difficulty" class="form-label">Difficoltà *</label>
                    <select id="difficulty" name="difficulty" class="form-select" required>
                        @foreach ($levels as $level)
                            <option value="{{ $level->value }}" @selected(old('difficulty', $exercise?->difficulty?->value ?? 'beginner') === $level->value)>{{ $level->label() }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6">
                    <label for="exercise_type" class="form-label">Tipo *</label>
                    <select id="exercise_type" name="exercise_type" class="form-select" required>
                        @foreach ($types as $type)
                            <option value="{{ $type->value }}" @selected(old('exercise_type', $exercise?->exercise_type?->value ?? 'strength') === $type->value)>{{ $type->label() }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12">
                    <label for="sort_order" class="form-label">Ordine</label>
                    <input id="sort_order" name="sort_order" type="number" min="0" value="{{ old('sort_order', $exercise?->sort_order ?? 0) }}" class="form-control">
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white"><h2 class="h5 mb-0">Copertina</h2></div>
            <div class="card-body">
                @if ($exercise?->cover_image_path)
                    <img src="{{ Storage::url($exercise->cover_image_path) }}" alt="Copertina attuale di {{ $exercise->name }}" class="img-fluid rounded mb-3">
                    <div class="form-check mb-3">
                        <input type="hidden" name="remove_cover_image" value="0">
                        <input id="remove_cover_image" name="remove_cover_image" value="1" type="checkbox" class="form-check-input">
                        <label for="remove_cover_image" class="form-check-label">Rimuovi copertina</label>
                    </div>
                @endif
                <label for="cover_image" class="form-label">Nuova immagine</label>
                <input id="cover_image" name="cover_image" type="file" accept="image/jpeg,image/png,image/webp" class="form-control @error('cover_image') is-invalid @enderror">
                <div class="form-text">JPG, PNG o WebP, massimo 5 MB.</div>
                @error('cover_image') <div class="invalid-feedback">{{ $message }}</div> @enderror

                <hr class="my-4">

                @if ($exercise?->execution_gif_path)
                    <img src="{{ Storage::url($exercise->execution_gif_path) }}" alt="GIF di esecuzione attuale di {{ $exercise->name }}" class="img-fluid rounded mb-3">
                    <div class="form-check mb-3">
                        <input type="hidden" name="remove_execution_gif" value="0">
                        <input id="remove_execution_gif" name="remove_execution_gif" value="1" type="checkbox" class="form-check-input">
                        <label for="remove_execution_gif" class="form-check-label">Rimuovi GIF di esecuzione</label>
                    </div>
                @endif
                <label for="execution_gif" class="form-label">Nuova GIF di esecuzione</label>
                <input id="execution_gif" name="execution_gif" type="file" accept="image/gif" class="form-control @error('execution_gif') is-invalid @enderror">
                <div class="form-text">GIF animata, massimo {{ config('francoach.upload_limit_mb', 10) }} MB.</div>
                @error('execution_gif') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body">
                <input type="hidden" name="is_visible_to_athlete" value="0">
                <div class="form-check form-switch mb-3">
                    <input id="is_visible_to_athlete" name="is_visible_to_athlete" value="1" type="checkbox" class="form-check-input" @checked((bool) old('is_visible_to_athlete', $exercise?->is_visible_to_athlete ?? false))>
                    <label for="is_visible_to_athlete" class="form-check-label">Visibile all’atleta</label>
                </div>
                <input type="hidden" name="is_active" value="0">
                <div class="form-check form-switch">
                    <input id="is_active" name="is_active" value="1" type="checkbox" class="form-check-input" @checked((bool) old('is_active', $exercise?->is_active ?? true))>
                    <label for="is_active" class="form-check-label">Esercizio attivo</label>
                </div>
            </div>
        </div>

        <div class="d-grid gap-2">
            <button class="btn btn-primary" type="submit">{{ $exercise ? 'Salva modifiche' : 'Crea esercizio' }}</button>
            <a href="{{ $exercise ? route('coach.exercises.show', $exercise) : route('coach.exercises.index') }}" class="btn btn-outline-secondary">Annulla</a>
        </div>
    </div>
</div>