@extends('layouts.sidebar')

@php
    $sc = old('section_copy', $sectionCopy ?? []);
    if (! is_array($sc)) { $sc = []; }
    $f = function (string $section, string $field) use ($sc) {
        $v = $sc[$section][$field] ?? '';
        $old = old("section_copy.$section.$field");
        return $old !== null ? $old : $v;
    };
@endphp

@push('styles')
<style>
.pilates-acc > summary {
    list-style: none;
}
.pilates-acc > summary::-webkit-details-marker { display: none; }
.pilates-acc > summary .pilates-acc-chevron { transition: transform 0.22s ease; }
.pilates-acc[open] > summary .pilates-acc-chevron { transform: rotate(180deg); }
.pilates-acc {
    box-shadow: 0 2px 18px -4px rgba(70, 45, 20, 0.07);
}
.pilates-acc[open] {
    box-shadow: 0 6px 32px -8px rgba(70, 45, 20, 0.11);
}
.pilates-acc .pilates-acc-body {
    background: linear-gradient(180deg, rgba(255, 251, 245, 0.35) 0%, rgba(255, 255, 255, 0) 48%);
}
.pilates-acc[open] > summary .pilates-acc-chevron-btn {
    background-color: rgba(254, 243, 199, 0.65);
    color: rgba(120, 53, 15, 0.85);
}
</style>
@endpush

@section('title', __('app.homepage_pilates_page_title') . ' - ' . __('app.admin'))
@section('page-title', __('app.homepage_pilates_page_title'))

@section('content')
<div class="mb-6 flex flex-wrap items-center justify-between gap-3">
    <a href="{{ route('admin.homepage.index') }}" class="text-sm text-primary hover:underline"><i class="fas fa-arrow-left mr-1"></i>{{ __('app.homepage_hub_title') }}</a>
    <a href="{{ route('home') }}" target="_blank" rel="noopener" class="text-sm text-primary hover:underline">{{ __('app.homepage_preview') }} <i class="fas fa-external-link-alt text-xs"></i></a>
</div>

@if(session('success'))
    <div class="mb-6 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{ session('success') }}</div>
@endif
@if(session('info'))
    <div class="mb-6 rounded-lg border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-950">{{ session('info') }}</div>
@endif

{{-- Brand --}}
<details id="pilates-brand" class="pilates-acc scroll-mt-24 max-w-4xl mb-4 rounded-2xl border border-border/80 border-s-4 border-s-amber-900/28 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-image 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_nav_brand') }} <span class="text-xs font-normal text-foreground/50">(Pilates)</span></h2>
                <p class="text-sm text-foreground/65 mt-1.5 max-w-prose leading-relaxed">{{ __('app.homepage_studio_brand_title') }}</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 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-6">
        <div class="grid sm:grid-cols-3 gap-3">
            <div class="rounded-lg border border-border/70 bg-muted/15 p-3 text-center">
                <p class="text-[10px] font-semibold uppercase tracking-wide text-foreground/55 mb-2">Desktop</p>
                <div class="aspect-[16/10] rounded-md bg-muted/40 overflow-hidden flex items-center justify-center">
                    @if(!empty($heroDesktopPreviewUrl ?? ''))
                        <img src="{{ $heroDesktopPreviewUrl }}" alt="" class="max-h-28 w-full object-contain" />
                    @else
                        <span class="text-[10px] text-foreground/40">—</span>
                    @endif
                </div>
            </div>
            <div class="rounded-lg border border-border/70 bg-muted/15 p-3 text-center">
                <p class="text-[10px] font-semibold uppercase tracking-wide text-foreground/55 mb-2">Mobile</p>
                <div class="aspect-[16/10] rounded-md bg-muted/40 overflow-hidden flex items-center justify-center">
                    @if(!empty($heroMobilePreviewUrl ?? ''))
                        <img src="{{ $heroMobilePreviewUrl }}" alt="" class="max-h-28 w-full object-contain" />
                    @else
                        <span class="text-[10px] text-foreground/40">—</span>
                    @endif
                </div>
            </div>
            <div class="rounded-lg border border-border/70 bg-muted/15 p-3 text-center">
                <p class="text-[10px] font-semibold uppercase tracking-wide text-foreground/55 mb-2">Logo</p>
                <div class="h-[7.5rem] rounded-md bg-muted/40 overflow-hidden flex items-center justify-center">
                    @if(!empty($headerLogoPreviewUrl ?? ''))
                        <img src="{{ $headerLogoPreviewUrl }}" alt="" class="max-h-20 max-w-full object-contain" />
                    @else
                        <span class="text-[10px] text-foreground/40">—</span>
                    @endif
                </div>
            </div>
        </div>
        <form method="POST" action="{{ route('admin.homepage.pilates.brand') }}" enctype="multipart/form-data" class="space-y-4">
            @csrf
            @method('PUT')
            <input type="hidden" name="hero_image_desktop_path" value="{{ old('hero_image_desktop_path', $settings['homepage.hero_image_desktop'] ?? '') }}" />
            <input type="hidden" name="hero_image_mobile_path" value="{{ old('hero_image_mobile_path', $settings['homepage.hero_image_mobile'] ?? '') }}" />
            <input type="hidden" name="header_logo_path" value="{{ old('header_logo_path', $settings['homepage.header_logo_path'] ?? '') }}" />
            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-medium text-foreground/70 mb-1">{{ __('app.homepage_studio_hero_new_desktop') }}</label>
                    <input type="file" name="hero_desktop" accept="image/*" class="w-full text-sm" />
                </div>
                <div>
                    <label class="block text-xs font-medium text-foreground/70 mb-1">{{ __('app.homepage_studio_hero_new_mobile') }}</label>
                    <input type="file" name="hero_mobile" accept="image/*" class="w-full text-sm" />
                </div>
            </div>
            <div>
                <label class="block text-xs font-medium text-foreground/70 mb-1">{{ __('app.homepage_studio_header_logo') }}</label>
                <input type="file" name="header_logo" accept="image/*" class="w-full text-sm" />
            </div>
            <p class="text-xs text-foreground/55">{{ __('app.homepage_visual_hero_upload_hint') }}</p>
            <div class="border-t border-border/60 pt-4 grid sm:grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-medium text-foreground/70">{{ __('app.homepage_studio_showcase_title_sr') }}</label>
                    <input type="text" name="logo_showcase_title_sr" value="{{ old('logo_showcase_title_sr', $settings['homepage.logo_showcase_title_sr'] ?? '') }}" class="mt-1 w-full rounded-md border border-border px-3 py-2 text-sm" />
                </div>
                <div>
                    <label class="block text-xs font-medium text-foreground/70">{{ __('app.homepage_studio_showcase_title_en') }}</label>
                    <input type="text" name="logo_showcase_title_en" value="{{ old('logo_showcase_title_en', $settings['homepage.logo_showcase_title_en'] ?? '') }}" class="mt-1 w-full rounded-md border border-border px-3 py-2 text-sm" />
                </div>
                <div>
                    <label class="block text-xs font-medium text-foreground/70">{{ __('app.homepage_studio_showcase_sub_sr') }}</label>
                    <textarea name="logo_showcase_subtitle_sr" rows="2" class="mt-1 w-full rounded-md border border-border px-3 py-2 text-sm">{{ old('logo_showcase_subtitle_sr', $settings['homepage.logo_showcase_subtitle_sr'] ?? '') }}</textarea>
                </div>
                <div>
                    <label class="block text-xs font-medium text-foreground/70">{{ __('app.homepage_studio_showcase_sub_en') }}</label>
                    <textarea name="logo_showcase_subtitle_en" rows="2" class="mt-1 w-full rounded-md border border-border px-3 py-2 text-sm">{{ old('logo_showcase_subtitle_en', $settings['homepage.logo_showcase_subtitle_en'] ?? '') }}</textarea>
                </div>
            </div>
            @error('hero_desktop')<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>

@include('admin.homepage._pilates-classes-section')

{{-- Team (ajrin3-style fields) --}}
<details id="pilates-team" class="pilates-acc scroll-mt-24 max-w-4xl mb-4 rounded-2xl border border-border/80 border-s-4 border-s-amber-700/32 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">(Pilates)</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="pilates-team-form" method="POST" action="{{ route('admin.homepage.pilates.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="pilates-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="pilates-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">
                            {{-- Uvek vertikalno: prvo fotografija, ispod sva polja pune širine (izbegava „nestanak“ kolone sa poljima na užim ekranima) --}}
                            <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>

{{-- Pricing --}}
<details id="pilates-pricing" class="pilates-acc scroll-mt-24 max-w-4xl mb-4 rounded-2xl border border-border/80 border-s-4 border-s-amber-600/35 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-tags 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_pricing') }}</h2>
                <p class="text-sm text-foreground/65 mt-1.5 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">
        <form id="pilates-pricing-form" method="POST" action="{{ route('admin.homepage.pilates.pricing') }}" 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[pricing][{{ $field }}_sr]" value="{{ $f('pricing', $field.'_sr') }}" class="w-full rounded-md border border-border px-2 py-1.5 text-sm" />
                            <input type="text" name="section_copy[pricing][{{ $field }}_en]" value="{{ $f('pricing', $field.'_en') }}" class="w-full rounded-md border border-border px-2 py-1.5 text-sm" />
                        </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_pricing_order_hint') }}</p>
                <button type="button" id="pilates-pricing-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_pricing_add') }}
                </button>
            </div>

            <div id="pilates-pricing-list" class="space-y-5"
                 data-row-label="{{ __('app.homepage_studio_row_package') }}"
                 data-min-one-msg="{{ e(__('app.homepage_pricing_min_one')) }}">
            @foreach($pricingForm as $i => $pr)
                @php $pr = is_array($pr) ? $pr : []; @endphp
                <div class="pilates-pricing-card rounded-xl border border-border/80 bg-muted/5 shadow-sm">
                    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-4 py-3 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_pricing_order_hint') }}">
                                <button type="button" class="pilates-pricing-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_pricing_move_up') }}">
                                    <i class="fas fa-arrow-up text-xs" aria-hidden="true"></i>
                                </button>
                                <button type="button" class="pilates-pricing-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_pricing_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-pricing-title-text">{{ __('app.homepage_studio_row_package') }} {{ $i + 1 }}</span>
                            </p>
                        </div>
                        <div class="flex flex-wrap items-center gap-3">
                            <input type="hidden" name="pricing[{{ $i }}][visible]" value="0" />
                            <label class="inline-flex items-center gap-2 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="pricing[{{ $i }}][visible]" value="1" class="rounded border-border h-4 w-4 text-primary" @checked(old("pricing.$i.visible", filter_var($pr['visible'] ?? true, FILTER_VALIDATE_BOOLEAN))) />
                                <span class="font-medium text-foreground">{{ __('app.homepage_pricing_visible_short') }}</span>
                            </label>
                            <button type="button" class="pilates-pricing-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_pricing_remove') }}
                            </button>
                        </div>
                    </div>
                    <div class="p-4 sm:p-5 space-y-5">
                        <div class="rounded-xl border border-border/60 bg-muted/10 p-4 space-y-4">
                            <p class="text-xs font-semibold uppercase tracking-wide text-foreground/50">{{ __('app.homepage_studio_pricing_group_text') }}</p>
                            <div class="grid sm:grid-cols-2 gap-3">
                                <div class="space-y-1">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_pricing_admin_name_sr') }}</label>
                                    <input type="text" name="pricing[{{ $i }}][name_sr]" value="{{ old("pricing.$i.name_sr", $pr['name_sr'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm" />
                                </div>
                                <div class="space-y-1">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_pricing_admin_name_en') }}</label>
                                    <input type="text" name="pricing[{{ $i }}][name_en]" value="{{ old("pricing.$i.name_en", $pr['name_en'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm" />
                                </div>
                            </div>
                            <div class="grid sm:grid-cols-2 gap-3">
                                <div class="space-y-1">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_pricing_admin_desc_sr') }}</label>
                                    <textarea name="pricing[{{ $i }}][description_sr]" rows="2" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm">{{ old("pricing.$i.description_sr", $pr['description_sr'] ?? '') }}</textarea>
                                </div>
                                <div class="space-y-1">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_pricing_admin_desc_en') }}</label>
                                    <textarea name="pricing[{{ $i }}][description_en]" rows="2" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm">{{ old("pricing.$i.description_en", $pr['description_en'] ?? '') }}</textarea>
                                </div>
                            </div>
                            <div class="grid sm:grid-cols-2 gap-3">
                                <div class="space-y-1">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_pricing_label_price') }} (SR)</label>
                                    <input type="text" name="pricing[{{ $i }}][price_line_sr]" value="{{ old("pricing.$i.price_line_sr", $pr['price_line_sr'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm" />
                                </div>
                                <div class="space-y-1">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_pricing_label_price') }} (EN)</label>
                                    <input type="text" name="pricing[{{ $i }}][price_line_en]" value="{{ old("pricing.$i.price_line_en", $pr['price_line_en'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm" />
                                </div>
                            </div>
                            <div class="grid sm:grid-cols-2 gap-3">
                                <div class="space-y-1">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_pricing_period_hint') }} (SR)</label>
                                    <input type="text" name="pricing[{{ $i }}][period_sr]" value="{{ old("pricing.$i.period_sr", $pr['period_sr'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm" />
                                </div>
                                <div class="space-y-1">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_pricing_period_hint') }} (EN)</label>
                                    <input type="text" name="pricing[{{ $i }}][period_en]" value="{{ old("pricing.$i.period_en", $pr['period_en'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm" />
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="pricing[{{ $i }}][is_featured]" value="0" />
                        <label class="inline-flex items-center gap-3 rounded-lg border border-border/70 bg-background px-4 py-2.5 text-sm cursor-pointer hover:bg-muted/25 transition-colors">
                            <input type="checkbox" name="pricing[{{ $i }}][is_featured]" value="1" class="rounded border-border h-4 w-4 text-primary" @checked(old("pricing.$i.is_featured", filter_var($pr['is_featured'] ?? false, FILTER_VALIDATE_BOOLEAN))) />
                            <span class="font-medium text-foreground">{{ __('app.homepage_popular_badge') }}</span>
                        </label>
                        <div class="rounded-xl border border-border/60 bg-muted/10 p-4 space-y-3">
                            <p class="text-xs font-semibold uppercase tracking-wide text-foreground/50">{{ __('app.homepage_studio_pricing_label_features') }}</p>
                            <div class="grid sm:grid-cols-2 gap-3">
                                <div class="space-y-1">
                                    <label class="block text-sm font-medium text-foreground/75">SR</label>
                                    <textarea name="pricing[{{ $i }}][features_sr]" rows="4" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm leading-relaxed">{{ old("pricing.$i.features_sr", $pr['features_sr'] ?? '') }}</textarea>
                                </div>
                                <div class="space-y-1">
                                    <label class="block text-sm font-medium text-foreground/75">EN</label>
                                    <textarea name="pricing[{{ $i }}][features_en]" rows="4" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm leading-relaxed">{{ old("pricing.$i.features_en", $pr['features_en'] ?? '') }}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="rounded-xl border border-border/60 bg-muted/10 p-4 space-y-3">
                            <p class="text-xs font-semibold uppercase tracking-wide text-foreground/50">{{ __('app.homepage_studio_pricing_group_cta') }}</p>
                            <div class="grid sm:grid-cols-2 gap-3">
                                <div class="space-y-1">
                                    <label class="block text-sm font-medium text-foreground/75">{{ __('app.homepage_studio_label_btn_sr') }}</label>
                                    <input type="text" name="pricing[{{ $i }}][cta_label_sr]" value="{{ old("pricing.$i.cta_label_sr", $pr['cta_label_sr'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm" />
                                </div>
                                <div class="space-y-1">
                                    <label class="block text-sm font-medium text-foreground/75">{{ __('app.homepage_studio_label_btn_en') }}</label>
                                    <input type="text" name="pricing[{{ $i }}][cta_label_en]" value="{{ old("pricing.$i.cta_label_en", $pr['cta_label_en'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm" />
                                </div>
                            </div>
                            <div class="space-y-1">
                                <label class="block text-sm font-medium text-foreground/75">{{ __('app.homepage_studio_pricing_admin_cta_url') }}</label>
                                <input type="text" name="pricing[{{ $i }}][cta_url]" value="{{ old("pricing.$i.cta_url", $pr['cta_url'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm" />
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
            </div>
            <p class="text-xs text-foreground/60">{{ __('app.homepage_studio_pricing_only_manual_note') }} <a href="{{ route('admin.packages.settings') }}" class="text-primary hover:underline" target="_blank" rel="noopener">{{ __('app.packages_pilates_short') }}</a></p>
            <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>

{{-- Promo --}}
<details id="pilates-promo" class="pilates-acc scroll-mt-24 max-w-4xl mb-4 rounded-2xl border border-border/80 border-s-4 border-s-orange-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-orange-50/35 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-orange-100/95 to-amber-50/80 text-orange-950/75 shadow-sm ring-1 ring-orange-200/55" aria-hidden="true"><i class="fas fa-bullhorn text-lg"></i></span>
            <div class="min-w-0 pt-0.5">
                <h2 class="text-base font-semibold text-foreground tracking-tight">{{ __('app.homepage_promo_popup') }} <span class="font-normal text-foreground/45">&middot;</span> <span class="text-primary">{{ __('app.homepage_studio_nav_packages') }}</span></h2>
                <p class="text-sm text-foreground/65 mt-1.5 max-w-prose leading-relaxed">{{ __('app.homepage_pilates_promo_section_subtitle') }}</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">
        <form method="POST" action="{{ route('admin.homepage.pilates.promo') }}" class="space-y-5 max-w-3xl">
            @csrf
            @method('PUT')
            @php
                $promoPick = $promoPackagesPickList ?? collect();
                $promoSelected = $selectedPackageIds ?? [];
            @endphp
            <div>
                <label class="block text-sm font-medium text-foreground mb-2">{{ __('app.homepage_featured_packages') }}</label>
                @if($promoPick->isEmpty())
                    <p class="text-sm text-amber-900 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">{{ __('app.homepage_promo_packages_empty') }}</p>
                @else
                    <div class="max-h-64 overflow-y-auto rounded-xl border border-border/80 bg-muted/15 p-3 space-y-2">
                        @foreach($promoPick as $pkg)
                            @php $pid = (int) $pkg->id; @endphp
                            <label class="flex items-start gap-3 cursor-pointer rounded-lg border border-transparent px-2 py-2 hover:bg-background/80 hover:border-border/60 transition-colors">
                                <input type="checkbox" name="package_ids[]" value="{{ $pid }}" class="mt-1 rounded border-border h-4 w-4 text-primary shrink-0" @checked(in_array($pid, $promoSelected, true)) />
                                <span class="text-sm text-foreground min-w-0">
                                    <span class="font-mono text-xs text-foreground/45">#{{ $pid }}</span>
                                    <span class="font-medium">{{ $pkg->name }}</span>
                                    @if(filled($pkg->name_en ?? null))
                                        <span class="text-foreground/60">/ {{ $pkg->name_en }}</span>
                                    @endif
                                    <span class="block text-xs text-foreground/55 mt-0.5">{{ $pkg->homepagePriceFormatted() }}</span>
                                </span>
                            </label>
                        @endforeach
                    </div>
                @endif
                <p class="text-xs text-foreground/55 mt-2 leading-relaxed">{{ __('app.homepage_promo_package_pick_hint') }}</p>
            </div>
            <div class="flex flex-wrap gap-4">
                <label class="inline-flex items-center gap-2 text-sm">
                    <input type="checkbox" name="promo_enabled" value="1" class="rounded border-border" @checked(old('promo_enabled', $promo['enabled'] ?? false)) />
                    {{ __('app.homepage_promo_enabled') }}
                </label>
                <label class="inline-flex items-center gap-2 text-sm">
                    <input type="checkbox" name="promo_session_once" value="1" class="rounded border-border" @checked(old('promo_session_once', $promo['session_once'] ?? true)) />
                    {{ __('app.homepage_promo_once') }}
                </label>
            </div>
            <div class="grid sm:grid-cols-2 gap-3">
                <div><label class="text-xs text-foreground/60">{{ __('app.homepage_studio_label_title_sr') }}</label><input type="text" name="promo_title_sr" value="{{ old('promo_title_sr', $promo['title_sr'] ?? '') }}" class="mt-0.5 w-full rounded-md border border-border px-2 py-1.5 text-sm" /></div>
                <div><label class="text-xs text-foreground/60">{{ __('app.homepage_studio_label_title_en') }}</label><input type="text" name="promo_title_en" value="{{ old('promo_title_en', $promo['title_en'] ?? '') }}" class="mt-0.5 w-full rounded-md border border-border px-2 py-1.5 text-sm" /></div>
                <div class="sm:col-span-2"><label class="text-xs text-foreground/60">{{ __('app.homepage_studio_label_body_sr') }}</label><textarea name="promo_body_sr" rows="2" class="mt-0.5 w-full rounded-md border border-border px-2 py-1.5 text-sm">{{ old('promo_body_sr', $promo['body_sr'] ?? '') }}</textarea></div>
                <div class="sm:col-span-2"><label class="text-xs text-foreground/60">{{ __('app.homepage_studio_label_body_en') }}</label><textarea name="promo_body_en" rows="2" class="mt-0.5 w-full rounded-md border border-border px-2 py-1.5 text-sm">{{ old('promo_body_en', $promo['body_en'] ?? '') }}</textarea></div>
                <div><label class="text-xs text-foreground/60">{{ __('app.homepage_studio_label_btn_sr') }}</label><input type="text" name="promo_btn_sr" value="{{ old('promo_btn_sr', $promo['button_label_sr'] ?? '') }}" class="mt-0.5 w-full rounded-md border border-border px-2 py-1.5 text-sm" /></div>
                <div><label class="text-xs text-foreground/60">{{ __('app.homepage_studio_label_btn_en') }}</label><input type="text" name="promo_btn_en" value="{{ old('promo_btn_en', $promo['button_label_en'] ?? '') }}" class="mt-0.5 w-full rounded-md border border-border px-2 py-1.5 text-sm" /></div>
                <div><label class="text-xs text-foreground/60">URL</label><input type="text" name="promo_url" value="{{ old('promo_url', $promo['button_url'] ?? '') }}" class="mt-0.5 w-full rounded-md border border-border px-2 py-1.5 text-sm" /></div>
                <div><label class="text-xs text-foreground/60">Delay (ms)</label><input type="number" name="promo_delay_ms" value="{{ old('promo_delay_ms', $promo['delay_ms'] ?? 700) }}" class="mt-0.5 w-full rounded-md border border-border px-2 py-1.5 text-sm" min="0" max="60000" /></div>
            </div>
            <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>

{{-- Testimonials --}}
<details id="pilates-testimonials" class="pilates-acc scroll-mt-24 max-w-4xl mb-12 rounded-2xl border border-border/80 border-s-4 border-s-yellow-900/22 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-quote-right 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_testimonials') }} <span class="text-xs font-normal text-foreground/50">(Pilates)</span></h2>
                <p class="text-sm text-foreground/65 mt-1.5 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">
        <form id="pilates-testimonials-form" method="POST" action="{{ route('admin.homepage.pilates.testimonials') }}" 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[testimonials][{{ $field }}_sr]" value="{{ $f('testimonials', $field.'_sr') }}" class="w-full rounded-md border border-border px-2 py-1.5 text-sm" />
                            <input type="text" name="section_copy[testimonials][{{ $field }}_en]" value="{{ $f('testimonials', $field.'_en') }}" class="w-full rounded-md border border-border px-2 py-1.5 text-sm" />
                        </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_testimonial_order_hint') }}</p>
                <button type="button" id="pilates-testimonial-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_testimonial_add') }}
                </button>
            </div>

            <div id="pilates-testimonials-list" class="space-y-5"
                 data-row-label="{{ __('app.homepage_studio_row_testimonial') }}"
                 data-min-one-msg="{{ e(__('app.homepage_testimonial_min_one')) }}">
            @foreach($testimonialsForm as $i => $t)
                @php $t = is_array($t) ? $t : []; @endphp
                <div class="pilates-testimonial-card rounded-xl border border-border/80 bg-muted/5 shadow-sm">
                    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-4 py-3 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_testimonial_order_hint') }}">
                                <button type="button" class="pilates-testimonial-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_testimonial_move_up') }}">
                                    <i class="fas fa-arrow-up text-xs" aria-hidden="true"></i>
                                </button>
                                <button type="button" class="pilates-testimonial-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_testimonial_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-testimonial-title-text">{{ __('app.homepage_studio_row_testimonial') }} {{ $i + 1 }}</span>
                            </p>
                        </div>
                        <div class="flex flex-wrap items-center gap-3">
                            <input type="hidden" name="testimonials[{{ $i }}][visible]" value="0" />
                            <label class="inline-flex items-center gap-2 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="testimonials[{{ $i }}][visible]" value="1" class="rounded border-border h-4 w-4 text-primary" @checked(old("testimonials.$i.visible", filter_var($t['visible'] ?? true, FILTER_VALIDATE_BOOLEAN))) />
                                <span class="font-medium text-foreground">{{ __('app.homepage_testimonial_visible_short') }}</span>
                            </label>
                            <button type="button" class="pilates-testimonial-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_testimonial_remove') }}
                            </button>
                        </div>
                    </div>
                    <div class="p-4 sm:p-5 space-y-5">
                        <p class="text-xs text-foreground/60 leading-relaxed">{{ __('app.homepage_studio_reviews_card_hint') }}</p>
                        <div class="rounded-xl border border-border/60 bg-muted/10 p-4 space-y-4">
                            <p class="text-xs font-semibold uppercase tracking-wide text-foreground/50">{{ __('app.homepage_studio_reviews_group_quote') }}</p>
                            <div class="grid sm:grid-cols-3 gap-3">
                                <div class="space-y-1">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_rating') }}</label>
                                    <input type="number" name="testimonials[{{ $i }}][rating]" min="1" max="5" value="{{ old("testimonials.$i.rating", $t['rating'] ?? 5) }}" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm" />
                                </div>
                                <div class="sm:col-span-2 space-y-1">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_review_label_author') }}</label>
                                    <input type="text" name="testimonials[{{ $i }}][author_name]" value="{{ old("testimonials.$i.author_name", $t['author_name'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm" />
                                </div>
                            </div>
                            <div class="grid sm:grid-cols-2 gap-3">
                                <div class="space-y-1">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_reviews_quote_sr') }}</label>
                                    <textarea name="testimonials[{{ $i }}][content_sr]" rows="3" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm leading-relaxed">{{ old("testimonials.$i.content_sr", $t['content_sr'] ?? '') }}</textarea>
                                </div>
                                <div class="space-y-1">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_reviews_quote_en') }}</label>
                                    <textarea name="testimonials[{{ $i }}][content_en]" rows="3" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm leading-relaxed">{{ old("testimonials.$i.content_en", $t['content_en'] ?? '') }}</textarea>
                                </div>
                            </div>
                            <div class="grid sm:grid-cols-2 gap-3">
                                <div class="space-y-1">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_review_label_role') }} (SR)</label>
                                    <input type="text" name="testimonials[{{ $i }}][role_sr]" value="{{ old("testimonials.$i.role_sr", $t['role_sr'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm" />
                                </div>
                                <div class="space-y-1">
                                    <label class="block text-sm font-medium text-foreground/80">{{ __('app.homepage_studio_review_label_role') }} (EN)</label>
                                    <input type="text" name="testimonials[{{ $i }}][role_en]" value="{{ old("testimonials.$i.role_en", $t['role_en'] ?? '') }}" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm shadow-sm" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
            </div>
            <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>

@push('scripts')
<script>
(function () {
    function openFromHash() {
        var h = window.location.hash.replace(/^#/, '');
        if (!h) return;
        var el = document.getElementById(h);
        if (el && el.tagName === 'DETAILS') el.open = true;
    }
    window.addEventListener('hashchange', openFromHash);
    document.addEventListener('DOMContentLoaded', openFromHash);

    var offerList = document.getElementById('pilates-offerings-list');
    function pilatesReindexOfferings() {
        if (!offerList) return;
        var label = offerList.getAttribute('data-row-label') || '';
        var cards = offerList.querySelectorAll(':scope > .pilates-offering-card');
        cards.forEach(function (card, j) {
            card.querySelectorAll('[name^="offerings["]').forEach(function (el) {
                el.name = el.name.replace(/^offerings\[\d+\]/, 'offerings[' + j + ']');
            });
            var t = card.querySelector('.pilates-offering-title-text');
            if (t) t.textContent = label + ' ' + (j + 1);
        });
    }
    function pilatesClearOfferingCard(card) {
        if (!offerList) return;
        var emptyMsg = offerList.getAttribute('data-empty-preview') || '';
        card.querySelectorAll('input[type="text"], textarea').forEach(function (el) { el.value = ''; });
        card.querySelectorAll('input[type="hidden"]').forEach(function (el) {
            if (el.name.indexOf('[image_path]') !== -1) el.value = '';
        });
        var visCb = card.querySelector('input[type="checkbox"][name*="[visible]"]');
        if (visCb) visCb.checked = true;
        card.querySelectorAll('input[type="file"]').forEach(function (inp) {
            var nw = document.createElement('input');
            nw.type = 'file';
            nw.name = inp.name;
            nw.accept = inp.getAttribute('accept') || 'image/*';
            nw.className = inp.className;
            inp.parentNode.replaceChild(nw, inp);
        });
        var box = card.querySelector('.pilates-offering-preview');
        if (box) {
            box.innerHTML = '<span class="text-sm text-foreground/45 px-4 py-8 text-center block">' + emptyMsg + '</span>';
        }
    }
    if (offerList) {
        offerList.addEventListener('click', function (e) {
            var rm = e.target.closest('.pilates-offering-remove');
            var up = e.target.closest('.pilates-offering-move-up');
            var down = e.target.closest('.pilates-offering-move-down');
            var card = (rm || up || down) && (rm || up || down).closest('.pilates-offering-card');
            if (!card) return;
            if (rm) {
                var n = offerList.querySelectorAll(':scope > .pilates-offering-card').length;
                if (n <= 1) {
                    alert(offerList.getAttribute('data-min-one-msg') || '');
                    return;
                }
                card.remove();
                pilatesReindexOfferings();
                return;
            }
            if (up) {
                var prev = card.previousElementSibling;
                if (prev && prev.classList.contains('pilates-offering-card')) {
                    offerList.insertBefore(card, prev);
                    pilatesReindexOfferings();
                }
                return;
            }
            if (down) {
                var next = card.nextElementSibling;
                if (next && next.classList.contains('pilates-offering-card')) {
                    offerList.insertBefore(next, card);
                    pilatesReindexOfferings();
                }
            }
        });
        var addBtn = document.getElementById('pilates-offering-add');
        if (addBtn) {
            addBtn.addEventListener('click', function () {
                var proto = offerList.querySelector('.pilates-offering-card');
                if (!proto) return;
                var card = proto.cloneNode(true);
                pilatesClearOfferingCard(card);
                offerList.appendChild(card);
                pilatesReindexOfferings();
            });
        }
        var clsForm = document.getElementById('pilates-classes-form');
        if (clsForm) clsForm.addEventListener('submit', function () { pilatesReindexOfferings(); });
    }

    var instructorList = document.getElementById('pilates-instructors-list');
    function pilatesReindexInstructors() {
        if (!instructorList) return;
        var label = instructorList.getAttribute('data-row-label') || '';
        var cards = instructorList.querySelectorAll(':scope > .pilates-instructor-card');
        cards.forEach(function (card, j) {
            card.querySelectorAll('[name^="instructors["]').forEach(function (el) {
                el.name = el.name.replace(/^instructors\[\d+\]/, 'instructors[' + j + ']');
            });
            var t = card.querySelector('.pilates-instructor-title-text');
            if (t) t.textContent = label + ' ' + (j + 1);
        });
    }
    function pilatesUpdateInstructorAvatarInitials(inner, name) {
        var parts = String(name || '').trim().split(/\s+/).filter(function (w) { return w.length > 0; });
        var a = (parts[0] || '').charAt(0);
        var b = (parts[1] || '').charAt(0);
        var ini = (a + b).toUpperCase();
        if (!ini && parts[0]) ini = parts[0].substring(0, 2).toUpperCase();
        inner.innerHTML = '';
        if (ini) {
            var sp = document.createElement('span');
            sp.className = 'text-xl sm:text-2xl text-primary font-medium';
            sp.textContent = ini;
            inner.appendChild(sp);
        } else {
            inner.innerHTML = '<span class="text-xl sm:text-2xl text-primary/50"><i class="fas fa-user"></i></span>';
        }
    }
    function pilatesClearInstructorCard(card) {
        if (!instructorList) return;
        card.querySelectorAll('input[type="text"], textarea').forEach(function (el) { el.value = ''; });
        card.querySelectorAll('input[type="hidden"]').forEach(function (el) {
            if (el.name.indexOf('[image_path]') !== -1) el.value = '';
        });
        var visCb = card.querySelector('input[type="checkbox"][name*="[visible]"]');
        if (visCb) visCb.checked = true;
        card.querySelectorAll('input[type="file"]').forEach(function (inp) {
            var nw = document.createElement('input');
            nw.type = 'file';
            nw.name = inp.name;
            nw.accept = inp.getAttribute('accept') || 'image/*';
            nw.className = inp.className;
            inp.parentNode.replaceChild(nw, inp);
        });
        var inner = card.querySelector('.pilates-instructor-avatar-inner');
        if (inner) {
            inner.innerHTML = '<span class="text-xl sm:text-2xl text-primary/50"><i class="fas fa-user"></i></span>';
        }
    }
    if (instructorList) {
        instructorList.addEventListener('input', function (e) {
            if (!e.target.classList || !e.target.classList.contains('pilates-instructor-name-input')) return;
            var card = e.target.closest('.pilates-instructor-card');
            if (!card) return;
            var inner = card.querySelector('.pilates-instructor-avatar-inner');
            if (!inner || inner.querySelector('img')) return;
            pilatesUpdateInstructorAvatarInitials(inner, e.target.value);
        });
        instructorList.addEventListener('click', function (e) {
            var rm = e.target.closest('.pilates-instructor-remove');
            var up = e.target.closest('.pilates-instructor-move-up');
            var down = e.target.closest('.pilates-instructor-move-down');
            var card = (rm || up || down) && (rm || up || down).closest('.pilates-instructor-card');
            if (!card) return;
            if (rm) {
                var n = instructorList.querySelectorAll(':scope > .pilates-instructor-card').length;
                if (n <= 1) {
                    alert(instructorList.getAttribute('data-min-one-msg') || '');
                    return;
                }
                card.remove();
                pilatesReindexInstructors();
                return;
            }
            if (up) {
                var prev = card.previousElementSibling;
                if (prev && prev.classList.contains('pilates-instructor-card')) {
                    instructorList.insertBefore(card, prev);
                    pilatesReindexInstructors();
                }
                return;
            }
            if (down) {
                var next = card.nextElementSibling;
                if (next && next.classList.contains('pilates-instructor-card')) {
                    instructorList.insertBefore(next, card);
                    pilatesReindexInstructors();
                }
            }
        });
        var insAdd = document.getElementById('pilates-instructor-add');
        if (insAdd) {
            insAdd.addEventListener('click', function () {
                var proto = instructorList.querySelector('.pilates-instructor-card');
                if (!proto) return;
                var c = proto.cloneNode(true);
                pilatesClearInstructorCard(c);
                instructorList.appendChild(c);
                pilatesReindexInstructors();
            });
        }
        var teamForm = document.getElementById('pilates-team-form');
        if (teamForm) teamForm.addEventListener('submit', function () { pilatesReindexInstructors(); });
    }

    var pricingList = document.getElementById('pilates-pricing-list');
    function pilatesReindexPricing() {
        if (!pricingList) return;
        var label = pricingList.getAttribute('data-row-label') || '';
        var cards = pricingList.querySelectorAll(':scope > .pilates-pricing-card');
        cards.forEach(function (card, j) {
            card.querySelectorAll('[name^="pricing["]').forEach(function (el) {
                el.name = el.name.replace(/^pricing\[\d+\]/, 'pricing[' + j + ']');
            });
            var t = card.querySelector('.pilates-pricing-title-text');
            if (t) t.textContent = label + ' ' + (j + 1);
        });
    }
    function pilatesClearPricingCard(card) {
        card.querySelectorAll('input[type="text"], textarea').forEach(function (el) { el.value = ''; });
        var feat = card.querySelector('input[type="checkbox"][name*="[is_featured]"]');
        if (feat) feat.checked = false;
        var vis = card.querySelector('input[type="checkbox"][name*="[visible]"]');
        if (vis) vis.checked = true;
    }
    if (pricingList) {
        pricingList.addEventListener('click', function (e) {
            var rm = e.target.closest('.pilates-pricing-remove');
            var up = e.target.closest('.pilates-pricing-move-up');
            var down = e.target.closest('.pilates-pricing-move-down');
            var card = (rm || up || down) && (rm || up || down).closest('.pilates-pricing-card');
            if (!card) return;
            if (rm) {
                var n = pricingList.querySelectorAll(':scope > .pilates-pricing-card').length;
                if (n <= 1) {
                    alert(pricingList.getAttribute('data-min-one-msg') || '');
                    return;
                }
                card.remove();
                pilatesReindexPricing();
                return;
            }
            if (up) {
                var prev = card.previousElementSibling;
                if (prev && prev.classList.contains('pilates-pricing-card')) {
                    pricingList.insertBefore(card, prev);
                    pilatesReindexPricing();
                }
                return;
            }
            if (down) {
                var next = card.nextElementSibling;
                if (next && next.classList.contains('pilates-pricing-card')) {
                    pricingList.insertBefore(next, card);
                    pilatesReindexPricing();
                }
            }
        });
        var prAdd = document.getElementById('pilates-pricing-add');
        if (prAdd) {
            prAdd.addEventListener('click', function () {
                var proto = pricingList.querySelector('.pilates-pricing-card');
                if (!proto) return;
                var c = proto.cloneNode(true);
                pilatesClearPricingCard(c);
                pricingList.appendChild(c);
                pilatesReindexPricing();
            });
        }
        var prForm = document.getElementById('pilates-pricing-form');
        if (prForm) prForm.addEventListener('submit', function () { pilatesReindexPricing(); });
    }

    var testimonialsListEl = document.getElementById('pilates-testimonials-list');
    function pilatesReindexTestimonials() {
        if (!testimonialsListEl) return;
        var label = testimonialsListEl.getAttribute('data-row-label') || '';
        var cards = testimonialsListEl.querySelectorAll(':scope > .pilates-testimonial-card');
        cards.forEach(function (card, j) {
            card.querySelectorAll('[name^="testimonials["]').forEach(function (el) {
                el.name = el.name.replace(/^testimonials\[\d+\]/, 'testimonials[' + j + ']');
            });
            var t = card.querySelector('.pilates-testimonial-title-text');
            if (t) t.textContent = label + ' ' + (j + 1);
        });
    }
    function pilatesClearTestimonialCard(card) {
        card.querySelectorAll('input[type="text"], textarea').forEach(function (el) { el.value = ''; });
        var rating = card.querySelector('input[type="number"][name*="[rating]"]');
        if (rating) rating.value = '5';
        var vis = card.querySelector('input[type="checkbox"][name*="[visible]"]');
        if (vis) vis.checked = true;
    }
    if (testimonialsListEl) {
        testimonialsListEl.addEventListener('click', function (e) {
            var rm = e.target.closest('.pilates-testimonial-remove');
            var up = e.target.closest('.pilates-testimonial-move-up');
            var down = e.target.closest('.pilates-testimonial-move-down');
            var card = (rm || up || down) && (rm || up || down).closest('.pilates-testimonial-card');
            if (!card) return;
            if (rm) {
                var n = testimonialsListEl.querySelectorAll(':scope > .pilates-testimonial-card').length;
                if (n <= 1) {
                    alert(testimonialsListEl.getAttribute('data-min-one-msg') || '');
                    return;
                }
                card.remove();
                pilatesReindexTestimonials();
                return;
            }
            if (up) {
                var prev = card.previousElementSibling;
                if (prev && prev.classList.contains('pilates-testimonial-card')) {
                    testimonialsListEl.insertBefore(card, prev);
                    pilatesReindexTestimonials();
                }
                return;
            }
            if (down) {
                var next = card.nextElementSibling;
                if (next && next.classList.contains('pilates-testimonial-card')) {
                    testimonialsListEl.insertBefore(next, card);
                    pilatesReindexTestimonials();
                }
            }
        });
        var tmAdd = document.getElementById('pilates-testimonial-add');
        if (tmAdd) {
            tmAdd.addEventListener('click', function () {
                var proto = testimonialsListEl.querySelector('.pilates-testimonial-card');
                if (!proto) return;
                var c = proto.cloneNode(true);
                pilatesClearTestimonialCard(c);
                testimonialsListEl.appendChild(c);
                pilatesReindexTestimonials();
            });
        }
        var tmForm = document.getElementById('pilates-testimonials-form');
        if (tmForm) tmForm.addEventListener('submit', function () { pilatesReindexTestimonials(); });
    }
})();
</script>
@endpush
@endsection