@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

@php
    $sectionRows = $beautyServiceSectionRows ?? [];
    $salonCategories = $salonCategories ?? collect();
    $themePick = [
        0 => __('app.beauty_section_theme_muted'),
        1 => __('app.beauty_section_theme_light'),
        2 => __('app.beauty_section_theme_cream'),
        3 => __('app.beauty_section_theme_primary_soft'),
        4 => __('app.beauty_section_theme_accent_soft'),
        5 => __('app.beauty_section_theme_muted2'),
    ];
@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_beauty_page_title') . ' - ' . __('app.admin'))
@section('page-title', __('app.homepage_beauty_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('beauty.index') }}" target="_blank" rel="noopener" class="text-sm text-primary hover:underline">{{ __('app.beauty_homepage_public_link') }} <i class="fas fa-external-link-alt text-xs"></i></a>
</div>

@if($salonCategories->isEmpty())
    <div class="mb-6 max-w-5xl rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-950">
        <p class="font-medium">{{ __('app.beauty_hub_no_categories_title') }}</p>
        <p class="mt-1 opacity-90">{{ __('app.beauty_hub_no_categories_body') }}</p>
    </div>
@endif

@include('admin.homepage._beauty-pilates-parity-brand')
@include('admin.homepage._beauty-pilates-parity-team')
@include('admin.homepage._beauty-pilates-parity-testimonials')

<details id="beauty-service-sections" 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-rose-50/50 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-rose-100 to-rose-50/80 text-rose-900/80 shadow-sm ring-1 ring-rose-200/55" aria-hidden="true"><i class="fas fa-layer-group text-lg"></i></span>
            <div class="min-w-0 pt-0.5">
                <h2 class="text-base font-semibold text-foreground tracking-tight">{{ __('app.beauty_category_sections_title') }} <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.beauty_category_sections_help') }}</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">
    <form method="POST" action="{{ route('admin.homepage.beauty-category-sections.update') }}">
        @csrf
        @method('PUT')

        <div id="beauty-section-rows" class="space-y-8">
            @foreach($sectionRows as $idx => $row)
                <div class="beauty-section-row rounded-xl border border-border/80 bg-muted/10 p-4 sm:p-5">
                    <div class="flex flex-wrap items-start justify-between gap-3 mb-4">
                        <p class="text-xs font-semibold uppercase tracking-wide text-foreground/55">{{ __('app.beauty_category_section_block_label') }} <span class="beauty-section-ordinal">{{ $idx + 1 }}</span></p>
                        <button type="button" class="beauty-section-remove text-sm text-destructive hover:underline">{{ __('app.beauty_category_section_remove') }}</button>
                    </div>

                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <label class="block text-xs font-medium text-foreground/70 mb-1">{{ __('app.beauty_category_section_kicker_sr') }}</label>
                            <input type="text" name="sections[{{ $idx }}][kicker_sr]" value="{{ old('sections.'.$idx.'.kicker_sr', $row['kicker_sr'] ?? '') }}"
                                   class="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" maxlength="160" />
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-foreground/70 mb-1">{{ __('app.beauty_category_section_kicker_en') }}</label>
                            <input type="text" name="sections[{{ $idx }}][kicker_en]" value="{{ old('sections.'.$idx.'.kicker_en', $row['kicker_en'] ?? '') }}"
                                   class="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" maxlength="160" />
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-foreground/70 mb-1">{{ __('app.beauty_category_section_title_sr') }}</label>
                            <input type="text" name="sections[{{ $idx }}][title_sr]" value="{{ old('sections.'.$idx.'.title_sr', $row['title_sr'] ?? '') }}"
                                   class="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" maxlength="255" />
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-foreground/70 mb-1">{{ __('app.beauty_category_section_title_en') }}</label>
                            <input type="text" name="sections[{{ $idx }}][title_en]" value="{{ old('sections.'.$idx.'.title_en', $row['title_en'] ?? '') }}"
                                   class="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" maxlength="255" />
                        </div>
                        <div class="sm:col-span-2">
                            <label class="block text-xs font-medium text-foreground/70 mb-1">{{ __('app.beauty_category_section_subtitle_sr') }}</label>
                            <textarea name="sections[{{ $idx }}][subtitle_sr]" rows="2" maxlength="2000"
                                      class="w-full rounded-md border border-border bg-background px-3 py-2 text-sm">{{ old('sections.'.$idx.'.subtitle_sr', $row['subtitle_sr'] ?? '') }}</textarea>
                        </div>
                        <div class="sm:col-span-2">
                            <label class="block text-xs font-medium text-foreground/70 mb-1">{{ __('app.beauty_category_section_subtitle_en') }}</label>
                            <textarea name="sections[{{ $idx }}][subtitle_en]" rows="2" maxlength="2000"
                                      class="w-full rounded-md border border-border bg-background px-3 py-2 text-sm">{{ old('sections.'.$idx.'.subtitle_en', $row['subtitle_en'] ?? '') }}</textarea>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-foreground/70 mb-1">{{ __('app.beauty_category_section_category') }}</label>
                            <select name="sections[{{ $idx }}][category_id]" class="w-full rounded-md border border-border bg-background px-3 py-2 text-sm">
                                <option value="">{{ __('app.beauty_category_section_category_placeholder') }}</option>
                                @foreach($salonCategories as $c)
                                    @php $clabel = $c->display_name ?: $c->name; @endphp
                                    <option value="{{ $c->id }}" @selected((string) old('sections.'.$idx.'.category_id', $row['category_id'] ?? '') === (string) $c->id)>{{ $clabel }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-foreground/70 mb-1">{{ __('app.beauty_category_section_theme') }}</label>
                            <select name="sections[{{ $idx }}][theme]" class="w-full rounded-md border border-border bg-background px-3 py-2 text-sm">
                                @foreach($themePick as $tVal => $tLabel)
                                    <option value="{{ $tVal }}" @selected((int) old('sections.'.$idx.'.theme', (int) ($row['theme'] ?? 0)) === (int) $tVal)>{{ $tLabel }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="sm:col-span-2">
                            <label class="block text-xs font-medium text-foreground/70 mb-1">{{ __('app.beauty_category_section_anchor') }}</label>
                            <input type="text" name="sections[{{ $idx }}][anchor]" value="{{ old('sections.'.$idx.'.anchor', $row['anchor'] ?? '') }}"
                                   placeholder="npr. masaže"
                                   class="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" maxlength="80" />
                            <p class="mt-1 text-[11px] text-foreground/55">{{ __('app.beauty_category_section_anchor_hint') }}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="mt-6 flex flex-wrap gap-3">
            <button type="button" id="beauty-section-add" class="btn border border-border bg-background px-5 py-2.5 text-sm hover:bg-muted/50">
                <i class="fas fa-plus mr-2"></i>{{ __('app.beauty_category_section_add') }}
            </button>
        </div>

        <div class="mt-8">
            <button type="submit" class="btn btn-primary px-6 py-2.5"><i class="fas fa-save mr-2"></i>{{ __('app.beauty_category_sections_save') }}</button>
        </div>
    </form>
    </div>
</details>
@endsection

@push('scripts')
@include('admin.homepage._beauty-pilates-parity-scripts')
<script>
(function() {
    function reindexBeautySectionRows() {
        var wrap = document.getElementById('beauty-section-rows');
        if (!wrap) return;
        var rows = wrap.querySelectorAll('.beauty-section-row');
        rows.forEach(function(row, i) {
            row.querySelectorAll('[name^="sections["]').forEach(function(el) {
                el.name = el.name.replace(/sections\[[0-9]+]/, 'sections[' + i + ']');
            });
            var ord = row.querySelector('.beauty-section-ordinal');
            if (ord) ord.textContent = String(i + 1);
        });
    }
    document.getElementById('beauty-section-add')?.addEventListener('click', function() {
        var wrap = document.getElementById('beauty-section-rows');
        if (!wrap) return;
        var rows = wrap.querySelectorAll('.beauty-section-row');
        if (!rows.length) return;
        var nu = rows[rows.length - 1].cloneNode(true);
        nu.querySelectorAll('input[type="text"], textarea').forEach(function(i) { i.value = ''; });
        nu.querySelectorAll('select').forEach(function(s) { s.selectedIndex = 0; });
        wrap.appendChild(nu);
        reindexBeautySectionRows();
    });
    document.getElementById('beauty-section-rows')?.addEventListener('click', function(e) {
        var btn = e.target.closest('.beauty-section-remove');
        if (!btn) return;
        var wrap = document.getElementById('beauty-section-rows');
        if (!wrap) return;
        var rows = wrap.querySelectorAll('.beauty-section-row');
        if (rows.length <= 1) {
            wrap.querySelectorAll('input[type="text"], textarea').forEach(function(i) { i.value = ''; });
            wrap.querySelectorAll('select').forEach(function(s) { s.selectedIndex = 0; });
            return;
        }
        btn.closest('.beauty-section-row').remove();
        reindexBeautySectionRows();
    });
    reindexBeautySectionRows();
})();
</script>
@endpush