{{-- Tim (marketing kartice) samo za /beauty — admin.homepage.beauty.team --}}
<details id="beauty-team" class="pilates-acc scroll-mt-24 max-w-4xl mb-4 rounded-2xl border border-border/80 border-s-4 border-s-rose-900/25 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-users text-lg"></i></span>
            <div class="min-w-0 pt-0.5">
                <h2 class="text-base font-semibold text-foreground tracking-tight">{{ __('app.homepage_studio_block_instructors') }} <span class="text-xs font-normal text-foreground/50">(Beauty)</span></h2>
                <p class="text-sm text-foreground/65 mt-1.5 max-w-prose leading-relaxed">{{ __('app.homepage_studio_marketing_team_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">
        <form id="beauty-team-form" method="POST" action="{{ route('admin.homepage.beauty.team') }}" enctype="multipart/form-data" class="space-y-6">
            @csrf
            @method('PUT')
            <div class="rounded-lg border border-border/70 bg-muted/15 p-4 space-y-4">
                @foreach (['kicker' => 'homepage_studio_field_kicker', 'heading' => 'homepage_studio_field_heading', 'description' => 'homepage_studio_field_description'] as $field => $lk)
                    <div>
                        <p class="text-[11px] font-semibold text-foreground/45 mb-2">{{ __('app.'.$lk) }}</p>
                        <div class="grid sm:grid-cols-2 gap-2">
                            <input type="text" name="section_copy[instructors][{{ $field }}_sr]" value="{{ $f('instructors', $field.'_sr') }}" class="w-full rounded-md border border-border px-2 py-1.5 text-sm" placeholder="SR" />
                            <input type="text" name="section_copy[instructors][{{ $field }}_en]" value="{{ $f('instructors', $field.'_en') }}" class="w-full rounded-md border border-border px-2 py-1.5 text-sm" placeholder="EN" />
                        </div>
                    </div>
                @endforeach
            </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_instructor_order_hint') }}</p>
                <button type="button" id="beauty-instructor-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_instructor_add') }}
                </button>
            </div>

            <div id="beauty-instructors-list" class="space-y-5"
                 data-row-label="{{ __('app.homepage_studio_row') }}"
                 data-min-one-msg="{{ e(__('app.homepage_instructor_min_one')) }}">
                @foreach($instructorsForm as $i => $ins)
                    @php
                        $ins = is_array($ins) ? $ins : [];
                        $insImg = \App\Services\HomepageDataService::offeringImageUrl($ins['image_path'] ?? null);
                        $nmForInitials = trim((string) old("instructors.$i.name", $ins['name'] ?? ''));
                        $partsIns = preg_split('/\s+/', $nmForInitials);
                        $ia = \Illuminate\Support\Str::substr($partsIns[0] ?? '', 0, 1);
                        $ib = \Illuminate\Support\Str::substr($partsIns[1] ?? '', 0, 1);
                        $initialsIns = \Illuminate\Support\Str::upper($ia.$ib);
                        if ($initialsIns === '' && ($partsIns[0] ?? '') !== '') {
                            $initialsIns = \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($partsIns[0], 0, 2));
                        }
                    @endphp
                    <div class="pilates-instructor-card rounded-2xl border border-border/90 bg-gradient-to-b from-card to-muted/10 shadow-sm">
                        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between px-4 py-3 sm:px-5 bg-gradient-to-r from-amber-50/90 via-amber-50/50 to-transparent border-b border-border/50">
                            <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_instructor_order_hint') }}">
                                    <button type="button" class="pilates-instructor-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_instructor_move_up') }}">
                                        <i class="fas fa-arrow-up text-xs" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="pilates-instructor-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_instructor_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-instructor-title-text">{{ __('app.homepage_studio_row') }} {{ $i + 1 }}</span>
                                </p>
                            </div>
                            <div class="flex flex-wrap items-center gap-3">
                                <input type="hidden" name="instructors[{{ $i }}][visible]" value="0" />
                                <label class="inline-flex items-center gap-3 rounded-lg border border-border/80 bg-background px-3 py-2 text-sm cursor-pointer hover:bg-muted/30 transition-colors">
                                    <input type="checkbox" name="instructors[{{ $i }}][visible]" value="1" class="rounded border-border h-4 w-4 text-primary" @checked(old("instructors.$i.visible", filter_var($ins['visible'] ?? true, FILTER_VALIDATE_BOOLEAN))) />
                                    <span class="font-medium text-foreground">{{ __('app.homepage_instructor_visible_short') }}</span>
                                </label>
                                <button type="button" class="pilates-instructor-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_instructor_remove') }}
                                </button>
                            </div>
                        </div>
                        <div class="p-4 sm:p-5 space-y-6">
                            <div class="flex flex-col items-center gap-3 sm:flex-row sm:items-start sm:gap-6">
                                <div class="flex flex-col items-center gap-3 shrink-0">
                                    <div class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-2 border-border/80 bg-gradient-to-br from-primary/15 to-accent/15 overflow-hidden flex items-center justify-center">
                                        <div class="pilates-instructor-avatar-inner w-full h-full flex items-center justify-center">
                                            @if($insImg)
                                                <img src="{{ $insImg }}" alt="" class="w-full h-full object-cover" />
                                            @elseif($initialsIns !== '')
                                                <span class="text-xl sm:text-2xl text-primary font-medium">{{ $initialsIns }}</span>
                                            @else
                                                <span class="text-xl sm:text-2xl text-primary/50"><i class="fas fa-user"></i></span>
                                            @endif
                                        </div>
                                    </div>
                                    <label class="w-full max-w-[12rem] cursor-pointer rounded-lg border-2 border-dashed border-primary/35 bg-primary/5 px-3 py-2.5 text-center text-xs font-medium text-foreground hover:bg-primary/10 transition-colors">
                                        <input type="file" name="instructors[{{ $i }}][image]" accept="image/*" class="sr-only" />
                                        <i class="fas fa-cloud-arrow-up text-amber-800/70 mr-1"></i>{{ __('app.homepage_visual_choose_file') }}
                                    </label>
                                </div>
                                <p class="hidden sm:block flex-1 text-xs text-foreground/55 self-center sm:pt-4">{{ __('app.homepage_studio_team_photo_hint') }}</p>
                            </div>
                                <div class="space-y-4 w-full min-w-0 border-t border-border/50 pt-6">
                                    <input type="hidden" name="instructors[{{ $i }}][image_path]" value="{{ old("instructors.$i.image_path", $ins['image_path'] ?? '') }}" />
                                    <div class="grid sm:grid-cols-2 gap-3">
                                        <div class="sm:col-span-2">
                                            <label class="block text-[10px] font-medium text-foreground/55 mb-0.5">{{ __('app.homepage_studio_team_label_name') }}</label>
                                            <input type="text" name="instructors[{{ $i }}][name]" value="{{ old("instructors.$i.name", $ins['name'] ?? '') }}" class="pilates-instructor-name-input w-full rounded-lg border border-border px-3 py-2 text-sm" placeholder="Ime i prezime" />
                                        </div>
                                        <div>
                                            <label class="block text-[10px] font-medium text-foreground/55 mb-0.5">{{ __('app.homepage_studio_team_label_title') }} (SR)</label>
                                            <input type="text" name="instructors[{{ $i }}][title_sr]" value="{{ old("instructors.$i.title_sr", $ins['title_sr'] ?? '') }}" class="w-full rounded-lg border border-border px-3 py-2 text-sm" />
                                        </div>
                                        <div>
                                            <label class="block text-[10px] font-medium text-foreground/55 mb-0.5">{{ __('app.homepage_studio_team_label_title') }} (EN)</label>
                                            <input type="text" name="instructors[{{ $i }}][title_en]" value="{{ old("instructors.$i.title_en", $ins['title_en'] ?? '') }}" class="w-full rounded-lg border border-border px-3 py-2 text-sm" />
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-[10px] font-medium text-foreground/55 mb-0.5">{{ __('app.homepage_team_certifications') }}</label>
                                        <input type="text" name="instructors[{{ $i }}][certifications]" value="{{ old("instructors.$i.certifications", $ins['certifications'] ?? '') }}" class="w-full rounded-lg border border-border px-3 py-2 text-sm" placeholder="npr. STOTT Pilates, Anatomy in Motion" />
                                    </div>
                                    <div class="grid sm:grid-cols-2 gap-3">
                                        <div>
                                            <label class="block text-[10px] font-medium text-foreground/55 mb-0.5">{{ __('app.homepage_team_specialty') }} (SR)</label>
                                            <input type="text" name="instructors[{{ $i }}][specialty_sr]" value="{{ old("instructors.$i.specialty_sr", $ins['specialty_sr'] ?? '') }}" class="w-full rounded-lg border border-border px-3 py-2 text-sm" />
                                        </div>
                                        <div>
                                            <label class="block text-[10px] font-medium text-foreground/55 mb-0.5">{{ __('app.homepage_team_specialty') }} (EN)</label>
                                            <input type="text" name="instructors[{{ $i }}][specialty_en]" value="{{ old("instructors.$i.specialty_en", $ins['specialty_en'] ?? '') }}" class="w-full rounded-lg border border-border px-3 py-2 text-sm" />
                                        </div>
                                    </div>
                                    <div class="grid sm:grid-cols-2 gap-3">
                                        <div>
                                            <label class="block text-[10px] font-medium text-foreground/55 mb-0.5">{{ __('app.homepage_team_bio') }} (SR)</label>
                                            <textarea name="instructors[{{ $i }}][bio_sr]" rows="4" class="w-full rounded-lg border border-border px-3 py-2 text-sm leading-relaxed">{{ old("instructors.$i.bio_sr", $ins['bio_sr'] ?? '') }}</textarea>
                                        </div>
                                        <div>
                                            <label class="block text-[10px] font-medium text-foreground/55 mb-0.5">{{ __('app.homepage_team_bio') }} (EN)</label>
                                            <textarea name="instructors[{{ $i }}][bio_en]" rows="4" class="w-full rounded-lg border border-border px-3 py-2 text-sm leading-relaxed">{{ old("instructors.$i.bio_en", $ins['bio_en'] ?? '') }}</textarea>
                                        </div>
                                    </div>
                                </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <p class="text-xs text-foreground/60 rounded-lg border border-dashed border-border/80 bg-muted/20 p-3">{{ __('app.homepage_studio_team_admin_note') }} <a href="{{ route('admin.users') }}" class="text-primary font-medium hover:underline" target="_blank" rel="noopener">{{ __('app.nav_instructors') }}</a></p>
            @error('instructors')<p class="text-sm text-red-600">{{ $message }}</p>@enderror
            <button type="submit" class="btn btn-primary px-6 py-2.5"><i class="fas fa-save mr-2"></i>{{ __('app.save_changes') }}</button>
        </form>
    </div>
</details>