{{-- Časovi: naslovi sekcije + marketing kartice (homepage.offerings) --}}
<details id="pilates-classes" class="pilates-acc scroll-mt-24 max-w-4xl mb-4 rounded-2xl border border-border/80 border-s-4 border-s-amber-800/30 bg-card overflow-hidden">
    <summary class="flex cursor-pointer items-start justify-between gap-4 px-5 py-4 sm:px-6 sm:py-5 text-left transition-colors hover:bg-gradient-to-r hover:from-amber-50/40 hover:to-transparent">
        <div class="flex min-w-0 flex-1 gap-4">
            <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-amber-100 to-amber-50/80 text-amber-900/80 shadow-sm ring-1 ring-amber-200/55" aria-hidden="true"><i class="fas fa-th-large text-lg"></i></span>
            <div class="min-w-0 pr-2 pt-0.5">
                <h2 class="text-base font-semibold text-foreground tracking-tight leading-snug">{{ __('app.homepage_studio_block_classes') }}</h2>
                <p class="text-sm text-foreground/65 mt-2 max-w-prose leading-relaxed">{{ __('app.homepage_studio_headings_lead') }}</p>
            </div>
        </div>
        <span class="pilates-acc-chevron-btn flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted/60 text-foreground/50 mt-0.5 transition-colors">
            <i class="fas fa-chevron-down pilates-acc-chevron text-xs" aria-hidden="true"></i>
        </span>
    </summary>
    <div class="pilates-acc-body border-t border-border/60 px-5 py-7 sm:px-6 sm:py-8 space-y-8">
        <datalist id="pilates-offering-group-datalist">
            @foreach(($pilatesOfferingGroupHints ?? []) as $hint)
                <option value="{{ $hint }}"></option>
            @endforeach
        </datalist>
        <form id="pilates-classes-form" method="POST" action="{{ route('admin.homepage.pilates.classes') }}" enctype="multipart/form-data" class="space-y-8">
            @csrf
            @method('PUT')
            <div class="rounded-xl border border-border/70 bg-muted/15 p-6 space-y-6">
                <p class="text-xs font-semibold uppercase tracking-wide text-foreground/50">{{ __('app.homepage_studio_nav_headings') }}</p>
                @foreach (['kicker' => 'homepage_studio_field_kicker', 'heading' => 'homepage_studio_field_heading', 'description' => 'homepage_studio_field_description'] as $field => $lk)
                    <div class="grid sm:grid-cols-2 gap-x-6 gap-y-5">
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-foreground/80">{{ __('app.'.$lk) }} <span class="text-foreground/45 font-normal">(SR)</span></label>
                            <input type="text" name="section_copy[classes][{{ $field }}_sr]" value="{{ $f('classes', $field.'_sr') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm shadow-sm" />
                        </div>
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-foreground/80">{{ __('app.'.$lk) }} <span class="text-foreground/45 font-normal">(EN)</span></label>
                            <input type="text" name="section_copy[classes][{{ $field }}_en]" value="{{ $f('classes', $field.'_en') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm shadow-sm" />
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="space-y-4">
                <div>
                    <h3 class="text-base font-semibold text-foreground">{{ __('app.homepage_studio_offerings_title') }}</h3>
                    <p class="text-sm text-foreground/65 leading-relaxed max-w-prose mt-2">{{ __('app.homepage_studio_offerings_lead') }}</p>
                </div>
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between rounded-xl border border-border/70 bg-muted/10 px-4 py-4">
                    <p class="text-sm text-foreground/70 max-w-xl leading-relaxed">{{ __('app.homepage_offering_order_hint') }}</p>
                    <button type="button" id="pilates-offering-add" class="btn btn-outline border-primary/50 text-primary hover:bg-primary/10 px-5 py-2.5 whitespace-nowrap shrink-0">
                        <i class="fas fa-plus mr-2"></i>{{ __('app.homepage_offering_add') }}
                    </button>
                </div>
            </div>

            <div id="pilates-offerings-list" class="space-y-8"
                 data-row-label="{{ __('app.homepage_studio_row_class') }}"
                 data-empty-preview="{{ e(__('app.homepage_offering_no_preview')) }}"
                 data-min-one-msg="{{ e(__('app.homepage_offering_min_one')) }}">
                @foreach($offeringsForm as $i => $o)
                    @php
                        $o = is_array($o) ? $o : [];
                        $offImg = \App\Services\HomepageDataService::offeringImageUrl($o['image_path'] ?? null);
                    @endphp
                    <div class="pilates-offering-card rounded-2xl border border-border/90 bg-gradient-to-b from-amber-50/50 to-background p-6 sm:p-8 shadow-sm space-y-6">
                        <div class="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between pb-4 border-b border-border/60">
                            <div class="flex flex-wrap items-center gap-3">
                                <div class="inline-flex rounded-lg border border-border/80 bg-background p-0.5 shadow-sm" role="group" aria-label="{{ __('app.homepage_offering_order_hint') }}">
                                    <button type="button" class="pilates-offering-move-up inline-flex h-9 w-9 items-center justify-center rounded-md text-foreground/80 hover:bg-muted/80 hover:text-foreground" title="{{ __('app.homepage_offering_move_up') }}">
                                        <i class="fas fa-arrow-up text-xs" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="pilates-offering-move-down inline-flex h-9 w-9 items-center justify-center rounded-md text-foreground/80 hover:bg-muted/80 hover:text-foreground" title="{{ __('app.homepage_offering_move_down') }}">
                                        <i class="fas fa-arrow-down text-xs" aria-hidden="true"></i>
                                    </button>
                                </div>
                                <p class="text-sm font-semibold text-primary">
                                    <span class="pilates-offering-title-text">{{ __('app.homepage_studio_row_class') }} {{ $i + 1 }}</span>
                                </p>
                            </div>
                            <div class="flex flex-wrap items-center gap-3">
                                <input type="hidden" name="offerings[{{ $i }}][visible]" value="0" />
                                <label class="inline-flex items-center gap-3 rounded-lg border border-border/80 bg-background px-4 py-2.5 text-sm cursor-pointer hover:bg-muted/30 transition-colors">
                                    <input type="checkbox" name="offerings[{{ $i }}][visible]" value="1" class="rounded border-border h-4 w-4 text-primary" @checked(old("offerings.$i.visible", filter_var($o['visible'] ?? true, FILTER_VALIDATE_BOOLEAN))) />
                                    <span class="font-medium text-foreground">{{ __('app.homepage_offering_visible_short') }}</span>
                                </label>
                                <button type="button" class="pilates-offering-remove inline-flex items-center gap-1.5 rounded-lg border border-red-200 bg-red-50/80 px-3 py-2 text-sm font-medium text-red-700 hover:bg-red-100/90 transition-colors">
                                    <i class="fas fa-trash-alt text-xs" aria-hidden="true"></i>{{ __('app.homepage_offering_remove') }}
                                </button>
                            </div>
                        </div>

                        <input type="hidden" name="offerings[{{ $i }}][image_path]" value="{{ old("offerings.$i.image_path", $o['image_path'] ?? '') }}" />

                        <div class="space-y-6">
                            <div class="grid sm:grid-cols-2 gap-x-6 gap-y-5">
                                <div class="space-y-2">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_offering_group_title') }} (SR)</label>
                                    <input type="text" name="offerings[{{ $i }}][title_sr]" value="{{ old("offerings.$i.title_sr", $o['title_sr'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm shadow-sm" />
                                </div>
                                <div class="space-y-2">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_offering_group_title') }} (EN)</label>
                                    <input type="text" name="offerings[{{ $i }}][title_en]" value="{{ old("offerings.$i.title_en", $o['title_en'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm shadow-sm" />
                                </div>
                            </div>
                            <div class="space-y-2 max-w-xl">
                                <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_offering_section_group') }}</label>
                                <input type="text" name="offerings[{{ $i }}][section_group]" list="pilates-offering-group-datalist"
                                       value="{{ old("offerings.$i.section_group", $o['section_group'] ?? '') }}"
                                       class="w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm shadow-sm font-mono"
                                       placeholder="mat-pilates" maxlength="80" autocomplete="off" />
                                <p class="text-xs text-foreground/55">{{ __('app.homepage_offering_section_group_hint') }}</p>
                            </div>
                            <div class="grid sm:grid-cols-2 gap-x-6 gap-y-5">
                                <div class="space-y-2">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_offering_group_desc') }} (SR)</label>
                                    <textarea name="offerings[{{ $i }}][description_sr]" rows="3" class="w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm shadow-sm leading-relaxed">{{ old("offerings.$i.description_sr", $o['description_sr'] ?? '') }}</textarea>
                                </div>
                                <div class="space-y-2">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_offering_group_desc') }} (EN)</label>
                                    <textarea name="offerings[{{ $i }}][description_en]" rows="3" class="w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm shadow-sm leading-relaxed">{{ old("offerings.$i.description_en", $o['description_en'] ?? '') }}</textarea>
                                </div>
                            </div>

                            <div class="rounded-xl border border-border/60 bg-muted/10 p-5 space-y-4">
                                <p class="text-xs font-semibold uppercase tracking-wide text-foreground/50">{{ __('app.homepage_studio_offering_group_meta') }}</p>
                                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-5">
                                    <div class="space-y-2">
                                        <label class="block text-sm font-medium text-foreground/75">{{ __('app.homepage_studio_offering_label_duration') }} (SR)</label>
                                        <input type="text" name="offerings[{{ $i }}][duration_sr]" value="{{ old("offerings.$i.duration_sr", $o['duration_sr'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm shadow-sm" />
                                    </div>
                                    <div class="space-y-2">
                                        <label class="block text-sm font-medium text-foreground/75">{{ __('app.homepage_studio_offering_label_duration') }} (EN)</label>
                                        <input type="text" name="offerings[{{ $i }}][duration_en]" value="{{ old("offerings.$i.duration_en", $o['duration_en'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm shadow-sm" />
                                    </div>
                                    <div class="space-y-2">
                                        <label class="block text-sm font-medium text-foreground/75">{{ __('app.homepage_studio_offering_label_level') }} (SR)</label>
                                        <input type="text" name="offerings[{{ $i }}][level_sr]" value="{{ old("offerings.$i.level_sr", $o['level_sr'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm shadow-sm" />
                                    </div>
                                    <div class="space-y-2">
                                        <label class="block text-sm font-medium text-foreground/75">{{ __('app.homepage_studio_offering_label_level') }} (EN)</label>
                                        <input type="text" name="offerings[{{ $i }}][level_en]" value="{{ old("offerings.$i.level_en", $o['level_en'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm shadow-sm" />
                                    </div>
                                    <div class="space-y-2">
                                        <label class="block text-sm font-medium text-foreground/75">{{ __('app.homepage_studio_offering_label_capacity') }} (SR)</label>
                                        <input type="text" name="offerings[{{ $i }}][max_students_sr]" value="{{ old("offerings.$i.max_students_sr", $o['max_students_sr'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm shadow-sm" />
                                    </div>
                                    <div class="space-y-2">
                                        <label class="block text-sm font-medium text-foreground/75">{{ __('app.homepage_studio_offering_label_capacity') }} (EN)</label>
                                        <input type="text" name="offerings[{{ $i }}][max_students_en]" value="{{ old("offerings.$i.max_students_en", $o['max_students_en'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm shadow-sm" />
                                    </div>
                                </div>
                            </div>

                            <div class="flex flex-col items-stretch gap-4 max-w-xl pt-2 border-t border-border/60">
                                <p class="text-xs font-medium text-foreground/55">{{ __('app.homepage_studio_offering_group_image') }}</p>
                                <div class="pilates-offering-preview w-full rounded-xl border-2 border-dashed border-border/70 bg-muted/20 overflow-hidden flex items-center justify-center min-h-[120px] max-h-[180px]">
                                    @if($offImg)
                                        <img src="{{ $offImg }}" alt="" class="max-h-[180px] w-full object-contain object-center" />
                                    @else
                                        <span class="text-sm text-foreground/45 px-4 py-6 text-center">{{ __('app.homepage_offering_no_preview') }}</span>
                                    @endif
                                </div>
                                <label class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg border-2 border-dashed border-primary/40 bg-primary/5 px-4 py-3 text-sm font-medium text-foreground hover:bg-primary/10 transition-colors">
                                    <input type="file" name="offerings[{{ $i }}][image]" accept="image/*" class="sr-only" />
                                    <i class="fas fa-cloud-arrow-up text-amber-800/80"></i>{{ __('app.homepage_visual_choose_file') }}
                                </label>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            @error('offerings')<p class="text-sm text-red-600">{{ $message }}</p>@enderror
            <div class="pt-2">
                <button type="submit" class="btn btn-primary px-8 py-3"><i class="fas fa-save mr-2"></i>{{ __('app.save_changes') }}</button>
            </div>
        </form>
    </div>
</details>